fabiodesousa.com

How can I build a portfolio site while learning html/css?

Personal Project | February 2016 – Present
HTML | CSS | Information Architecture | User Experience Design

Why make it from scratch?

When I started working on this site, I did not consider myself a web developer. So, the obvious choice for a portfolio-oriented site seemed to be a nice Wordpress theme that would let me focus on content and visual details without having to worry about much else.

Instead, I chose to take a leap and make it from scratch, because I wanted to have a better understanding of what it takes to make a website from the ground up, and because I knew there were enough free resources online to get me through it. So, I spent a weekend on Codecademy to refresh my knowledge of the basics and get a better understanding of how to use Bootstrap and other CSS frameworks.

Before diving into the site, I decided to roughly sketch what the first version of the site might look like. I wanted a simple layout featuring a few of my most recent projects, but I also wanted to push myself in terms of going a little bit beyond the basics of HTML/CSS that I had just learned.

As soon as I began trying to bring that sketch to life, I realized that a guided example in an online course is worlds apart from actually building it. Thankfully, any question I had was already on StackExchange, so I was able to Google my way through every roadblock. After getting the bones of the site close enough to my sketch, I stepped back and reviewed my progress.

A very (very very) rough first version of my site.
A very (very) rough first version of my site.

While I was happy with my progress, I knew my initial sketch would need to be modified. That was alright, however, because rapid iteration is something I preach and practice at Barnard-Columbia Design for America, so applying that to web development was not particularly daunting. I returned to pen and paper to clean up the layout of the site and let each work example breathe. I also wanted to make sure that whatever design I settled on would be more responsive and accessible than the first version, so I sketched out the mobile layout first and removed the hover states.

Looking back on my decision to make my website instead of using something like Wordpress or Squarespace, it definitely feels like the right one. Not only can I make a decent landing page, I also have a much better understanding of the work it takes to bring a site to life from a designer's sketch, and in the future I should be able to quickly throw together a prototype to test a concept.

Of course, making this on my own means that there are minor bugs and issues that need fixing. However, I know that going back and improving this website will only make me better and reinforce the lessons I've learned, which for me is the best way to retain a skill. I highly recommend the experience.

Back to my other projects.