Unit #1-03

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

• 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!)

• now that we have "nice style", we should always check our style to ensure it is correct

  • the entire reason we have been adding "GitHub Action" is to do this automatically for us as well

    • GitHub Badge tells you if you have done it correctly (see images below: ↓) 

  • go over how to check you errors:

    • click on actions and then the commit where you had an error

    • scroll to where the "red" is

      • it will tell you the file and line number of error

    • go back, fix error, commit to GitHub, wait for Super Linter to finish to see if everything is ok

  • but there must be a way to check this BEFORE I commit!

    • run this command in the terminal:
      npx htmlhint *.html

Activity

• work through the following tutorial:

  • HTML Comments

  • HTML Styles

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

  • HTML ID Attribute

Daily Assignment

• 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

• use Mr Coxall's Super Linter to ensure your html is properly formed

• remember to use GitHub pages to publish your website

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