What you'll build

You'll build a page that is styled and arranged with CSS.

It'll have the following features:

What you'll learn

What you'll need
  1. Open GitHub Desktop
  2. Choose the Summer repository from the menu in the top left
  3. Click the Open in Visual Studio Code button (or press Command + Shift + A on MacOS or Ctrl + Shift + A on Windows)

Now you're ready to get coding!

Add the header, main, and footer elements to your page.

Check that there are no HTML elements outside of these three semantic elements.

Find at least 3 images to personalise your web page.

Customise

Change your images to personalise your web page.

border-radius: 50%;

filter: grayscale(100%);

filter: saturate(500%);

filter: sepia(100%);

CSS Grid lets you arrange HTML elements into a... well, a grid. It makes creating interesting and modern layouts easy, without having to add or change a lot of HTML code.

There are a few new things we need to add to get this working.

The display property with the value grid

The grid property and the value with be the layout we want (use the code below)

<body>
  <header>
    ...
  </header>

  <main>
    ...
  </main>

  <footer>
    ...
  </footer>
</body>

<style>
  body {
    display: grid;
    grid: " h    m    .  " auto
          " .    m    .  " auto
          " .    m    f  " auto
          / auto auto auto;
  }

  header { grid-area: h; }
  main   { grid-area: m; }
  footer { grid-area: f; }
</style>

View your page in your browser. Your header should now be in the top left, your main running down the centre, and your footer in the bottom right.

Customise

Change your grid rule to personalise your web page.

While Grid is perfect for the large semantic elements of your page, you can use Flexbox for laying out the smaller parts of your page, such as a group of images or links.

Just like Grid needs body, Flexbox needs a container element as well. Then, all the items inside the container will use the layout rules that you specify.

Let's start with the images you added in the first step. You'll need at least 3 to practise with Flexbox, so if you haven't completed that step, revisit it and resume this part when you're done.

  1. Create a div element around your images - this will be the Flexbox container
  <main>
    <div>
      <img src="...">
      <img src="...">
      <img src="...">
    </div>
  </main>
  1. Make all of your images the same height by adding an img selector to your CSS with a height rule.
img {
  height: 10rem;
}
  1. Add a div selector to your CSS with one rule:

The display property with the value flex

div {
  display: flex;
}

Customise

Change and add CSS rules to personalise your web page.

You can decide how you'd like your images to be laid out by applying one of more of the following rules to your div selector.

justify-content: center; centres the items

justify-content: space-around; centres and evenly distributes the items

gap: amount; spaces the items by the amount you specify

flex-direction: column; vertically arranges the items

flex-wrap: wrap; continues items on a new line if they don't fit on the page.

Congratulations, the second iteration of your web page is complete.

You've taken the code provided and customised it to create your unique web page.

Along the way, you've learned about these parts of coding.

(➕ means new things in this project)

HTML code

➕ body for the whole page the user can see

➕ div for a container

HTML vocabulary

CSS code

➕ display: to change the way this should be shown, e.g. grid or flex

➕ grid: to change the way the page layout

➕ grid-area: to give an element a letter to use in grid

➕ justify-content: to change where inside the container the items should be placed

➕ gap: to space the items in a container

➕ flex-direction: to change the direction items are arranged in a container

➕ flex-wrap: to continue items on a new line if they don't fit on the page

CSS vocabulary

In your coding career you will often need to look up how to do things. In this section are a couple of websites to help you find information online about how to do what you want to do.

Most frequently, a good Google search will be the best option. Remember to include the name of the language you're using and the thing you want to do, so that Google will give you the best results (skip past the ads though!).

Mobile friendly designs are made by adding some extra CSS that only applies if your screen is small enough. You can do this with an @media query. You can learn about @media queries by doing a Google search using the tips above.