How I designed and coded this website

Jekyll


Over the past few months, I’ve been learning how to code using Free Code Camp. For one of their front end development projects, you have to build a personal portfolio webpage using CodePen.io.

Rather than have my content on an external platform like CodePen, I decided to create my own website so that I could control everything from the design and layout, to the content and the domain name. I also like the challenge of building something from scratch, that I can truly call my own. So I decided to create my website on Jekyll and use GitHub to host the site. I went with Jekyll because it’s fast, secure and easy to maintain. Jekyll’s integration with GitHub Pages also made the decision a no-brainer.

Design and Layout

The design stage was the easiest and quickest part of the process and took about 2 hours to do in Photoshop. For the look and feel, I went with something clean and minimal and made sure that the site was easy to navigate. In line with my logo, the main colour scheme throughout the site is yellow.

Coding

Using Jekyll for the first time was a bit of a learning curve and it took me a while to adjust to using markdown and liquid syntax along with learning how to navigate the Terminal and use Git to deploy and make changes on GitHub. But after getting over that hump, I found Jekyll to be a highly intuitive and functional tool and I’m glad I used it.

Ultimately, the whole coding process took about a week. There were a lot of late nights and hours of frustration trying to make the simplest of things work and trying to kill bugs and fix all sorts of glitches but in the end, it was all worth it. Although there are a few more things I want to add like a portfolio section, I’m happy with the final result.

Useful Resources

In addition to hours spent traversing through Google and YouTube and combing Stack Overflow for solutions, whenever I got stuck in the trenches, the community in the Free Code Camp Forum were very helpful. I also used this DevTips tutorial and these Lynda and Treehouse courses as additional guides.

Feel free to give me a shout on Twitter or shoot me an email if you have any feedback or comments.

← Go back to all articles