Welcome to the very first part of my FreeCodeCamp Projects series! We’re going to walk through each project required to complete FreeCodeCamp’s Full Stack Web Development course.

There are a few prerequisites you should meet before beginning this series:

Have a firm grasp on the basics of HTML and CSS. If you’ve been following FreeCodeCamp’s course, you should have no problem. If you still need a bit more learning practice, take Codecademy’s course.

I recommend you have an understanding of Bootstrap. This is a useful resource if FreeCodeCamp’s course hasn’t solidified it for you.

Our first project we’re going to work on is the FreeCodeCamp Tribute Page. It is the first project in the Basic Front End Development Projects.

The full CodePen of my project can be found here.

My tribute is for the late and great David Bowie. Feel free to play around with the code and see what happens before we start!

Note: I plan to revisit the project once JavaScript is a regular part of our coding and make a Tribute Page V.2. There will be a corresponding blog post for that too, and I’ll link it at the bottom of this one!

So we must make our site do two things:

Display text and an image The user can click a link to learn more about the subject

Let’s get started with some HTML!

The very first thing I’m going to do, personally, is to link the Google Fonts I want to use in the page.

Tip: You can put your font link in the “head” section of the “HTML” section in CodePen’s settings. This frees up coding space in your project.

One of the first things we want to do is create a few divs to hold all of our content in. We’ll want one for the container as a whole, our header, our image, our info, our footer, and so on, including each individual element.

We’re going to exlude the closing elements at this point, but we’ll put it in at the end. Don’t worry!

<div class="container text-center">

In the ‘container‘ div, we’re also going to use the Bootstrap class ‘text-center‘ to make sure all the text on our site is centered. Then we’re going to make our ‘header‘ div.

<div class="header"> <div class="header-title">David Bowie</div> <div class="header-subtitle">The Diamond Dog, Major Tom, and the Spider From Mars</div> </div>

Then we want to create a container for our image. The URL I use below is specific to the David Bowie “Heroes” image. We’ll give it a ‘thumbnail‘ Bootstrap class to get that white border around the picture, which includes the caption. You’ve likely seen this style around the web.

<div class="image"> <div class="thumbnail center-block"> <img src="http://cdn.theculturetrip.com/wp-content/uploads/2016/03/maxresdefault3.jpg"> <div class="caption text-center">The cover art for Bowie's hit album, <em>Heroes.</em></div> </div> </div>

Next, we want to create the title for Bowie’s life events, then the events themselves. We create the life events as elements within an unordered list. This code has a lot of example elements; you by no means need to have the same amount or even the same format.

Tip: the <strong> element is a Bootstrap command that makes the element bold.

<div class="events"> <div class="events-title">Major Events in Bowie's Life</div> <ul class="events-list"> <li><strong>1947: </strong>David Hayward-Jones is born on January 8 in Brixton, London.</li> <li><strong>1959: </strong>David recieves his first instrument for Christmas, a plastic saxophone.</li> <li><strong>1962: </strong>During a fight with a friend, David is punched in the eye, causing his iconic pupil to remain undialated.</li> <li><strong>1966: </strong>David chooses the stage name of David Bowie.</li> <li><strong>1967: </strong>Bowie debuts with a self-titled album.</li> <li><strong>1969: </strong>Space Oddity is released. The titular track famously echoed the words "Ground control to Major Tom" in the annals of history.</li> <li><strong>1972: </strong>Bowie releases Ziggy Stardust and the Spiders From Mars, perhaps his most recognizable album.</li> <li><strong>1974: </strong>Diamond Dogs is released 10 years before its setting.</li> <li><strong>1977: </strong>"Heroes" is released.</li> <li><strong>1981: </strong>Bowie and Queen collaborate to create "Under Pressure".</li> <li><strong>1986: </strong>Bowie stars in Jim Henson's "Labyrinth".</li> <li><strong>1992: </strong>Bowie marries model Imam, whom he remains with until his death.</li> <li><strong>1996: </strong>Bowie is inducted into the Rock and Roll Hall of Fame.</li> <li><strong>2004: </strong>In Germany, Bowie suffers a heart attack on stage.</li> <li><strong>2016: </strong>Bowie releases Blackstar on January 8, his birthday, which is his 25th and final studio album.</li> <li><strong>2016: </strong>On January 10, two days after his birthday and final album release, Bowie dies from a cancer-related complication.</li> </ul> </div>

Then we make our quote. This is just a simple text field where we put something really solid our subject said.

<div class="quote">"I don't know where I'm going from here, but I promise it won't be boring."</div>

Almost done! Now we just need to make a clickable link to take people to more info about the great David Bowie. This is as simple as creating an element with an anchor element on the phrase you want to make clickable with an href value equal to the URL.

<div class="more-info">Click <a href="https://en.wikipedia.org/wiki/David_Bowie">here</a> to get more info on the God of Glam</div>

Finally, we’ll add a little footer in order to give ourselves credit. We also include the last closing elements we need from our container and whatnot.

<div class="footer">Made by <a href="http://codepen.io/hamgoblin45/">Hamgoblin45</a></div> </div> </div>

That’s it for our HTML! Not as hard as you thought it’d be, was it? Here’s what the entire HTML code looks like together:

<div class="container text-center"> <div class="header"> <div class="header-title">David Bowie</div> <div class="header-subtitle">The Diamond Dog, Major Tom, and the Spider From Mars</div> </div> <div class="image"> <div class="thumbnail center-block"> <img src="http://cdn.theculturetrip.com/wp-content/uploads/2016/03/maxresdefault3.jpg"> <div class="caption text-center">The cover art for Bowie's hit album, <em>Heroes.</em></div> </div> </div> <div class="events"> <div class="events-title">Major Events in Bowie's Life</div> <ul class="events-list"> <li><strong>1947: </strong>David Hayward-Jones is born on January 8 in Brixton, London.</li> <li><strong>1959: </strong>David recieves his first instrument for Christmas, a plastic saxophone.</li> <li><strong>1962: </strong>During a fight with a friend, David is punched in the eye, causing his iconic pupil to remain undialated.</li> <li><strong>1966: </strong>David chooses the stage name of David Bowie.</li> <li><strong>1967: </strong>Bowie debuts with a self-titled album.</li> <li><strong>1969: </strong>Space Oddity is released. The titular track famously echoed the words "Ground control to Major Tom" in the annals of history.</li> <li><strong>1972: </strong>Bowie releases Ziggy Stardust and the Spiders From Mars, perhaps his most recognizable album.</li> <li><strong>1974: </strong>Diamond Dogs is released 10 years before its setting.</li> <li><strong>1977: </strong>"Heroes" is released.</li> <li><strong>1981: </strong>Bowie and Queen collaborate to create "Under Pressure".</li> <li><strong>1986: </strong>Bowie stars in Jim Henson's "Labyrinth".</li> <li><strong>1992: </strong>Bowie marries model Imam, whom he remains with until his death.</li> <li><strong>1996: </strong>Bowie is inducted into the Rock and Roll Hall of Fame.</li> <li><strong>2004: </strong>In Germany, Bowie suffers a heart attack on stage.</li> <li><strong>2016: </strong>Bowie releases Blackstar on January 8, his birthday, which is his 25th and final studio album.</li> <li><strong>2016: </strong>On January 10, two days after his birthday and final album release, Bowie dies from a cancer-related complication.</li> </ul> </div> <div class="quote">"I don't know where I'm going from here, but I promise it won't be boring."</div> <div class="more-info">Click <a href="https://en.wikipedia.org/wiki/David_Bowie">here</a> to get more info on the God of Glam</div> <div class="footer">Made by <a href="http://codepen.io/hamgoblin45/">Hamgoblin45</a></div> </div> </div>

Now we just need to style our work. Honestly, we’ve met our requirements with the HTML alone, but no one wants to look at a site that looks like it was made on Yahoo! GeoCities in the late 90’s. Let’s give our work some custom fonts, size those fonts, and even add a few simple visual effects.

Let’s add some CSS!

You can see some of the simple CSS codes I used. For example, I colored my ‘container‘ and my using the code background-color: Color;. The display: inline-block; attribute makes sure our elements stay aligned. For example, the bullets on our unordered list below.

Body { background-color: Purple; } ul { display: inline-block; text-align: left; property: text-shadow; font-family: 'Dosis', sans-serif; } .container { background-color: Lavender; border-radius: 45px; box-shadow: 18px 5px 5px Indigo; margin: 24px auto; } .header-title { font-family: 'Vollkorn', serif; font-size: 5em; color: gold; } .header-subtitle { font-family: 'Vollkorn', serif; font-size: 2.2em; color: YellowGreen; } .image { padding: 10px; max-width: 760px; margin: auto; } .thumbnail { border-radius: 10px; box-shadow: 8px 5px 5px gray; font-family: 'Nova Script', cursive; } .events-title { font-family: 'Vollkorn', serif; font-size: 2.5em; margin: 42px; } .quote { font-style: italic; font-family: 'Nova Script', cursive; margin: 24px; font-size: 2em; } .more-info { font-family: 'Dosis', sans-serif; font-size: 1.2em; margin: 22px; } .footer { font-family: 'Nova Script', cursive; }

That’s the entire code! You can see that I added box-shadow to box elements to give it a certain depth. margin-radius is also really useful for rounding those pesky corners so everything doesn’t look overly-sharp. We use font-family to put our custom fonts on certain elements. Thankfully, Google Fonts generates the CSS code you need to call each font if you need.

Most everything about the CSS is self-explanitory, especially if you took any kind of course on the language to ready yourself.

Thanks for stopping by to learn a bit of coding! Hopefully, you can now code any basic text-and-image page using HTML and CSS. Even more importantly, hopefully you understand why each piece of code works now.