Single price grid using html and css

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Have you checked this on mobile? I'm afraid it looks very broken. I'll add some pictures in slack for you so you can see what I'm seeing.

  Also try to get the background color the same as the design. This looks a very different color at the moment

  1

  ---

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  I've just had a look at the code and recommend first changing the html to more semantic markup, then almost completely rewriting the styles.

  Here are some tips

  • in html use appropriate elements. There are elements for lists for example. Text should never be in a span or div alone. And links for navigation need to be in anchor tags not buttons.
  • use classes for styling, not ids
  • don't build a layout with large pixel margins and paddings. Use css grid or flexbox instead
  • don't set heights on elements unless they definitely need it
  • remove all floats. Floating is a rarely used tool these days - good to know about but in modern css you will very rarely need to reach for it
  • ideally, this is a css grid challenge. It's perfectly suited to it. But can also be achieved with flexbox.
  • start with the mobile design first. You will probably need a media query to change the layout for desktop
  • font sizes must be in a responsive unit like rem (never pixels)
  • don't repeat styles unnecessarily. You can reuse classes on multiple elements, and some properties will cascade to be inherited further down the dom (like font-family declared on a parent will be inherited by children, except with some elements like form fields)

  I hope these help you. Good luck

  0

  

  negative843•90

  @negative843Posted over 3 years ago

  thanks for feedback. can you guide me for how to build for mobile?? Also is there any app to measure pixels??

  0

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  @negative843 you don't need to measure pixels

  And for mobile it's the most simple designs, there is no special way to design/build for it. I recommend opening devtools on the side of your browser so it's easy to make the viewport narrow and start styling from there. Once it looks right on mobile you can gradually widen the viewport until it looks like there's room for a layout change. That's when you add a media query. Keep going like that.

  0
• 

  Saurabh Ramesh Kacholiya•50

  @saurabhkacholiyaPosted over 3 years ago

  Hey, negative843 a decent attempt but kudos for completing of project!!

  The thing you can improve:-

  1. you can use flexbox that would have been way easier.
  2. shadow is missing

  Happy coding!

  0

  ---

  

  negative843•90

  @negative843Posted over 3 years ago

  thanks for feedback. I just started learning flexbox is still pending

  0