Unit #1-06

Learning Outcome

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

• add a favicon to your website 

Review

• using Chrome's developer mode to inspect your website

Lesson

• if you inspect your website from Replit using Chrome's developer tools you will notice you have an error:

  • what is this favicon error?

  • on GitHub pages you will not, because they add in a "globe" favicon

• one of the easiest ways to get a favicon is to use: https://favicon.io/favicon-converter/

• go over how to add in the favicon

  • I used the image below

• on GitHub Pages ensure you DO NOT just have a "/" before the file name:

  • href="favicon-32x32.png"

  • or even better

    • href="./favicon-32x32.png"

Daily Assignment

• create a web page, with the following requirements:

  • 1 html file, using MDL & 1 CSS file

    • you MUST have an MDL "mdl-layout--fixed-header"

      • this might help

  • you must include a favicon, using some other (appropriate!) image than the one I used

• publish your webpage on GitHub Pages

Extra

• create an "index2.html" file and a CSS file, with the following requirements:

  • 1 more HTML file, using MDL

  • a favicon

  • 1 element with a <div> and ID

    • <div id="hello-world">Some text here.</div>

• add this to your submitted work