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

Site using Flexbox

Nicholas 80

@nicholask98

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


Hi all,

This is my first challenge I've done in a few months. Looking to get back into front end a bit and would love any feedback you have.

Thanks!

Community feedback

@waltersono

Posted

Hi nicholask98

This is very good, the design looks for both layouts (mobile and desktop)

Here are my suggestions:

  • Give an alternative description for each image

    • Alternative descriptions helps screen readers users understand your content
  • Try to target your elements by class not by structure

    • If you target your elements by structure that may compromise your design if you were to change the layout even a little bit
    • Instead of targeting the button by ".section > a > .button" just write ".button". If it is a special type of button then give it another class ".button .button--special"
  • Use the correct HTML for each element

    • For the button use a button tag
    • If it is a link then style the link directly do not insert a paragraph tag inside of it
    • This is also helps people with screen readers understand your page and present your content correctly
    • Also helps you reduce the amount of HTML and CSS you write
  • Add and max-width for mobile and center it

    • It will make the mobile design not stretch and will look even better

Ok, nicholask98

That is it, keep the good work!

Marked as helpful

2

Nicholas 80

@nicholask98

Posted

@waltersono Thanks for the detailed feedback! I'll update this tomorrow with those notes. I really appreciate you taking the time to review my code.

Best!

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