CSS Grid Workshop

Learning Objectives

This participatory live coding workshop is made up of three lessons. Switch branches to begin each lesson.

The goal of this workshop is to t

Lesson One: Git

Install Git and Github Desktop
Configure Git
Fork this workshop to your Github user account
Clone this workshop to your local computer
Switch branches
Create a new branch
Commit a change and push it Github
git branch
git checkout branch
git remote -v
git status
git add
git commit -m
git push
git pull

Lesson Two: CSS Grid

Firefox Dev Tools
Semantic HTML
Introduction to HTML and CSS
Add CSS Grid
grid template columns
grid template rows
3 Column layout
asymetrical layout

Lesson Two: CSS Grid

grid template areas
3 Column layout

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Lesson Three: Flexbox

nav and unordered list
flex direction
- row
- row-reverse
- column
- column-reverse
justify-content (main axis)
- flex-start
- flex-end
- center
- space-between
- space-around
flex-wrap
- no-wrap
- wrap
align-items (cross axis)
- flex-start

Links

CSS

Version Control with Git