SAIT Web Developer

Fast Track - Fall 2021

CPNT 260 Day 4 - Mobile First Design, Flexbox, and Breakpoints

Tropy of the day: Mobile first webpage with hamburger menu

Review

  • Flexbox Questions
  • debugging overflow (if you've had this issue on any of your activities, this will be a good time to go back to it and work on fixing it)
  • Apply starter flexbox and styling to today's codepen as a class
  • Form follow up: add fieldset to forms
  • Look at the flex proprty

Class Codepens

quick note: don't use assignments for daily activities

Assignment 2: Services, Info, Team Members, or Product Page

Overview

  1. Plan it out
  • Mobile First Design
  1. Brute force
  • Card Design
  • Hamburger menu and icons
  1. Walkthrough
  2. Optimize/Test

Topic 1: Mobile First Design

Media Queries and Breakpoints

Terminology

breakpoint
The points where the layout shifts
media-query
Media queries are used to set major breakpoints. CSS declarations within a media query will only run under the conditions specified in the media query declaration. You can have multiple media-query declarations in a file.

Notes

  • Use this guide on screen resolutions to determine sensible breakpoints
  • With modern layouts like flexbox and grid, media queries are less important for creating a responsive experience.
  • Try to use them sparingly. Check out this guide from css-tricks on tips for using mobile queries
  • we will be focusing on using media queries in css

Media Query Gists

Activity: Add media queries to a page

  • Use one of your previously made pages or create a new one
  • make the navigation and one other thing function differently at a mobile screen size
  • the nav menu needs to completely change layout to vertical and not flex when resizing the screen
  • Other content to try to change could be:
  • how sections are positions around one another (do something that cannot be achieved with flex-wrap)

Topic 2: Flexbox card layouts

How to make easy and responsive cards

Notes

  • Check out Ash's Codepen for a simple card layout
  • Articles are a great tag for cards
  • If you have clickable elements inside your cards, keep in mind how you want your interaction hierarchy to work.
  • Does the user click on the whole card? or button inside the card?
  • If you use a hover state to indicate that the card can be clicked on a desktop, how will you replace this visual breadcrumb for mobile users?

Code

  • @media media-type and (media-feature-rule) { /* styles here */ }

Further Reading

Topic 3: Adding Icons to your site

Hamburger menus and many more

Notes

  • To access fontawesome icons, include this in the head of your html
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  • You can also download the icons and store them in your assets
  • set icons with <i> tag

Activity: Add Icons and create a hamburger menu

Walkthrough

  • Discuss file naming conventions
  • style.css
  • index.html
  • Discuss Submission content for graded assignments
  • Color theme practicing
  • Apply a color theme that you like to your design
    • this can happen early or later depending on if you are starting with a clear brand/theme or are starting with quick placeholders
    • take a color scheme that you like:
      • could be from a game
      • movie
      • clothing line
      • band
      • Your house
    • Apply the theme to your design
      • use the dropper tool to find exact hexcodes or hsl() values.

Lab Time

  • Explore media queries, font-awesome icons, and flexbox
  • Enhance previous designs
  • Create a card layout with flexbox

Homework for next day

Tool Time (For help with submissions)

  • Command line zipping (Windows)
  • CLI 7-zip
    • If you want to try zipping files from the command line, it can save a lot of time. You have to add 7zip to git bash
    • the tutorial linked above describes how to do this
  • NOTE: 7-zip also has a GUI (graphical user interface) version. Use if this is a preferred method.
  • Command line zipping (Mac, Linux)
  • Unix systems have the zip command built in. This can be used for most situations.
  • Check out instructions in this tutorial
  • Basic Syntax: zip archive.zip filename
    • archive.zip can be named anything, depends on what you want your zip folder to be called
    • You can declare multiple files
    • If you want to zip an entire directory, you need to use the recusive flag -r
      • ex: zip -r archive.zip directory/
        }