| title |
before |
folders |
after |
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.**
|
| label |
type |
dinosaur-designs |
folder |
|
| label |
indent |
index.html |
1 |
|
| label |
type |
indent |
css |
folder |
1 |
|
|
| label |
indent |
fade |
notes |
content.txt |
1 |
true |
For copying-and-pasting the text |
|
| label |
type |
indent |
fade |
notes |
images |
folder |
1 |
true |
Already full of images to use |
|
| label |
indent |
fade |
dinos-r-us.svg |
2 |
true |
|
| label |
indent |
fade |
hadrosaur.jpg |
2 |
true |
|
| label |
indent |
fade |
iguanodon.jpg |
2 |
true |
|
| label |
indent |
fade |
stegosaurus.jpg |
2 |
true |
|
|
### 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:
```html
<link href="css/main.css" rel="stylesheet">
```
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
after |
Basic styling |
Open up your `main.css` file in a tab in Atom and we’re going to write some code.
|
main.css |
css |
html {
background-color: #f2f1ed;
font-family: Georgia, serif;
line-height: 1.5;
}
|
| num |
text |
1 |
Target the whole page—since the `html` element surrounds everything we can use it to style the whole visible space
|
|
| num |
text |
2 |
Change the background colour of the whole page to `#f2f1ed`
|
|
| num |
text |
3 |
Change the text on the whole page to `Georgia` with a backup font of `serif`
|
|
| num |
text |
4 |
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.
|
|
| num |
text |
5 |
Don’t forget to close this chunk of CSS with a closing curly brace.
|
|
|
Now open the `index.html` in your browser and make the window narrower than normal.
It should look like this in your browser:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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.*
|
html |
index.html |
⋮
</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>
|
|
| num |
text |
5 |
We’ll start with a `<header>` to surround the title and masthead area of the page.
|
|
| num |
text |
6 |
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.
|
|
| num |
text |
9 |
Open up a `<main>` tag to surround the page’s main content.
|
|
| num |
text |
11 |
Since we’re starting a new information section we should begin with a heading, an `<h2>` because the previous heading was an `<h1>`
|
|
| num |
text |
12-15 |
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.
|
|
|
Jump back over to your browser tab a refresh the HTML—you should see this:
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
after |
Style the header & first image |
Now we’re ready to write a little more CSS to style the new content we added.
|
main.css |
css |
⋮
line-height: 1.5;
}
img {
width: 100%;
}
h1, h2 {
color: #5d8432;
text-transform: uppercase;
}
figcaption {
font-size: .8rem;
font-style: italic;
text-align: center;
}
|
|
| num |
text |
5-7 |
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.
|
|
| num |
text |
9 |
We’re going to target all the `<h1>` and `<h2>` tags on the page to add some styles to them.
|
|
| num |
text |
10 |
Change the colour of their text to a greenish hue.
|
|
| num |
text |
11 |
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.
|
|
| num |
text |
14-18 |
Target the `<figcaption>` tag to adjust the text underneath the image. Change the font size, style and align the text to the centre.
|
|
|
After you’ve written the above code it should look like this in your browser:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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>`.
|
html |
index.html |
⋮
</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="">
⋮
|
| num |
fade |
2,3,5,6,14,16,19,20 |
true |
|
| num |
text |
7 |
We must always wrap navigation on our website in the `<nav>` tag.
|
|
| num |
text |
8 |
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.
|
|
| num |
text |
9-11 |
These links are going to jump down to each of the dinosaurs on the page that’s why we’re using internal `#` links.
|
|
| num |
text |
18 |
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.
|
|
|
**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:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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:
|
css |
main.css |
⋮
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;
}
|
|
| num |
text |
8-11 |
Target the whole navigation element to adjust the text: making it bold and slightly larger.
|
|
| num |
text |
13-15 |
Target the list inside the navigation to remove the bullets.
|
|
| num |
text |
17-20 |
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.
|
|
| num |
text |
22-25 |
We’re going to style the hover state of the nav links to change their colour and reinstate the underline.
|
|
|
Look like this in your browser, you should see this:
|
|
| title |
before |
multi_code |
after |
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.
|
| code_file |
code_lang |
code |
lines |
index.html |
html |
⋮
<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>
⋮
|
|
| num |
text |
5 |
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](/topics/naming-paths-cheat-sheet/).
|
|
|
|
| code_before |
code_file |
code_lang |
code |
lines |
Now we pop over to our CSS file and target that class to make some style changes.
|
main.css |
css |
⋮
nav a:hover {
color: #b42885;
text-decoration: underline;
}
.intro {
font-size: 1rem;
}
|
|
| num |
text |
7-9 |
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.
|
|
|
|
|
Refresh in the browser to see the caption is a little larger.
|
|
| title |
before |
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.)](/topics/google-fonts/)
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:*
|
|