feat(curriculum): add magazine layout lab (#57174)

Co-authored-by: zairahira <33151350+zairahira@users.noreply.github.com>
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>

client/i18n/locales/english/intro.json

@@ -2480,7 +2480,12 @@
           "In this workshop, you'll build a magazine article. You'll practice how to use CSS Grid, including concepts like grid rows and grid columns."
         ]
       },
-      "ogko": { "title": "114", "intro": [] },
+      "lab-magazine-layout": {
+        "title": "Design a Magazine Layout",
+        "intro": [
+          "In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns."
+        ]
+      },
       "lecture-debugging-css": {
         "title": "Debugging CSS",
         "intro": [

client/src/pages/learn/full-stack-developer/lab-magazine-layout/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Design a Magazine Layout
+block: lab-magazine-layout
+superBlock: full-stack-developer
+---
+
+## Introduction to the Design a Magazine Layout
+
+In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns.

curriculum/challenges/_meta/lab-magazine-layout/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "Design a Magazine Layout",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "dashedName": "lab-magazine-layout",
+  "superBlock": "full-stack-developer",
+  "challengeOrder": [{ "id": "6735a7370e0ae93a4577c689", "title": "Design a Magazine Layout" }],
+  "helpCategory": "HTML-CSS",
+  "blockLayout": "link",
+  "blockType": "lab"
+}

curriculum/challenges/english/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md

@@ -0,0 +1,263 @@
+---
+id: 6735a7370e0ae93a4577c689
+title: Design a Magazine Layout
+challengeType: 25
+dashedName: design-a-magazine-layout
+demoType: onClick
+---
+
+# --description--
+
+In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+
+**User Stories:**
+
+1. You should have a `main` element with the class `magazine-cover`.
+
+2. Your `.magazine-cover` should contain a `header` element for the title with the class `title`.
+
+3. You should have four `section` elements in your page. The first three sections for magazine articles and a fourth `section` element for a cover image.  
+
+4. The four `section` elements should have a `class` attribute of `feature-article`, `small-article1`, `small-article2`, and `cover-image`, respectively.
+
+5. You should set the `display` property of `.magazine-cover` to `grid.`
+
+6. The `.magazine-cover` should have a `grid-template-areas` property that defines the layout of the grid:
+
+   - The title spanning the top row.
+   - A feature article spanning two columns and a cover image in the second row.
+   - Two small articles and the cover image in the third row.
+
+7. The `.magazine-cover` should have a `grid-template-columns` property that divides the space into three equal parts.
+
+8. The `.magazine-cover` should have a `grid-template-rows` property. It should be set to `auto` for the first row, and divide equally the space occupied by the remaining two rows.
+
+9. You should add a gap between grid items and set the width of the `.magazine-cover` to occupy most of the viewport width.
+
+**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
+
+# --hints--
+
+You should have a `main` element.
+
+```js
+assert.exists(document.querySelector('main'));
+```
+
+Your `main` element should have a `class` of `magazine-cover`.
+
+```js
+assert.exists(document.querySelector('main.magazine-cover'));
+```
+
+You should have a `header` element within your `main` element.
+
+```js
+assert.exists(document.querySelector("main > header"));
+```
+
+Your `header` element should have a `class` of `title` and should contain some text.
+
+```js
+const header = document.querySelector("header.title");
+assert.exists(header);
+assert.isAbove(header.innerText.length, 0);
+```
+
+You should have a `section` element for each article and the cover image, with classes `feature-article`, `small-article1`, `small-article2`, and `cover-image` respectively.
+
+```js
+const featureArticle = document.querySelector('section.feature-article');
+const smallArticle1 = document.querySelector('section.small-article1');
+const smallArticle2 = document.querySelector('section.small-article2');
+const coverImage = document.querySelector('section.cover-image');
+
+assert.exists(featureArticle);
+assert.exists(smallArticle1);
+assert.exists(smallArticle2);
+assert.exists(coverImage);
+```
+
+The `display` property of the `.magazine-cover` should be set to `grid`.
+
+```js
+assert.equal(getComputedStyle(document.querySelector('.magazine-cover')).display, 'grid');
+```
+
+Your `.magazine-cover` should have a `grid-template-areas` property with `title` spanning all three columns of the first row.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /^("|')title title title\1/);
+```
+
+The second row of the grid template should contain a `feature article` spanning two columns and a `cover image`.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /.("|')feature-article feature-article cover-image\1./);
+```
+
+The third row of the grid template should contain `small-article1`, `small-article2`, and `cover-image`.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /("|')small-article1 small-article2 cover-image\1$/);
+```
+
+Your `.magazine-cover` class should have a `grid-template-columns` property set to `1fr 1fr 1fr`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateColumns, '1fr 1fr 1fr');
+```
+
+Your `.magazine-cover` class should have a `grid-template-rows` property set to `auto 1fr 1fr`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateRows, 'auto 1fr 1fr');
+```
+
+You should add a gap of `10px` between grid items.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gap, '10px');
+```
+
+The `.title` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.title')?.gridArea, 'title');
+```
+
+The `.feature-article` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.feature-article')?.gridArea, 'feature-article');
+```
+
+The `.cover-image` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.cover-image')?.gridArea, 'cover-image');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<meta charset="utf-8">
+<title>Magazine Layout</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Adventure Magazine</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="magazine-cover">
+      <header class="title">
+          <h1>Adventure Awaits</h1>
+      </header>
+      <section class="feature-article">
+          <h2>Top 10 Exotic Destinations for 2024</h2>
+          <p>Discover the most breathtaking places to visit this year, from hidden beaches to mountain retreats. Our guide takes you through the best spots for your next adventure.</p>
+      </section>
+      <section class="small-article1">
+          <h3>Gear Up: Must-Have Gadgets</h3>
+          <p>Check out the latest tech and gear to make your travels more exciting and comfortable.</p>
+      </section>
+      <section class="small-article2">
+          <h3>Meet the Explorers</h3>
+          <p>Get to know the modern adventurers who are pushing the boundaries of exploration.</p>
+      </section>
+      <section class="cover-image">
+          <img src="https://cdn.freecodecamp.org/curriculum/labs/magazine-cover.png" alt="Adventure Cover Image">
+      </section>
+  </main>
+</body>
+</html>
+```
+
+```css
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.magazine-cover {
+  display: grid;
+  grid-template-areas: 
+      "title title title"
+      "feature-article feature-article cover-image"
+      "small-article1 small-article2 cover-image";
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto 1fr 1fr;
+  gap: 10px;
+  width: 80%;
+  background-color: #fff;
+}
+
+.title {
+  grid-area: title;
+  background-color: #1B1B32;
+  color: white;
+  padding: 10px;
+  text-align: center;
+}
+
+.feature-article {
+  grid-area: feature-article;
+  background-color: #f9f9f9;
+  padding: 10px;
+}
+
+.small-article1, .small-article2 {
+  background-color: #e9e9e9;
+  padding: 10px;
+}
+
+.cover-image {
+  grid-area: cover-image;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ddd;
+  padding: 10px;
+}
+
+.cover-image img {
+  max-width: 100%;
+  height: auto;
+} 
+```

curriculum/superblock-structure/full-stack.json

@@ -256,6 +256,7 @@
           "blocks": [
             { "dashedName": "lecture-working-with-css-grid" },
             { "dashedName": "workshop-magazine" },
+            { "dashedName": "lab-magazine-layout" },
             { "dashedName": "lecture-debugging-css" },
             { "dashedName": "lab-product-landing-page" },
             { "dashedName": "review-css-grid" },