Advanced CSS Layouts

For the first time in the history of the web, CSS is graced with tools for laying out web pages without hacks. Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. CSS Calc and CSS Custom Properties give us a first chance to use math and variables within CSS itself, without requiring compiling. Together, these four new CSS modules work together to revolutionize the way we lay out web pages with CSS!

• Introduction
• Flexbox Review Exercise
• Flexbox Review Commentary
• Flexbox Review Solution
• CSS Grid Review Solution
• CSS Flexbox & Grid Review Q&A
• Off-Canvas Menu Setup
• Off-Canvas Menu HTML
• ARIA Attributes for Accessibility
• Aligning Navigation Items
• Off-Canvas Menu Styling
• Click Events with CSS
• Media Query Breakpoint Styles
• CSS Calc()
• CSS Custom Properties
• Sass vs CSS Custom Properties
• Refactoring a Layout: Calc() & Custom Properties
• Refactoring a Layout: Applying Custom Properties
• Refactoring a Grid System: Bootstrap is Dead
• Applying Custom Properties & CSS Calc()
• Identifying Patterns & Creating a Grid
• Responsive Column Reordering
• Responsive Element Items
• Article Layout Exercise
• Article Layout Solution
• Type Scale
• Custom Properties Type Scale
• Type Scale Exercise
• Type Scale Solution
• Basic HTML for Tables
• Basic CSS for Tables
• :before & :after
• Table Title & Media Queries
• Responsive Tables Layout Exercise
• Responsive Tables Layout Solution
• Responsive Forms Exercise
• Responsive Forms Solution
• Wrapping Up