GDI Logo

Welcome to Girl Develop It

CSS Grid Basics

Tinuola Awopetu

Frontend Developer

Anne Katzeff

Web Designer, Artist, Entrepreneur

Favorite Pet Breed?

Gray cat with a paw on the face of a brown pit bull
Image Credit: Kevin Turcios (Unsplash)

Before we start...

  • Display your preferred name and/or pronoun
  • Participate and experiment (This is CSS!)
  • Every question is important
  • Have fun!

Course Goals

  • Get comfortable exploring and using CSS Grid
  • Gain a new powerful tool to build unique layouts
  • Learn to develop more creative or easier approaches to solve layout challenges

Course Outline

  • Introduction to CSS Grid
  • Learn and work with CSS Grid Syntax
  • Understand when to Flex and when to Grid
  • Explore Common Layout Solutions with CSS Grid
  • Demos and Practice!
  • Build a final project
Photo credit: Daniel McCullough (Unsplash)

Self Assessment

Photo credit: William Warby (Unsplash)

What's your experience with CSS Flexbox?

  1. Minimal to no experience
  2. Use it, but don't always understand its behavior
  3. Comfortable with it, but could learn more
  4. I'm a Flexbox Ninja! 🥷

What's your experience with CSS Grid?

  1. Heard of it, but have yet to learn about or use it
  2. Have basic knowledge but it's still fairly new to me
  3. Use it freqently, but would like more practice
  4. I'm a CSS Grid Guru! 🔥