Introduction
Most of what I've done until now was back-end work. Servers, networks, applications. What I didn't have were front-end experience and projects to talk about. This website is my first real attempt at front-end work, so go easy on me!
The website design, content, and graphics/pictures were all made by me with help from Bootstrap and favicon.io.
I intend to keep this around and add content and improve the site over time. Any tips or suggestions are welcome!
Tools
Python
When I started the project, I was familiar with Python and a little bit of Flask. It may not be the best tool for the job, but it managed to get me started quickly enough.
Each of the modules below helped make the design and build process smooth.
Markdown:
- is fast and easy to write
- uses simple syntax which is server-side rendered into HTML
Frozen_Flask:
- generates a static site from a dynamic source
- places it in a git repository so all I need to do is commit the changes and push them to make the website live
Livereload:
- automatically refreshes the webpage when a website file is changed
Bootstrap
CSS and HTML aren't particularly hard, but there's a ton of trial and error when first starting out. Bootstrap really helped out here in terms of making it easier to get things right, reducing the amount of manual CSS work, and laying things out in a way that makes it relatively easy to understand what exactly is going on under the hood.
SCSS
Bootstrap has a pre-built css file available. But you won't use everything in it so it's larger than necessary. And you'll likely add your own CSS and want to change up the theme.
This is where the Bootstrap source files come in.
SCSS files are compiled into CSS. They look very similar, but SCSS comes with some extra features that improve readability and reduce repetition. It has variables so you only need to change a value in one place (such as a color) and it will compile with that value everywhere where the variable was placed in the SCSS. It also allows for nested rules, further reducing the need for repetition.
Bootstrap is compiled using these SCSS files and you can choose which ones you want to include in the end product if you compile it yourself. I created my custom .scss file and imported the necessary files from Bootstrap, as well as added my custom CSS.
The Python script will convert SCSS to CSS and minimize it as part of the site generation process.
Inkscape
I don't consider myself an artist in any way, shape, or form, but I'm pretty happy with how the above image (and some other images on this site) turned out.
Inkscape was used to create those images. I originally exported them to .png files while saving the vector graphics locally. After playing around a bit with the vector format and optimizing them, the file size was greatly reduced below the size of an equivalent .png file. On low-end devices, it's not quite as smooth when rendering the .svg images but I think the sharpness of the image on all screen sizes makes up for the difference.
Github!
The website is currently published to GitHub Pages as a static site.
Publishing it there takes care of the SSL Certificate automatically. It also makes publishing as easy as a git-push. And best of all...
It's free!
The only downside is you can only host a static site there. Adding in a backend for a CMS or other functions will mean I'll have to find another host for the site.
Thoughts
The more I researched and progressed on the project, the more I found that Python isn't a typical tool for this sort of project. If I had taken a different route, I may have had an easier time with different aspects of this website.
Creating this website helped me learn quite a bit about front-end design. I knew nothing before I started this project. Choices were made to get the project going fast and have something that looked good at the end. Other choices intentionally led to more work than necessary for the simple fact that it would lead to me digging deeper into CSS and HTML. In the end, I'm pretty happy with how it turned out. And I hope it looks good to you too.