css

Community feedback

• 

  Adam•340

  @nadam-design

  Posted 7 months ago

  Hi @Phantuan2004!

  If I may, I'd like to highlight a few things that could be optimized:

  • The build isn't fully responsive: You assigned a fixed width to the card. This can be avoided by using max-width like this: max-width: 738px; width: 100%;. This way, the card element will behave responsively.
  • Card height: You've set a fixed height for the card, which is unnecessary in this case. The content should determine the overall height.
  • Border radius are inconsistent: The Preparation time block is missing a border radius, while others have it, but differs from what is shown in the design.
  • Typography: Font sizes don't align with the design, and the spacing between the list items (<li> tags) is also off.

  The devil is in the details—pay close attention to these! This is how you master precise and accurate site building.

  If I understand correctly, you worked from a static JPG, which is more challenging and time-consuming than building from a Figma file. One of the key roles of a frontend builder is to faithfully follow the design. If you're working from a JPG, try opening the file in Photoshop and manually measuring distances, border radiuses, font sizes, etc. It’s meticulous work, but necessary for achieving the best result if no other option is available.

  After completing enough builds, your eye will adjust, and you'll start to notice these details instinctively, producing almost perfect results at a glance. Until then, it’s all about measuring by hand.

  You’ve got this—keep going! 😊

  00
• 

  P

  pankajb085•290

  @pankajb085

  Posted 7 months ago

  The code is well structured. But needs a few improvements. Please always separate the CSS file from the HTML file as it increases the size of the HTML page and becomes difficult to read. Plus make the page responsive. It's only looking good on desktop design. Font sizes and colors also differ from actual design.

  00