HTML.md

Introduction

Replicate the template below with these 5 challenges

Template

Let's start with an Introduction to HTML

Watch this video on "Introduction to HTML"

Read up on "Introduction to HTML"

Challenge 1: Setup the development environment

Resources

• Setup any of the following editors "Atom", "Sublime" or "VS Code"
• Watch this video on "Creating an HTML document"
• Read up on "Introduction to HTML"

Activity

• Create the HTML document and name it Grande

Challenge 2: Build the website header

Activities

• Set the title of the site to "Grande Shoes" using the <title> element.
  • Read up on "HTML Head"
• Set the background and text color using the <style element>
  • Read up on "HTML Styles"
  • Watch this video on "Head Elements and Scripts"

Challenge 3: Design the layout for the home page

Activity

• Set the layout elements.
  • Watch this video on "Layout Elements"
  • Watch this video on "Nesting Elements"
  • Read up on "HTML Layouts"
  • Read up on "HTML Elements"
• Set the Navbar and list items
  • Watch this video on "Navbar and List Items"

Challenge 4: Add multimedia to the Home page

Activities

• Add a picture to the Home page
  • Read up on "HTML Images"
  • Watch this video on "Figure & Image Elements"
• Add formatted texts over the image on the Home page
  • Read up on "How to position texts over an image"
  • Watch this video on "Head Elements and Scripts"
• Add a button below the formatted texts over the image
  • Read up on "HTML Button"

Challenge 5: Format texts on the Home page

Activities

• Play around with headings
  • Watch this video on "Headings"
  • Read up on "HTML Headings"
• Add paragraphs below the images
  • Watch this video on "Paragraph & Text Formatting"
  • Watch this video on "Text Formatting - Part 2"
  • Read up on "HTML Paragraphs"