How to Sort Your Friends into Groups

Over the past few days, we have been making more projects with HTML & CSS with the help of Codecademy. We've built a lot of projects over these few days, but these projects only focused on working with either HTML or CSS. Today's tutorial is different because this project will have you working with both HTML and CSS files at the same time.

During this post, we'll be making a web page that sorts our friends into groups. For this project, you will be organizing your friends, family, and enemies into different groups with different colors. We'll be able to do this thanks to the help of classes and ids.

Here’s how you do it.

We will be doing lots of work with div tags today. You will be assigning classes and IDs to your div tags to get them to work.

1. Add three div tags.

In your HTML file, add three div tags in your body tags. The div tags will act as the circles for each of the networks we will be creating.

2. Add styles to the div tag.

Go to your CSS file. Inside the CSS file, you will start to add some style to the div tags you just created. This is just some basic style.

For the div tags, add the following code to your style sheet:

div {
  display: inline-block;
  margin-left: 5px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px solid black;
}

3. Add class names to div tags.

Now that we have some div tags, it is time to give them some names. Codecademy wants these divs to have class names of friend, enemy, and family. You can add more classes if you like.

4. Add styles to the class names.

Go back to your style sheet and start giving some style to your new classes. This will help represent the different groups and networks you have. Codecademy just has a couple of requests for this step.

• These requests include:
• The family class should have a 2px border, dashed, and a color of #0000FF.
• The friends class should have a border that is 2px, dashed, and set to #008000.
• The enemy class should have a border that is 2px, dashed, and be the color #FF0000.

5. Add ID names to the div tags.

Codecademy wants to be a little more specific for our friends and enemies. They want to know who our best friend and archnemesis are. For this step, add an ID to your friend class and name your id "best_friend".

You will add the "archnemesis" id to your enemies class. When you are finished, you should have a div tag with a class and ID for two div tags. They should look like this.

<div class=”friends” id=”best_friend”></div>

<div class=”enemy” id=”archnemesis”></div>

6. Add styles to the ids.

The ids need some style to distinguish them from other members of your network. You are going to give them a little more attention by giving them distinct styles just for the IDs you just made. Both the best friend and archnemesis IDs will have 4px solid borders. The best friend ID gets a color of #00C957 while the archnemesis ID receives a color of #CC0000.

Woohoo! You are done with this project.

Feel free to add more networks if you would like with this project. Codecademy suggests adding links and pictures to your div tags. However, I recommend adding more style or adding some headlines to your page.

This will help users know what your website is about and what your network is. Not sure if you are on the right track with your code? You can look at Codecademy's sample they provided with their tutorial.

You can also take a look at my sample project to see what I made for this post. This project is based on the Once Upon a Time TV show and organizes most of the character relationships for Henry Mills, one of the lead characters on the show. I'm also including my style sheet code below so you can refer back to it if you want to double-check what the style sheet should look like.

div {
  display: inline-block;
  margin-left: 5px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px solid black;
}

.friend {
  border: 2px dashed #008000;
}

.family {
  border: 2px dashed #0000FF;
}

.enemy {
  border: 2px dashed #FF0000;
}

#best_friend {
  border: 4px solid #00C957;
}

#archnemesis {
  border: 4px solid #CC0000;
}

Conclusion

Tomorrow's post is the last HTML & CSS tutorial from Codecademy I'll be featuring in this series. The final HTML & CSS project is building a resume. You will be playing with the width, height, padding, margins, and even a bit of floating to make a resume site.

If you want a head start, you can do the tutorial on Codecademy if you have an account. Some of these concepts can be tough for newbies so I recommend revisiting these concepts before you tackle this project.

This post was originally published on August 30, 2017 on the blog The Original BritishPandaChick as How to Sort Your Friends into Groups with Codecademy. I made minor changes to the original post to work here on DEV.