From cdffc8d8de6f89531a3692d379ffadaf38b75e3a Mon Sep 17 00:00:00 2001 From: Dario <105294544+Dario-DC@users.noreply.github.com> Date: Fri, 5 Sep 2025 08:57:32 +0200 Subject: [PATCH] chore(curriculum): replace magazine layout lab with newspaper layout lab (#59012) Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com> Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 6 +- .../lab-magazine-layout/index.md | 9 - .../lab-newspaper-layout/index.md | 9 + .../6735a7370e0ae93a4577c689.md | 266 ----------- .../6735a7370e0ae93a4577c689.md | 422 ++++++++++++++++++ ...-layout.json => lab-newspaper-layout.json} | 6 +- .../superblocks/full-stack-developer.json | 2 +- 7 files changed, 438 insertions(+), 282 deletions(-) delete mode 100644 client/src/pages/learn/full-stack-developer/lab-magazine-layout/index.md create mode 100644 client/src/pages/learn/full-stack-developer/lab-newspaper-layout/index.md delete mode 100644 curriculum/challenges/english/blocks/lab-magazine-layout/6735a7370e0ae93a4577c689.md create mode 100644 curriculum/challenges/english/blocks/lab-newspaper-layout/6735a7370e0ae93a4577c689.md rename curriculum/structure/blocks/{lab-magazine-layout.json => lab-newspaper-layout.json} (51%) diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index ae3e2991982..f56c64cf33f 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2876,10 +2876,10 @@ "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." ] }, - "lab-magazine-layout": { - "title": "Design a Magazine Layout", + "lab-newspaper-layout": { + "title": "Design a Newspaper Layout", "intro": [ - "In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns." + "In this lab, you will design a newspaper layout using CSS Grid, including concepts like grid rows and grid columns." ] }, "lecture-debugging-css": { diff --git a/client/src/pages/learn/full-stack-developer/lab-magazine-layout/index.md b/client/src/pages/learn/full-stack-developer/lab-magazine-layout/index.md deleted file mode 100644 index c1a023952af..00000000000 --- a/client/src/pages/learn/full-stack-developer/lab-magazine-layout/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -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. diff --git a/client/src/pages/learn/full-stack-developer/lab-newspaper-layout/index.md b/client/src/pages/learn/full-stack-developer/lab-newspaper-layout/index.md new file mode 100644 index 00000000000..8349c36c621 --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/lab-newspaper-layout/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Design a Newspaper Layout +block: lab-newspaper-layout +superBlock: full-stack-developer +--- + +## Introduction to the Design a Newspaper Layout + +In this lab, you will design a newspaper layout using CSS Grid, including concepts like grid rows and grid columns. diff --git a/curriculum/challenges/english/blocks/lab-magazine-layout/6735a7370e0ae93a4577c689.md b/curriculum/challenges/english/blocks/lab-magazine-layout/6735a7370e0ae93a4577c689.md deleted file mode 100644 index 42242575fde..00000000000 --- a/curriculum/challenges/english/blocks/lab-magazine-layout/6735a7370e0ae93a4577c689.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -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` selector should use the `grid-template-columns` property to divide the space into three equal parts. Remember you can use either the `repeat` function or manually define each fractional unit. - -```js -assert.oneOf( - new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateColumns, - ['1fr 1fr 1fr', 'repeat(3, 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 - - - - - -Magazine Layout - - - - - - - -``` - -```css - -``` - -# --solutions-- - -```html - - - - - - Adventure Magazine - - - -
-
-

Adventure Awaits

-
-
-

Top 10 Exotic Destinations for 2024

-

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.

-
-
-

Gear Up: Must-Have Gadgets

-

Check out the latest tech and gear to make your travels more exciting and comfortable.

-
-
-

Meet the Explorers

-

Get to know the modern adventurers who are pushing the boundaries of exploration.

-
-
- Adventure Cover Image -
-
- - -``` - -```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; -} -``` diff --git a/curriculum/challenges/english/blocks/lab-newspaper-layout/6735a7370e0ae93a4577c689.md b/curriculum/challenges/english/blocks/lab-newspaper-layout/6735a7370e0ae93a4577c689.md new file mode 100644 index 00000000000..8d1266a4b61 --- /dev/null +++ b/curriculum/challenges/english/blocks/lab-newspaper-layout/6735a7370e0ae93a4577c689.md @@ -0,0 +1,422 @@ +--- +id: 6735a7370e0ae93a4577c689 +title: Design a Newspaper Layout +challengeType: 25 +dashedName: design-a-newspaper-layout +demoType: onClick +--- + +# --description-- + +In this lab, you will design a newspaper 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. Your page should contain a `main` element with the class `newspaper-layout`. +1. The `.newspaper-layout` should include a `header` with the class `title` containing an `h1` to display the newspaper's name. +1. The `.newspaper-layout` should include an `article` with the class `feature-article` for the main news article. +1. The `.feature-article` should include an `h2` element for the article title followed by a `p` element for the article content. +1. You should add three more `article` elements for smaller articles, with classes `small-article1`, `small-article2`, and `small-article3`. +1. Each of the smaller articles should include an `h3` element for the article title followed by a `p` element for the article content. +1. The `.newspaper-layout` should include an `article` element with the class `secondary-article` for an additional news section. +1. The `.secondary-article` should include an `h2` element for the article title followed by a `p` element for the article content. +1. The `.newspaper-layout` should include a `figure` with the class `cover-image` to display an image that represents the newspaper's content. +1. The elements with the classes `title`, `feature-article`, `secondary-article`, `cover-image`, `small-article1`, `small-article2`, and `small-article3` should have a `grid-area` property set to the same class name. +1. Your `.newspaper-layout` should use CSS Grid with a `grid-template-areas` property to define the arrangement of sections: + - The `.title` 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. +1. The `.newspaper-layout` should have a `grid-template-columns` property that divides the space into three equal columns. +1. 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. +1. You should add a gap between grid items. +1. Ensure that the image inside `.cover-image` fits within the designated space by setting its `max-width` to `100%`. + +**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 `newspaper-layout`. + +```js +assert.exists(document.querySelector('main.newspaper-layout')); +``` + +You should have a `header` element with the `class` of `title` within your `.newspaper-layout` element. + +```js +const header = document.querySelector(".newspaper-layout > header"); +assert.exists(header); +assert(header.classList.contains("title")); +``` + +Your `header` element should contain an `h1` element. + +```js +const h1 = document.querySelector("header h1"); +assert.exists(h1); +``` + +Your `.title` element should contain some text. + +```js +assert.isAbove(document.querySelector(".title").innerText.length, 0); +``` + +You should have an `article` element for each article with classes `feature-article`, `small-article1`, `small-article2`, `small-article3`, and `secondary-article`, respectively. + +```js +const featureArticle = document.querySelector('article.feature-article'); +const smallArticle1 = document.querySelector('article.small-article1'); +const smallArticle2 = document.querySelector('article.small-article2'); +const smallArticle3 = document.querySelector('article.small-article3'); +const secondaryArticle = document.querySelector('article.secondary-article'); + +assert.exists(featureArticle); +assert.exists(smallArticle1); +assert.exists(smallArticle2); +assert.exists(smallArticle3); +assert.exists(secondaryArticle); +``` + +The `.feature-article` should include an `h2` element followed by a `p` element. + +```js +const h2 = document.querySelector(".feature-article h2"); +const p = document.querySelector(".feature-article h2 + p"); +assert.exists(h2); +assert.exists(p); +``` + +`.small-article1`, `.small-article2`, and `.small-article3` should include an `h3` element followed by a `p` element. + +```js +for (let i = 1; i < 4; i++) { + let h3 = document.querySelector(`.small-article${i} h3`); + let p = document.querySelector(`.small-article${i} h3 + p`); + assert.exists(h3); + assert.exists(p); +} +``` + +The `.secondary-article` should include an `h2` element followed by a `p` element. + +```js +const h2 = document.querySelector(".secondary-article h2"); +const p = document.querySelector(".secondary-article h2 + p"); +assert.exists(h2); +assert.exists(p); +``` + +You should have a `figure` element with the class of `cover-image` within your `.newspaper-layout`. + +```js +assert.exists(document.querySelector(".newspaper-layout figure.cover-image")); +``` + +Your `.cover-image` should contain an `img` element. + +```js +assert.exists(document.querySelector(".cover-image img")); +``` + +The `display` property of the `.newspaper-layout` element should be set to `grid`. + +```js +assert.equal(getComputedStyle(document.querySelector('.newspaper-layout')).display, 'grid'); +``` + +Your `.newspaper-layout` element should have a `grid-template-areas` property with `title` spanning all three columns of the first row. + +```js +const newspaperLayout = getComputedStyle(document.querySelector('.newspaper-layout')); +assert.match(newspaperLayout.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 newspaperLayout = getComputedStyle(document.querySelector('.newspaper-layout')); +const rowRegex = /("|')(.+?)\1/; +const fromSecondRow = newspaperLayout.gridTemplateAreas.replace(rowRegex, "").trimStart(); +assert.match(fromSecondRow, /^("|')feature-article feature-article cover-image\1/); +``` + +The third row of the grid template should contain a `secondary-article` spanning two columns and a `cover-image`. + +```js +const newspaperLayout = getComputedStyle(document.querySelector('.newspaper-layout')); +const rowRegex = /("|')(.+?)\1/; +const fromThirdRow = newspaperLayout.gridTemplateAreas.replace(rowRegex, "").replace(rowRegex, "").trimStart(); +assert.match(fromThirdRow, /^("|')secondary-article secondary-article cover-image\1/); +``` + +The fourth row of the grid template should contain `small-article1`, `small-article2`, and `small-article3`. + +```js +const newspaperLayout = getComputedStyle(document.querySelector('.newspaper-layout')); +const rowRegex = /("|')(.+?)\1/; +const fromFourthRow = newspaperLayout.gridTemplateAreas.replace(rowRegex, "").replace(rowRegex, "").replace(rowRegex, "").trimStart(); +assert.match(fromFourthRow, /^("|')small-article1 small-article2 small-article3\1$/); +``` + +Your `.newspaper-layout` selector should use the `grid-template-columns` property to divide the space into three equal parts. Remember you can use either the `repeat` function or manually define each fractional unit. + +```js +assert.oneOf( + new __helpers.CSSHelp(document).getStyle('.newspaper-layout')?.gridTemplateColumns, + ['1fr 1fr 1fr', 'repeat(3, 1fr)'] +); +``` + +Your `.newspaper-layout` selector should have a `grid-template-rows` property set to `auto 1fr 1fr 1fr`. + +```js +assert.oneOf(new __helpers.CSSHelp(document).getStyle('.newspaper-layout')?.gridTemplateRows, ['auto 1fr 1fr 1fr', 'auto repeat(3, 1fr)']); +``` + +You should add a gap between grid items. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.newspaper-layout')?.gap); +``` + +`.title` should have a `grid-area` of `title`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.title')?.gridArea, 'title'); +``` + +`.feature-article` should have a `grid-area` of `feature-article`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.feature-article')?.gridArea, 'feature-article'); +``` + +`.cover-image` should have a `grid-area` of `cover-image`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.cover-image')?.gridArea, 'cover-image'); +``` + +`.secondary-article` should have a `grid-area` of `secondary-article`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.secondary-article')?.gridArea, 'secondary-article'); +``` + +`.small-article1` should have a `grid-area` of `small-article1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.small-article1')?.gridArea, 'small-article1'); +``` + +`.small-article2` should have a `grid-area` of `small-article2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.small-article2')?.gridArea, 'small-article2'); +``` + +`.small-article3` should have a `grid-area` of `small-article3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.small-article3')?.gridArea, 'small-article3'); +``` + +The `img` inside `.cover-image` should have a `max-width` of `100%`. + +```js +const coverImage = document.querySelector(".cover-image"); +const img = document.querySelector(".cover-image img"); +assert.equal(getComputedStyle(img).maxWidth, "100%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +Newspaper Layout + + + + + + + +``` + +```css + +``` + +# --solutions-- + +```html + + + + + + + Newspaper Layout + + + + +
+
+

The Daily Local News

+
+ +
+

Breaking News: Volcano Eruption Disrupts Tourism

+

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.

+
+ +
+

Sports: Local Team Wins Championship

+

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.

+
+ +
+

Health: Tips for a Balanced Diet

+

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:

+
+ +
+

Travel: Top 10 Destinations for 2025

+

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:

+
+ +
+

Technology: The Rise of AI

+

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.

+
+ +
+ Cover Image +
+
+ + + +``` + +```css +body { + font-family: 'Georgia', 'Times New Roman', Times, serif; + padding: 0; + margin: 0; + background-color: #f0f0f0; +} + +.newspaper-layout { + display: grid; + grid-template-areas: + "title title title" + "feature-article feature-article cover-image" + "secondary-article secondary-article cover-image" + "small-article1 small-article2 small-article3"; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto 1fr 1fr 1fr; + gap: 15px; + background-color: #fff; + padding: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + text-align: justify; +} + +.title { + grid-area: title; + background-color: #1B1B32; + color: white; + padding: 15px; + text-align: center; +} + +.title h1 { + font-size: 2.5rem; + line-height: 1.3; + margin: 0; +} + +.feature-article, +.secondary-article { + background-color: #f9f9f9; + padding: 15px; + font-size: 1rem; +} + +.feature-article { + grid-area: feature-article; +} + +.secondary-article { + grid-area: secondary-article; +} + +.small-article1, +.small-article2, +.small-article3 { + background-color: #e9e9e9; + padding: 15px; + font-size: 0.9rem; +} + +.small-article1 { + grid-area: small-article1; +} + +.small-article2 { + grid-area: small-article2; +} + +.small-article3 { + grid-area: small-article3; +} + +.cover-image { + grid-area: cover-image; + display: flex; + justify-content: center; + align-items: center; + background-color: #ddd; + padding: 15px; + margin: 0; +} + +.cover-image img { + max-width: 100%; + height: 350px; + width: 350px; + border-radius: 5px; +} +``` diff --git a/curriculum/structure/blocks/lab-magazine-layout.json b/curriculum/structure/blocks/lab-newspaper-layout.json similarity index 51% rename from curriculum/structure/blocks/lab-magazine-layout.json rename to curriculum/structure/blocks/lab-newspaper-layout.json index f569f533c50..36dfa8fc842 100644 --- a/curriculum/structure/blocks/lab-magazine-layout.json +++ b/curriculum/structure/blocks/lab-newspaper-layout.json @@ -1,10 +1,10 @@ { - "name": "Design a Magazine Layout", + "name": "Design a Newspaper Layout", "isUpcomingChange": false, "usesMultifileEditor": true, - "dashedName": "lab-magazine-layout", + "dashedName": "lab-newspaper-layout", "challengeOrder": [ - { "id": "6735a7370e0ae93a4577c689", "title": "Design a Magazine Layout" } + { "id": "6735a7370e0ae93a4577c689", "title": "Design a Newspaper Layout" } ], "helpCategory": "HTML-CSS", "blockLayout": "link", diff --git a/curriculum/structure/superblocks/full-stack-developer.json b/curriculum/structure/superblocks/full-stack-developer.json index addf48627c8..0abe2db2b6d 100644 --- a/curriculum/structure/superblocks/full-stack-developer.json +++ b/curriculum/structure/superblocks/full-stack-developer.json @@ -238,7 +238,7 @@ "blocks": [ "lecture-working-with-css-grid", "workshop-magazine", - "lab-magazine-layout", + "lab-newspaper-layout", "lecture-debugging-css", "lab-product-landing-page", "review-css-grid",