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

shadazls 200

@shadazls

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?

Given my current skill level, I use these projects as simple entertainment and reminders for the basics, so I'm not particularly proud of anything. However, I think I would use Bootstrap for responsiveness next time.

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

I find it frustrating that not all color values are provided in projects. For instance, in this project, the border color of the card isn't specified. Additionally, I often struggle with whether to strictly adhere to provided specifications, such as font sizes, to accurately replicate the project. However, due to differences in screen resolutions, following exact measurements may not yield the same result. For example, instead of using fixed pixel values for elements like the card dimensions, I calculate the percentage value from Figma and implement it in my code, but this doesn't always produce the intended outcome.

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

I would appreciate assistance with responsive design and utilizing flexbox effectively.

Community feedback

@sayeedmunees

Posted

The dimensions of the card are so accurate, as well as the dimensions of the image. When screen size the contents are coming outside the card, you may can fix this by, not hard coding the height and width. Also, try using media queries to make the webpage responsive. Check out this MDN web docs link to know more - (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries). You may learn more about it from YouTube too. Talking about color you may can use a color picker to make it similar to the given. Front-end Mentor provides a style guide, which contains the colors used.

Marked as helpful

0

shadazls 200

@shadazls

Posted

@sayeedmunees

Thanks for your reply, I am going to start the learning path about responsive, I will check the documentation link you sent me about media_queries thanks !

Also I know about the style-guide but since I am colorblind, I don't know which color I should use and where, so I am now using a color picker.

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