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 with Sass

@laura-nguyen

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


What are you most proud of, and what would you do differently next time?

I'm happy that I got to practice DOM manipulation!

What challenges did you encounter, and how did you overcome them?

I didn't know how to insert the triangle part of the social container, so I had to look at online resources to learn how.

What specific areas of your project would you like help with?

Any resources on DOM would be great

Community feedback

geomydas 1,060

@geomydas

Posted

I will update this comment sooner or later but here are some things to consider

  • Use the rem unit instead of px when writing media queries. You can why here. NEVER use the px unit for media queries

  • Don't use SASS nesting that often, see why

  • NEVER set any font-related properties in px. See why

  • Use the SASS 7-1 architecture to better organize your files. You can tweak if it you want. Learn more about it here

  • Learn when to use the rem unit. Generally, we use rem if we want to scale it with the users preferred font sizes. Let's say you have a border-radius, would you want to it to scale with the users font size? Of course, no. It will differ from the design.

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