Expand Your CSS Toolkit with Flexbox | J Silverstein | Skillshare

Expand Your CSS Toolkit with Flexbox

J Silverstein, User Interface Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Videos (1h 22m)
    • Introduction

      1:37
    • Setup & Tooling

      6:57
    • HTML Refresher & HTML5 Semantic Elements

      4:20
    • CSS Review & reset.css

      6:43
    • Flexbox: A New Context

      4:58
    • Main Axis, Cross Axis

      2:25
    • Flex Properties: flex-direction, flex-wrap

      3:48
    • Flex Properties: align-items, justify-content

      4:36
    • Flex Properties: flex-grow, flex-basis, order

      7:06
    • Flexbox Froggy

      1:59
    • The Holy Grail Layout

      5:27
    • Responsive Design

      5:25
    • Implementing Responsive Design: Media Queries

      3:50
    • Layout 101

      3:04
    • Full Build Demonstration

      18:15
    • Outro

      1:09

About This Class

This course introduces CSS3 Flexbox. Flexbox is a new layout system that makes designing mobile-responsive sites extremely simple. Mobile-first design is the future of the web, and learning flexbox sets you well on your way to designing mobile-friendly sites with ease.

While covering the properties and values that make up flexbox, this course also introduces developer tools like the command line and text editors, as well as the philosophy behind responsive design. Then, all our new knowledge is applied to build a site using CSS3 Flexbox.

Throughout the course, I make frequent mentions of the course resource materials. Those resources can be accessed here. I recommend making use of them!

What You'll Learn

  • Command line basics & how to use a text editor
  • Flexbox properties: align-items, justify-content, and more.
  • Responsive design theory and media query syntax

What You'll Make

You'll build a one-page site about a topic of your choosing -- for example, a cafe or other small business, your portfolio, something you're interested about, etc. Then, you'll wireframe, structure, and style it, using CSS Flexbox.

Other Course Details

  • This course is best for people who are already familiar with HTML and CSS.
  • This course is best for people who are comfortable with navigating their file system.
  • I use MacOS throughout the course, and include instructions for people who are using Windows or Linux.

 

21

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

J Silverstein

User Interface Developer

Hello, I'm J. I'm an art director turned front-end developer located in New York City. Currently, I teach web development at General Assembly and do user interface development for J.Crew; in the past, I've overseen designers and developers as the art director of a web agency.

As a formally trained artist and a practicing developer, I relish exploring the ways in which art and code intertwine. I have an an affinity for mazes, maps, and puzzles; a to-read list that ranges from pulp sci ...

See full profile

Technology Web Development
Report class