In this series I attempt to complete Free Code Camp as quickly as possible, without cutting too many corners. For an introduction to this series, see Free Code Camp #0: Speedrunning Free Code Camp. This is the first entry where I actually code anything.

Brushing up on HTML and CSS

I'm still not up to date on semantic elements like <aside>, <article>, and newer CSS like Flexbox and vh units. When I first learned HTML/CSS, a table with valign=middle was the best option for vertically centering a div, and smartphones weren't a thing. I'm still stuck in Bootstrap v1 mode, but at least I know my jQuery. To make sure I didn't miss any other essentials, I skimmed through the following chapters before attempting any projects:

  • HTML5 and CSS (est. 5 hours)
  • Responsive Design with Bootstrap (est. 5 hours)
  • JQuery (est. 3 hrs)

New things I have learned:

  • border-radius accepts values in percent. Using 50% makes an image round!
  • <label>
  • Clockwise margin/padding order. I knew this beforehand, but didn't bother to memorize the order.
  • Bootstrap: container-fluid, btn-block

Build a Tribute Page

Challenge description (est. 25 hours) (required)

See the Pen FreeCodeCamp: Build a Tribute Page by Andreas Røssland (@roessland) on CodePen.

For this challenge I built a small tribute to one of my favourite bands, Yura Yura Teikoku. Since their name literally means "wobbling empire", I decided to make the page move with music. Start the Youtube video to activate the animations. (And try pausing it too!)

I used the YouTube Player API to receive events from the video. The song is a steady 80 bmp, so the header movement is almost correct throughout the song.

Build a Personal Portfolio Webpage

Challenge description (est. 25 hours) (required)

See the Pen ezNMgL by Andreas Røssland (@roessland) on CodePen.

For the portfolio page I wanted to mimic the look of this blog. I used the same fonts as this blog, Bootstrap, and some free (as in GPL) social buttons I found.

Note that it has a left navigation bar too, but since it uses the Bootstrap class hidden-xs, you need to open the page on CodePen to see it.

Next entry: Basic Algorithm Scripting