CSS - Responsive Design

Instructors: Jess, Carmen, and Eda

Responsive Design

Before this session, please:

• Read Best Practices for Responsive Design: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox? and take notes
• Read Best Practices for Responsive Design: How Do Media Queries Work, and What Are Some Common Media Types and Features? and take notes
• Read Best Practices for Responsive Design: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design? and take notes
• Read Best Practices for Responsive Design: What Is the Mobile First Approach in Responsive Web Design? and take notes
• Try to complete the steps from Design a Piano before class
• Read Responsive Web Design Review and take notes
• Complete Responsive Web Design Quiz solo to test your knowledge of responsive web design
• Plan and complete Build a Technical Documentation Page over the next days or weeks

During this session, we’ll:

• Review notes
• Review notes
• Review notes
• Review notes
• We’ll review core concepts and steps from Design a Piano to share the joy of making a piano
• Review notes
• We’ll break down possible approaches to Build a Technical Documentation Page to help you approach this certification project confidently

After this session, please:

• Read Working with CSS Variables: What Are CSS Custom Properties, and How Do They Work? and take notes
• Read Working with CSS Variables: What Is the @property Rule, and How Does It Work with Fallbacks? and take notes
• Try to complete as many steps from Build a City Skyline before class. This workshop is big and you may need to complete this over the next few days
• Complete Build an Availability Table solo over the next few days. Make sure you don’t just copy the example, think before using green.
• Read CSS Variables Review and take notes
• Complete CSS Variables Quiz solo to test your knowledge of CSS Variables