Build a Tribute Page

Update: March 15, 2019

I first did this exercise in 2016. FreeCodeCamp kept the Tribute Page challenge, but changed the way it is tested. My old article is posted, below. The biggest difference in 2019 is that Bootstrap isn’t being used. Good. I didn’t like Bootstrap. I LOVE using CSS grid, though, and highly recommend learning grid and practicing it in these exercises. Use my wasted time as a lesson: grid is the way to go. Some advise learning both flexbox and grid (or frameworks, etc.) but my preference is to learn grid and learn it well.

FreeCodeCamp is awesome. I’m grateful for it, so this is not a criticism of FCC. They seem to have done a modification of this challenge to get it to work with their JavaScript tester. The tester script is great! But the exercise isn’t really testing the things we learned in the curriculum. So, if you want to reinforce what you learned, make a tribute page that incorporates the lessons, and then go back and plunk in the ids that pass the test.

For example, the challenge asks you to make a div with an id of “img-caption”, but if you want to learn the figcaption lesson from the HTML section of the curriculum, put THAT in your code, and then go back and make it pass the test by also adding the divs and ids required.

The challenges are done in CodePen. I like to do them using a text editor, though, first, so that I practice using a text editor instead of CodePen. The Pen is good for sharing and collaborating (and submitting tests) but for everyday, practical purposes you will do well to get accustomed to how a good text editor works. My favorite is Atom. And I install an Emmett plugin on Atom for shortcuts. I ❤ this plugin soooo much! Learning these shortcuts is time well spent!

Another difference is that using a lot of divs used to be frowned upon; it’s not anymore. Use as many divs as you like, but keep in mind that it’s best to use semantic tags when possible.

If you do incorporate grid into your challenge, which I recommend, remember that grid items are the child elements that are DIRECT children of the grid container (i.e. the selector that has “display: grid;” on it). Nested elements won’t be “gridified” unless their parent is set to “display: grid”.

The Old Article:

User Story

Don’t get hung up on this term. The instructions link you to a page that obfuscates its meaning. The reason “user story” is in this exercise is to increase your coding vocabulary so when you’re doing the dreaded thing called networking, you’ll know what someone is talking about if they say “user story”. It also gets you thinking about your user when you’re creating an app, even if that app is a simple web page.

Ask yourself, “What do I want my user to experience when they go to this page?” and “What do I want the user to be able to do?” The answer is your user story.

Make a Decision

You have a choice. Either spend a lot of time making a spectacular web page, or just do enough to complete the requirements. I would take a moment to stop and think about which option you choose.

If you feel as though you know this stuff well enough for your goals, and you don’t want to spend too much time before moving on to more learning, all you need to do is put some text on the page, an image, and a link to another website.

If you want to reinforce the things that were taught in earlier lessons, then you’ll want to add a link to Google fonts, use Bootstrap’s grid classes, add Animate.css, add jQuery, and give yourself a project that utilizes the lessons learned to this point.

Important for “Real” Applications

As mentioned in the next section, keep in mind that when you are making your own web pages, decreasing the load time is important. A lot of lessons teach you to include links in the head of your file to APIs and other apps for things like fonts, images, css preprocessors, and more. Take the time to learn about what slows load time. For example, you can link your site to Bootstrap using a CDN (content delivery network) and a lot of tutorials instruct you to do this. But you can also download the Bootstrap files and put the ones you need in your site. The latter makes your site slightly faster. In this article, Roxana Elliot reports that Amazon researchers found that every 100ms of delay could equate to a 1% loss in revenue. That means that even 1/10 of a second affects bounce rate.


Bootstrap is great, but there is a lot of code in the package, and it’s likely that you don’t need the whole thing. If you just want to use parts of Bootstrap, for example, their pre-coded grid css, you could go to this web page to find out which files you need. Make a folder for those files, put them in the folder, and then add a link in your page’s head section. This article won’t get into depth on how to do that, but there is help on the web. The point is that it’s important to consider the speed of your website, and to know that there are other options for using fonts, frameworks, etc. besides linking to other sites.

Images

Because we’re using Codepen, you’ll pull an image that’s already on the web, so your image tag will look like this:
example image tag

Learning more about adding images to your website is valuable. Researchers found that 40% of users will only spend three seconds waiting for your page to load. If it takes longer, they will bounce. Here’s a good article on how to avoid that.

Normally when you make a website, you have a master folder for the site. If you know github, think of this as your “repository”. Within this folder you have your home page, which is usually called index.html. If you have images, you usually make a folder called “img” and put your image files in this folder. Then, in your html file, your image tag would look like this:
example image tag

You want to strike a balance between image file size and image quality. There are many programs that help you do this. I like to use open source GIMP and Inkscape when I’m creating image files. Both have image reducing functions. I use tinypng.com to reduce the file sizes even more.

And don’t forget to include an alt attribute within your image tag. Go back and read the FCC lesson on adding images if you forget what alt does. Google’s algorithms look for alt tags when ranking sites.

Divs

When I started the tribute page tutorial, I first saw FCC’s link to their pen, and I went to CodePen and immediately looked at the code. It wasn’t until later that I read the instructions forbidding looking at the code. Whoops. But, I’m glad I did, because there are many ways that you could complete this project, and it’s helpful to see how tutors choose to do it.

I like what FCC did, but it’s worth noting that you don’t always have to use so many div elements. The reason for the large number of divs in FCC’s tribute page is because they used Bootstrap. The divs allowed the coders to use Bootstrap’s css classes to style images and chunks of text. For example, the thumbnail class is in Bootstrap’s stylesheet puts a border around whatever is classed in this div, in this case, an image. The Bootstrap caption class styles the text describing the photo to look a certain way. This article isn’t about teaching divs and spans and Bootstrap classes, so I won’t go into detail. But just know that you don’t always need all those divs. And you don’t need Bootstrap. You might want something styled your own way, in which case you just need to learn some basic css and make your own stylesheet.

One of the reasons it can be good to use Bootstrap is because it’s a quick way to make your website responsive, meaning the layout of the page will adjust to different screen sizes. You can code responsiveness, though, yourself using media queries and breakpoints, but that’s another lesson.