📝 docs: Update README

product-preview-card-component/README.md

@@ -13,7 +13,6 @@ Frontend Mentor challenges help you improve your coding skills by building reali
 - [My process](#my-process)
     - [Built with](#built-with)
     - [What I learned](#what-i-learned)
-    - [Continued development](#continued-development)
     - [Useful resources](#useful-resources)
 - [Author](#author)
 
@@ -44,52 +43,39 @@ Users should be able to:
 
 ### What I learned
 
-Use this section to recap over some of your major learnings while working through this project.
+How to use a `<picture>` element and set images differently based on media queries:
-Writing these out and providing code samples of areas you want to highlight is a great way to
-reinforce your own knowledge.
-
-To see how you can add code snippets, see below:
 
 ```html
-<h1>Some HTML code I'm proud of</h1>
+
+<picture>
+  <source media="(max-width: 999px)" srcset="images/image-product-mobile.jpg">
+  <source media="(min-width: 1000px)" srcset="images/image-product-desktop.jpg">
+  <!-- <img> is required! Src is set to fallback img -->
+  <img
+    src="images/image-product-desktop.jpg"
+    alt="Gabrielle Essence perfume bottle"
+    class="ProductCard-picture"
+  >
+</picture>
 ```
 
+Additionally, <picture> does not automatically shrink-wrap to its <img>, so CSS is required to keep
+<picture> from creating extra spacing:
+
 ```css
-.proud-of-this-css {
+.ProductCard-picture {
-    color: papayawhip;
+    height: 100%;
 }
 ```
 
-```js
-const proudOfThisFunc = () => {
-  console.log('🎉')
-}
-```
-
-If you want more help with writing markdown, we'd recommend checking
-out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
-
-**Note: Delete this note and the content within this section and replace with your own learnings.**
-
-### Continued development
-
-Use this section to outline areas that you want to continue focusing on in future projects. These
-could be concepts you're still not completely comfortable with or techniques you found useful that
-you want to refine and perfect.
-
-**Note: Delete this note and the content within this section and replace with your own plans for
-continued development.**
-
 ### Useful resources
 
-- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this
+[SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
-  pattern and will use it going forward.
-- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally
-  understand XYZ. I'd recommend it to anyone still learning this concept.
 
-**Note: Delete this note and replace the list above with resources that helped you during the
+I've known about BEM for a long time, and more recently came across SUIT CSS. For a while I've used
-challenge. These could come in handy for anyone viewing your solution or for yourself when you look
+a sort of hybrid, as I liked the spacing of BEM's syntax (block__elem vs block-elem), but prefer
-back on this project in the future.**
+SUIT's seperation of modifier & state. For this project though, I decided to try conforming fully
+to SUIT and found I actually really liked it.
 
 ## Author