YoVDO

CSS Grid Intro and Basic Layout Tutorial for Beginners

Offered By: Dave Gray via YouTube

Tags

HTML & CSS Courses Web Development Courses CSS Grid Courses

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 Fundamentals
World 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