Product preview card component - HTML/CSS

Community feedback

• 

  SutonToch•340

  @SutonTochPosted about 1 year ago

  Congrats on completing the challenge!

  Your solution looks great!

  One minor tweak on mobile: your .main-container is a little bit too big. I don't really know why height: auto is doing this.. but with height: fit-content it looks much better.

  In general, you can check the responsiveness in your browser with Strg+Shift+M (responsive mode). There you can also use F12 (Dev-Tools) to debug your website. With that you would notice, that some of your CSS-rules don't really do anything, e.g.: body {padding: 0} (maybe you meant margin? Because every body has a base margin of 8px), .main-container {flex-direction: row; margin-top: 0em} (both are default values). Removing unnecessary code (and checking for it) is good, because you'll have less code to read and maintain, which makes everything else easier.

  If you want to learn more about responsiveness, I can personally recommend "Conquering Responsive Layouts" by Kevin Powell. It's a free course, and it helped me tremendously when I started out, but you're a little further in your Frontend Journey, than I was at the time, so your mileage may vary. Maybe there is still something that helps :)

  I could give you a few more suggestions for "more optimized/better coding", but I'm not quite sure if it would actually help you. Coding is an iterative process, and you'll simply improve over time, for example by noticing small annoyances (e.g. having to repeat code) and then trying to solve them. If you really want, though, here are three things you could look into:

  • Semantic HTML (especially important for Screen Reader (Accessibility) and Search Engine Optimization (SEO))
  • other units than px (sometimes more useful), e.g.: rem, em, vw, vh
  • CSS-Variables for less repetition once they're set up

  Finally, please take your time. Only because I suggest something, doesn't me you'll immediately have to look into it. Learning to program requires a lot of time and practice, and there is real risk of burning yourself out.

  I'm looking forward to your next solution :)

  1