Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive page using CSS Flexbox and Media Query

P
Ann 80

@anastDev

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

What are you most proud of?

I’m really proud of sticking with it and getting the card layout just right. Even though I hit some bumps along the way, I kept my commitment to using Bootstrap for the UI and tried hard to match the design as closely as possible. I’m also happy with how I used CSS variables and Flexbox to make the code cleaner and more responsive compared to my first project.

What would you do differently next time?

Next time, I’d experiment with different approaches for card layouts and responsiveness, maybe trying out new frameworks or libraries to make things more flexible and efficient. I’d also work on fine-tuning my use of CSS variables and Flexbox to make the code even smoother and easier to maintain.

What challenges did you encounter, and how did you overcome them?

I had a bit of a mix-up with rem and em units, especially when it came to understanding their roles in accessibility and responsiveness. To get past this, I dove into the documentation and did some research to clarify their differences.

Another challenge was getting my GitHub Pages site to display correctly. I found that even a tiny mistake, like a misplaced period, could mess things up. This experience taught me to pay closer attention to the small details and double-check everything before pushing updates.

What specific areas of your project would you like help with?

I’d really appreciate some feedback on how I’m using "em" and "rem" units. I want to make sure I’m using them effectively and understanding their impact on responsiveness and accessibility.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord