First editions of this is meant for a responsive design tutorial at Nest 2021.
- 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
- 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
- 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
- Learn some stuff about responsive design.
- Try and get a ideas for a new contribution for a Fedora Banner
- CSS/HTML
- Flexbox
- CSSGrid
- KhanAcademy for quick demos