Submitted 6 months ago

Blog Preview Card using HTML, CSS, Flexbox

Matthew•200

@MattJM1007

Preview site View code

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?

I felt like this solution took me less time than the first challenge and I learned to use hover states. I also applied feedback on my html to this solution.

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

I tried using pixel perfect to get it to match the design. I know it is slight off because I couldn't get the spacing 100% perfect, but I think its close enough. I also felt stuck again trying to figure out how to center the picture in the container but played around with the container width and padding and got it to work.

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

I would like some feedback on the structure of my html code and the tags used. Is it done correctly? I tried to learn from the previous challenge comments and use more specific tags.

(and if theres anything else that could be better, please let me know!)

Community feedback

Abdul Khaliq 🚀•72,580
@0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

HTML 🏷️:

This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience.

Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

So resolve the issue by replacing the <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

Now your footer can explain information about the author of the section, copyright data or links to related documents.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
2

Please log in to post a comment

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