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

HTML5, CSS3

P
AK 6,700

@skyv26

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


please give me feedback, I am newbie and want to improve my skills.

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Layout in desktop seems fine, but there is this black-space on both sides of the body tag. Layout in desktop have this as well, but the layout itself is fine.

Some suggestions would be:

  • Remove background-color in the html element. This what creates that black colored sides which is not really great to look at.
  • Avoid using multiple usage of h1 element. Always have at least only 1 h1 element. Those could have been replaced with h2. On this one, the h1 would be a screen reader only text. This h1 would have sr-only as a class, this class is just a css stylings that is intended for screen reader users, you can search up the web for this styling and apply it in the h1 element, along with the appropriate text inside it.
  • When using alt attribute, avoid adding words that relates to "graphic" like "logo, image, icon, picture..." as a value for alt attribute. Assistive tech will handle those for you.
  • The learn more should have been using a tag. Since this is not a form button are not used since there are no control it should do.
  • The learn more should have a visual-indicator, right now, if you tab on them you won't see anything that will inform you that you are focusing on the. On their :focus-visible add an outline or box-shadow or border. Just an indicator.

Aside from those, great work.

Marked as helpful

1
P
AK 6,700

@skyv26

Posted

@pikamart Thank you so much.. I understand and always keep in mind.

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