CodeNewbie Community

loading...

How to Build a Resume Site

Sarah Bartley
Front-end web developer | Moderator for Elphas Can Code | Creator of Disney Codes Challenge
・4 min read

Originally published September 13, 2017 on The Original BritishPandaChick as How to Build a Resume Site with Codeacademy. I made tweaks to the original post so it would work for Code Newbie.

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.

Here’s how you do it.

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 of header. The second tag should have a class of 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 a height, width, and color to your individual 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 now and stay in place.

5. Float 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 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 of each 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.

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;
}

Enter fullscreen mode Exit fullscreen mode

I am also including a link to a sample project on Codecademy. Just click the link below to see a sample resume site.

==> Click here to see a sample version of the resume website!

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.

Discussion (0)