Challenge one design

Community feedback

• 

  P

  Ethan John Paguntalan•180

  @dev-ethanjohnPosted about 1 month ago

  Great work friend! Given that this is a first challenge, it is good to see you've taken the steps to replicate the design.

  Well, the use of root on CSS made sure properties inside it are reusable.

  There are some improvement that I suggest you may look into or consider.

  1. You can explore more cases to where you can use native semantic tags instead of relying solely on your classes or attributes on your divs. For example, you can use article as a parent container and some div inside for styling. Or a figure element to wrap your qr image.
  2. Have an external CSS, this way we can have separation. Though given the little amount of content in this project, internal CSS will be fine.
  3. Take a look on some default properties you can implement to make your css styling consistent. For example, setting your padding to 0 and box-sizing to border-box on the * {} universal selector ensures you have more control over your styling and gives you consistent behavior across your elements.
  4. It would be better if you could follow almost all the design values of the sample mockup. For instance, your Card component has more width (due to by not setting box-sizing to border-box). You use h3 for the main text, but remember heading texts are semantics, and since this is standalone component, having h1 as your primary text is more acceptable approach. h3 is fine as long as the component is a child of the larger parent that holds already the h1 and h2 tags. From the design on Figma, there are also specific values for font-sizes, letter-spacing and so forth, you may check them out you can know exactly what to style.
  5. To allow layout flexibility, you can wrap your heading, and paragraph to a new div separating it from the image; and there use flexbox or grid for spacing and alignment.

  Hope it helps mate!

  Marked as helpful

  0