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

Dinesh Pโ€ข 70

@Dinesh141197

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


please review thank you

Community feedback

MrByfordโ€ข 80

@MrByford

Posted

Styling and Fonts: Consider applying some additional styling and project-specific fonts to enhance the visual appeal and align the project closer to the intended design.

Background: Integrate the project's background color to create a cohesive and polished look, tying together the visual elements of the design.

Container Border: You might want to consider removing the border around the grid system container to achieve a cleaner and more seamless appearance.

Responsiveness: The responsiveness of the design is commendable! Explore adjusting the breakpoints based on the design spec sheet to ensure the design collapses at optimal points, aligning with the intended user experience.

Semantic HTML: Take a look into enhancing the HTML structure for better semantics. This could contribute to improved accessibility and SEO.

Overall Feedback: Fantastic effort on your project! There's room for improvement, as with any project, and you're on a great path. Keep up the good work, and continue refining your skills. Excited to see your progress!

Marked as helpful

0

Dinesh Pโ€ข 70

@Dinesh141197

Posted

Thank you for the feedback @MrByford

0

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

  • Use <ul> and <li> for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of just using paragraph (<p>).
  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. You can read more about this here ๐Ÿ“˜.

I hope you find it useful! ๐Ÿ˜„ Above all, the solution you submitted is great!

Happy coding!

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