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 review using flex box

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?

Do better

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

image resizing across devices

Community feedback

Boris 2,870

@mkboris

Posted

Hi Adebukol nice work, some few things you should look at moving forward

  • It's not good practice to wrap every element in divs because divs aren't semantic, the paragraphs, and heading needs to be p and h1. Also the learning text in the yellow box is not a button its just a p element. Learn more about HTML semantic elements here
  • All content should be wrapped within landmarks. Wrap a main tag around card. and a footer for the attribution
  • Use relative units like rems or em more as px can cause lots of issues with responsiveness
  • Media queries, font-size should be defined in rem not px
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.
  • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.

Hope thus helps

Marked as helpful

0

@Adebukol

Posted

@mkboris I was Also trying to pass the accessibility test, do you know how I can go about that or just ignore it?

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