Skip to content
Submitted about 3 years ago

Single price grid component

Logan Willaumezā€¢160
@LoganWillaumez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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
    @YazdunPosted about 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
    1
    Logan Willaumezā€¢160
    @LoganWillaumezPosted about 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!

    0

Please log in to post a comment

Log in with GitHub

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