Skip to content
Submitted about 2 months ago

blog preview card

cndofx•50
@cndofx
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 about 2 months ago

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • 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,

    • 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 <div> 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.

            <div class="category text-4">Learning</div>
        <div class="publish-date">Published 21 Dec 2023</div>

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    • For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    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! 🌟

    Marked as helpful
    0
  • Robert Forbes•70
    @RoboticDinosaurPosted about 2 months ago

    The code is well structured with clear class names, which helps with readability. I like the use of semantic HTML elements, like the use of <article>. However, there is a downside, which is it not being response. It doesn't adjust correctly for mobile, which is required with different widths and font sizes on mobile devices. Addressing this will make this an excellent demo.

    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