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

Mobile-first 3-column preview card

chief 220

@cujothechief

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


this is my solution to the 3-column preview card challenge. feel free to point out any errors you see in my code. thank you! <3

Community feedback

@ayoam

Posted

there is an issue with the shadow , remove box-shadow from #backgroud and add it to #cards , also just remove #backgroud div , use body in css instead.

Marked as helpful

0
PhoenixDev22 16,950

@PhoenixDev22

Posted

Greetings cujothechief , Congratulation on completing your first challenge, your solution looks good.

To get rid of the accessibility and validation issues shown in your Report, I would suggest to:

• Wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more

• have at least one <h1> in your code, You should have used <h1> and move up by one level each time instead of the <h3> for the titles. Click here to read more

• Adding cursor: pointer to the "Learn More" elements to further highlight to users that they are clickable and the background should be transparent .

Don't stop and keep doing solutions, hope this feedback helps. Happy coding

Marked as helpful

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