CSS - The Box Model
Livestream status
We are currently offline.
If the stream has started, you can watch it directly on YouTube. We add the recording to this page after class.
Open live stream on YouTubeInstructors: Jess, Carmen, and Eda
The Box Model
Before this session, please:
- Read Working with CSS Transforms, Overflow, and Filters: What Is Overflow in CSS, and How Does It Work? and take notes
- Read Working with CSS Transforms, Overflow, and Filters: What Is the CSS Transform Property, and How Does It Work? and take notes
- Read Working with CSS Transforms, Overflow, and Filters: What Is the CSS Box Model, and How Does It Work? and take notes
- Read Working with CSS Transforms, Overflow, and Filters: What Is Margin Collapsing, and How Does It Work? and take notes
- Read Working with CSS Transforms, Overflow, and Filters: What Is the Difference Between content-box and border-box? and take notes
- Read Working with CSS Transforms, Overflow, and Filters: What Is a CSS Reset, and What Are Some Common Examples? and take notes
- Read Working with CSS Transforms, Overflow, and Filters: What Is the CSS Filter Property, and What Are Common Examples? and take notes
- Complete all steps from Design a Rothko Painting solo over the next few days
- Complete Build a Confidential Email Page solo over the next few days
- Read CSS Layouts and Effects Review and take notes
- Complete CSS Layouts and Effects Quiz solo to test your knowledge of CSS layouts
During this session, we’ll:
- Review notes
- Review notes
- Review notes
- Review notes
- Review notes
- Review notes
- Review notes
- We’ll preview some of the steps from Design a Rothko Painting together, asking you to complete this workshop solo over the weekend
- We’ll talk about Build a Confidential Email Page together briefly, but you’ll working to complete this solo over the next few days
- Review notes
After this session, please:
- Read Working with CSS Flexbox: What Is CSS Flexbox, and When Should You Use It? and take notes
- Read Working with CSS Flexbox: What Are Some Common Flex Properties, and How Do They Work? and take notes
- Try to complete all the steps from Build a Flexbox Photo Gallery to begin to get an understanding of flexbox
- Try to complete as much of Design a Set of Colorful Boxes as you can, to reinforce your understanding of flexbox. You may need to finish this over the next few days
- Complete Design a Pricing Plans Layout Page solo over the next few days
- Read CSS Flexbox Review and take notes
- Complete CSS Flexbox Quiz solo to test your knowledge of flexbox
- Spend the next few days or weeks completing Build a Page of Playing Cards. Certification projects should show as much of your skill and style as possible.