CSS - Grid Part 1

Instructors: Jess, Carmen, and Eda

Grid

Before this session, please:

• Read Working with CSS Grid: What Is CSS Grid, and How Does It Differ from Flexbox? and take notes
• Read Working with CSS Grid: How Can You Create Flexible Grids with the fr Unit? and take notes
• Read Working with CSS Grid: How Can You Create Gaps Between Tracks in a Grid? and take notes
• Read Working with CSS Grid: How Can You Repeat Track Listings in a Grid Layout? and take notes
• Read Working with CSS Grid: What Is the Difference Between an Implicit and Explicit Grid? and take notes
• Read Working with CSS Grid: What Is the minmax() Function and How Does It Work? and take notes
• Read Working with CSS Grid: How Do the grid-column and grid-row Properties Work? and take notes
• Read Working with CSS Grid: How Can You Position Items on the Grid Using the grid-template-areas Property? and take notes
• Try to complete as many steps from Build a Magazine as possible, you may need to complete this workshop over the next few days

During this session, we’ll:

• Review notes
• Review notes
• Review notes
• Review notes
• Review notes
• Review notes
• Review notes
• Review notes
• We’ll look at key steps and concepts from Build a Magazine together

After this session, please:

• Complete Design a Newspaper Layout solo over the next few days. You may want to write an article about something in your life, make up a story or use placeholder text for your news article.
• Read Debugging CSS: How Can You Use the DevTools Inspection Tool and CSS Validators to Debug Your CSS? and take notes
• Read CSS Grid Review and take notes
• Complete CSS Grid Quiz solo to test your knowledge of CSS Grid
• Spend the next few days (or weeks!) completing Build a Product Landing Page solo. Don’t forget that you can come back to improve this at a later date when you have more time.