Teaching
/
Intro to Web Dev (Spring 2022)
/
Layout- Week 03
Previous:
CSS - Week 02

Layout - Week 03

Welcome to week 3 of Intro to Web Dev!

Last week, you used CSS to style your HTML by setting things like font colors. CSS can also be used for positioning elements and laying out your page. There are a lot of different ways to do that, so I wanted to spend this week on just this aspect of CSS.

Work through the activities in this page to complete the week!

Layout

Estimated time: 90 minutes

First, read through the tutorial and watch the video:

CSS Layout CSS Layout

Use CSS to lay out your page.

Quiz

  1. In your own words, what is grid layout? When might you use it?
  2. In your own words, what is flexbox layout? When might you use it?
  3. In your own words, what are media queries? When might you use them?
  4. What’s your favorite grid or flexbox property, and what does it do? Note: There is no wrong answer to this question. If you don’t have a favorite, pick one you used most often, or one that surprised you.
  5. What do the grid-auto-columns and grid-auto-rows properties do? Note: These properties were not mentioned in any of this week’s content. I’m testing that you can research and read about new CSS properties you haven’t seen before. Feel free to use a search engine and resources like W3SChools and MDN to answer this question.

Project

Estimated time: 1 hour

Now you’ve seen the fundamentals of layout in CSS, including flexbox and grid.

To practice that, modify the files in the week-03-layout directory of your project repo.

Checklist

  1. Learn about layout in CSS
  2. Follow the directions in the week-03-layout directory of your project repo
  3. Push those changes to GitHub and confirm you can see them in your GitHub Pages site
  4. Get ready to present your work. Make sure your camera and microphone work!
Previous:
CSS - Week 02