🔥 Next Level CSS 🔥

Course Files and Other Downloads

https://github.com/dtauer/infotec2018-css-workshop

WIFI:

u: Oath p: Oath: (don't forget the colon!)

Optional Downloads

https://code.visualstudio.com/

https://www.mozilla.org/en-US/firefox/developer/

https://nodejs.org/en/

Dustin Tauer

Easel Solutions

dustin@easelsolutions.com

 

Today's Workshop: 8:30 - 12:00

Using the latest CSS features [safely] today

Resources, Resources, Resources

Wes Bos

• https://cssgrid.io/
• http://wesbos.com/courses/

 

Grid By Example

• https://gridbyexample.com/

 

MDN

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

CSS Layout: Grid vs Flexbox

The Old Way

• Floats (et. al)

 

Flexbox

• Great for 1-dimensional layouts (row OR columns)
• http://flexboxfroggy.com/

 

Grid

• Great for 2-dimensional layouts (row AND columns)
• http://cssgridgarden.com/

caniuse.com

Let's make a responsive website

Tooling

• Visual Studio Code
• https://code.visualstudio.com/

 

Workflow/Bundlers

• Gulp
• Webpack
• Parcel

 

Node/NPM

 

Thanks!