What you'll build

You'll build a multipage website with some reasons why we choose to learn web development.

It'll have the following features:

Here's what it might look like:

What you'll learn

• Creating multiple HTML files
• Linking HTML files together by creating a nav menu
• Vocabulary for describing your HTML and CSS code

What you'll need

• A browser (Chrome is recommended because it's the most fully featured and common)
• A GitHub account
• GitHub Desktop and Visual Studio Code

Open the assignment

1. Open your GitHub Classroom assignment from the link in Google Classroom
2. Check that you're logged in with your GitHub account
3. Check the name of the assignment is correct and then accept it. GitHub will make a copy of the template for you.
4. Click on the link to your repository

Clone your repository

5. Click on the green Code button and choose Open with GitHub Desktop
6. Choose a place (such as Documents) to download your code to

Get ready to code

1. Click on the green Code button and choose Open with GitHub Desktop
2. If you're working locally (on your own device), choose a place (such as Documents) to download your code to
3. Once it has cloned to your computer, click the Open in Visual Studio Code button (or press Command + Shift + A on MacOS or Ctrl + Shift + A on Windows)
4. Open the file called index.html

Now you're ready to get coding!

Read over your HTML and compare it with what you see on the page in the browser.

Often your client will give you the content to add to a website. This is the content you need to add to the other-careers.html page:

Other Coding Careers

Web dev is a great start but it's only one of many different careers in digital technologies. Here are some of the others.

• Application developer
• Server engineer
• Network engineer
• Project manager
• Systems Architect
• Artificial intelligence researcher
• Cyber security consultant (hacker)

and this is what the page should look like in the browser:

You now have two different web pages but no way to get from one to the other. To do this, we'll need links.

Copy and paste this code below the main heading of your index.html file:

<a href="opportunities.html"> Web Dev Opportunities </a>

Save and check your website in your browser. You should see a link that you can click to take you to your second page.

Customise

Unfortunately, there's no way back to the home page.

• Add a link back to the home page (remember, the file name is index.html)

The navigation of your website could be made easier for your users in two ways:

• they can get to any page from any page
• the links don't change from page to page

Update the code on your index.html file to include all the pages, including the current one:

<a href="index.html"> Home </a>
<a href="opportunities.html"> Web Dev Opportunities </a>
<a href="other-careers.html"> Other Coding Careers </a>

Customise

The other pages need to be tidied up as well.

• Fix the links on the other pages (hint: is there a way to do this quickly?)

Copy and paste this code at the bottom of your front page:

<style>
  * {
    font-family: sans-serif;
  }

  h1 {
    text-align: center;
  }

  a {
    text-decoration: none;
    color: black;
    border: 1px solid black;
    border-radius: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  a:hover {
    color: white;
    background: black;
  }
</style>

Customise

Style the page your way.

• Add, remove, or change the CSS code however you feel works best.
• If you prefer your links to be stacked vertically, add this to your link CSS rules:

display: block;

Download this image and save it into the same folder as your index.html file.

Rename the image to html-logo.svg so that it's easier to type into the code.

Add this line into the code on your index.html.

<img src="html-logo.svg">

If your image isn't showing, check:

• spelling is all correct
• The filename is the same as the src attribute
• you have saved the HTML

Customise

Adjust your image the way you want it to look:

• Put the img element in the code where you want the image to appear
• Add some other coding related images to the other pages

Often, images aren't the right size and need to be styled to fit into the web page.

First, we'll change the size of your image. Copy and paste this code into your style element:

img {
  width: 50rem;
}

Customise

Adjust your images the way you want them to look:

• Adjust the sizes of all of your images to be appropriate
• Add some spacing between them and the other elements by using margin

Congratulations, the first iteration of your site is complete.

You've created three pages and linked them together into a site.

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

(➕ means new things in this project)

HTML code

• h1 for main headings
• h2 for subheadings
• p for paragraphs
• ul for unordered lists (bullet points)
• li for list items inside an unordered list
• style for CSS styling

➕ a for links

➕ href attribute in a opening tags

➕ img for images

➕ src attribute in img opening tags

HTML vocabulary

• tag - a single piece of HTML code inside pointy brackets, i.e. < and >
• element - a component of the webpage, such as a heading or paragraph, inside an opening tag and a closing tag

➕ attribute - extra information inside the pointy brackets of an opening tag, such as a file name

CSS code

• background: to change the background colour of an element
• font-family: to change what letters look like
• font-size: to change the size of text
• color: to change the colour of text
• text-align: to move text to the left, center, or right
• text-decoration: to add or remove underlines and line-throughs
• text-transform: to change text to all uppercase or lowercase
• text-shadow: to add a shadow to text
• margin-(top, bottom, left, right): to add space around the outside of an element
• padding-(top, bottom, left, right): to add space around the inside of an element

➕ width: for the width

➕ height: for the height

CSS vocabulary

• selector - the start of the chunk of CSS that says what HTML element it's for
• property - the thing you're going to change about the HTML element
• value - what you want to change the the property to

Elements on a web page can be in different states, such as being hovered over.

Copy and paste this code into your style element:

a:hover {
  background: black;
}

Open your page in the browser and hover over your links with your cursor.

Experiment with :hover

• Can you add styles?
• Can you remove styles?
• Does hover work on other elements?

Usually, a website will indicate which page you're on in the list of links by highlighting it a different color.

Most frequently, a good Google search will be the best option. Remember to include the keywords "CSS" and "class" so that Google will give you the best results (skip past the ads though!).

If you don't find anything useful, try one of these.

• W3 Schools CSS Classes
• Stack Overflow