Grid & Flexbox v3

Chapter Listing

• Chapter 1: Introduction and history of responsive web design
• Chapter 2: Intro to Grid
• Chapter 3: You Try It: Basic Grid
• Chapter 4: Grid span syntax
• Chapter 5: Grid area syntax
• Chapter 6: Grid and media queries
• Chapter 7: Working with mobile-first grid layouts
• Chapter 8: Stupid Grid Tricks: Overlapping grid cells, margin and grid, minmax()
• Chapter 9: Subgrid
• Chapter 10: You Try It: All The Grid Things
• Chapter 11: Flexbox: Syntax, navbars, Flexbox layouts
• Chapter 12: Responsive Images
• Chapter 13: Container size queries
• Chapter 14: Container style queries

About This Course

Course Objectives:

• Understand the syntax and appropriate application of CSS Grid and Flexbox.
• Get introduced to new specifications, like subgrid and container queries.
• Identify the two types of native HTML responsive images and their appropriate use.

Is This Workshop for Me?

This workshop is oriented towards junior developers. It is assumed that little CSS was covered in prior education.

More advanced developers will enjoy a review of the more basic concepts, but this course doesn't stop there. We will explore in-depth how Grid and Flexbox work and how to apply them to your designs. There's no need for Tailwind or Bootstrap after this course.

If you are exploring web development as a career, or if you feel like you didn't get much out of HTML and CSS at your coding bootcamp, this is a great place to start learning CSS layouts from the ground up.

Any Prerequisites?

• Complete the HTML and CSS portions of the Frontend Masters Bootcamp
• Understand how files and folders work. Most of our work will take place in CodePen.
• Patience, a willingness to ask questions, and an open mind to working with CSS!