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

Blog Preview Card using HTML and CSS

@Siyam1888

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?

I am proud that I could complete the project in a short time and I could make it look almost like the design without using the design file.

I would like to learn and implement CSS positioning, padding, and margins in a better way in my upcoming projects.

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

I learned a new way to add fonts using the @font-face property. Apart from this, all the other parts were easy and known to me.

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

I am a beginner in this field. I would love your feedback on any aspects of my code that can be written in a better way.

Thanks in advance for your helpful feedback.

Community feedback

@MahmoodElsaayed

Posted

  • Some minor suggestions
    • HTML
      • The <strong> tag is used to put strong emphasis on it's contents. it does not only embolden text but also provides semantic meaning to screen readers, which can announce the text with added emphasis. It is generally better to use it within the body of content/paragraph to highlight important phrases or words. For a stand-alone author name, consider using a <span> with a class for styling.
      • use an <a> tag instead of the <h1> since that text should be a link to a blog post rather than a basic title
    • Figma
      • this is just a matter of preference, but if you want to replicate a design more accurately using figma you can use the finder (on the left) to toggle each element in the design. when you click an element, it will display all of it's style properties (color, width, padding, etc) in the design panel on the right. You can use those to create more accurate designs while saving yourself the headache of tweaking values by eye.
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