From 2e5cb6db4c5f9e665bf1fbd5de4e30ce35edb9cb Mon Sep 17 00:00:00 2001
From: marleyrae <marleyrae@protonmail.com>
Date: Mon, 29 May 2023 11:55:21 -0700
Subject: [PATCH] :memo: docs: Update README

---
 product-preview-card-component/README.md | 58 +++++++++---------------
 1 file changed, 22 insertions(+), 36 deletions(-)

diff --git a/product-preview-card-component/README.md b/product-preview-card-component/README.md
index dbc8a45..c42323e 100644
--- a/product-preview-card-component/README.md
+++ b/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.
-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:
+How to use a `<picture>` element and set images differently based on media queries:
 
 ```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 {
-    color: papayawhip;
+.ProductCard-picture {
+    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
-  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.
+[SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
 
-**Note: Delete this note and replace the list above with resources that helped you during the
-challenge. These could come in handy for anyone viewing your solution or for yourself when you look
-back on this project in the future.**
+I've known about BEM for a long time, and more recently came across SUIT CSS. For a while I've used
+a sort of hybrid, as I liked the spacing of BEM's syntax (block__elem vs block-elem), but prefer
+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