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 using Sass and JavaScript

Marco 185

@devMarco02

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


if you have any suggestions, feel free to comment.

Community feedback

Rayane 1,935

@RayaneBengaoui

Posted

Hello Marco,

Congrats for completing the challenge ! 🙂

I'd like to suggest :

  • Increase the spreading of your box-shadow, here it looks too 'sharp' compare to the design. So on your --bs variable, increase the third value which correspond to the blur-radius. You can even add a 4th parameter to affect the spread-radius.

  • Add cursor: pointer to your share button.

  • On your media query (min-width: 1200px) you have an overflow: visible, thus, on a larger screen your top/bottom left edges are not rounded. So you could probably remove this line from your media query.

  • Add more spacing on the mobile view as the text seems a bit squashed.

  • Lastly, you are repeating a lot of code such as display: flex; justify-content:... so using SASS @mixins could simplify your workflow and make your code smaller.

Overall, well done for the challenge and happy coding ! 😃

1
Marco 185

@devMarco02

Posted

thanks for the tips. I never tried @mixins before, I need to learn more about Sass. I'll try to update the code after I finish my project. thanks Rayane.

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