Submitted over 2 years ago
Article preview component Vanilla JavaScript, and Flexbox
@Eileenpk
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
- @ApplePieGiraffePosted over 2 years ago
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 helpful1 - Setting the width of the card component in this challenge to
Please log in to post a comment
Log in with GitHubJoin 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