Skip to content
Submitted 15 days ago

Blog Preview Card built using Semantic HTML and SCSS

#sass/scss
P
Shakira Reid - Thomas•150
@KaeTheDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

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.

Community feedback

  • feelgooddd•360
    @feelgoodddPosted 15 days ago

    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
    0
    P
    Shakira Reid - Thomas•150
    @KaeTheDevPosted 14 days ago

    @feelgooddd Yeah I did that and removed it. I guess I was trying to get the shadow that the design document showed. It's just dawning on me that maybe it's not supposed to look just like that? LOL thank you for your help!

    0
  • mohammed qabbari•150
    @mohamedqabbariPosted 15 days ago

    pixel-perfect HTML/CSS Page

    Marked as helpful
    0
    P
    Shakira Reid - Thomas•150
    @KaeTheDevPosted 14 days ago

    @mohamedqabbari Appreciate this! Thank you! 🌹

    1

Please log in to post a comment

Log in with GitHub

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