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 Vanilla JavaScript, and Flexbox

P
Eileen dangeloโ€ข 1,600

@Eileenpk

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


I had fun with this project and I'm proud of the JavaScript I wrote for it. I feel like my CSS got a little messy if anyone can take a look at it. I normally separate the images from the main content but with this project, I didn't because I thought it made it hard to follow what I was doing. Comments or suggestions? Thanks, everyone!

Community feedback

P
ApplePieGiraffeโ€ข 30,565

@ApplePieGiraffe

Posted

Hey, Eileen dangelo! ๐Ÿ‘‹

Great work on this challenge! ๐Ÿ‘

Here are a few things I'd like to suggest,

  • Setting the width of the card component in this challenge to 100% and then adding a max-width to it to prevent it from becoming too wide when there's plenty of space around it. This is often better than setting the width of the element to a fixed value or percentage because it'll ensure that the element takes up as much space as it should be allowed but also shrinks accordingly when its parent element shrinks.
  • You'll want to add some padding to the inside of the body to make sure there's space between the edges of the screen and the card component after making those changes to its width.
  • Adding some more descriptive text for the alt attribute of the profile image. This text will be read by screen readers, so it's important to make sure that it makes sense to users who use screen readers.
  • Turning the social media links in the social media popup of the component into actual links by wrapping each of them in a link tag. You may also want to add some screen reader-only text inside those links or add an aria-label attribute to them instead to make sure they can be identified by screen readers.

Hope this helps. ๐Ÿ˜Š

Keep coding (and happy coding, too)! ๐Ÿ˜

Marked as helpful

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