Uploaded April 2020 | Updated September 2026, 41 minutes ago

---

Introduction: 00:00:04
UI Sketch Sheet Download: 00:00:50
Document Setup: 00:01:09
Google Font Import: 00:01:53
Type Scale: 00:04:21
Header, Logo + Navigation: 00:06:15
Hero Section + Animation: 00:10:12
The Grid Section using CSS Grid: 00:14:34
The Colour Section using CSS Grid: 00:18:22
Up Next + Conclusion: 00:20:50

///

In this video, we’ll take our existing UI style guide from our e-commerce web design assignment and code a HTML and CSS prototype using a combination of CSS Grid + Floats.

///

Download: UI UX Sketch Pad Sheets – mark-anthony.ca/wireframe-sketch-pad-sheets

View Project Folder Infographic: dropbox.com/s/0i3nc2kd2gplznj/folder-structure.pdf?dl=0

Download: Web Template File – dropbox.com/s/b719tx4p0i0m93j/html-css-template-start.zip?dl=0

***Read the code notes + slide deck in our course lesson files on Blackboard.

Music by: DAF for EdTechXD