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

frontendmentor_singlepricegrid

Veronica 70

@VJones2112

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 have a ton of questions!

  1. I started this project by sectioning off and styling with only divs. That worked fine on the small-screen, but I couldn't figure it out on the desktop version. Using display:grid was much easier. How would I do it if I wanted to stick with just divs?

  2. What is the difference between the desktop-design.jpg and the desktop-preview.jpg?

  3. I considered using h1, h2, p tags to set up the sections, but I remember an accessibility tutorial said screen readers use those to kind of summarize a page and I wasn't sure if that was applicable here, so I just styled <p> tags. Thoughts on that?

  4. I felt like the opacity of the paragraphs was different than what I styled, but is that maybe just a difference in colors?

  5. Finally!- In the Why Us section, I originally set it up as a ul, but then changed it to using <br>. Is one way preferred over the other? Or is there a different preferred way to do this?

Community feedback

@miguelseguramx

Posted

This's a cool project

  1. Using a grid is the best way to create someting like this, you can use: https://cssgrid-generator.netlify.app/

  2. desktop-preview.jpg is to show a general view of the project, it has more sense if you have multiples states and pages,

  3. If you were working on a real pricing component, you made the right decision In this case, the pricing component is all the content of the page, I don't see why not use h1 or h2 tags

  4. it could be the opacity but if you want to change the color, you can use Chrome Dev Tools to achive the right color! I have a small tutorial on my instagram @miguelseguramx

  5. You should use an ul because you would have a syntactic HTML, the content it's a list, so you need to use a tag for a list

  6. Try to indent your HTML code, because you are writing for yourself and for other developers

  7. The tag body has weid margin, you should override the default styles of some tags

You're doing a good job, keep it up!

1

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