Link Search Menu Expand Document
refcode-docs

Sprint 3

CSS grid, flexbox, responsive CSS

Homework Review

  • What are media queries?

  • What is flexbox used for?
    • What directions can flexbox items be ordered?
    • How can flexbox items be spaced?
  • What is grid used for?
    • How is grid different than flexbox?

Exercise: class names đź“ť

Matching class names

  1. Create a copy of the google sheet.
  2. Copy class names from the “class list” sheet (bottom) over to the correct element in the “no classes” sheet

Exercise: flexbox layout đź“ť

  1. Create a “fork” of the CSS flexbox starter template
  2. Fill out the flexbox css properties to create a layout that looks like this

Exercise: grid layout đź“ť

  1. Create a “fork” of the CSS grid starter template
  2. Fill out the css grid properties to create a layout that looks like this

Let’s talk about SASS

Sass is a CSS pre-processor. What is a pre-processor? Well it’s code that we can write that is turned into CSS code - kind of like Markdown is turned into HTML!

Why write Sass instead of css? Sass comes with a few super powers that help us write more maintainable css code. Features like variables, nesting, functions and more make it easier to manage our CSS as the number of styles grows large.

1. Install SASS

Navigate to https://sass-lang.com/install to install Sass on your computer. Looks for the command line instructions for Mac or Windows.

2. Running SASS

Sass is run using the command line. Run Sass by giving it an input .scss file and an.css file to create.

Example:

sass source/stylesheets/index.scss build/stylesheets/index.css

Experimenting with Sass

In class experiments with Sass variables and nesting.

Homework

Next week, we’ll be setting up a platform called Jekyll to build out our blog sites. Jekyll is a static site generator, but what does that mean? Read and watch the assignments below and be prepared to discuss what features Jekyll provides. In the next class we’ll install Jekyll and its dependencies and set up your Jekyll blog.

Assignments:

  • Complete Free Code Camp SASS challenges. First lesson
  • Watch this introduction to Jekyll: https://youtu.be/T1itpPvFWHI
  • Watch the setup instructions video for your computer. We’ll do the setup next week in class together:
  • Look through the Jekyll Showcase. What kinds of sites can be built with Jekyll? What kinds of pages and features do these sites have?

Sass resources

« Back to curriculum overview