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

• Firefox
• MDN CSS Grid Layout
• MDN Flexbox
• A field guide to flexbox by Joni Trythall
• Flexbox Cheatsheat Cheatsheet by Joni Trythall

Version Control with Git

• Software Carpentry introduction to Git for novices
• What is version control and why should I use it?
• Download Git
• Setting Up Git