Web Design Patterns

Assignment 2: Product/Services/Info Page

• Due Sunday January 30 @ 11:59PM

Review of Breakpoints

• When you set media query breakpoints, you need to set your default styles to either mobile or desktop first.
  • At the bottom of your code, set your media queries to handle the non-default layout.

Mobile First CSS

• Conceptualize as building content outwards
  • key strategies:
    • anything that you want hidden on a phone set display: none; on anything that shouldn't be visible on a phone
    • set up the css for your hamburger menu
    • make sure content is visible and feels natural
• In your breakpoint, set content that was hidden on mobile to be visible
• Use this in your declaration

@media screen and (min-width: 400px) {
  .class-name {
    display: block
  }
}

Desktop First CSS

• Visualize as using media queries to cut down your content to make it's essential content feel complete
• Use media queries to hide content
• Use media queries to change items that are wider horizontal than vertical to look good on mobile
  • note that this can often be achieved by flexbox and css grid
• Switch to a hamburger layout

Breakout Session

• Add mobile breakpoints to one of your previous codepens
• Or create a new layout

How to make a mobile navigation

• Mobile Navigations Use breakpoints to switch between layouts.
• There are a few different approaches to do this that all have their merits.
• Instructions

Here are a couple Examples

• Check out Kevin Powel on Hamburger Menus - note that this one uses JS
• Pure CSS Dropdown Menu
• Basic Slide out Navigation. Also uses a minor amount of JS
  • bugged for practice fixing and tweaking styles
• A quick google search will reveal how many different approaches there really are Youtube Search Result

Use CSS to Style Images

• foreground images use <img src="" alt="" /> in the html
  • documentation
  • object-fit is used to set how an image will fill it's space
• background images use background-image: url(""); in the css declarations
  • Mdn documentation
  • CSS Tricks Article

Lab Time

• Hamburger Menu

  • (recommendation) Work on this for practice adding extra functionality to your page. This is a second step after the css breakpoint activity.

• CSS Breakpoint Activity

  • (recommendation) Take some time to work on this if today's content needs a bit more practice

• Image activity

  • (recommendation) Work on this for practice to enhance the visual content of your web pages

• Work on Assignment 2

  • (recommendation) Go straight to this if you are feeling comfortable with today's content