From 10da750534274f3050d55a7830832b8824892118 Mon Sep 17 00:00:00 2001
From: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
Date: Mon, 12 Aug 2024 17:09:44 +0200
Subject: [PATCH] feat(curriculum): add video compilation lab (#55639)
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
---
client/i18n/locales/english/intro.json | 4 +
.../lab-video-compilation-page/index.md | 9 +
.../lab-video-compilation-page/meta.json | 16 ++
.../669e81368e52b3a5c35a2dc5.md | 235 ++++++++++++++++++
4 files changed, 264 insertions(+)
create mode 100644 client/src/pages/learn/front-end-development/lab-video-compilation-page/index.md
create mode 100644 curriculum/challenges/_meta/lab-video-compilation-page/meta.json
create mode 100644 curriculum/challenges/english/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 4d915ccef97..2684bfd91ee 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -1718,6 +1718,10 @@
"intro": [
"In this workshop, you will learn how to build an HTML only blog page using semantic elements including the main, nav, article and footer elements."
]
+ },
+ "lab-video-compilation-page": {
+ "title": "Build a Video Compilation Page",
+ "intro": ["For this lab, you will create a video compilation web page."]
}
}
},
diff --git a/client/src/pages/learn/front-end-development/lab-video-compilation-page/index.md b/client/src/pages/learn/front-end-development/lab-video-compilation-page/index.md
new file mode 100644
index 00000000000..069bd3afc91
--- /dev/null
+++ b/client/src/pages/learn/front-end-development/lab-video-compilation-page/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Video Compilation Page
+block: lab-video-compilation-page
+superBlock: front-end-development
+---
+
+## Introduction to the Video Compilation Page
+
+For this lab, you will create a video compilation web page.
diff --git a/curriculum/challenges/_meta/lab-video-compilation-page/meta.json b/curriculum/challenges/_meta/lab-video-compilation-page/meta.json
new file mode 100644
index 00000000000..a9623c34b96
--- /dev/null
+++ b/curriculum/challenges/_meta/lab-video-compilation-page/meta.json
@@ -0,0 +1,16 @@
+{
+ "name": "Build a Video Compilation Page",
+ "blockType": "lab",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "dashedName": "lab-video-compilation-page",
+ "order": 7,
+ "superBlock": "front-end-development",
+ "challengeOrder": [
+ {
+ "id": "669e81368e52b3a5c35a2dc5",
+ "title": "Build a Video Compilation Page"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/english/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md b/curriculum/challenges/english/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
new file mode 100644
index 00000000000..c757b994e5e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
@@ -0,0 +1,235 @@
+---
+id: 669e81368e52b3a5c35a2dc5
+title: Build a Video Compilation Page
+challengeType: 14
+dashedName: build-a-video-compilation-page
+---
+
+# --description--
+
+
+**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.
+1. You should have an `h1` element with the topic of your page.
+1. You should have a paragraph introducing the topic of your page below your `h1` element.
+1. You should have three `section` elements, each containing an `h2` element, a paragraph, and an `iframe` element.
+1. The three `iframe` elements should have a `src` attribute set to a valid video.
+1. Each `iframe` element should also have a `title` attribute to describe the embedded content, and a `height` attribute and a `width` attribute to set the element to a proper size.
+
+# --hints--
+
+You should have a `main` element inside your `body` element.
+
+```js
+assert.equal(document.querySelector('body :first-child').tagName, 'MAIN');
+```
+
+Your `main` element should be the only child of the `body` element.
+
+```js
+assert.equal(document.querySelector('body').children.length, 2);
+```
+
+You should have an `h1` element with the topic of your page inside the `main` element.
+
+```js
+assert.isAbove(document.querySelector('h1')?.innerText.length, 0);
+```
+
+You should have a paragraph introducing the topic of your page below your `h1` element.
+
+```js
+const p = document.querySelectorAll('p')[0];
+assert.equal(p?.previousElementSibling?.tagName, 'H1');
+assert.isAbove(p?.innerText.length, 0);
+```
+
+You should have three `section` elements below your first `p` element.
+
+```js
+assert.equal(document.querySelectorAll('section')?.length, 3);
+assert.equal(document.querySelectorAll('section')[0]?.previousElementSibling?.tagName, 'P')
+```
+
+Each `section` element should contain an `h2` element to give a title to that section as its first child.
+
+```js
+const sections = $('section');
+assert.equal(sections?.length, 3)
+for (let section of sections) {
+ assert.equal(section.children[0]?.tagName, 'H2');
+ assert.isAbove(section.children[0]?.innerText.length, 0);
+}
+```
+
+Each `section` element should contain a `p` element to introduce the video content as its second child.
+
+```js
+const sections = $('section');
+assert.equal(sections?.length, 3)
+for (let section of sections) {
+ assert.equal(section.children[1]?.tagName, 'P');
+ assert.isAbove(section.children[1]?.innerText.length, 0);
+}
+```
+
+Each `section` element should contain an `iframe` element as its third child.
+
+```js
+const sections = $('section');
+assert.equal(sections?.length, 3)
+for (let section of sections) {
+ assert.equal(section.children[2]?.tagName, 'IFRAME');
+}
+```
+
+Your first `iframe` element should have a `src` attribute set to a valid video.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[0]?.src.length, 0)
+```
+
+Your first `iframe` element should have a `title` attribute to describe the embedded content.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[0]?.title.length, 0)
+```
+
+Your first `iframe` element should have a `height` attribute.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[0]?.height.length, 0)
+```
+
+Your first `iframe` element should have a `width` attribute.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[0]?.width.length, 0)
+```
+
+Your second `iframe` element should have a `src` attribute set to a valid video.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[1]?.src.length, 0)
+```
+
+Your second `iframe` element should have a `title` attribute to describe the embedded content.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[1]?.title.length, 0)
+```
+
+Your second `iframe` element should have a `height` attribute.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[1]?.height.length, 0)
+```
+
+Your second `iframe` element should have a `width` attribute.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[1]?.width.length, 0)
+```
+
+Your third `iframe` element should have a `src` attribute set to a valid video.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[2]?.src.length, 0)
+```
+
+Your third `iframe` element should have a `title` attribute to describe the embedded content.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[2]?.title.length, 0)
+```
+
+Your third `iframe` element should have a `height` attribute.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[2]?.height.length, 0)
+```
+
+Your third `iframe` element should have a `width` attribute.
+
+```js
+assert.isAbove(document.querySelectorAll('iframe')[2]?.width.length, 0)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
Front End Web Development involves designing and building user interfaces of websites using HTML, CSS, and
+ JavaScript. It focuses on creating visually appealing, interactive, and user-friendly websites. Front End
+ evelopers
+ ensure accessibility, performance optimization, and
+ adherence to web standards, blending creativity with technical expertise.
+
+
HTML
+
HTML, or HyperText Markup Language, forms the backbone of web pages by defining their basic structure and
+ layout. It uses a series of elements to display text, images, lists, tables, and other static content on
+ a web page.
+
+
+
+
CSS
+
CSS, or Cascading Style Sheets, is used to control the visual presentation of HTML elements on a web
+ page. It allows for customized styling, including colors, fonts, layouts, and spacing, making websites
+ visually appealing. CSS also supports responsive design, ensuring web pages look good on
+ all devices.
+
+
+
+
JavaScript
+
JavaScript is a programming language that adds interactivity to static web pages, enabling dynamic
+ content updates, form validations, animations, and responsive behaviors based on user interactions and
+ events.