main, nav, article and footer elements."
+ ]
+ },
+ "event-hub": {
+ "title": "Build an Event Hub",
+ "intro": [
+ "In this lab, you'll build an event hub and review semantic elements like header, nav, article, and more."
+ ]
+ }
+ }
+ },
"dev-playground": {
"title": "Dev Playground",
"intro": ["Playground for creating and testing challenges"],
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 5b7c2edd728..b5fca7e722b 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -86,6 +86,7 @@
"click-start-course": "Start the course",
"click-start-project": "Start the project",
"click-start-exam": "Start the exam",
+ "go-to-course": "Go to course",
"change-language": "Change Language",
"resume-project": "Resume project",
"start-project": "Start project",
@@ -175,6 +176,7 @@
"legacy-curriculum-heading": "Our archived coursework:",
"next-heading": "Try our beta curriculum:",
"upcoming-heading": "Upcoming curriculum:",
+ "catalog-heading": "Explore our Catalog:",
"faq": "Frequently asked questions:",
"faqs": [
{
@@ -1245,5 +1247,15 @@
"exit": "Exit the survey",
"two-questions": "Congratulations on getting this far. Before you can start the exam, please answer these two short survey questions."
}
+ },
+ "curriculum": {
+ "catalog": {
+ "title": "Explore our Catalog",
+ "levels": {
+ "beginner": "Beginner",
+ "intermediate": "Intermediate",
+ "advanced": "Advanced"
+ }
+ }
}
}
diff --git a/client/src/assets/superblock-icon.tsx b/client/src/assets/superblock-icon.tsx
index 8e50319efbf..5a5c6a58e81 100644
--- a/client/src/assets/superblock-icon.tsx
+++ b/client/src/assets/superblock-icon.tsx
@@ -47,6 +47,8 @@ const iconMap = {
[SuperBlocks.A2Chinese]: A2EnglishIcon,
[SuperBlocks.RosettaCode]: RosettaCodeIcon,
[SuperBlocks.PythonForEverybody]: PythonIcon,
+ [SuperBlocks.BasicHtml]: Code,
+ [SuperBlocks.SemanticHtml]: Code,
[SuperBlocks.DevPlayground]: Code
};
diff --git a/client/src/components/Map/index.tsx b/client/src/components/Map/index.tsx
index 5cdb67e0f47..ea0ccee64cc 100644
--- a/client/src/components/Map/index.tsx
+++ b/client/src/components/Map/index.tsx
@@ -42,7 +42,8 @@ const superBlockHeadings: { [key in SuperBlockStage]: string } = {
[SuperBlockStage.Extra]: 'landing.interview-prep-heading',
[SuperBlockStage.Legacy]: 'landing.legacy-curriculum-heading',
[SuperBlockStage.Next]: 'landing.next-heading',
- [SuperBlockStage.Upcoming]: 'landing.upcoming-heading'
+ [SuperBlockStage.Upcoming]: 'landing.upcoming-heading',
+ [SuperBlockStage.Catalog]: 'landing.catalog-heading'
};
const mapStateToProps = createSelector(
diff --git a/client/src/pages/catalog.css b/client/src/pages/catalog.css
new file mode 100644
index 00000000000..df6ecc5c893
--- /dev/null
+++ b/client/src/pages/catalog.css
@@ -0,0 +1,22 @@
+.catalog-wrap {
+ display: flex;
+ gap: 2rem;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+}
+
+.catalog-item {
+ padding: 1rem;
+ background-color: var(--primary-background);
+ width: 400px;
+ min-height: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.catalog-item-bottom {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+}
diff --git a/client/src/pages/catalog.tsx b/client/src/pages/catalog.tsx
new file mode 100644
index 00000000000..db53b5fab48
--- /dev/null
+++ b/client/src/pages/catalog.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Col, Spacer } from '@freecodecamp/ui';
+import { ButtonLink } from '../components/helpers';
+import { catalog } from '../../../shared/config/catalog';
+import { showUpcomingChanges } from '../../config/env.json';
+import FourOhFour from '../components/FourOhFour';
+
+import './catalog.css';
+
+const CatalogPage = () => {
+ const { t } = useTranslation();
+
+ return showUpcomingChanges ? (
+ {text}
+ ))} +main, nav, article and footer elements.
diff --git a/client/src/pages/learn/semantic-html/event-hub/index.md b/client/src/pages/learn/semantic-html/event-hub/index.md
new file mode 100644
index 00000000000..8fb63310da4
--- /dev/null
+++ b/client/src/pages/learn/semantic-html/event-hub/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Event Hub
+block: event-hub
+superBlock: semantic-html
+---
+
+## Introduction to the Build an Event Hub
+
+In this lab, you will build an event hub using semantic HTML.
diff --git a/client/src/pages/learn/semantic-html/index.md b/client/src/pages/learn/semantic-html/index.md
new file mode 100644
index 00000000000..a08db1766d7
--- /dev/null
+++ b/client/src/pages/learn/semantic-html/index.md
@@ -0,0 +1,9 @@
+---
+title: Semantic HTML
+superBlock: semantic-html
+certification: semantic-html
+---
+
+## Introduction to Semantic HTML
+
+Intoduction to Semantic HTML.
diff --git a/curriculum/challenges/_meta/cat-blog-page/meta.json b/curriculum/challenges/_meta/cat-blog-page/meta.json
new file mode 100644
index 00000000000..a22d3ff0acb
--- /dev/null
+++ b/curriculum/challenges/_meta/cat-blog-page/meta.json
@@ -0,0 +1,30 @@
+{
+ "name": "Build a Cat Blog Page",
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "cat-blog-page",
+ "superBlock": "semantic-html",
+ "order": 0,
+ "challengeOrder": [
+ {
+ "id": "669aff9f5488f1bea056416d",
+ "title": "Step 1"
+ },
+ {
+ "id": "669fc7e141e4703748c558bf",
+ "title": "Step 2"
+ },
+ {
+ "id": "669fc938d38e6e38ace9251e",
+ "title": "Step 3"
+ },
+ {
+ "id": "669fcb06c3034a39f5431a38",
+ "title": "Step 4"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/_meta/cat-photo-app/meta.json b/curriculum/challenges/_meta/cat-photo-app/meta.json
new file mode 100644
index 00000000000..56cee9e1268
--- /dev/null
+++ b/curriculum/challenges/_meta/cat-photo-app/meta.json
@@ -0,0 +1,30 @@
+{
+ "name": "Build a Cat Photo App",
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "cat-photo-app",
+ "superBlock": "basic-html",
+ "order": 0,
+ "challengeOrder": [
+ {
+ "id": "5dc174fcf86c76b9248c6eb2",
+ "title": "Step 1"
+ },
+ {
+ "id": "5dc1798ff86c76b9248c6eb3",
+ "title": "Step 2"
+ },
+ {
+ "id": "5dc17d3bf86c76b9248c6eb4",
+ "title": "Step 3"
+ },
+ {
+ "id": "5dc17dc8f86c76b9248c6eb5",
+ "title": "Step 4"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/_meta/event-hub/meta.json b/curriculum/challenges/_meta/event-hub/meta.json
new file mode 100644
index 00000000000..56f7ea3b39f
--- /dev/null
+++ b/curriculum/challenges/_meta/event-hub/meta.json
@@ -0,0 +1,12 @@
+{
+ "name": "Build an Event Hub",
+ "blockType": "lab",
+ "blockLayout": "link",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "dashedName": "event-hub",
+ "superBlock": "semantic-html",
+ "order": 1,
+ "challengeOrder": [{ "id": "66ebd4ae2812430bb883c787", "title": "Build an Event Hub" }],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/_meta/recipe-page/meta.json b/curriculum/challenges/_meta/recipe-page/meta.json
new file mode 100644
index 00000000000..0758bdace48
--- /dev/null
+++ b/curriculum/challenges/_meta/recipe-page/meta.json
@@ -0,0 +1,17 @@
+{
+ "name": "Build a Recipe Page",
+ "blockType": "lab",
+ "blockLayout": "link",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "dashedName": "recipe-page",
+ "superBlock": "basic-html",
+ "order": 1,
+ "challengeOrder": [
+ {
+ "id": "668f08ea07b99b1f4a91acab",
+ "title": "Build a Recipe Page"
+ }
+ ],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/english/28-basic-html/cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/english/28-basic-html/cat-photo-app/5dc174fcf86c76b9248c6eb2.md
new file mode 100644
index 00000000000..6986a0647f0
--- /dev/null
+++ b/curriculum/challenges/english/28-basic-html/cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -0,0 +1,54 @@
+---
+id: 5dc174fcf86c76b9248c6eb2
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you will continue working with basic HTML elements like headings, paragraphs, and lists by building a cat photo app.
+
+Begin the workshop by adding an `h1` element with the text of `CatPhotoApp`.
+
+# --hints--
+
+The text `CatPhotoApp` should be present in the code. You may want to check your spelling.
+
+```js
+assert.match(code, /catphotoapp/i);
+```
+
+Your `h1` element should have an opening tag. Opening tags have this syntax: `everyonelovescutecatsonline!<\/p>/i +); +``` + +Your comment should contain the text `TODO: Add link to cat photos`. + +```js +assert.match(code, //i); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+Everyone loves cute cats online!
+ +--fcc-editable-region-- + + +``` + +# --solutions-- + +```html + + +Everyone loves cute cats online!
+ + +``` diff --git a/curriculum/challenges/english/28-basic-html/recipe-page/668f08ea07b99b1f4a91acab.md b/curriculum/challenges/english/28-basic-html/recipe-page/668f08ea07b99b1f4a91acab.md new file mode 100644 index 00000000000..a84e101e1a7 --- /dev/null +++ b/curriculum/challenges/english/28-basic-html/recipe-page/668f08ea07b99b1f4a91acab.md @@ -0,0 +1,224 @@ +--- +id: 668f08ea07b99b1f4a91acab +title: Build a Recipe Page +challengeType: 25 +dashedName: build-a-recipe-page +demoType: onClick +--- + +# --description-- + +Fulfill the user stories below and get all the tests to pass to complete the lab. + +**User Stories:** + +1. You should have a `!DOCTYPE html` declaration. +1. You should have an `html` element with `lang` set to `en`. +1. You should have a `head` element containing a `title` element with the name of your recipe, and a `meta` element with a `charset` attribute set to `UTF-8`. +1. You should have a `body` element. +1. You should have an `h1` element with the name of your recipe. +1. You should have a `p` element that introduces the recipe below the `h1`. +1. You should have one `h2` element with the text `Ingredients` for the ingredients section. +1. You should have an unordered list (`ul` element) with at least four list items (`li` elements) that lists your ingredients below the first `h2` element. +1. You should have a second `h2` element with the text `Instructions` for the instructions section. +1. You should have an ordered list (`ol` element) with at least four list items that lists the recipe steps in order, below the second `h2`. +1. You should have one `img` element with a `src` attribute set to a valid image, you can use `https://cdn.freecodecamp.org/curriculum/labs/recipe.jpg` if you would like, and an `alt` attribute describing the image. + +# --hints-- + +Your recipe page should have a `!DOCTYPE html` declaration. + +```js +assert.match(code, //i); +``` + +You should have an `html` element with `lang` set to `en`. + +```js +assert.match(code, /Welcome to the ultimate guide for making mini chocolate chip cookies! These bite-sized treats are perfect for + satisfying your sweet tooth without overindulging. Follow this simple recipe to create delicious, + crispy-on-the-outside, chewy-on-the-inside mini chocolate chip cookies that everyone will love.
+
+ 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
+
+