Week 01 Day 3 - Flexbox

[gstark]

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

• [x] Revisit your exploring your world assignment and redo your CSS using flexbox where appropriate.
• [x] 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

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

Epic Mode

• [x] Recreate the page Skeleton Layout example as closely as possible.
  • 

Additional Resources

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://www.evolutionoftheweb.com

Recommended Practice:

• https://flexboxfroggy.com/
• https://mastery.games/p/flexbox-zombies

[JOLee83]

https://github.com/JOLee83/the-daily-kitteh.git the-daily-kitteh-justin.surge.sh

just part of the assignment

[JOLee83]

Adventure Mode: https://github.com/JOLee83/flex-box.git http://flex-box-justin.surge.sh

[JOLee83]

The rest of Explorer Mode, I may try Epic Mode tomorrow.

https://github.com/JOLee83/hobbies.git http://hobbies-justin.surge.sh

[JOLee83]

Epic Mode: http://epic-day-3-justin.surge.sh https://github.com/JOLee83/epic-day-3.git

[gstark]

Awesome work!

[gstark]