Submitted almost 3 years ago

Single price grid component

Logan Willaumez• 160

@LoganWillaumez

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello ! It's time for a new challenge 😁. This time I wanted to push my skills and I tried SCSS. It was really fun to use, but I'm not totally good with it, I certainly need some practices with this tool.

I have some questions ;

I have one HTML validation problem with <article>(or <section>) for the h2-h6 missing. But my <sections> are into my <article> (or <articles> into my <sections>). How can I rearrange it?
I don't understand my accessibility problem. Someone have an explanation?

If you have any feedbacks, don't hesitate !

Best,

Logan

Community feedback

Yazdun• 1,310

@Yazdun

Posted almost 3 years ago

Hello 👏 this looks great ! Here are my suggestions :

Try using 7-1 pattern to structure your sass. They even offer a boilerplate folder architecture which makes your life much easier.
On smaller device, cards take full view width and height, consider giving some paddings to parent element.
Each html page must have one main tag which wraps the whole page's content, also this main tag must have a level one heading which tells what is page about, you can style this h1 to be hidden. This will solve your ACCESSIBILITY issue, don't forget to create new report though
Instead of article and section, Use div and It may solve your HTML VALIDATION issue.

✅ I hope this was helpful for you

Marked as helpful

Logan Willaumez• 160

@LoganWillaumez

Posted almost 3 years ago

Hello @Yazdun , thanks for your feedback !

Oh perfect, it's exactly what I needed for improve my SCSS skills 😁

Thanks for other responses, I corrected my code and all is good now.

Have a nice day!

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