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

Frontend Blog preview card challenge

@fahadali323

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?

I am proud of the fact that I am no longer Crtl + C and Crtl + P the webpages and coming with the solutions myself. It seems styling is not my cup of tea as it can be quite frustrating when things don't go the way you expect.

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

The only challenged I faced was figuring out when to apply which css properties too. At first it seems like it is easy when you look at the design but onces you start, it can be overwhelming.

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

I would suggest to provide with the css properities that would be needed, so this way it eliminates the time spending out which properties to use and instead we can focus on the development. Although, I guess googling is part of figuring out how to style your pages.

Community feedback

P
Rahul Das 30

@krkfpo

Posted

Hi Fahad, great job in doing the Semantic HTML and CSS . I checked your code and found a few bugs :

  1. When switched to mobile view, the card was overflowing the screen , as the width of the card is made static. Keep the width in rem.
  2. Add a padding : 1em in body so that the card doesn't touch the edges in smaller viewports.
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