YoVDO

CSS Grid

Offered By: Independent

Tags

HTML & CSS Courses Web Development Courses Flexbox Courses Responsive Design Courses CSS Grid Courses

Course Description

Overview

CSS Grid is a brand new layout system in CSS! It's not a framework or library - it's an addition to the language that allows us to quickly create flexible, two dimensional layouts.

We can use it to place, size, align and architect designs that were previously difficult or even impossible with floats or flexbox.

CSS Grid may seem a bit daunting with new syntax and layout ideas, but it's fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create layouts for the web forever.

Ready?! Let's Learn CSS Grid Together!


Syllabus

  • Welcome!
  • Starter Files and Tooling Setup
  • CSS Grid Fundamentals
  • CSS Grid Dev Tools
  • CSS Grid Implicit vs Explicit Tracks
  • CSS grid-auto-flow Explained
  • Sizing tracks in CSS Grid
  • CSS Grid repeat function
  • Sizing Grid Items
  • Placing Grid Items
  • Spanning and Placing Cardio
  • auto-fit and auto-fill
  • Using minmax() for Responsive Grids
  • Grid Template Areas
  • Naming Lines in CSS Grid
  • grid-auto-flow dense Block Fitting
  • CSS Grid Alignment + Centering
  • Re-ordering Grid Items
  • Nesting Grid with Album Layouts
  • CSS Grid Image Gallery
  • Flexbox vs CSS Grid
  • Recreating Codepen
  • Bootstrappy Grid with CSS Variables
  • Responsive Website
  • Full Bleed Blog Layout

 


Taught by

Wes Bos

Related Courses

Advanced CSS Concepts
Microsoft via edX
Тонкости верстки
Moscow Institute of Physics and Technology via Coursera
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Udemy
Build Responsive Real-World Websites with HTML and CSS
Udemy
HTML5 & CSS3 Build: Two Responsive Websites in Hindi
Udemy