Layout Challenges

Combine everything you've learned to create real-world layouts!

Challenge 1: Card Component

Build a complete card with header, content, and footer:

Challenge 2: Holy Grail Layout

Create the classic header-sidebar-main-footer layout:

Challenge 3: Media Object

Create a classic media object (image + text):

Challenge 4: Pricing Table

Create a pricing comparison grid:

Challenge 5: Split Screen

Create a 50/50 split layout:

Congratulations!

You've completed all the CSS Selectors & Layout challenges! You now have strong skills in:

• CSS Selectors (element, class, ID, attribute, pseudo-classes)
• Combinators (descendant, child, sibling)
• Specificity rules
• Flexbox layouts
• CSS Grid layouts
• Real-world layout patterns

Keep practicing by building your own projects!