HTML & CSS Review Code-Along

Start by opening this project, then follow the instructions below to build a simple webpage! We will be creating a fan site - the instructions are about Fortnite, but you can be a fan of anything at all (as long as it's school appropriate)!

Make sure to click "Save a Copy & Edit" to create your own version of the project.

Update the Main Header

Between the opening and closing body tags, find the h3 element. Within the h3 element, add the proper text.

<h3>Fortnite Fan Site</h3>

Add an Image

Add an image to the page.

  1. Go to Google Images
  2. Find an image, and copy the image address/URL/location
  3. Create an img element, and set its src attribute to be the URL for the image
<img src="https://assets.reedpopcdn.com/Fortnite-Battle-Pass-creen-1.jpeg" />

Add a Paragraph about Fortnite

Under the img element, add a p element that contains the text for the paragraph. Talk about your favorite game: Fortnite.

<p>
    Fortnite is a great video game filled with several memorable characters and lots of action.
</p>

Add Another Header

Under the p, add an h3 header... and inside, put My Favorite Character.

<h3>My Favorite Character</h3>

Add a Paragraph about Your Favorite Character

Under the h3, create a p element. Between the opening and closing tags, describe your favorite Fortnite character.

<p>
    My fave Fortnite character is definitely Drift! He's so cool with his rad moves and sick outfits. I love getting all the skins for him.
</p>

Add a Background Style

Now it's time to add some style. Between the opening and closing head tags, find the style element.

Within the body ruleset, set the background property to black, and the color property to white.

<style>
    body {
        background: black;
        color: white;
    }
</style>

Feel free to change the font too!

Add an Image Style

Currently, the image might be a little big. Use CSS to update its size. Add another ruleset to the style element that will select the img. Within the ruleset, set the height property to 200px.

img {
    height: 200px;
}

Add a Main Header Style

Next, it would be nice for the main header to stand out a little more. To style only the main header, add a class attribute to it in the HTML, and then select it by its class in the CSS.

In the index.html file, find the top h3 header. Add a class attribute with a value of shiny to the element.

<h3 class="shiny">Fortnite Fan Site</h3>

In the style element, add a ruleset that will select elements with a class of shiny using .shiny. Within the ruleset, set the color property to gold so that everyone knows you are legendary.

.shiny {
    color: gold;
}

Final Code

That's it! The Fortnite Fan Site looks pretty good.

<html>
    <head>
        <style>
            body {
                background: black;
                color: white;
                font-family: "Dancing Script", cursive;
                text-align: center;
            }
            img {
                height: 200px;
            }
            .shiny {
                color: gold;
            }
        </style>
    </head>
    <body>
        <h3 class="shiny">Fortnite Fan Site</h3>
        <img src="https://assets.reedpopcdn.com/Fortnite-Battle-Pass-creen-1.jpeg" />
        <p>
            Fortnite is a great video game filled with several memorable characters and lots of action.
        </p>
        <h3>My Favorite Character</h3>
        <p>
            My fave Fortnite character is definitely Drift! He's so cool with his rad moves and sick outfits. I love getting all the skins for him.
        </p>
    </body>
</html>

results matching ""

    No results matching ""