05 - 03 - Flexbox flexing

[RobMack8932]

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

Explorer Mode

• [ ] Recommended: Go through the Flexbox Froggy and Grid Garden resources at the end of this homework.
• [ ] Recreate the page 'The Daily Kitteh' using flexbox and grids as closely as you possibly can. Use similar fonts, sizes, and colors. Feel free to use any cat photo you wish, just respect the relative size of the photo.
  • 

Adventure Mode

• [ ] Recreate the page Flexbox Article Layout as closely as possible. Feel free to use flexbox, or grids, or both if needed. Here a link to the HTML

Additional Resources

• CSS-Tricks guide to flexbox
• CSS-Tricks guide to grids
• http://www.evolutionoftheweb.com

Recommended Practice:

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

[RobMack8932]

https://kitteh-robma.netlify.com So close but so far

[gstark]

Yes, you don't have a single parent element that wraps the paragraphs as one element and the cat as the other.

You want a structure like this:

PARENT
   CHILD-FOR-PARAGRAPHS
     <p>
     <p>
   CHILD-FOR-CAT
      <img>
      <p>
      <ul>

Then you can make PARENT as display: flex and CHILD-FOR-PARAGRAPHS and CHILD-FOR-CAT will be flex-ed in a row side-by-side.

[RobMack8932]

Your homework 05 - 03 - Flexbox flexing was marked: Needs Improvement

“Almost there, keep it up!”

[RobMack8932]

https://kitteh-robma.netlify.app

[RobMack8932]

Your homework 05 - 03 - Flexbox flexing was marked: Meets Expectations

“Well done!”

[gstark]

Thanks for finishing this!