/fedora-website-banners

A workspace for designing and preparing banners to be used on Fedora Linux's websites.

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

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