Flexbox

Now that we have learned the power of flexbox we will apply it to the sites we are building. We'll also go back to a past assignment and see how flexbox would simplify our HTML and CSS.

Objectives

  • Build on your knowledge of HTML & CSS
  • Use flexbox techniques layout pages.
  • Implement, from scratch, a given design
  • Understand HTML/CSS Layout
  • Be able to place elements on a page where you want them.

Requirements

  • You should strive to implement the design as close as possible, though, especially if you've never touch HTML or CSS before, this can be extraordinarily difficult, and will take a lot of practice and mileage.

  • Note: You should complete at least the tasks given for explorer mode as listed below before turning in the assignment, as well as before attempting adventure or epic modes.

Explorer Mode

  • Revisit your Expanding Your World assignment and redo your CSS using flexbox where appropriate. Add, commit, and push those changes to your existing repository.
  • Recreate the page 'The Daily Kitteh' using flexbox as closely as you possibly can. Use the same fonts, sizes, and colors. Download some of your favorite

Adventure Mode

  • Recreate the page `Flebox Article Layout' as closely as possible.

Epic Mode

  • Recreate the page Skeleton Layout example as closely as possible.

Additional Resources