What you'll build

You'll build on your Introduction project to add semantic HTML elements that help you structure your page.

It'll have the following features:

What you'll learn

• Semantic HTML elements
• Grouping HTML elements

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

1. Open GitHub Desktop
2. Choose the Introduction repository from the menu in the top left
3. Click the Open in Visual Studio Code button (or press Command + Shift + A on MacOS or Ctrl + Shift + A on Windows)

Now you're ready to get coding!

Create another file called bff.html then copy and paste the code below into your new file.

<h1> Introduce Yourself </h1>

<h2> My Best Friend(s) </h2>

<ul>
  <li>
    <img src="...">
    <p> Name... </p>
  </li>
  <li>
    <img src="...">
    <p> Name... </p>
  </li>
  <li>
    <img src="...">
    <p> Name... </p>
  </li>
</ul>

Customise

1. Find image(s) that you want to use.
2. Add them to your project's folder.
3. Update the image element's src attribute to the name of the image file.
4. Update the paragraph element to the person's name.

Create a link to bff.html in your index.html file, and another link to index.html in your bff.html file. This way, visitors can go back and forward between the pages on your site.

Usually, links to other pages are somewhere near the top of a web page, like this.

<h1>
  Introduce Yourself
</h1>

<a href="bff.html">
  My Friend(s)
</a>
    
<h2>
  About Me
</h2>

<p>
  A paragraph about me.
</p>

<p>
  My interests include:
</p>

<ul>
  <li> Thing 1 </li>
  <li> Thing 2 </li>
  <li> Thing 3 </li>
</ul>

The header element is a section, usually at the top of the page, that contains the name of the website, a logo, and other things that are the same on every page.

Usually, the header is the same or similar on every page.

Try putting your main heading inside a header element.

<header>
  <h1> Introduce Yourself </h1>
</header>

Customise

Change your header to personalise your web page.

• Add an image of yourself in your header

The nav element contains all the navigation links for your page. The navigation menu is usually the same on every page, so that visitors can move around however they want.

Add a nav element around the link on your page so that it's contained inside.

<nav>
  <a href="bff.html"> My Friend(s) </a>
</nav>

The main element is the... main part of your page. It contains all the content that's specific to this page, so it should be different on every page.

Add a main element around the main content of your page so that it's contained inside.

<main>
  <h2> About Me </h2>

  <p>
    A paragraph about me.
  </p>

  <p>
    My interests include:
  </p>

  <ul>
    <li> Thing 1 </li>
    <li> Thing 2 </li>
    <li> Thing 3 </li>
  </ul>
</main>

The footer element usually contains copyright information about the content on the page and the code behind the page. It can include the author who wrote the code, who they work for, and contact information.

Add a footer element at the bottom of your page with as much of this information as you want to include. You at least need to claim copyright on the work you've done.

<footer>
  <p>
    &copy; Your Name 2023
  </p>
</footer>

Customise

Change your footer to personalise your web page.

• Add Craighead as the place where you're a web developer
• Add as much additional detail as you like

Congratulations, the second iteration of your web page is complete.

You've taken the code provided and customised it to create your unique web page.

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

➕ header for page headers

➕ nav for navigation menus

➕ main for the main page content

➕ footer for page footers

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

Add a style element to the bottom of your page and apply some of the CSS skills you've been developing.