Bootstrap5 Crash Course

Evolution

1. index0.html

   This is a base HTML file without BS5 that validates.

2. index1.html

   Added the necessary link and script tags to the document head to tap into the BS5 ecosystem. Notice the difference between the 2 files, especially how some of the default HTML styling has been removed (margins/padding) and the change of font family.

3. index2.html

   Provided these elements:

   1. External style sheet to show media query breakpoints with content label and border color with matching font colors
   2. BS5 table to show browser window width
   3. Internal styles for the table
   4. JavaScript functions that activate based on onload and onresize actions
   5. DOM-targeted elements using getElementById
   6. Hiding/Showing elements based on browser window events, by adding or removing the visually-hidden BS5 class
   7. Utilized text-shadow to obey the 'C'ontrast principle from the CRAP rule
   8. input element of type="button" to toggle back and forth between 2 different styles. Use JavaScript to change the href property of the developer link
   9. important! CSS designator to override BS5 class styles (::hover style to allow underlining on hovering)