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

With HTML, CSS and Flexbox

Tobi-dev99 200

@Tobi-dev99

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


I am new to web development(coding in general) and I think, I write a very messy code. Can someone point out my mistakes where I could have saved time and wrote unnecessary code?

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Tobi, congrats on submitting your first solution! You've done a really good job. Your code isn't very messy at all! After having taken a look I've got a few pointers that will hopefully help:

  • For your . heading class, I would recommend not using a section here. A section is typically used to group a larger collection of themed content. For example, a testimonials section on a page. For this smaller grouping of content, a div would be absolutely fine.
  • You've got h1 and h3 headings but no h2. Be sure to avoid skipping heading levels unnecessarily, as this can cause accessibility issues.
  • You don't need the div wrapping the anchor tag. You could just style the anchor tag directly.
  • In the Why Us area, I'd use a ul with li elements to create a list instead of having separate p tags for each item.

You've done a really good job. Let me know if you have any questions 🙂

2

Tobi-dev99 200

@Tobi-dev99

Posted

@mattstuddert Wow,that was very helpful! Thank You for sparing some time and effort to review my solution.Those were really some pointers.I'll keep those in mind when taking on next challenge.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@Tobi-dev99 you're welcome, Tobi! Happy to help 🙂

0

@sauravchamoli17

Posted

Well done!on your project.The improvements you can make in this project are: 1. the per month text should be centered with related to the $29 text.Add a box shadow and hover state to your sign up button.Add a box shadow and border radius to your main container. Move the why us subtext in an unordered list instead of an paragraph and remove padding from them.

Keep up the good work!

2

Tobi-dev99 200

@Tobi-dev99

Posted

@sauravchamoli17 Thank You for sparing some time and effort to review my solution.This wad really helpful. The reason I used paragraph instead of <ul> because, I was not able to align "Why us" h3 and <ul>.

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