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, HTML/SCSS/JS

@kvncnls

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


Please critique!! I add little micro-animations to the modal and share button. Hopefully it works! Don't hold back on the critiques! :P

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Kevin Canlas! 👋

Nice job on this challenge! Everything looks pretty great and the social media popup works nicely! 👏

I suggest,

  • Adding a max-width to the card component so that it isn't too wide when the layout first changes from desktop to mobile.
  • Using the <button> element for the social media popup button so that keyboard users can access and use that button.
  • The top-left and top-right corners of the card component aren't rounded in the mobile layout of the site. Don't forget to add those!

Keep coding (and happy coding, too)! 😁

1

@kvncnls

Posted

@ApplePieGiraffe Ah! I forgot about the borders! I added it to the 768px media query, but not the mobile haha. I'll add the max-width and use button now too! Thanks APG!!

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@kvncnls

NP! Keep it up! 👍

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