Fedora Websites Banner

First editions of this is meant for a responsive design tutorial at Nest 2021.

Instruction

• Determine mobile vs desktop approach
• This will determine how to set up breakpoints and what sizes to set where
• Note that in the following steps, responsive widths can be used as well
• Set basic styling for items
• Set up display stylings for items
• parent elements: content alignment
• child elements: text alignment and width
• add padding and margin
• tweak
• Clean up Code

Key Points

• Item + container widths in flex items are really important for reducing the number of breakpoints
• mobile and desktop media query strategies will allow for different design ideas to be easier and others to be harder

Directory Notes

• Use the banners directory to push css and html approaches
• add your github name to the file-name if you want to push to this repo

Goals of Presentation:

• Learn some stuff about responsive design.
• Try and get a ideas for a new contribution for a Fedora Banner

Technologies

• CSS/HTML
  • Flexbox
  • CSSGrid
• KhanAcademy for quick demos