How to Build a Resume Site

We are almost done with the Codecademy HTML & CSS tutorials. You won't find these tutorials anymore on Codecademy's site, but I'm going to wrap up the older set of tutorials this week. Today's post is the final project tutorial for the older HTML & CSS sections on Codecademy.

I will walk you through the steps to make a resume site. Today's tutorial is covering some of the tricky CSS skills you learned about when I did my review of content from Skillcrush. This means we will be using floating, z-index, and even the clear property to get a resume site on the browser.

These skills are tough and were ones I got frustrated with when I started learning how to code. Don't forget to use the lessons in the Skillcrush 101 series to help you with this tutorial.

1. Add 4 div tags.

Let’s start by adding 4 div tags in our HTML file. One div tag should have an id named header. The second tag should have a class named right. Another should have a class of left. Finally, you need an ID for the footer.

2. Add styles for div tags.

Now that we have our div tags set, go to the style sheet and add some style to your div tags. Feel free to add any styles you want. I am going to follow Codecademy’s suggestion and just set mine with the border-radius to 5px.

3. Add height, width, and color to div tags.

Add the height, width, and color to your div tags. There aren’t any specific directions to follow for this step so feel free to play around a little bit to find the right look for your site.

4. Add z-index to the header.

The header doesn’t like to stay in place as you scroll down your resume. Let’s change that by adding the z-index. The z-index sets the importance of the element on the page.

The higher the z-index value, the higher it will be on the page. Set the z-index for your header to 1 and set the position to fixed. Now the header should be better behaved and stay in place.

5. Float the div tags.

The right and left div tags should be in the right places. This is where floating comes in. Set the right div tag to float right while the left div tag should float left.

6. Add clear property to the footer.

The footer needs to sit at the bottom of the page so we need to make sure it clears both the right and left div tags. Set the clear property in the footer to both.

7. Add information to the site.

Now it is time to add all your info. Start adding as many headers, lists, and paragraphs to your site. Codecademy just wants one to pass the test, but you can add more if you like.

That’s a wrap!

You have your very own resume website now. You can still experiment with your code to find the right look. Not sure if you are on the right track?

Here's a peek at the style sheet for my code. You can refer back to this code to see if your styles look right. I am also including the pen for a sample resume site below.

div {
  border-radius: 5px;
}

#header {
  height: 60px;
  width: 97.5%;
  background-color: gray;
  position: fixed;
  z-index: 1;
  margin-top: -20px;
  margin-bottom: 10px;
}

.left {
  width: 10%;
  height: 400px;
  background-color: blue;
  float: left;
  position: relative;
  margin-top: 50px;
  margin-bottom: 10px;
}

.right {
  width: 88%;
  height: 400px;
  background-color: orange;
  float: right;
  position: relative;
  margin-top:50px;
  margin-bottom: 10px;
}

#footer {
  height: 50px;
  background-color: pink;
  clear: both;
  position: relative;
}

Conclusion

Today you finished the last project in the Codecademy HTML & CSS section. Over the last few months, you have gotten a good head start on some of the projects for your portfolio. These projects show some of the things you can do with HTML & CSS.

Now that you have seen a sample of things you have been able to do, your goal is to just keep practicing everything you have been learning. One of the best ways to practice is just applying what you learned in projects.

This post was originally published on September 13, 2017 on the blog The Original BritishPandaChick as How to Build a Resume Site with Codecademy. I made minor changes to the original post to work here on CodeNewbie.