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

Article preview component with Vanilla JS

Dušan Lukić 1,660

@dusanlukic404

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


This is my first challenge completed with Vanilla JS. I learned basics of JavaScript and want to practice more working with the DOM. Keep working and learning more JavaScript. It's awesome 😍 Any feedback or suggestion would be very helpful to me ❤️😊🎉

Community feedback

@zineb-Bou

Posted

Your solution looks good on different screen sizes.

  • Setting h1 as a card title may look normal on this task since the card is the only component on the page, though this card would be part of a page in real production and a website should contain only one h1, so avoid choosing h1 as a card title you could choose h2 instead.

  • The social media icons are actually links, so you should put <a/>, add text inside it and make it sr-only then hide the SVG icons from the screen reader since they are purely decorative

happy coding 🙂

1

Dušan Lukić 1,660

@dusanlukic404

Posted

@zineb-Bou yeah, of course on big project I would use only one h1. Thanks for such a helpful feedback 😀

0
Ken 935

@kenreibman

Posted

Hey! Your design and project looks great.

For your <button class="card__footer--btn"> I would add `aria-label="Name" to be more accessible. You can read more about that here

Don't forget to generate a new report after making those changes.

I hope this helps!

1

Dušan Lukić 1,660

@dusanlukic404

Posted

@lmaoken Hey Ken! Thanks for your suggestion. Appreciate it 🙌

0

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