Skip to content
Submitted over 4 years ago

frontendmentor_singlepricegrid

Veronica•70
@VJones2112
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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

  • Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    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

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