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

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

• 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

[geekboyisonnow]

Daily Kitteh

https://github.com/geekboyisonnow/daily-kitteh

Feedback, please

https://daily-kitteh-kenny.surge.sh/

[gstark]

This looks good. My feedback would be to try to match the design more closely. This is going to be a task of a full-stack or front-end engineer on the job. You will receive designs as Photoshop files, PDFs, etc. and be asked to create those designs in HTML, CSS, and JavaScript. In that scenario your task is to replicate the design in as much fidelity as possible (while providing feedback to the designer about what elements might be difficult to achieve in CSS)

[gstark]

Your homework was marked: Meets Expectations

“Gavin Approved!” — via Jason L Perry