Submitted over 2 years ago

3 Column preview card with vibrant colors.

#accessibility#bem

Aadvik• 1,250

@Aadv1k

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It was a fun challenge. Learnt about pseudo classes to add the accents.

Community feedback

Rio Cantre• 9,710

@RioCantre

Posted over 2 years ago

Hello there! Great job with this challenge. You did well on implementing the design and I would suggest the following for you...

Adjust the margin in the rule set of .card__link into margin-top: 3rem;
Clean the Whitespaces in your code
Wrap the container with specific tag like main for readability
Add border radius in the media queries as well

Overall you did great and Keep it going!

Marked as helpful

Aadvik• 1,250

@Aadv1k

Posted over 2 years ago

@RioCantre Thanks for the review Rio! Appreciate your input. When I started this challenge I was new to css, so all the bad practices. I will definitely prettify and format it and make the html more semantic.

Naveen Gumaste• 10,480

@NaveenGumaste

Posted over 2 years ago

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

Keep up the good work!

Aadvik• 1,250

@Aadv1k

Posted over 2 years ago

@Crazimonk Appreciate your input Naveen, I will get back to implementing these fixes later, currently I am working on another challenge but thanks for the suggestions!

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