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

Blog Preview Card solution

Mostafa 50

@MostafaSaad1987

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 getting it done without taking too much time. Compared to the last challenge, at least. I tried to make it 1:1 to the images, but I had to use responsive design for smaller screens, as the card couldn't fit the screen without making it smaller. But making the card smaller would make it inaccurate to the pictures provided for the desktop version. So I made a slight sacrifice to the mobile version by making it slightly more narrow. The challenge also didn't specify which elements are interactable, so I chose the title and the author name.

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

Not much of a challenge in this one. It was actually kinda fun.

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

Any constructive criticism would be appreciated.

Community feedback

P

@antoru

Posted

Hi @MostafaSaad1987,

congratulations for your solution! Page does not start with a level 1 heading, you could improve accessibility by implementing an sr-only H1.

Keep it up! 💪🏼

Marked as helpful

1

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