Single Price Grid Component

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted almost 2 years ago

  You need to fix up the html on this. It’s a really important skill to practice - translating a design into the most appropriate meaningful html elements.

  For example

  • think through heading order - this should only have one h1
  • why is sign up a button? What would happen on click? Is that the right element?
  • it’s definitely not a paragraph in the last box. What would be better?

  Use css grid for this. That means the 3 boxes should be direct children of the main grid.

  Never ever have font size in px. Really important. Use rem

  Use max width in rem instead of %. Get back control.

  No heights at all in this. Never limit the height on elements that have text content inside

  Marked as helpful

  1

  ---

  

  J•330

  @littledragonshrimpPosted almost 2 years ago

  @grace-snow

  Thanks Grace!

  I'm going to rework this and I am currently converting most of the percentages/px in my current project to rems before I return to this one.

  Just 2 questions:

  • If the sign-up isn't a button, should this be an anchor tag that looks like a "button" since in theory, this would link to a page with the sign-up content?
  • Why is paragraph not correct in the last box? I don't think a span, div, or article works here but I couldn't tell you why.

  0

  

  T

  Grace•31,090

  @grace-snowPosted almost 2 years ago

  @littledragonshrimp exactly. If navigation is triggered on click that means it's an anchor tag

  The last box needs a list

  There are 100s of html elements to become familiar with and it will take time. But whenever you get a design try to take time imagining it with no styling, as pure content. Most of the time you'll be able to work out what it would be in a standard document and that will really help you with html element choice

  1

  

  J•330

  @littledragonshrimpPosted almost 2 years ago

  @grace-snow After actually re-reading the content, I completely understand why this is a list now. Thanks!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag to fix accessibility issue.

  in the mobile design give the main /.container a max-width value, for it to be a responsive content on different type of screens. e.g.: .container{max-width: 400px;}

  There is no need to give the section and .card a height value , replace padding-top and padding-bottom values. give all of them equal padding-top and padding bottom values.

  You forgot to give the body a background-color.

  To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1