Building a Website Incremental Learning of WebDev

1.0

Templated website page 1

Above was the first iteration I had for a website (disclaimer, it's a template). At the time, I had a very surface level understanding of HTML & CSS - slightly more than the average MySpace user in 2008. I wanted to show companies that I could do webdev but in the most painless way possible.

So I stumbled across HTML5Up and found this sweet template. It didn't matter that there was a lot of placeholder text and pages that I probably couldn't fill up with my own writing and work. That slick dropdown menu was everything and it would be infinitely more difficult to do this from scratch, right?

Templated website page 2

Templated website page 3

The website stayed like this for a couple of months. The results of combining an initially well-designed template with my novice skills were awkwardly spaced elements, unresponsive & uncentered images, and lots of white space (not the minimal, aesthetic kind either).

I realized that templates require a lot of compromise on the user's end, where they need to conform their ideas to a pre-made implementation. In my case, that didn't work.

2.0

So I scrapped it all and started from scratch.
Restarting my website from scratch

Navigating to this barebones page every time I worked on the site was painful and I would occasionally switch back to the template in a futile attempt to make it work. This cycle would repeat for awhile until I actually began seeing progress in the new version.

2.5

alt

alt

For me, there were two things that significantly helped me develop my site to a point where I was more satisfied with it than the template I previously tried.

  1. Not using a framework like Bootstrap.

    I avoided using Bootstrap because I didn't like the way the components looked and in doing so, I learned a ton about things you would take for granted using a framework - from simple button styling and positioning to responsive design.

  2. Looking at well-designed websites and incorporating elements I liked into my own site.

    I realized that building a website wasn't a test. Yes it would test coding and design abilities but using references was fair game. So I started by browsing other peoples' personal websites. I would bookmark elements I liked and derive some rough doodles (see the photo at the top) which I would later attempt to bring to life via code.

3.0

alt

alt

alt

alt

alt

alt

4.0

I stuck with those two points and in time I began to see improvements (subjectively). Especially with the second point, my taste in web-design scaled as I stumbled across new websites. The doodles I sketched became increasingly sophisticated and in turn, my web dev abilities were challenged as I set my ambitions higher.

Now as of version 4.0, it is a full-stack app running on a DO droplet that is incredibly easy to develop on and scale by utilizing Sass / Gulp / Bower / EJS templates and pagination. This blog runs on a separate port as a subdomain and I developed the Airbnb-inspired theme it uses using Handlebars / SCSS.

alt

I'm nowhere near where I want to be as a web developer but I can say with certainty that for me, building and reiterating (and reiterating (and reiterating...)) a personal website has been the most rewarding experience in terms of learning web development - from picking up the basics of HTML / CSS to use with static pages, to handling server configs and working with templates / databases on a full-stack website.

comments powered by Disqus