10 Days Of Css Grid
Published 3/2025
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz
A course designed to give you the confidence in applying CSS Grid given different design scenarios.
What you’ll learn
Day 1: Form CSS Grid Design
Day 2: Multi Colored Centered Boxes CSS Grid Design
Day 3: Timeline CSS Grid Design
Day 4: Nested Grid CSS Design
Day 5: Mobile CSS Grid Design
Day 6: Keyboard CSS Grid Design
Day 7: Diamond CSS Grid Design
Day 8: Split Image CSS Grid Design
Day 9: Responsive Webpage CSS Grid Design
Day 10: Responsive Navigation Dropdown Menu CSS Grid Design
Requirements
Students should have a good understanding of how to setup and create basic HTML documents.
Students should have a good understanding of generic CSS.
A web browser is required. We will use Google Chrome and will occasionally make use of the Chrome Dev Tools.
A coding editor is required. We will use VS Code with the Live Server plugin installed.
Description
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 Additional Notes
Section 2: Day 1: Form CSS Grid Design
Lecture 3 Form CSS Grid Design Overview
Lecture 4 Form CSS Grid Design – HTML
Lecture 5 Form CSS Grid Design – CSS
Section 3: Day 2: Multi Coloured Centered Boxes CSS Grid Design
Lecture 6 Multi Coloured Centered Boxes CSS Grid Design Overview
Lecture 7 Multi Coloured Centered Boxes CSS Grid Design – HTML
Lecture 8 Multi Coloured Centered Boxes CSS Grid Design – CSS
Section 4: Day 3: Timeline CSS Grid Design
Lecture 9 Timeline CSS Grid Design Overview
Lecture 10 Timeline CSS Grid Design – HTML
Lecture 11 Timeline CSS Grid Design – CSS
Section 5: Day 4: Nested Grid CSS Grid Design
Lecture 12 Nested Grid CSS Grid Overview
Lecture 13 Nested Grid CSS Grid – HTML
Lecture 14 Nested Grid CSS Grid – CSS
Section 6: Day 5: Mobile CSS Grid Design
Lecture 15 Mobile CSS Grid Design Overview
Lecture 16 Mobile CSS Grid Design – HTML
Lecture 17 Mobile CSS Grid Design – CSS
Section 7: Day 6: Keyboard CSS Grid Design
Lecture 18 Keyboard CSS Grid Design Overview
Lecture 19 Keyboard CSS Grid Design – HTML
Lecture 20 Keyboard CSS Grid Design – CSS
Section 8: Day 7: Diamond CSS Grid Design
Lecture 21 Diamond CSS Grid Design Overview
Lecture 22 Diamond CSS Grid Design – HTML
Lecture 23 Diamond CSS Grid Design – CSS
Section 9: Day 8: Split Image CSS Grid Design
Lecture 24 Split Image CSS Grid Design Overview
Lecture 25 Split Image CSS Grid Design – HTML
Lecture 26 Split Image CSS Grid Design – CSS
Section 10: Day 9: Responsive Webpage Design
Lecture 27 Responsive Webpage CSS Grid Design Overview
Lecture 28 Responsive Webpage CSS Grid Design – HTML
Lecture 29 Responsive Webpage CSS Grid Design – CSS
Section 11: Day 10: Response Navigation Dropdown Menu CSS Grid Design
Lecture 30 Responsive Navigation Dropdown Menu CSS Grid Design Overview
Lecture 31 Responsive Navigation Dropdown Menu CSS Grid Design – HTML
Lecture 32 Responsive Navigation Dropdown Menu CSS Grid Design – CSS
Anyone looking to feel confident in designing webpages using the CSS Grid layout model.,Anyone looking to see how CSS Grid can be used given different design layouts.
