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
divelement with a correspondingid="img-div".#4: Within the
img-divelement, I should see animgelement with a correspondingid="image".#5: Within the
img-divelement, I should see an element with a correspondingid="img-caption"that contains textual content describing the image shown inimg-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
aelement with a correspondingid="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 oftargetand set it to_blankin order for your link to open in a new tab (i.e.target="_blank").#8: The
imgelement should responsively resize, relative to the width of its parent element, without exceeding its original size.#9: The
imgelement 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:
See you guys next time!
