Skip to content
Submitted over 2 years ago

Responsive article preview card using HTML5, CSS3, Sass & JavaScript

Srikar Gunnam•150
@srikargunnam
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone,

I would like to get suggestions on how i used JavaScript to get the work done, is it right how i used? or is there any better way which i can go with?

Thank you... :)

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hello Srikar Gunnam ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Warp your card content around the main tag Ex: 👇
    <body>
<main class="container">
*all you content here*
</main>
</body>
    • As matt said : Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with alt.

    happy Coding😀

    0
  • Account deleted

    Hello there! 👋

    Congratulations on finishing your challenge! 🎉

    I have some feedback on this solution:

    • Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info

    • All Images must have alternate text

    i hope this is helpful and goodluck!

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 2 years ago

    @Old1337, just a quick heads up that it's not required for all images to have alternative text. They need the alt attribute, but the value can be left blank if it's a decorative image. This will ensure screen readers ignore the image.

    Images that add context to the content should always have descriptive alternative text 👍

    1

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