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 |