CSS - Grid Part 2
Instructors: Jess, Carmen, and Eda
Grid
Before 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.
During this session, we’ll:
- We’ll look at Design a Newspaper Layout together to prepare you to complete this lab on your own. We’ll also talk about lorem ipsum
- Review notes
- Review notes
- We’ll look at Build a Product Landing Page together to help prepare you to complete the certification project on your own.
After this session, please:
- Read Animations and Accessibility: What Are CSS Animations, and How Do They Work? and take notes
- Read Animations and Accessibility: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help? and take notes
- Try and complete all the steps from Build an Animated Ferris Wheel
- Complete Build a Moon Orbit solo over the next few days
Instructor notes
Design a Newspaper Layout
We’ll take a look at this exercise that lets us practice some of the CSS Grid concepts that we’ve learned!
Debugging CSS: How Can You Use the DevTools Inspection Tool and CSS Validators to Debug Your CSS?
Using DevTools, we can inspect and modify CSS in real time. We can inspect a specific element, and see all the applied style rules in the Styles tab and experiment with the values.
With DevTools, we can also simulate different screen sizes and devices, which is good for testing the responsiveness of our designs.
CSS validators also exist online, such as W3C’s CSS Validation Service. They can be useful to check for syntax errors in our CSS.
CSS Grid Review
In this unit, we’ve explored:
- CSS Grid basics
- Debugging CSS
Build a Product Landing Page
In this exercise, we’ll practice some HTML and CSS concepts such as media queries and flexbox!