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.