FCC Speedrun: Tribute Page

ziggysauce
Chingu FCC Speedrun
2 min readJun 27, 2017

This is my very first post so be patient with me as I learn to properly style these posts and make them more interesting. This post also marks the beginning of my journey on the FCC Speedrun Challenge, or Speedcrawl for me, in hopes of improving my coding skills.

Shoutout to Chance Taken and P1xt for creating all of this in the first place!

Project 0: Tribute Page

The first front-end project on my Speedcrawl is to create an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/

Requirements:

  • Tribute page includes text and an image
  • Include a clickable link that takes the user to an external webpage
Courtesy of memegenerator.net

This is technically my second tribute page, so I felt like I had a grasp on what to do but I definitely wanted to push myself to make it better and more visually appealing than my last. Though at first I thought it would be easy, I definitely ran into plenty of speed bumps along the way and had to research a lot to figure out how to produce on a screen what I was seeing in my head. I only used HTML and CSS for my webpage because my JavaScript skills are pretty sub-par at the moment, but hoping to start incorporating it into my work in the near future.

What the #@&% are these vertical scroll bars?!

Things I learned along the way:

  • How to blur images (didn’t end up using this)
  • How to use filters to add a caption when hovering over an image
  • Using vw instead of px on certain elements to be more responsive
  • FLEXBOX (lifesaver! I really like it so far but still much to learn)
  • Creating a navigation bar (still need more practice with this)
  • Bootstrap Grids (didn’t implement it… but definitely need more practice with it and making my sites more web responsive)

In the end I had fun creating my tribute page, learning a lot, and tapping into my creative side to produce something I’m satisfied with putting on the web. I’m both excited and nervous for the future projects

Courtesy of memegenerator.net

You can find my live demo here
You can find my repo here

Until next time — Happy Coding!

--

--

ziggysauce
Chingu FCC Speedrun

just trying to create all the things and drink all the coffee