Dinosaur designs

Work to build this website and style its typography.

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.

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. images Already full of images to use
  6. dinos-r-us.svg
  7. hadrosaur.jpg
  8. iguanodon.jpg
  9. 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">

Basic styling

Inside main.css:

  1. Target the whole page and change the background colour to #f2f1ed
  2. Change the text on the whole page to Georgia with a backup font of serif
  3. Set the line-height of the whole page to 1.5
  4. Open in your browser—make the window narrower than normal

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

2 Style some content

  1. Add the logo into the HTML
  2. Add the first dinosaur image and content; look inside content.txt for text
  3. Add a width of 100% to all images
  4. Make all the headings this green, #5d8432, and uppercase
  5. Make the image caption smaller, italic & centred

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

3 Style the navigation

  1. Add the two remaining images and content
  2. Make the links in the navigation bold
  3. Make the size of the links 1.125rem
  4. Add the navigation & style it to match—see the tutorial on styling links — normal colour: #793284:hover colour: #b42885

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

4 Web fonts

  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 use it
  3. Include the new font in your HTML
  4. Change the headings and the navigation to use the new font
  5. Make the caption on the first dinosaur larger than the rest

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.