The working process of building my own website

This is my first week in the Full-time Wed Dev Bootcamp at HackerYou and the first project is to build my own personal website. I was so nervous at the beginning as I don’t know where to start. I took a part time Web-Dev course at HackerYou before and have some experiences on building simple web pages. However, I found it hard to start to build my own site. The process turned out to be very fun, excited, sometime struggled but a really valuable learning experience. Let me get started and share about this.


Brainstorming

First, I know that I don’t want to focus too much on the design as the main purpose of the project is to practise on the develop piece. And I also know that I’m not going to just use some beautiful colors or fancy layouts but to choose something that can best reflect on what I’m doing as a Front-end developer.

One of my understanding as a web developer is to work from scratch, started with the simple structure(HTML content) and then fill with all the details(Styles, Functions, etc). The work requires full of inspiration, creative thinks in order to transform from plain to Wonderful ^_^. So based on this idea, I started to have an image in my head about pencil sketching. The whole process of a pencil sketching (You have to started with a piece of blank paper and then, started by putting some reference sketch lines and filling the details) is perfectly in sync with my approach as a web-developer. Therefore, I made a short video of a pencil drawing process as my main header of the page . And to be consistent with this theme, I have decided to use mostly black and white color with a touch of red to keep the site as simple as possible.


Building

As a web dev student, I believe the most important thing is to never go easy with yourself when work on a project, take the challenge is the key when comes with coding. I decided to try something I have never used before to build my personal web page. B0urbon library and Neat Grid system is my choice this time!

I have to say it has been a really great experience on learning how to use a grid system with my project this time. Feels like I will be using a grid system from now on for every future project.

When working with a grid system, my first lesson learned is to have a very structural HTML content. As this allows me to proper set up the “outer-container” and the “span-columns” within the wrapper divs much easier. I remember there were lots of time I went back to my HTML to restructure the content in order to get my grid works. Surprisingly I found this is a excellent exercise to allow you think differently and more deeply on how to mark up your semantical content. Besides, the grid system not just makes the positioning much easier, it also creates properly rhythm and harmony for the web typography.

A link here in case anyone like to take a try on Neat: http://neat.bourbon.io/


Last but not least, a personal experience I want to share is to never give up on trying new stuffs and push yourself a little harder when learning how to code. As this is the how we can get improved quickly and practise on our problem solving skills.

Happy Coding!