boot

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)
  4. Stage 4

    Evolution Upgrades:

    1. Revamp the evolution page header with masthead icon that links to the Bootstrap5 page. Use page-level styles adjust its size and BS5 styles to 'float' it to the left. Use the 'CRAP' rule, proximity to get the h1 and h3 to work as a unit
    2. Add a BS5 bottom border to the header element
    3. Stage No. Inclusion and 'Last Update' on Evolution page via JavaScript

    index3.html Upgrades:

    1. Renovate the header area to a BS5 design
    2. Implement stage no and last update info into this page
    3. Renovate the browser dimension table to house the browser size icon. This is a good example of using 'Proximity' from the 'CRAP' rule
    4. Create an 'infoDiv' area, classed as 'container' that acts separately from the content div area. Style each with different background colors to highlight their location/arrangement on the page
    5. Create a form to house BS5-level 'radio buttons' that are programmed to change the class of the 'content' div as various buttons are placed. To see this idea 'in action' in another page, look at the Twelve Days of Xmas app.
    6. Use a 'd-inline-flex' class on the form to get the selections to wrap around based on browser geometry. Add additional page-level styles or BS5 styles to get the buttons to look 'good.'
    7. Write a summary of what you learn about the container settings in an element block that precedes the corporate ipsum block. Use a horizontal rule element to visually separate the areas
    8. Set the default radio button to 'container'
    9. Provide a 'favicon' to the entire stage using the 'boot' masthead icon