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 (HTML & CSS)

@SONALI-NEGI

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


Hi! 👋 I'm Sonali Negi, and this is my solution for the Single Price Grid Component challenge on Frontend Mentor.

🚀 Features:

  • Responsive layout using CSS Grid and Flexbox.
  • Semantic HTML5 markup for accessibility and SEO.
  • Custom CSS reset for consistent styling.

🛠️ Built With:

  • HTML5, CSS3

📚 Resources:

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you.

Community feedback

@Bishalsnghd07

Posted

Hi, @SONALI-NEGI👋

Congrats for completing this challenge 🎉 and you did a fantastic job👏

There is few adjustments should be needed:

1)Semantic ui: Do not break the heading levels. It should be like this 👉h1, h2, h3, h4, h5 and h6. Start with h1, h2 and so on. h1 is the most important tag and h6 is the least important. Always follow the ascending order. Never jump h1 to h3. It loose the semantic ui of your web page.

2)No need of using ul and li tag in price-card__list class. It is not a list, it's a paragraph. Instead of using <li>, it should be a better approach if you use <p>. And just give some max-width properly on it, so it maintains the layout responsive.

3)I would recommend one tool to you which will help you out to check your web page performance, accessibility, SEO and Best Practices, that is lighthouse. By inspecting in your browser you can get the option lighthouse testing. This tool will decrease developer workload and gives accurate result.

4)Apart from coding and development, I have a general review for you I gonna tell you, I also did the same mistakes at starting of my frontend development journey but as time passes I realise that GitHub is only use for tracking and saving our local repository into it, by any chance if we delete our local repository code from our pc, then from GitHub we can clone this repo and reuse it for this role GitHub is used for not for deployment.

For deployment I would recommend to use netlify or vercel for free and it is hassle-free also.

Hope, this suggestion will help you ahead in your future to.

Happy Coding❤️

Marked as helpful

0

@SONALI-NEGI

Posted

Hi @Bishalsnghd07 ! Thanks a bunch for your detailed feedback and suggestions! I appreciate the pointers on maintaining semantic HTML structure, using appropriate tags, and the recommendation for Lighthouse testing.

I'll definitely incorporate these adjustments into my future projects. Happy coding to you too! 🚀

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