Dinosaur designs

Work to build this website and style its typography using your new CSS skills.

Goal

We’re going to explore CSS selectors and properties to design the typography of a simple website.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the dinosaur-designs repository.

Fork & clone the “dinosaur-designs” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up project

After cloning the repository to your computer you should have some starter images. And a file named content.txt that contains all the text content so you can copy and paste.

Drag the dinosaur-designs folder to Atom and make an HTML file & a CSS file.

  1. dinosaur-designs
  2. index.html
  3. css
  4. main.css
  5. content.txt For copying-and-pasting the text
  6. images Already full of images to use
  7. dinos-r-us.svg
  8. hadrosaur.jpg
  9. iguanodon.jpg
  10. stegosaurus.jpg

HTML setup

  1. Make a new index.html file
  2. Add the HTML boilerplate code to index.html

Use the snippets we installed in the first class: html5 — Tab

And: viewport — Tab

CSS setup

  1. Make a new folder named css inside dinosaur-designs
  2. Create a new file named main.css and save it into the css folder
  3. Connect the HTML to the CSS

Use the snippet: css — Tab

Don’t forget to fill in the href with the path to your CSS file! It should look like this:

<link href="css/main.css" rel="stylesheet">

2 Basic styling

Open up your main.css file in a tab in Atom and we’re going to write some code.

html {
  background-color: #f2f1ed;
  font-family: Georgia, serif;
  line-height: 1.5;
}

Now open the index.html in your browser and make the window narrower than normal.

It should look like this in your browser:

  1. Line A

    Target the whole page—since the html element surrounds everything we can use it to style the whole visible space

  2. Line B

    Change the background colour of the whole page to #f2f1ed

  3. Line C

    Change the text on the whole page to Georgia with a backup font of serif

  4. Line D

    Set the line-height of the whole page to 1.5—this is a nice line-height for the web, a little loose but makes the text very readable.

    We should do this every time we start a new website.

  5. Line E

    Don’t forget to close this chunk of CSS with a closing curly brace.

3 Add some content

Switch to your index.html file inside Atom—open it in a new tab.

You can copy and paste the text content from content.txt to make sure there are no typos.

⋮
</head>
<body>

  <header>
    <h1><img src="images/dinos-r-us.svg" alt="Dinos ’R’ Us"></h1>
  </header>

  <main>

    <h2>Hadrosaur</h2>
    <figure>
      <img src="images/hadrosaur.jpg" alt="">
      <figcaption>Hadrosaurids are descendants of the Upper Jurassic/Lower Cretaceous iguanodontian dinosaurs and had a similar body layout.</figcaption>
    </figure>

  </main>

</body>
</html>

Jump back over to your browser tab a refresh the HTML—you should see this:

  1. Line E

    We’ll start with a <header> to surround the title and masthead area of the page.

  2. Line F

    We can surround <img> tags in headings, like <h1> in the case of logos, if we add the very important alt attribute.

    In this case the alt attribute should say exactly the text inside the image, essentially what you’d write in the <h1> if there wasn’t an image.

  3. Line I

    Open up a <main> tag to surround the page’s main content.

  4. Line K

    Since we’re starting a new information section we should begin with a heading, an <h2> because the previous heading was an <h1>

  5. Lines L–O

    We’ll use a <figure> element in this situation because the text appears to be a caption for the image itself.

    When using the <figure> tag the alt attribute on the image can be blank if the <figcaption> itself provides enough information to describe the image.

4 Style the header & first image

Now we’re ready to write a little more CSS to style the new content we added.

⋮
  line-height: 1.5;
}

img {
  width: 100%;
}

h1, h2 {
  color: #5d8432;
  text-transform: uppercase;
}

figcaption {
  font-size: .8rem;
  font-style: italic;
  text-align: center;
}

After you’ve written the above code it should look like this in your browser:

  1. Lines E–G

    Here we’re targeting every single image on the website and we’re giving them a width of 100%. This will allow the images to scale to fit their parent element.

  2. Line I

    We’re going to target all the <h1> and <h2> tags on the page to add some styles to them.

  3. Line J

    Change the colour of their text to a greenish hue.

  4. Line K

    Change the letters to uppercase. We never want to write actual uppercase letters in HTML (except for acronyms, etc.) because, digitally, uppercase means yelling. So if we visually want uppercase we can use CSS to do it.

  5. Lines N–R

    Target the <figcaption> tag to adjust the text underneath the image. Change the font size, style and align the text to the centre.

5 Add the navigation & remaining images

Pop back over to your HTML file and add the navigation. We’re going to insert it into the <header> tag right below the <h1>.

⋮
</head>
<body>

  <header>
    <h1><img src="images/dinos-r-us.svg" alt="Dinos ’R’ Us"></h1>
    <nav>
      <ol>
        <li><a href="#hadrosaur">Hadrosaur</a></li>
        <li><a href="#iguanodon">Iguanodon</a></li>
        <li><a href="#stegosaurus">Stegosaurus</a></li>
      </ol>
    </nav>
  </header>

  <main>

    <h2 id="hadrosaur">Hadrosaur</h2>
    <figure>
      <img src="images/hadrosaur.jpg" alt="">
⋮

The next part is completely up to you: copy and paste the <h2> & <figure> tags to add the remaining two dinosaurs onto the page.

After you’ve added the final two dinosaurs you should see this:

  1. Line G

    We must always wrap navigation on our website in the <nav> tag.

  2. Line H

    It’s best practice to surround the navigation links in a list. In this situation we’re using an <ol> because the order of the links matches the order of the content.

  3. Lines I–K

    These links are going to jump down to each of the dinosaurs on the page that’s why we’re using internal # links.

  4. Line R

    We are adding a matching id attribute to the <h2> tag that will show the matching navigation item where to jump down to in the content.

6 Style the navigation

We’re going to style the navigation so it doesn’t use the browser’s default CSS. Open up your CSS file and add this code:

⋮
figcaption {
  font-size: .8rem;
  font-style: italic;
  text-align: center;
}

nav {
  font-size: 1.125rem;
  font-weight: bold;
}

nav ol {
  list-style-type: none;
}

nav a {
  color: #793284;
  text-decoration: none;
}

nav a:hover {
  color: #b42885;
  text-decoration: underline;
}

Look like this in your browser, you should see this:

  1. Lines H–K

    Target the whole navigation element to adjust the text: making it bold and slightly larger.

  2. Lines M–O

    Target the list inside the navigation to remove the bullets.

  3. Lines Q–T

    Target the links inside the navigation to change their colour and remove the underline. It’s usually bad practice to remove underlines from links, but in the case of primary navigation it’s usually okay.

  4. Lines V–Y

    We’re going to style the hover state of the nav links to change their colour and reinstate the underline.

7 Style the first caption differently

Just for fun, I want to make the caption of the first dinosaur have larger text than the rest.

To do that, we need to target that caption separately from the other captions. The best way to accomplish that is to use a class. A class is like a name that we can assign to any HTML element, then use that name in the CSS for styling.

⋮
<h2 id="hadrosaur">Hadrosaur</h2>
<figure>
  <img src="images/hadrosaur.jpg" alt="">
  <figcaption class="intro">Hadrosaurids are descendants of the Upper Jurassic/Lower Cretaceous iguanodontian dinosaurs and had a similar body layout.</figcaption>
</figure>
⋮

Now we pop over to our CSS file and target that class to make some style changes.

⋮
nav a:hover {
  color: #b42885;
  text-decoration: underline;
}

.intro {
  font-size: 1rem;
}

Refresh in the browser to see the caption is a little larger.

  1. index.html — Line E

    Notice the new attribute on the <figcaption>. We add the class attribute and make up whatever we want inside the quotes—but make sure the class name follows our naming conventions.

  2. main.css — Lines G–I

    Target the class directly—make sure to put a period in front (.). The period in CSS means: “this is a class”.

    Then style the font size so it’s a little larger than the rest of the captions.

8 Web fonts

Here’s something for you to complete on your own…

  1. Go to Google Fonts and find the Patua One typeface. (Follow this step-by-step tutorial if you need help.)
  2. Add it to a collection and copy the <link> tag Google
  3. Put the new font in your HTML
  4. Change the headings and the navigation to use the new font

Double check Google’s CSS font-family code, it states that the backup font for ”Patua One” is a cursive font, which isn’t correct—replace cursive with a more appropriate backup font like sans-serif.

After you’re done the above steps it should look like this in your browser:

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.