Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Srikar Gunnamβ€’ 150

@srikargunnam

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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

@NaveenGumaste

Posted

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

T
Matt Studdertβ€’ 13,611

@mattstuddert

Posted

@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
Discord logo

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