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 + + + + + + Video Compilation Page + + + + + + + +``` + +# --solutions-- + +```html + + + + + + Video Compilation Page + + + +
+

Front End Web Development

+

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.

+ +
+
+ + + +```