From 648cc58d6841f3159ce14220b8ff4e5ca037592d Mon Sep 17 00:00:00 2001 From: Hillary Nyakundi <63947040+larymak@users.noreply.github.com> Date: Wed, 18 Dec 2024 16:57:36 +0300 Subject: [PATCH] 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 | 7 +- .../lab-magazine-layout/index.md | 9 + .../_meta/lab-magazine-layout/meta.json | 11 + .../6735a7370e0ae93a4577c689.md | 263 ++++++++++++++++++ .../superblock-structure/full-stack.json | 1 + 5 files changed, 290 insertions(+), 1 deletion(-) create mode 100644 client/src/pages/learn/full-stack-developer/lab-magazine-layout/index.md create mode 100644 curriculum/challenges/_meta/lab-magazine-layout/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 4abe0d423c0..7366616c628 100644 --- a/client/i18n/locales/english/intro.json +++ b/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": [ 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 new file mode 100644 index 00000000000..c1a023952af --- /dev/null +++ b/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. diff --git a/curriculum/challenges/_meta/lab-magazine-layout/meta.json b/curriculum/challenges/_meta/lab-magazine-layout/meta.json new file mode 100644 index 00000000000..579cc92a9cd --- /dev/null +++ b/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" +} diff --git a/curriculum/challenges/english/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md b/curriculum/challenges/english/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md new file mode 100644 index 00000000000..42b09cf6a31 --- /dev/null +++ b/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 + + + + + +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/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json index 74018c3b6f6..066f875300f 100644 --- a/curriculum/superblock-structure/full-stack.json +++ b/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" },