Refactoring with CSS Grid
Offered By: JSConf via YouTube
Course Description
Overview
Explore the practical application of CSS Grid in production environments through this 18-minute conference talk from CSSconf EU 2018. Discover how to refactor large-scale websites using CSS Grid while maintaining support for Internet Explorer and older browsers. Learn techniques for implementing pure CSS layouts, leveraging @supports for browser compatibility, and utilizing simple fallback layouts. Gain insights into the benefits of CSS Grid over traditional float-based layouts and JavaScript-dependent solutions. Examine real-world examples of CSS Grid implementation, including strategies for cross-browser testing and progressive enhancement. Delve into upcoming CSS features like display:contents and subgrid, and understand their potential impact on future refactoring efforts. Acquire knowledge on integrating CSS custom properties alongside Grid layouts for more flexible and maintainable stylesheets.
Syllabus
Introduction
Progressive Enhancement
Order Radius
Modern Example
Layout
Back in 2016
Internet Explorer
Sidebar
Make it look the same
Why use CSS Grid
Third example
Stripe
Edge stats
Open Edge
The Guardian
Nature Calm
Pure HTML
Media Query
IE vs Chrome
Cross browser testing
Browser Stack
Cutting Mustard
CSS without Grid
Benefits of CSS Grid
Form Elements
Display Contents
Edge Support
SubGrid
Grid vs Bridge
Taught by
JSConf
Related Courses
HTML5 and CSS FundamentalsWorld Wide Web Consortium (W3C) via edX Build Responsive Real-World Websites with HTML and CSS
Udemy HTML5 & CSS3 Course: Build Responsive Websites from Scratch
Udemy Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Udemy Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Udemy