Skip to content
OverviewSolutions
6
Comments
5

Sayeed Munees

@sayeedmuneesIndia130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Sayeed Munees•130
    @sayeedmunees

    Hey your site looks so great. A few things I noticed are that your design are having some small different here and there from the actual design. What I noticed the border radius is different and also the profile picture is little larger in your design.

    Marked as helpful
  • Keerty Verma•20
    @keertyverma
    What are you most proud of, and what would you do differently next time?
    • I'm most proud of the clean and semantic HTML structure I implemented, ensuring accessibility and ease of understanding for other developers.
    • Additionally, using CSS custom properties and the BEM model helped maintain a modular and scalable codebase.
    • However, next time, I would focus more on optimizing performance by improving image loading techniques for better page speed.
    What challenges did you encounter, and how did you overcome them?
    • One challenge was to achieve the desired layout responsiveness while maintaining code readability and maintainability.
    • To overcome this, I followed a mobile-first approach, utilizing flexbox for layout and employing media queries to adjust styles for different screen sizes.
    What specific areas of your project would you like help with?
    • I would appreciate suggestions for enhancing the design and user experience.
    • Finally, feedback on accessibility improvements beyond basic semantic HTML would also be welcomed.

    Responsive Blog Preview Card using HTML & CSS

    1
    Sayeed Munees•130
    @sayeedmunees

    Amazing, it looks so accurate to the actual design. I think you forgot to add box-shadow transition when hovering over the card.

    Marked as helpful
  • shadazls•200
    @shadazls
    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.

    Blog preview card

    1
    Sayeed Munees•130
    @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
  • Sayeed Munees•130
    @sayeedmunees

    I liked the way you used the root for colors and font.

  • Piyush•90
    @PiyushYadavPY
    What specific areas of your project would you like help with?

    Hi, The only issue I am facing is the project is not repsonsive, it will be very helpful if you can tell me the CSS properties and rules to make the project reponsive.

    FAQ

    1
    Sayeed Munees•130
    @sayeedmunees

    Talking about responsiveness, it will be better to take a look at media queries. Media queries are used to make a website responsive. Maybe Youtube or MDN web Docs could help you.