Solution retrospective
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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @sayeedmunees
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
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