Update 'news-homepage/'

- counter for ".cards" now uses CSS to automatically number them, instead of manually on HTML.

news-homepage/README.md

@@ -57,4 +57,16 @@ padding:
     );
 ```
 
+Learned how to add a counter with css.
+
+```css
+main .cards article {
+    counter-increment: cardscount 1;
+}
+
+main .cards article .content .count::before {
+    content: counter(cardscount, decimal-leading-zero);
+}
+```
+
 Also learned more about how to use grid. Still a lot to learn though.

news-homepage/index.html

@@ -63,23 +63,23 @@ <h3><a href="">Is VC Funding Drying Up?</a></h3>
             <article>
                 <img src="./src/images/image-retro-pcs.jpg" alt="">
                 <div class="content">
-                    <span class="count">01</span>
+                    <span class="count"></span>
                     <h4><a href="">Reviving Retro PCs</a></h4>
                     <p>What happens when old PCs are given modern upgrades?</p>
                 </div>
             </article>
             <article>
                 <img src="./src/images/image-top-laptops.jpg" alt="">
                 <div class="content">
-                    <span class="count">02</span>
+                    <span class="count"></span>
                     <h4><a href="">Top 10 Laptops of 2022</a></h4>
                     <p>Our best picks for various needs and budgets.</p>
                 </div>
             </article>
             <article>
                 <img src="./src/images/image-gaming-growth.jpg" alt="">
                 <div class="content">
-                    <span class="count">03</span>
+                    <span class="count"></span>
                     <h4><a href="">The Growth of Gaming</a></h4>
                     <p>How the pandemic has sparked fresh opportunities.</p>
                 </div>

news-homepage/src/css/style.css

@@ -194,9 +194,9 @@ main .cards {
 main .cards article {
     display: flex;
     gap: 1.5rem;
+    counter-increment: cardscount 1;
 }
 
-
 main .cards article img {
     max-height: 127px;
 }
@@ -207,7 +207,8 @@ main .cards article .content {
     justify-content: space-between;
 }
 
-main .cards article .content .count {
+main .cards article .content .count::before {
+    content: counter(cardscount, decimal-leading-zero);
     font-size: 2rem;
     color: var(--grayish-blue);
     font-weight: 800;