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

use sass to implement blog preview card

perterHUAN 250

@perterHUAN

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

  • Styles for pages have been organized into separate files according to their categories, then integrated together, instead of being crammed into a single large file. This allows focusing on styling individual components or broader layouts during writing, thus reducing cognitive load.
  • CSS variables have been implemented, enabling flexible changes to various styles such as max-width, gap, etc. Sass functions are also utilized to calculate values for these variables.
  • Flexbox layout has been adopted to create space between sibling elements, replacing the use of margin. This approach not only simplifies the process but also eliminates the need to handle margins for the first or last element.
  • Padding has been added to the body horizontally, ensuring that on smaller screens, blog preview cards do not abut the screen boundaries, providing a more visually comfortable spacing.

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

empty

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

  • I am unsure whether my HTML usage is semantically correct.
  • There's doubt about the reasonableness of certain CSS values, questioning whether they might appear too large or small under certain circumstances.
  • The logic behind choosing class names in CSS is uncertain.
  • The rationality of using CSS selectors to target elements is being questioned.
  • The categorization of styles into components (components), utility classes (utils), and layouts is under scrutiny; wondering if there are better organizational methods or other more effective ways to structure these style categories.

Community feedback

T
Grace 29,310

@grace-snow

Posted

Well done on this. I have a few pointers though

  • text should never be in divs or spans alone. Always use a meaningful element (like paragraphs)
  • the link should be inside the card heading, not wrapping it.
  • you've added a hover style to the whole card as if it is all clickable but not done anything to make the whole card clickable. I would expect the css to include a pseudo element on the heading link that's set to cover the whole card area so that the whole card is clickable.
  • ⚠️ Beware how you are nesting css selectors at the moment!! That can lead to highly specific and very hard to manage CSS on large projects! Mastering sass nesting is worth a read.

Marked as helpful

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