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

Single Price Grid Component with HTML, CSS, BEM

N E I T 390

@NiteArie

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Improvement tips would be delightful to get ^^. On the Why Us section, I used <p> tag to reserve the whitespace and newline in the content. Would love to hear everyone else view on it. Appreciate the feedback.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Neit

Well done! Congrats.

I've just checked your HTML structure and preview site by the inspector:

  • I'd recommend learning more about headings: h1-h6 and semantic tags (why they matter). The h1 is an HTML tag that indicates a heading on a website and normally used once on the page => but this is still a big question mark for me and I am also checking it out;
  • remove style CSS and transfer them to the CSS file;
  • remove unnecessary comments from the file;
  • third card: don't have to use br tag, check more information about ul and li tags (unordered list, list item). This is an answer to your question.
  • the footer hasn't been added;
  • you have used the button in this challenge. I'd recommend reading this article from the blog **CSS-Tricks:A Complete Guide to Links and Buttons.
  • also, the outline of the button is set to none. Please, check another subject which is accessibility (this is a huge area but step by step you will get to know the fundamentals).

Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

Greetings :D

2

N E I T 390

@NiteArie

Posted

Really appreciate the feedback, will do.

  • On the h1-h6, this is the opinion from the w3.org group h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. I used h1 in different sections. Source
  • Yeah, I will look further into the topic accessibility

Thank you very much

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@NiteArie

Thanks for your answer. I know there were rules of h1 tag usage that came from old document outlines. We have new rules based on the HTML5 document outlining algorithm. I am going to read about it more because opinions are very different and quite often opposite to each other. Anyway, it is not easy to decide how many sections do we need in the project, how to divide it for sections etc. but IMO this project single price grid doesn’t need three sections and 3 h1 :)

1
N E I T 390

@NiteArie

Posted

Thank you for the answer, I will read more into "HTML5 document outlining algorithm"

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