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

SCSS Article preview component with JS share menu

maia 300

@maiaflow

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


Open to any ways I could improve!

Community feedback

Eric Salvi 1,330

@ericsalvi

Posted

Hey @maiaflow,

Great job on another challenge. You are unstoppable!

I am not seeing too much from a design POV except I feel the card can get too long on very wide screen sizes. So I would probably try setting a max-width for body main on the desktop only. That way when the screen gets really wide, the card doesn't get really wide as well.

Also, one thing that I like to do is with the footer section in the card you have a margin-top being set to push it down the page a bit. Sometimes what I like to do is set the actual section content to display: flex and flex-direction: column. Then you could change the margin-top to auto. What this will do is push the footer to the bottom of that section and so no matter what height the card ever becomes, the footer will always stick to the bottom of the container.

You have 3 invalid issues in your HTML. The social sharing icons you have do not have the alt attribute. Even if an image doesn't need to have a need for actual alt text, the attribute still needs to be present. Just add alt="" to your 3 images to fix those issues.

The JS looks great and you should be proud of yourself for getting it done. The more of these that you do, the easier it will become. Also, the new word you created called sharrow is pretty cool!

Let's chat more about vendor prefixes.

Keep up the momentum!

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