Join James Williamson for an in-depth discussion in this video Challenge overview, part of CSS Flexbox First Look.
At the end of each chapter I'm going to give you a challenge that will allow you…to test what you've learned against a real world application.…You know, in most flexbox demos and examples that you'll see, you're going to…see exactly what you've seen so far in this course which is just simple boxes…arranged in a row or a column. Well, that would be great if all you…designed were pages with multiple boxes on them, but I'm guessing that doesn't…accurately describe many of your web projects.…So for the challenges I decided to replicate a common project which is a…simple blog design. So here I have the index file opened up…from 01_07 which is our first challenge, but this is just a review of what you'll…be working on in your challenges. I just want to point out a few really…interesting features about this blog and this layout.…
First things first, there is not a single float or positioned element in this entire…blog layout. This is all, every bit of the layout's…being controlled through the use of flexbox.…
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers
Skill Level Beginner
1. Flexbox Basics
2. Element Flexibility
Defining display ratios3m 14s
3. Controlling Alignment
4. Element Display Order
Additional resources3m 59s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.