CSS Grid Intro and Basic Layout Tutorial for Beginners
Offered By: Dave Gray via YouTube
Course Description
Overview
Learn the fundamentals of CSS Grid in this beginner-friendly tutorial. Explore essential grid properties and create a basic layout using CSS Grid. Start with the quickest way to apply a grid, then dive into grid-template-columns, grid-auto-rows, and gap properties. Master grid positioning with grid-column and grid-row, and use dev tools to visualize your grid. Discover how to create complex layouts using grid-template-areas and experiment with various layout properties. Conclude by practicing your new skills with the interactive CSS Grid Garden game.
Syllabus
Intro
Welcome
Setup & Starter Code Review
Quickest way to apply a grid
grid-template-columns
grid-auto-rows
grid-template-rows, grid-auto-columns
row-gap, column-gap, gap
grid-column-start & end, grid-row-start & end
Viewing your grid in dev tools
grid-column, grid-row shorthand
align-content, justify-content, place-content
Adding HTML for grid-template-areas
grid-template-areas, grid-area
Experimenting with layout properties
CSS Grid Garden
Taught by
Dave Gray
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