From the course: Responsive Layout

Unlock the full course today

Join today to access over 23,100 courses taught by industry experts.

Challenge: Floats to flexbox

Challenge: Floats to flexbox - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial Buy for my team

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…

Contents