Learning Outcome

At the end of this lesson, you will be able to:

• re-create your first webpage, with correct style

Review

• review Git and GitHub and Codespaces

• HTML basics

Lesson

• when you create an HTML document (or any program for that matter), you are NOT creating them just for the computer

  • you have 2 audiences:

    • computer

    • every other developer, including you

  • your HTML documents need to be machine and human friendly

• go over style guide for HTML:

  • https://www.w3schools.com/html/html5_syntax.asp

  • points to remember:

    • lower case document names and proper file extensions (index.html)

    • document type

    • close all tags

    • page language and character code

    • viewport, for small devices

    • indenting

    • header, with proper information

    • comments

    • lowercase tags

    • style sheets (we are not there yet!)

Daily Assignment

• work through the following tutorial:

  • HTML Comments

  • HTML Styles

  • HTML Colors, including the 3 different ways to represent color 

  • HTML ID Attribute

• Accept this GitHub Classroom Assignment.  We will use this as our Repo for today.

  • Invitation Link

• re-create the web page shown below, with proper style (see images below: ↓)

  • ensure your header has all the info it needs

  • add in colored text

  • add in a colored backgrounds, for different elements

  • add in different fonts

  • add an image this time as well

• remember to use GitHub pages to publish your website

• We won't need to submit an assignment template in Google Classroom for today.  Evidence will be your GitHub Classroom Repo.

Extra

• create a second webpage (cities.html) with proper style:

  • follow my example below but select your own colors and cities

    • I got my flags from here

• have it committed to the same repo