Jen Kramer | September 12, 2019Duration: 3h 46m | Video: 1280×720, 44 KHz | 3.4 GBGenre: eLearning | Language: EnglishFor 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!This course and others like it are available as part of our Frontend Masters video subscription.

By coding along with us in the Workshop, you’ll:Learn to plan your design approach to a given page layoutUnderstand calc() and custom properties (CSS variables), including their proper use and how they differ from Sass equivalentsLearn to combine Flexbox, calc(), custom properties, and media queries to create incredibly DRY layoutsUnderstand modular scales for type, and use principles for DRY layouts to create different type sizes at different screen resolutionsCreate a CSS-only hamburger button for navigationCreate responsive tables using correct table markup and different techniques for displayCreate responsive forms that work well across devicesAny Prerequisites?You should have a solid working knowledge of hand-coded HTML and CSS, with the basics mastered completelyKnowledge of inheritance, the cascade, and CSS selectors are important.

Working knowledge of Flexbox will be useful.

You may want to watch “CSS Grids and Flexbox for Responsive Web Design” if you are not familiar with Flexbox.