Mobile First Design

Review

• Design Asset Review
  • Everyone will get a chance to briefly discuss some of the color and typography groupings that they put together.
    • Particularly address approaches to make your assets easy to use later
• 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)
• Look at the flex proprty

---

VSCode Web Dev Workflow

• Optimize your workflow with good settings and plugins
  • live server plugin
  • prettier
  • format on save
• Practice deploying sites to github pages

Codepen to Optimize and deploy on GH Pages

---

Topic 1: Flexbox card layouts

• We will follow up with the cards made in this codepen

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?

Further Reading

• Mdn Card Design
• Article on card designs

---

Topic 2: 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

• Ash's Example

  • this example is very raw and suitable for optimization. One way to practice would be to fork this pen and try optimizing it (adding smoother animations, better colors, spacing etc). Pull it apart and see what makes it work.

---

Topic 3: 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 media-type and (media-feature-rule) { /* styles here */ }

Media Query Gists

• Media Query Mobile First
• Mobile First
• Desktop First
• Mobile First and Orientation

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)

---

Lab Time

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

---

Homework for next day

• Read Mdn CSS Grid
• Play CSS Grid Garden
• Watch Easy Layouts with CSS Grid
• Watch Jen Simmons on The basics of grid
• Watch Jen Simmons on Using Flexbox and CSS Grid together

---

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/ }