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 blog preview card

P
Darius 50

@dariushill

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?

A proud moment for me in this project was centering the card inside the main container and centering the items within the card using Flexbox. I struggled with Flexbox on the first challenge (QR Code), but now it's starting to come together for me. I need to continue with challenges to solidify my knowledge.

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

The first challenge I encountered on this project was downloading the font. I researched the issue and resolved it. The second challenge was aligning the avatar image and the author name. After some research, I realized I could use Flexbox to center the items in the container and add a gap between the avatar image and the author name.

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

I could use some help with responsive design best practices. I used media queries to satisfy the project requirements, but I don't think that's the best approach. How would seasoned developers tackle this?

Community feedback

@patilprem21

Posted

Does the layout look good on a range of screen sizes? yes

Is the code well-structured, readable, and reusable? yes

0

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