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 |