Class 14 Prep

Flexbox

Flexbox is a new(er) CSS Module that enables easy mobile-first development that allows our applications to look at home in any screen size. The ability to look good (and adapt) on any screen is called responsiveness. A responsive site is one that adapts to different screen sizes, such as desktop, tablet, and mobile.

A Note on Bootstrap

Bootstrap is a front-end web framework built out of HTML, CSS and Javascript that makes building attractive, polished, and highly functional sites straightforward.

This class previously taught Bootstrap, however it is fast becoming an outdated technology. As such, we will focus our efforts instead learning the much more modern CSS module, Flexbox.

In this lesson, you'll learn a bit about Flexbox. We'll use this knowledge in class to incorporate Flexbox into Flicklist.

Done Task Resource Type Link Instructions
Watch Code Along Learn Flex-box layout in 15 minutes Code along with the video
Read Explanation A Complete Guide to Flexbox A must-read reference. Play with the in-line code examples.
Do Activity Flexbox Froggy Complete levels 1 - 24
Read Code Along CSS Media Queries Learn how to apply different CSS styles based upon the screen width