chore: add newspaper layout with CSS Grid and user stories

fullstack-cert/css-projects/newspaper-css-grid-lab/index.html

@@ -14,43 +14,43 @@
             <h1 class="title">The Daily Local News</h1>
         </header>
 
-        <section class="feature-article">
+        <article class="feature-article">
             <h2>Breaking News: Volcano Eruption Disrupts Tourism</h2>
             <p>Recently, a volcano erupted in a popular tourist destination. The eruption has caused widespread panic
                 and has disrupted tourism in the area. The volcano has been spewing lava and ash for several days now,
                 and authorities are urging residents and tourists to evacuate the area immediately. The eruption has
                 also caused a number of flights to be cancelled, leaving many tourists stranded. The situation is still
                 developing, and authorities are working to contain the eruption and ensure the safety of everyone in the
                 area.</p>
-        </section>
+        </article>
 
-        <section class="small-article1">
+        <article class="small-article1">
             <h3>Sports: Local Team Wins Championship</h3>
             <p>Hockey fans are celebrating today as the local team has won the championship. The team, which has been on
                 a winning streak all season, clinched the title in a thrilling final match. Fans took to the streets to
                 celebrate the victory, waving flags and chanting the team's name.</p>
-        </section>
+        </article>
 
-        <section class="small-article2">
+        <article class="small-article2">
             <h3>Health: Tips for a Balanced Diet</h3>
             <p>A diet high in calories, sugar, and unhealthy fats can lead to a variety of health problems, including
                 obesity, diabetes, and heart disease. To maintain a healthy weight and reduce your risk of chronic
                 diseases, it's important to eat a balanced diet that includes a variety of nutrient-rich foods. Here are
                 some tips for eating a balanced diet:</p>
-        </section>
+        </article>
 
-        <section class="small-article3">
+        <article class="small-article3">
             <h3>Travel: Top 10 Destinations for 2025</h3>
             <p>Traveling is one of the best ways to experience new cultures, meet new people, and see the world. If
                 you're looking for inspiration for your next trip, here are the top 10 destinations for 2025:</p>
-        </section>
+        </article>
 
-        <section class="secondary-article">
+        <article class="secondary-article">
             <h2>Technology: The Rise of AI</h2>
             <p>Artificial intelligence (AI) is changing the way we live and work. From self-driving cars to virtual
                 assistants, AI is revolutionizing the world around us. But what exactly is AI, and how does it work? In
                 this article, we'll explore the rise of AI and its impact on society.</p>
-        </section>
+        </article>
 
         <figure class="cover-image">
             <img src="./travel.jpg" alt="Cover Image">

fullstack-cert/css-projects/newspaper-css-grid-lab/styles.css

@@ -15,7 +15,6 @@ main {
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: auto 1fr 1fr auto auto;
     gap: 15px;
-    width: 90%;
     background-color: #fff;
     padding: 15px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

fullstack-cert/css-projects/newspaper-css-grid-lab/userstories.md

@@ -4,27 +4,29 @@
 
 2. The `.newspaper-layout` should include a `header` containing an `h1` with the class `title` to display the newspaper's name.
 
-3. The `.newspaper-layout` should include a `section` with the class `feature-article` for the main news article.
+3. The `.newspaper-layout` should include an `article` with the class `feature-article` for the main news article.
 
-4. You should add three more `section` elements for smaller articles, with classes `small-article1`, `small-article2`, and `small-article3`.
+4. The `.news-article` should include an `h2` element for the article title and a `p` element for the article content.
 
-5. Each of the smaller articles should include an `h3` element for the article title and a `p` element for the article content.
+5. You should add three more `article` elements for smaller articles, with classes `small-article1`, `small-article2`, and `small-article3`.
 
-6. The `.newspaper-layout` should include a `section` element with the class `secondary-article` for an additional news section.
+6. Each of the smaller articles should include an `h3` element for the article title and a `p` element for the article content.
 
-7. The `.newspaper-layout` should include a `figure` with the class `cover-image` to display an image that represents the newspaper's content.
+7. The `.newspaper-layout` should include a `article` element with the class `secondary-article` for an additional news section.
 
-8. Your layout should use CSS Grid with a `grid-template-areas` property to define the arrangement of sections:
+8. The `.newspaper-layout` should include a `figure` with the class `cover-image` to display an image that represents the newspaper's content.
+
+9. Your layout should use CSS Grid with a `grid-template-areas` property to define the arrangement of sections:
 
    - The `header` should span across the top row.
    - The `.feature-article` should span two columns in the second row, with the `.cover-image` in the third column.
    - The `.secondary-article` should span two columns in the third row, with the `.cover-image` in the third column.
    - The three small articles should appear in the fourth row.
 
-9. The `.newspaper-layout` should have a `grid-template-columns` property that divides the space into three equal columns.
+10. The `.newspaper-layout` should have a `grid-template-columns` property that divides the space into three equal columns.
 
-10. You should set the `.newspaper-layout`'s `grid-template-rows` property to `auto` for the first row and divide the remaining space into equal parts for the other rows.
+11. You should set the `.newspaper-layout`'s `grid-template-rows` property to `auto` for the first row and divide the remaining space into equal parts for the other rows.
 
-11. Add a gap between grid items and set the width of `.newspaper-layout` to `90%` to take up most of the viewport width.
+12. Add a gap between grid items and set the width of `.newspaper-layout` to `90%` to take up most of the viewport width.
 
-12. Ensure that the image inside the `.cover-image` `figure` fits within the designated space.
+13. Ensure that the image inside the `.cover-image` `figure` fits within the designated space.