Bachelor of Fine Arts in Illustration and Digital Photography
Online CSS Flexbox Course course at Sessions College

Online CSS Flexbox Course

30 hours

5415: Advanced CSS Layouts

Create responsive flexbox layouts with powerful CSS techniques

Looking to take your CSS to the next level? In this online CSS course, you'll learn how to utilize flexbox, a new set of CSS properties that easily adapt to different screen sizes and different sizes of content, providing limitless, robust ways to structure page content, and design navigation, column-based layouts, even sticky footers! Working with an expert instructor, you'll study how to how to use flexbox with scalable vector graphics (SVG) and CSS3 animation, adding interactive and creative power to your Web graphics.

Coding with flexbox

Course At A Glance

Course Features

  • 100% online
  • Project-based
  • Instructor-led
  • Study at your own pace
  • Complete this course in 3-4 weeks


The course is taught by the following instructor(s):

Course developed by: Piper Nilsson

Take this course as a standalone or as part of the following program(s):

Course Projects

    1. Getting Started with Flexbox

      Back when the original CSS (Cascading Style Sheets) specification was written in 1994, smart phones, tablets, and Internet TVs hadn't been invented. How will CSS adapt to a multiscreen future? Lesson One has solution: an emerging set of CSS properties called flexbox. The lecture begins with an exploration of what flexbox is and what kinds of design problems it solves. You'll learn how to use flex container properties to design the major elements on a page. Then you'll explore the benefits of using SVG images to create efficient, high resolution, animated graphics.

    2. Flexbox in Action

      It's time to fine-tune flexbox layouts using flex item properties. Flexbox allows you to create layouts that produce consistent results for different screen sizes - even if your content varies from page to page. Lesson Two explores how to define the size of each flex item and create layouts that reorder elements depending on the user device. As you'll discover, nesting your flex containers can help you achieve complex layouts and smoothly integrate page content with other standard elements such as navbars, columns, and sticky footers.

    3. Production and PostCSS

      In order to produce your flexbox sites, you need to know how to add prefixes to make your site work in back-level browsers. In Lesson Three, you'll learn how add vendor prefixes to make flexbox accessible in as many browsers as possible. Using an automated task runner tool called Grunt, we can concatenate and minify our files so they load super fast. Learning to use this software will open up a world of possibilities: adding browser prefixes, concatenation, minification, and optimization. You'll wrap up the course with an expanded look at the many options for SVG animation.

Sample Student Work

Benjamin Glinksy bike shop site design by Benjamin Glinsky

Course Outcomes

What Are The Course Projects?

Create a custom small business site using CSS and flexbox to produce a unique design and logo.

What Software or Supplies Do I Need?

To take this course you'll need:

  • Computer with Internet connection.
  • Adobe Photoshop or equivalent digital imaging program.
  • Experience in coding HTML and CSS.

What Will I Learn?

Students in this course can expect to learn to:

  • Define what flexbox is and what it is used for.
  • Make flexbox sites and SVG images accessible for older browsers if needed.
  • Use flex container properties to create flexible layouts.
  • Define the benefits of using SVG images compared to other image types.
  • Create an SVG image and animate it for the Web using CSS3 transitions
  • Use flex item properties to size and align content.
  • Use mobile queries and CSS to adapt layouts for mobile devices.
  • Use flex shorthand to write more compact code.
  • Use order settings to arrange the display order of flex items.
  • Use nested flex containers to create complex layouts.
  • Use flexbox to create navigation bars, 2 and 3-column layouts, and sticky footers.
  • Explore some creative applications for SVG animation.
  • Explore the benefits of using Grunt for Web production.
  • Install Grunt software and project files.
  • Use Grunt to concatenate and minify JavaScript and CSS files, add browser prefixes and fallbacks for rem units, and optimize GIF, JPEG, and PNG images.

Getting Started

Course Registration

  • Enroll today, start tomorrow
  • Study at your own pace
  • Complete within 3 months

Course Tuition and Fees 
Registration Fee* $50
Total Course Price $669

Registration fees are nonrefundable after 5 days from enrollment. All tuition includes a digital materials fee for course content.

Click Register Now to enter your information and desired start date. An Admissions Advisor will contact you to arrange payment and provide you with an Enrollment Agreement.

Frequently Asked Questions (FAQ)


What Are The Courses Like?

Our courses are project-based. There are no set logins, so you can study at your own pace. In each course you’ll complete a series of lectures and projects designed to stretch your creative skills.

How Much Time Do I Need?

This course can be completed in 30 hours or less. You’ll have three months from enrollment to complete the course studying at your own pace. Extensions are available for those who need more time.

Who Are The Instructors?

Our courses are developed and taught by our faculty of professional artists, designers, and photographers. You’ll learn in-demand skills, get feedback on your work, and build a portfolio of creative work.

Is Sessions College accredited?

Yes. Since 2001, Sessions College has been accredited by the Distance Education Accrediting Commission (DEAC). The Distance Education Accrediting Commission is listed by the U.S. Department of Education as a recognized accrediting agency and is recognized by the Council for Higher Education Accreditation (CHEA).