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
%andemfor 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
remfor 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, andflex-growfor 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 orderfor layout control π -
box-sizingfor consistent sizing βοΈ - Styling form elements π
Check it out here: Splash Responsive Page
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!
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:
- GitHub: 100 Days of Code Repository
- Dev.to: Toptech5419
- Medium: Alabi Temitope
- LinkedIn: Toptech9
- X (formerly Twitter): @Toptech5419
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)