Blog-Preview-Card

Community feedback

• 

  Kallyne Layane•70

  @jsklcodesPosted 8 months ago

  Hello, Monika! Your solution is good in terms of layout. Well done! ✨😉 But there are a few improvements that could make it much better.

  1. I noticed that you're using pixels to define your measurements, including to set the card size. This causes problems in terms of responsiveness, so prefer to use relative measures (%, rem, em, vh, vw), which will adapt. Make sure that whatever unit you use, you're using it in the right context and that it doesn't cause any issues.
  2. I also noticed that your solution is a bit smaller than the design, some fonts are smaller or larger, the size of the box is a bit blurry and there's no border radius in the image. Not that these differences are crucial, you don't need to try to achieve pixel perfect or anything, as the main goal here is to improve the fundamentals. But it's a good opportunity to practice and hone your skills, not least because in a real project you'll have to follow the specifications of a design. Have you inspected the project file? If not, I suggest you take a look and check how the designer has spaced the layout, sized the font and other details.
  3. On the HTML, I have two observations:

  • You have a container class to basically style the card, which is not very clear as there is no mention in the HTML that this snippet represents a card. When there is no semantic tag to represent something, express it with a descriptive class. In this situation, it could be something like <div class="card"></div> or <div class="preview-card"></div>. Use container to limit the width, handle with layout stuff.
  • Your code is a bit messy when it comes to indentation (as well as CSS). I suggest you install the Prettier extension (there is for several editors), which has several formatting options for you to configure, and it's simple, with a shortcut you have your code formatted. Also, many editors have their own formatter, just look for the keyboard shortcuts to find out how to format your code.

  One more thing: you don't need media queries for this challenge. But if that's a problem for you, and also about responsiveness in general, I have a recommendation: Kevin Powell's free course Conquering Responsive Layouts, which covers how the browser deals with responsiveness issues, relative units, media queries, flexbox and also has practical mini-challenges to learn about it.

  Have a good coding journey! 🙋‍♀️

  Marked as helpful

  0