Single price grid component with CSS Grid and Flexbox.

Community feedback

• 

  sonickonic•700

  @sonickonicPosted about 4 years ago

  Hey Javier! Nice work the screenshot looks awesome! 😎

  Your code looks good overall, I have just a few observations:

  1. You've currently got multiple <p> elements, where different HTML elements may be more appropriate.

  • The <p> defines a paragraph. The best use for it will be in the "Join our community" section, instead of the <div>.
  • In the "Why Us" section, instead of using <p> twice, a <h2> for the heading and <ul> for the list of features will suit better for semantic and accessibility

  2. CSS reset will set the whole page to 0, for a fresh clean start, instead of setting margin:0; to a specific element.

  * { margin:0; padding:0; }

  Have you tried a Mobile-first approach? It's quite a common workflow, you starting with the mobile version and switch to min-width media queries instead of max-width. It helps to simplify the CSS code)

  1

  ---

  

  Javier Labrador•95

  @JALCH-1512Posted about 4 years ago

  @sonickonic Hey Thanks for answering my question :)!

  I just have a question about your observations, when I use a </p> and a </li> an automatic padding is created on it. I can remove it in a style sheet (CSS) using a p {margin: 0; padding: 0; } . That's fine? there is no bad practice in it?

  I also tried to start with a mobile device approach, but when moving to full screen it was very difficult to accommodate the whole frame overall.

  Thanks for the tips, I really appreciate it :)

  1

  

  sonickonic•700

  @sonickonicPosted about 4 years ago

  @JALCH-1512 hey 👋

  Every HTML element has default CSS values, Don't consider it while writing your HTML.

  The HTML structure the web content, for accessibility purposes, and the CSS, takes care of the appearance of the elements.

  The universal selector * { margin:0; padding:0; } is handy because different browsers render elements differently. Providing the margin and padding for all elements on the page is reducing the browser inconsistencies.

  The mobile-first solution is tricky for this challenge take a look at other solutions, it will give you a clue how to accommodate the frame on widescreens.

  keep up the good work 😎

  0