Responsive CSS

Joel Ross
Spring 2024

View of the Day

  • Project Draft 1 overview

  • Q&A [pollev]

  • CSS (& Flexbox) Review [code in groups!]

  • Media Queries Demo [code together!]

Project Draft 1

The complete HTML & CSS. A static "screenshot" of what your app will look like.

  • Include all of your "pages"!
    • Can include just a single example of a "details" page
    • May need to copy/paste shared elements (navbars) for now
  • Include all sections and components (forms, etc)
    • Skip user login forms; we'll provide that through a library
  • Be clear what the user will "do" with your app -- where do instructions/etc go?

https://canvas.uw.edu/courses/1719809/assignments/9142321​

Project Draft 1

Code requirements:

  • Well-written, semantic HTML
  • Significant CSS & styling
    • Must include a flexbox or grid (Bootstrap is okay)
  • Accessible
    • Check your alts and headings!
  • Responsive
    • ​Must include a meaningful media query!

https://canvas.uw.edu/courses/1719809/assignments/9142321​

Project Draft 1

Working as a group:

  • All group members are responsible for all aspects of the project. Projects are graded as a single piece of work.
    • Do not divide up work by language -- everyone needs to contribute to both HTML and CSS
    • Everyone needs to check everything. Don't think of it as "James' page" or "Ian's page". It is your group's project
  • Must use git to code collaboratively. We will be checking for commits from all group members.
    • Each individual needs to demonstrate understanding of the material in their commits

https://canvas.uw.edu/courses/1719809/assignments/9142321​

Q&A

(https://pollev.com/joelross)

Updating Lecture Code

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

In small groups (2-3), clean up and improve the styling of the page!

 

Keep note of at least one change you made to share!

Viewport <meta>

Include the viewport meta element to allow your code to control responsive appearances (rather than the browser).

<head>
  <meta charset="utf-8"> <!-- always need this -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- more head elements, including <link> ... -->
</head>

Media Queries

/* A Media Query */
@media (min-width: 768px) {
   /* these rules apply ONLY on screens 768px and wider */

   /* a normal CSS rule */
   body {
      font-size: 1.5em;
      background-color: beige;
   }
   
   /* another CSS rule */
   .mobile-call-icon {
      display: none; /* don't show on large displays */
   }
}

Action Items!

  • Read: through Chapter 9

  • Problem Set 03 due Wednesday

    • CSS material from last week

  • Problem Set 04 due next week

    • CSS material from this week


Next: CSS Frameworks (Bootstrap)