Core Interaction

# But first, some more dev tools

# VS Code

# Codepen

  • CodePen is a great tool for rapid coding when an idea hits you

    Using CodePen in Class

    You may use CodePen for your in-class exercises but I need to be able to find them. Please add a link to your CodePen (make sure it works) in a markdown.md file in your Lab sub-folder of your course repository. CodePen is NOT allowed for homework assignments unless otherwise noted

# Layout and Positioning

# Advanced Positioning

Activity! Mondrian

Create a Mondrian without flexbox or grid. Only use position and/ortransform in CSS.

Here's the link to Andrew's completed in-class Mondrian with position: absolute on the boxes

# Layout in CSS

There are plenty of ways to create a layout in CSS, from hacky old-school float to modern css grid. We are going to familiarize ourselves with the modern approaches like display: flex and display: grid as these are the most powerful techniques to building a beautiful site.

# Flexbox

Review Homework

How did everyone enjoy Flexbox Froggy? Let's do a few examples!

# CSS Grid

Activity! CSS Grid

By the same makers of Flexbox Froggy, comes Grid Garden. Let's work through of few of these as a class to understand CSS Grid. It is more complex, but much more powerful, than Flexbox.

Activity!

Let's rebuild our Mondrian with Grid. Andrew to present completed version but take some time playing around with it on codepen to really understand how it's working.

Here's the link to Andrew's completed in-class Mondrian using display: grid

# Some good CSS Grid Resources

Last Updated: 2/14/2020, 11:58:52 PM