From the course: Responsive Layout
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Challenge: Floats to flexbox - HTML Tutorial
From the course: Responsive Layout
Challenge: Floats to flexbox
(cymbal hissing) - [Instructor] Now that you've learned Flexbox, this challenge will let you give it a try yourself. Since Grid and Flexbox are so new, you'll likely be encountering many websites that were build before we were able to use either. Many of them use floats for layout. In this challenge, you'll have a website that was laid out using floats. It's also not responsive. Your job is to do a new responsive layout for this site using Flexbox and media queries. The new layout should have a similar layout for wider viewport widths, but you'll need to move things around for a narrower viewport width layout. You have HTML and CSS files to start. The HTML should be left as it is. Out in the real world, you'll sometimes have to make changes to existing websites where you can only edit the CSS. The CSS we're using for the old layout is in the style section of the HTML file, starting right here at line nine. It's only floats and widths, so you should delete all of this, from line nine…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Defining a flexbox container1m 53s
-
(Locked)
Direction3m 36s
-
(Locked)
Wrapping2m 30s
-
(Locked)
Ordering flex items1m 28s
-
(Locked)
Flexbox alignment overview1m 39s
-
(Locked)
Aligning items on main axis3m 16s
-
(Locked)
Aligning items on cross axis3m 35s
-
(Locked)
Aligning lines on cross axis3m 15s
-
(Locked)
Aligning individual flex items1m 38s
-
(Locked)
Distributing space to flex items4m 43s
-
(Locked)
Challenge: Floats to flexbox1m 21s
-
(Locked)
Solution: Floats to flexbox8m 17s
-
-
-