DEV Community

Cover image for ### Week 11 of #100DaysOfCode πŸš€: Responsive Designs, CSS Grid, and Solo Projects! πŸŽ‰
Alabi Temitope
Alabi Temitope

Posted on

### Week 11 of #100DaysOfCode πŸš€: Responsive Designs, CSS Grid, and Solo Projects! πŸŽ‰

This week was all about mastering responsiveness, enhancing my CSS skills, and diving deeper into building responsive layouts. Here's a summary of what I accomplished:


Day 73 βœ…

🌐 Responsive Design Basics

  • Learned the importance of relative units like % and em for scalable designs.
  • Tackled image widths and solved compounding issues with em.

Responsive design is truly πŸ”‘ to modern web development!


Day 74 βœ…

πŸ“ Typography with rem and line-height

  • Used rem for consistent font sizes across designs.
  • Focused on scalable typography for better accessibility and aesthetics. πŸš€ Also revisited core JavaScript concepts to solidify my knowledge.

Day 75 βœ…

🌐 Media Queries and Mobile-First Design

  • Explored flex-wrap, gap, flex-basis, and flex-grow for adaptable layouts.
  • Learned the power of mobile-first design in creating responsive layouts. πŸ’» Built another responsive design project here: Responsive Wrap Site

Day 76 βœ…

🌟 Building a Splash Page

  • Built a beautiful splash page inspired by Scrimba.
  • Mastered:
    • Changing text case 🎨
    • Using viewport units for responsive sizing πŸ“
    • flexbox order for layout control πŸ”€
    • box-sizing for consistent sizing βœ‚οΈ
    • Styling form elements πŸ“

Check it out here: Splash Responsive Page

Image description


Day 77 βœ…

🧱 CSS Grid Basics

  • Started learning how to build responsive layouts with CSS Grid on Scrimba.
  • Discovered the power of grid for layout controlβ€”so versatile!

Day 78 βœ…

πŸŽ‰ Advanced CSS Grid Techniques

  • Learned about grid-template-areas, grid lines, and gaps for creating complex layouts.
  • Began working on a solo project to create a responsive learning journalβ€”stay tuned for updates!

Image description

Day 79 βœ…

πŸ““βœ¨ Responsive Learning Journal Project

  • Started creating a solo learning journal project to put my grid and responsive design knowledge into practice.
  • Can’t wait to finish and share it soon!

Follow My Journey! πŸš€

You can keep up with my #100DaysOfCode progress on these platforms:

Let me know what you think and share any feedback on my projects or learning process. Let’s connect and grow together! πŸ’»βœ¨

Top comments (0)