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

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX