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

That was first grid i have ever use that was really tricky to make it

#accessibility
ata58011 220

@ata58011

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


Guys that was my first with grid if you guys have any suggestion or comments let me know. I am really curious about how can i make it better to project

Community feedback

@dostonnabotov

Posted

Hi, there! That looks great! But, I found some problems, too.

You don't specifically need to adjust the grid at 375px. If your phone is 400p, the UI doesn't look quite good. The preferred media query for most sites is 50em. So, you need to aim for that size. In the style-guide.md, it mentions how it should look at 375px.

Wrapping all the text in one <p></p>, and giving each one <br> is considered a bad practice. Consider using <ul> and <li> to improve the accessibility of your site

Furthermore, imagine this project grows in the future. As its name implies, it is a single-price-grid COMPONENT, which means that it will be used in other parts of the site as well. Thus, consider giving meaningful class names to your HTML elements. I recommend removing position: absolute from body in CSS. As the project grows, it will be much harder to maintain.

Colors need to be adjusted according to the design.

I hope it helps. Good luck!

Marked as helpful

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