Skip to content
Submitted 11 months ago

Blog preview card

Fatma Tawfeek•210
@Fatma-Tawfeek
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • learning how to use local hosting fonts
  • learning how to use box-shadow and what's every value in box-shadow property refers to
What challenges did you encounter, and how did you overcome them?
  • using local host font "figtree" asking chat GPT how to set up a local host font
What specific areas of your project would you like help with?
  • dealing with responsive screens
Code

Please log in to post a comment

Log in

Community feedback

  • Lyna•260
    @lynaIFR

    Congrats on completing this challenge, here are things you can improve:

    • never use px for font-size, instead use rem.
    • any website is responsive by default, but when we set a value to the width of elements, that responsiveness will be affected, I saw in your code that you gave a value to the width of your elements, if you want for an element to have a proper size, give it a max-width.
    • you used a flex display, that's good, use all of its properties to organize the space between your elements like gap, don't use padding and margin everywhere, that's bad practice and it will cause problems
    • in your html try using proper tags other than div, for the card content you could use the article tag for exemple Overall you did a great job, keep going 😁
    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