Blog Preview Card built using Semantic HTML and SCSS

Solution retrospective
With this project, I am proud of my ability to read the Figma design file and make adjustments, especially when the styles in the styles-guide.md didn't exactly match what I saw in the Figma file.
What challenges did you encounter, and how did you overcome them?I initially used poor class naming, which made my HTML markup difficult to follow, even when implementing semantic HTML.
What specific areas of your project would you like help with?Even though the final product looks as close to the design as possible, I feel that my markup and SCSS could still be improved to create a stronger foundation—especially for learning—since this is a small project. Also, I'm not sure if we were supposed to implement the dark shadow that appears in the design, but if so, I’d definitely like to learn how to do that.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @feelgooddd
Looks good, box-shadow is what you are looking for. Very nice and useful CSS property that's actually quite simple to use. Apply it to your container and boom you're done. Box shadow can take up to 5 properties, although it doesn't have to include all 5.
These properties are X offset : How far the shadow is offset on the X axis Y offset : Blur radius: Spread radius: Color.
box-shadow: 2px 2px 0px 0px #000
Would give you a shadow that is shifted 2 pixels to the right and 2 pixels below the container with no spread and no blur, and a black colour.
If you want to master box shadows and understand how spread and Blur work i suggest playing with their values to see how it affects the shadow.
Marked as helpful
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