I haven't written a post in a while now, because I've been quite busy with work and also because I was working on a new design that is now live!

For my job as software engineer I only write back-end code in Java, so I try to keep my knowledge of front-end design up to date by doing small projects now and then. I really enjoy writing front-end code, because it's very visual. Actually, I find front-end engineering quite addictive, because you get immediate feedback when you've changed something and I often get really caught up in it, spending a lot of time trying to find the perfect font, or adjust the border of an image to perfectly align with another image etc..
This is the third design I made for my website, and this time instead of trying to do everything from scratch I decided to use front-end frameworks to make my life a bit easier. I started off looking at AngularJS and quickly found angular material cards, that looked exactly like what I wanted for my new layout. I managed to make my posts appear in a card format, but I found it was quite difficult to align them in a nice way, with my most recent post having twice the height and width of the other featured posts. I googled a bit to find a way of aligning things in a good and simple way and came across Bootstrap's grid system, which divides a page into columns and makes scaling your layout for phones and tablet a incredibly easy.

To be quite honest, the way I scraped pieces from different libraries together to get what I want is probably not the best way to design a web page. In fact, a professional designer will most definitely not do it this way. Because I already had styling for my website, adding the frameworks interfered with my custom styling, especially where I used very standard tags such as 'body' and 'page-header'. I already wrote a post with Tips and tricks for making a website from scratch, but I wanted to give you some more tips about what to do and what not to do when you're making a new front-end design for your website.

1. Explore existing frameworks and choose one that best fits your requirements. Do this, preferably, before you write any styling in css at all. The ones I am using now are: Bootstrap and AngularJS


2. Build your website in a systematic way and use appropriate tag names to identify different components. If you find it hard to this, try finding a (professional) website that has a layout similar to what you want, and have a look at their source code to see what types of tag names they used.


3. Try not to change too many things at once, because it will be very hard to keep track of what piece of code did what, especially if you're using frameworks. Try to get to your desired design step by step, and you will have to spend less time cleaning up messy and confusing code.

I'm very curious to know what you think about the new look of my website, so please leave a comment! :)

Follow me on: Bloglovin - Instagram - Twitter