Solution using HTML & CSS only

Community feedback

• 

  Amon•2,560

  @A-amonPosted over 3 years ago

  Hello! Great job~

  You can check out CSS combinators https://www.w3schools.com/css/css_combinators.asp .

  And for a working example, check out my work: https://www.frontendmentor.io/solutions/html-scss-toggle-without-js-g-y16l3KD (It's not the best tho!)

  Marked as helpful

  0

  ---

  

  Abhineet Kandele•320

  @abhineetkandelePosted over 3 years ago

  @A-amon Thanks a lot. It really helped.

  I have updated my solution using HTML & CSS only.

  0

  

  Amon•2,560

  @A-amonPosted over 3 years ago

  @abhineetkandele Glad to help!

  0
• 

  Mohit Menghnani•55

  @mmenghnaniPosted over 3 years ago

  This is amazing. Great work abhineet!

  If I really had to nit pick something, I had 2 questions

  1. Why did you choose a p tag for the price amounts? Like an h tag would have been better sematically? No?

  2. How are you using the annual and monthly class?

  Just curious, but otherwise I love the work

  0

  ---

  

  Abhineet Kandele•320

  @abhineetkandelePosted over 3 years ago

  @mmenghnani Hey, I am not an expert on accessibility but I did the solution based on my understanding.

  Let me first ask you, what is the purpose of semantic header tags? We use them so that it is more readable to the screen readers by clearly defining the purpose of the element. And it helps the screen reader to easily navigate through the page.

  But in this case, the price tag is not really defining any purpose. So, I preferred p tag over any heading tags.

  Another point is that all the heading tags should be in order means that the h1 tag should be followed by h2 which should be followed by h3, and so on. And by seeing the size of the price tag, it should definitely be h1. But if we do that, it will be problematic to the screen readers.

  Regarding the 2nd point, It is pretty clear in the code, you can check it out. If you have any other specific queries, I would be happy to answer them.

  I hope I was able to help.

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Looks Great!! Very nice job!! ⭐⭐⭐⭐⭐

  0

  ---

  

  Abhineet Kandele•320

  @abhineetkandelePosted over 3 years ago

  @palgramming Thanks for the appreciation!!

  0