main, nav, article and footer elements."
]
},
- "szcd": { "title": "13", "intro": [] },
+ "lab-event-hub": {
+ "title": "Build an Event Hub",
+ "intro": [
+ "In this lab, you will build an event hub using semantic HTML."
+ ]
+ },
"ijdq": { "title": "14", "intro": [] },
"pwwg": { "title": "15", "intro": [] },
"cfgp": { "title": "16", "intro": [] },
diff --git a/client/src/pages/learn/front-end-development/lab-event-hub/index.md b/client/src/pages/learn/front-end-development/lab-event-hub/index.md
new file mode 100644
index 00000000000..901f9daaa93
--- /dev/null
+++ b/client/src/pages/learn/front-end-development/lab-event-hub/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build an Event Hub
+block: lab-event-hub
+superBlock: front-end-development
+---
+
+## Introduction to the Build an Event Hub
+
+In this lab, you will build an event hub using semantic HTML.
diff --git a/curriculum/challenges/_meta/lab-event-hub/meta.json b/curriculum/challenges/_meta/lab-event-hub/meta.json
new file mode 100644
index 00000000000..51eddba6b7c
--- /dev/null
+++ b/curriculum/challenges/_meta/lab-event-hub/meta.json
@@ -0,0 +1,11 @@
+{
+ "name": "Build an Event Hub",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "dashedName": "lab-event-hub",
+ "order": 13,
+ "superBlock": "front-end-development",
+ "challengeOrder": [{ "id": "66ebd4ae2812430bb883c787", "title": "Build an Event Hub" }],
+ "helpCategory": "HTML-CSS",
+ "blockType": "lab"
+}
diff --git a/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
new file mode 100644
index 00000000000..20ca9ed0964
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
@@ -0,0 +1,306 @@
+---
+id: 66ebd4ae2812430bb883c787
+title: Build an Event Hub
+challengeType: 14
+dashedName: lab-event-hub
+demoType: onClick
+---
+
+# --description--
+
+In this lab you will utilize the semantic HTML elements to create the structure of a web page. You'll add content and images to make it look like a real event hub.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should have a `header` element.
+1. Inside the `header` element, you should have a `h1` element that contains the text `Event Hub`, and a `nav` element.
+1. Inside the `nav` element, you should have an unordered list of two items containing links to different sections of the page. The first item should have the text `Upcoming Events`, and the second item should have the text `Past Events`.
+1. Each link should be represented by an `a` element with an `href` attribute that links to the corresponding section of the page, `#upcoming-events` and `#past-events` respectively.
+1. You should have a `main` element that contains the different sections of the page.
+1. Inside the `main` element, you should have two `section` elements.
+1. The first `section` element should have an `id` attribute with the value `upcoming-events`
+1. Inside the `#upcoming-events` section, you should have:
+
+ - An `h2` element with the text `Upcoming Events`.
+ - Two `article` elements. Each article should represent an event, and it should have :
+ - A `h3` element for the event title.
+ - A `p` element for the event description. You can add a date at the bottom if you like.
+
+1. The second `section` element should have an `id` attribute with the value `past-events`.
+1. Inside the `#past-events` section, you should have:
+
+ - An `h2` element with the text `Past Events`.
+ - Two `article` elements. Each article element should represent a past event, and it should have:
+ - An `h3` element for the event title,
+ - A `p` element for the event description. You can add a date at the bottom if you like.
+ - An image element with the `src` attribute pointing to an image file and the `alt` attribute with a description of the image.
+
+**Note:** You can use any text for the event descriptions and dates. You can use the following image URLs for the images if you like:
+
+- `https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg`.
+- `https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg`.
+
+# --hints--
+
+You should have a `header` element.
+
+```js
+assert.isNotNull(document.querySelector("header"));
+```
+
+Your `header` element should come after the opening `body` tag.
+
+```js
+assert.equal(document.querySelector("body")?.firstElementChild?.tagName, "HEADER");
+```
+
+Inside the `header` element, you should have a `h1` element that contains the text `Event Hub`.
+
+```js
+const h1Element = document.querySelector('header h1');
+assert.strictEqual(h1Element?.innerText, "Event Hub");
+```
+
+Inside the `header` element, after the `h1` element, you should have a `nav` element.
+
+```js
+assert.isNotNull(document.querySelector("header>h1+nav"));
+```
+
+Your `nav` element should contain an unordered list of two items.
+
+```js
+const liElements = document.querySelectorAll('header nav>ul>li');
+
+assert.isNotNull('header nav>ul');
+assert.strictEqual(liElements.length, 2);
+```
+
+The first item in the unordered list should be a link.
+
+```js
+const firstLink = document.querySelectorAll('header nav ul li a')[0];
+assert.exists(firstLink);
+```
+
+The second item in the unordered list should be a link.
+
+```js
+const secondLink = document.querySelectorAll('header nav ul li a')[1];
+assert.exists(secondLink);
+```
+
+The text of the first item in the unordered list should be `"Upcoming Events"`.
+
+```js
+const firstLink = document.querySelectorAll('header nav>ul>li>a')[0];
+assert.strictEqual(firstLink.innerText, "Upcoming Events");
+```
+
+The first item in the unordered list should have the `href` set to `#upcoming-events`.
+
+```js
+const anchorElement = document.querySelectorAll("header nav>ul>li>a")[0];
+const hrefAttribute = anchorElement?.getAttribute("href");
+assert.strictEqual(hrefAttribute, "#upcoming-events");
+```
+
+The second item in the unordered list should have the `href` set to `#past-events`.
+
+```js
+const anchorElement = document.querySelectorAll("header nav>ul>li>a")[1];
+const hrefAttribute = anchorElement?.getAttribute("href");
+assert.strictEqual(hrefAttribute, "#past-events");
+```
+
+You should have a `main` element after the `header` element closing tag.
+
+```js
+const mainElement = document.querySelector("body>header+main");
+assert.isNotNull(mainElement);
+```
+
+Inside the `main` element, you should have two `section` elements.
+
+```js
+const sectionElements = document.querySelectorAll('body>header+main>section');
+assert.strictEqual(sectionElements.length, 2);
+```
+
+Your first `section` element should have an `id` attribute with the value `upcoming-events`.
+
+```js
+const firstSection = document.querySelectorAll('body>header+main>section')[0];
+const idAttribute = firstSection?.getAttribute("id");
+assert.strictEqual(idAttribute, "upcoming-events");
+```
+
+Your second `section` element should have an `id` attribute with the value `past-events`.
+
+```js
+const secondSection = document.querySelectorAll('body>header+main>section')[1];
+const idAttribute = secondSection?.getAttribute("id");
+assert.strictEqual(idAttribute, "past-events");
+```
+
+Inside the `#upcoming-events` section, you should have an `h2` element with the text `Upcoming Events`.
+
+```js
+const h2Element = document.querySelector('#upcoming-events h2');
+assert.strictEqual(h2Element?.innerText, "Upcoming Events");
+```
+
+Inside the `#upcoming-events` section, you should have two `article` elements.
+
+```js
+const articleElements = document.querySelectorAll('#upcoming-events article');
+assert.strictEqual(articleElements.length, 2);
+```
+
+Both of the `article` elements inside the `#upcoming-events` section should have an `h3` element for the event title.
+
+```js
+const h3Elements = document.querySelectorAll('#upcoming-events article h3');
+assert.strictEqual(h3Elements.length, 2);
+```
+
+Both of the `article` elements inside the `#upcoming-events` section should have a paragraph element for the event description.
+
+```js
+const pElement = document.querySelectorAll('#upcoming-events article h3+p').length;
+assert.strictEqual(pElement, 2);
+```
+
+Inside the `#past-events` section, you should have an `h2` element with the text `Past Events`.
+
+```js
+const h2Element = document.querySelector('#past-events h2');
+assert.strictEqual(h2Element?.innerText, "Past Events");
+```
+
+Inside the `#past-events` section, you should have two `article` elements.
+
+```js
+const articleElements = document.querySelectorAll('#past-events article');
+assert.strictEqual(articleElements.length, 2);
+```
+
+Both of the `article` elements inside the `#past-events` section should have an `h3` element for the event title.
+
+```js
+const h3Elements = document.querySelectorAll('#past-events article h3');
+assert.strictEqual(h3Elements.length, 2);
+```
+
+Both of the `article` elements inside the `#past-events` section should have a paragraph element for the event description.
+
+```js
+const pElement = document.querySelectorAll('#past-events article h3+p').length;
+assert.strictEqual(pElement, 2);
+```
+
+Both of the `article` elements inside the `#past-events` section should have an image element.
+
+```js
+const imgElements = document.querySelectorAll('#past-events article img');
+assert.strictEqual(imgElements.length, 2);
+```
+
+Both of the image elements inside the `#past-events` section should have the `src` attribute pointing to an image file.
+
+```js
+const imgElements = document.querySelectorAll('#past-events article img');
+assert.strictEqual(imgElements.length, 2);
+
+for (let img of imgElements) {
+ assert(img.getAttribute("src"));
+}
+```
+
+Both of the image elements inside the `#past-events` section should have the `alt` attribute with a description of the image.
+
+```js
+const imgElements = document.querySelectorAll('#past-events article img');
+assert.strictEqual(imgElements.length, 2);
+
+for (let img of imgElements) {
+ assert(img.getAttribute("alt"));
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Join us for a deep dive into the latest advancements in artificial intelligence and machine learning. Industry leaders will share insights and case studies on how AI is transforming various sectors.
+Date: August 10, 2024
+A hands-on workshop designed for developers looking to enhance their skills in modern web technologies including React, Node.js, and GraphQL. Perfect for both beginners and experienced developers.
+Date: September 5, 2024
+An event focusing on the latest trends and threats in cybersecurity. Experts discussed strategies for protecting data and ensuring privacy in an increasingly digital world.
+Date: June 15, 2024
+
+ A comprehensive event covering the future of blockchain technology. Topics included decentralized finance (DeFi), smart contracts, and the impact of blockchain on various industries.
+Date: July 20, 2024
+
+