Product Card Preview - Solution

Hello Nathan great job with the challenge! looks great for me

I will try to answer your questions:

I'm looking to improve my Bootstrap & CSS skills, what would be some key topics to work on?

• Well, depends a lot in wich starting point you are in CSS, but in my opinion this should be the most important topics that anyone starting out in CSS:

1. Box model, learn how it works, how you can benefit from this for your layout and components.

2. Selector specifity, it's important to learn how your selectors effects on your components / layout, learn the hierarchy in CSS, it will improve a lot the way you apply styles in your projects.

3. Learn how to positiong things, there are two important things that you have to master: flexbox and CSS Grid, if you learn this two you will have a solution for every type of layout that you face, also important to learn how to use position, but this is a more secondary topic that you can learn later.

This for me are the basic topics for CSS, for Bootstrap, just read the docs and practice a lot, the more important thing to learn in bootstrap is how to use the bootstrap grid and responsive layouts, you can get decent knowledge just by reading the docs.

What are the benefits of working with frameworks vs. Bootstrap?

I think that in this question you meant to ask CSS vs. Bootstrap, Bootstrap is the easy way to get your job done, but as I always recommend to everyone, learn CSS first, not only the basic but make a few projects using only CSS, using Bootstrap from the start can lead you to not understanding how the things you are doing works, and also CSS is something that will be there, frameworks are just in the top and then they loose popularity (for example, in the past year Tailwind has win over Bootstrap in popularity), learning ol' good CSS will make your transition to any framework a lot easier that just learning a framework.

Hope my answers helps you!

👾Hello Nathan Weber, Congratulations on completing this challenge!

Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:

1.THE PICTURE TAG is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

2.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!