Learning to Code: Day 31 — Building a Tribute Page

Evening folks. So for the last month or so, I’ve been coding and blogging as I go, now it’s time to put everything I’ve learnt thus far to the test.

FreeCodeCamp has set me a challenge to build a “tribute page” website similar to this example. Here are the conditions I need to cover in order to pass:

#1: My tribute page should have an element with a corresponding id="main", which contains all other elements.

#2: I should see an element with a corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").

#3: I should see a div element with a corresponding id="img-div".

#4: Within the img-div element, I should see an img element with a corresponding id="image".

#5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div.

#6: I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.

#7: I should see an a element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank").

#8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

#9: The img element should be centered within its parent element.

Let’s work through each of these over the next few days and see how we go. They’ve suggested I use a CodePen to test snippets of code and pass each test as I build, so I’ll need to download Chrome to run this program.

I’m not sure if CodePen will save my progress so I’m gonna make a file on my Mac and store code as I write, uploading any changes to my Github, which will also act as a subtle portfolio. Ya boiiii.

I’m not required to input any of the website stack at the beginning of the HTML as normal, CodePen will add that for me. The normal input would be:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<meta name=”description” content=”Website”>

You know what.. I’m gonna do that anyway for good practise. Let’s get started!

I’m gonna make a tribute page for Justin Vernon of Bon Iver (long time fan). It gives me a means to an end. I’ll follow the example page closely and use the “inspect element” to build a structure to follow. This to me is a bit like cheating, but it provides a solid way to learn how to code right.

By writing about someone well known, I can also find image links online instead of trying to use local image sources on my computer if I was to make a family tribute page, my original thought.

I found a pretty nifty Hex Code colour wheel where you can choose a colour from a graph and it gives you the exact Hex for that colour here.

I’m gonna start by drafting out the style tags with empty selectors, to give me a framework of where to go from as I go, noting important selectors that I need as I go.

<style>

body {
}

h1 {
}

media (max-width: 460px) {
h1 {
}
}

#main {
}

#title {
}

a {
}

img {
}

#img-div {
}

#img-caption {
}

ul {
}

li {
}

</style>

I had a little trouble working on the id=”tribute-link” but it turned out to be the subtle little “=” sign that was tripping me up.

…After 3 hours..

Check out my finished page! It’s a CodePen page so I’d recommend using Chrome to view it:

Justin Vernon Tribute Page

See you guys next time!

Step by step, learning to code with FreeCodeCamp