Your First HTML and CSS Project

February 27, 2019

It’s now time to implement some of the things you learned so far. Suppose you want to make a personal website for yourself. For now, you will take the first step and just set up the project with an HTML and a CSS file, and make the home page display your name and style it a bit so that it looks like this:

Just the first step towards your own personal site!

What you need to know

To complete this project, you’ll need to apply the following CSS properties: take a moment to read what they do here:

font-family: specifies a list of one or more font family names and/or generic family names for the selected element.
font-weight: specifies the weight (or boldness) of the font. Some fonts are only available innormalandbold.
font-size: sets the size of the font (the text).
letter-spacing: sets the spacing behavior between text characters.
text-transform: specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
text-align: sets the horizontal alignment of an inline or table-cell box. left, center, right are commonly used values.
margin: sets the margin area on all four sides of an element. Note that you can specify one, two, three or four values to margin. They are interpreted as follows:
Four values: margin: 5px 10px 15px 20px; — the values are interpreted in the order top, right, bottom, left. So a margin of 5px is applied to the top, 10px to right, 15px to bottom and 20px to the left.
Three values: margin: 5px 10px 15px; — the fourth value is automatically interpreted as the same as the second value. What this means is that 10px is assigned to both right and left margins, and 5px is assigned to top and 15px to the bottom.
Two values: margin: 10px 20px; — the third value is automatically interpreted as the first value. Thus, a margin of 10px is applied to top and bottom, and a margin of 20px is applied to right and left.
One value: margin: 10px; — a margin of 10px is applied to all four sides.
Special value: auto — a value of auto is used for left and right margins when we want to center align a block element.

Objectives

Here are your objectives:

The heading element h1 should have the Futura font family
The font weight of h1 should be bold
The font size of h1 should be 48px
The text of the heading h1 should be transformed to uppercase
The heading h1 should be center aligned
The heading h1 should have a margin of 100px auto
The heading h1 should have letter spacing of 5px

Workspace

You can work on the project right here in the workspace below. Hit “Try it now” and fill in your code in the missing code.

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>John Doe</title>
    <style>
      h1 {
      }
    </style>
  </head>
  <body>
    <h1>John Doe</h1>
  </body>
</html>

Solution

If you get stuck along, you can take a peek at the full code below:

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>John Doe</title>
    <style>
      h1 {
        font-family: Futura;
        font-weight: bold;
        font-size: 48px;
        text-transform: uppercase;
        text-align: center;
        margin: 100px auto;
        letter-spacing: 5px;
      }
    </style>
  </head>
  <body>
    <h1>John Doe</h1>
  </body>
</html>