Skip to content
Submitted 2 months ago

Blog preview card

Sunil•180
@SunilBaghel002
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • These <span> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.<span>Learning</span>

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • Your heading elements <h1><h3>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    0
  • geomydas•1,440
    @geomydasPosted 2 months ago

    Hi @SunilBagehel002, your solution and code seems good to me but it has some few issues

    My Tips and Feedback

    1. Have a folder that contains all of the assets, fonts and images. Leaving the images on the root directory is messy and it may take longer to search through files. I use this handy website for helping me self host fonts.
    2. Consider self-hosting your fonts instead of using import. Using import with Google Fonts is slower for bandwidth and it is also bad for privacy as it violates GDPR which is a real problem in websites.
    3. Your HTML needs a main landmark. Replace the .container div with a main tag instead. Every website should have atleast 1 <main> tag or landmark to indicate the main content which is very important and crucial for accesibility and screen readers
    4. Never set fixed widths and heights! A fixed width or height such as height: 500px should never be used. You would only used fixed heights for elements that will never shrink or grow and are very small such as profile pictures. Also, there isn't really a need to set height here. The images, text, paddings, spacings, margins will already take up the height themselves. If you really need to set a height, consider using min-height instead. For the widths, you would typically use a combination of both width and max-width. What I would do is width: 100% and then set a max-width on it so it can shrink. Using fixed widths and heights is unresponsive and may cause overflow issues too
    5. Use the rem unit in place of px. Typically, you would use the px unit for very small stuff such as shadows, filters, blurs, borders and outlines. You would typically use the rem unit the rest. To be specific, you would use the rem unit if you want it to scale with the users set font size in the browsers setting which is the case most of the time
    6. Never ever set typography related properities in px! See why.
    7. Use CSS custom properties or variables for the colors. This makes your colors much more reusable. Even if you think it will only be used once, it will likely be reused again so it is better to be safe than sorry. Most sites reuse colors and sizes too!
    8. Use the colors provided in the style-guide.md file. Don't use the HTML default colors such as grey since they lack clarity and using #hex, rgb, hsl is better instead
    9. Don't use element selectors that much unless it is general styles and it is not specific. Your span tag will likely be used again in a real site and more than once. You can just add a class to it and style it there
    10. Consider checking out the BEM methodology. Check if it can help you write more maintanable CSS and write better classes inside your HTML. It might be verbose but it makes your CSS infinitely more readable. It's not for everyone though but it is the industry standard.
    11. Replace the span tag with "Learning" with a link instead. In real sites, clicking on it will take you to a page with topics of "Learning", you can see this pattern in most news and article sites.
    12. Nest a link inside the h1. This is a blog card, hovering on the header changes the color and you should expect it to do an action. In a real site, clicking on it will take you to an article called "HTML & CSS foundations". Once again, you can see this in most news sites
    13. No need to use more divs. You can apply the styles on the .container element on the body. Replace height: 100vh with min-height: 100vh aswell so that the viewport grows and doesnt hide the content on smaller screen sizes. After removing the .container element and applying the styles on the body, make the .box element a main tag instead. For the .content div, there is no need to use flexbox and you can just use margins on the heading. Same goes to the .image div. Don't use gaps for everything. You would typically use flexbox if you want equal spacing between 3 or more elements, if you want it to be layered horizontally like the profile section.

    That is all and make sure to change your code after receiving this feedback. Have a nice day and have fun coding!

    0

Please log in to post a comment

Log in with GitHub

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