feat: enable new curriculum (#44183)

* feat: use legacy flag

chore: reorder challenges

fix: linter

revert: server change

feat: unblock new editor

fix: proper order

fix: 0-based order

fix: broke the order

feat: move tribute certification to its own block

feat: split the old projects block into 4

fix: put all blocks in order

chore: add intro text

refactor: use block, not blockName in query

fix: project progress indicator

* fix: reorder new challenges/certs

* fix: reorder legacy challenges

* fix: reintroduce legacy certs

* feat: add showNewCurriculum flag to env

* chore: forgot sample.env

* feat: use feature flag for display

* fix: rename meta + dirs to match new blocks

* fix: add new blocks to help-category-map

* fix: update completion-modal for new GQL schema

* test: duplicate title/id errors ->  warnings

* fix: update completion-modal to new GQL schema Mk2

* chore: re-order metas (again)

* fix: revert super-block-intro changes

The intro needs to show both legacy and new content.  We need to decide
which pages are created, rather than than what a page shows when
rendered.

* feat: move upcoming curriculum into own superblock

* fix: handle one certification with two superBlocks

* fix: remove duplicated intros

* fix: remove duplicate projects from /settings

* fix: drop 'two' from Responsive Web Design Two

* chore: rename slug suffix from two to v2

* feat: control display of new curriculum

* feat: control project paths shown on /settings

* fix: use new project order for /settings

This does mean that /settings will change before the release, but I
don't think it's serious.  All the projects are there, just not in the
legacy order.

* fix: claim/show cert button

* chore: remove isLegacy

Since we have legacy superblocks, we don't currently need individual
blocks to be legacy

* test: fix utils.test

* fix: verifyCanClaim needs certification

If Shaun removes the cert claim cards, maybe we can remove this entirely

* fix: add hasEditableBoundaries flags where needed

* chore: remove isUpcomingChange

* chore: v2 -> 22

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/gatsby-node.js

@@ -76,6 +76,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
               node {
                 challenge {
                   block
+                  certification
                   challengeType
                   fields {
                     slug
@@ -116,6 +117,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
                   component
                 }
                 frontmatter {
+                  certification
                   block
                   superBlock
                   title
@@ -183,6 +185,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
             const pageBuilder = createByIdentityMap[nodeIdentity](createPage);
             pageBuilder(edge);
           } catch (e) {
+            console.log(e);
             console.log(`
             ident: ${nodeIdentity} does not belong to a function
 

client/i18n/locales/english/intro.json

@@ -63,47 +63,119 @@
           "Time to put your newly learnt skills to work. By working on these projects, you will get a chance to apply all of the skills, principles, and concepts you have learned so far: HTML, CSS, Visual Design, Accessibility, and more.",
           "Complete the five web programming projects below to earn your Responsive Web Design certification."
         ]
+      }
+    }
+  },
+  "responsive-web-design-22": {
+    "title": "Responsive Web Design",
+    "intro": [
+      "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
+      "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
+      "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
+    ],
+    "note": "Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.",
+    "blocks": {
+      "build-a-tribute-page-project": {
+        "title": "Build a Tribute Page Project",
+        "intro": ["placeholder", "holder of place"]
+      },
+      "build-a-personal-portfolio-webpage-project": {
+        "title": "Build a Personal Portfolio Webpage Project",
+        "intro": ["placeholder", "holder of place"]
+      },
+      "build-a-product-landing-page-project": {
+        "title": "Build a Product Landing Page Project",
+        "intro": ["placeholder", "holder of place"]
+      },
+      "build-a-survey-form-project": {
+        "title": "Build a Survey Form Project",
+        "intro": ["placeholder", "holder of place"]
+      },
+      "build-a-technical-documentation-page-project": {
+        "title": "Build a Technical Documentation Page Project",
+        "intro": ["placeholder", "holder of place"]
       },
       "learn-html-by-building-a-cat-photo-app": {
         "title": "Learn HTML by Building a Cat Photo App",
-        "intro": ["", ""]
+        "intro": [
+          "HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.",
+          "In this course, you'll learn the most common HTML tags by building your own cat photo app."
+        ]
       },
       "learn-basic-css-by-building-a-cafe-menu": {
         "title": "Learn Basic CSS by Building a Cafe Menu",
-        "intro": ["", ""]
+        "intro": [
+          "CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.",
+          "In this course, you'll learn CSS by designing a menu page for a cafe webpage."
+        ]
       },
       "learn-the-css-box-model-by-building-a-rothko-painting": {
         "title": "Learn the CSS Box Model by Building a Rothko Painting",
         "intro": [
-          "Mark Rothko was known for his abstract style of painting. Rothko paintings commonly depicted rectangular regions of color in varying sizes.",
+          "Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.",
-          "In this lesson, you will be using CSS to create your own painting in Rothko's style. You will use many of the skills you have already been practicing, as well as new CSS tool such as blur and transform."
+          "In this course, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces."
         ]
       },
       "learn-css-variables-by-building-a-city-skyline": {
         "title": "Learn CSS Variables by Building a City Skyline",
-        "intro": ["", ""]
+        "intro": [
+          "CSS variables help you organize your styles and reuse them.",
+          "In this course, you'll build a city skyline. You'll learn how to configure CSS variables so you can reuse them whenever you want."
+        ]
+      },
+      "learn-html-forms-by-building-a-registration-form": {
+        "title": "Learn HTML Forms by Building a Registration Form",
+        "intro": [
+          "You can use HTML forms to collect information from people who visit your webpage.",
+          "In this course, you'll learn HTML forms by building a signup page. You'll learn how to control what types of data people can type into your form, and some new CSS tools for styling your page."
+        ]
       },
-      "learn-html-forms-by-building-a-registration-form": { "title": "Learn HTML Forms by Building a Registration Form", "intro": ["", ""] },
       "learn-accessibility-by-building-a-quiz": {
         "title": "Learn Accessibility by Building a Quiz",
-        "intro": ["", ""]
+        "intro": [
+          "Accessibility is making your webpage easy for all people to use – even people with disabilities.",
+          "In this course, you'll build a quiz webpage. You'll learn accessibility tools such as keyboard shortcuts, ARIA attributes, and design best practices."
+        ]
       },
       "learn-intermediate-css-by-building-a-picasso-painting": {
         "title": "Learn Intermediate CSS by Building a Picasso Painting",
         "intro": [
-          "Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.",
+          "In this course, you'll use learn some intermediate CSS techniques by coding your own Picasso painting webpage. You'll learn about SVG icons, CSS positioning, and review other CSS skills you've learned."
-          "In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
+        ]
+      },
+      "learn-responsive-web-design-by-building-a-piano": {
+        "title": "Learn Responsive Web Design by Building a Piano",
+        "intro": [
+          "Responsive Design tells your webpage how it should look on different-sized screens.",
+          "In this course, you'll use CSS and Responsive Design to code a piano. You'll also learn more about media queries and pseudo selectors."
+        ]
+      },
+      "learn-css-flexbox-by-building-a-photo-gallery": {
+        "title": "Learn CSS Flexbox by Building a Photo Gallery",
+        "intro": [
+          "Flexbox helps you design your webpage so that it looks good on any screen size.",
+          "In this course, you'll use Flexbox to build a responsive photo gallery webpage."
+        ]
+      },
+      "learn-css-grid-by-building-a-magazine": {
+        "title": "Learn CSS Grid by Building a Magazine",
+        "intro": [
+          "CSS Grid gives you control over the rows and columns of your webpage design.",
+          "In this course, you'll build a magazine article. You'll learn how to use CSS Grid, including concepts like grid rows and grid columns."
         ]
       },
-      "learn-responsive-web-design-by-building-a-piano": { "title": "Learn Responsive Web Design by Building a Piano", "intro": ["", ""] },
-      "learn-css-flexbox-by-building-a-photo-gallery": { "title": "Learn CSS Flexbox by Building a Photo Gallery", "intro": ["", ""] },
-      "learn-css-grid-by-building-a-magazine": { "title": "Learn CSS Grid by Building a Magazine", "intro": ["", ""] },
       "learn-typography-by-building-a-nutrition-label": {
         "title": "Learn Typography by Building a Nutrition Label",
-        "intro": ["", ""]
+        "intro": [
+          "Typography is the art of styling your text to be easily readable and suit its purpose.",
+          "In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS."
+        ]
       },
       "learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": ["", ""] },
-      "learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] },
+      "learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": [
+        "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.",
+        "In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed."
+      ] },
       "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] }
     }
   },
@@ -560,7 +632,11 @@
     "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
     "courses": "Courses",
     "steps": "Steps",
+    "expand": "Expand",
+    "collapse": "Collapse",
     "expand": "Expand courses",
-    "collapse": "Collapse courses"
+    "collapse": "Collapse courses",
+    "legacy-header": "Legacy Courses",
+    "legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning."
   }
 }

client/src/pages/learn/back-end-development-and-apis/index.md

@@ -1,6 +1,7 @@
 ---
 title: Back End Development and APIs
 superBlock: back-end-development-and-apis
+certification: back-end-development-and-apis
 ---
 
 ## Introduction to Back End Development and APIs

client/src/pages/learn/coding-interview-prep/index.md

@@ -1,6 +1,7 @@
 ---
 title: Coding Interview Prep
 superBlock: coding-interview-prep
+certification: coding-interview-prep
 ---
 
 ## Introduction to Coding Interview Prep

client/src/pages/learn/data-analysis-with-python/index.md

@@ -1,6 +1,7 @@
 ---
 title: Data Analysis with Python
 superBlock: data-analysis-with-python
+certification: data-analysis-with-python
 ---
 
 ## Introduction to Data Analysis with Python

client/src/pages/learn/data-visualization/index.md

@@ -1,6 +1,7 @@
 ---
 title: Data Visualization
 superBlock: data-visualization
+certification: data-visualization
 ---
 
 ## Introduction to Data Visualization

client/src/pages/learn/front-end-development-libraries/index.md

@@ -1,6 +1,7 @@
 ---
 title: Front End Development Libraries
 superBlock: front-end-development-libraries
+certification: front-end-development-libraries
 ---
 
 ## Introduction to Front End Development Libraries

client/src/pages/learn/information-security/index.md

@@ -1,6 +1,7 @@
 ---
 title: Information Security
 superBlock: information-security
+certification: information-security
 ---
 
 ## Introduction to Information Security

client/src/pages/learn/javascript-algorithms-and-data-structures/index.md

@@ -1,6 +1,7 @@
 ---
 title: JavaScript Algorithms and Data Structures
 superBlock: javascript-algorithms-and-data-structures
+certification: javascript-algorithms-and-data-structures
 ---
 
 ## Introduction to JavaScript Algorithms and Data Structures

client/src/pages/learn/machine-learning-with-python/index.md

@@ -1,6 +1,7 @@
 ---
 title: Machine Learning with Python
 superBlock: machine-learning-with-python
+certification: machine-learning-with-python
 ---
 
 ## Introduction to Machine Learning with Python

client/src/pages/learn/quality-assurance/index.md

@@ -1,6 +1,7 @@
 ---
 title: Quality Assurance
 superBlock: quality-assurance
+certification: quality-assurance
 ---
 
 ## Introduction to Quality Assurance

client/src/pages/learn/relational-databases/index.md

@@ -1,6 +1,7 @@
 ---
 title: Relational Databases
 superBlock: relational-databases
+certification: relational-databases
 ---
 
 ## Introduction to Relational Databases

client/src/pages/learn/responsive-web-design-22/index.md

@@ -0,0 +1,20 @@
+---
+title: Responsive Web Design
+superBlock: responsive-web-design-22
+certification: responsive-web-design
+---
+
+## Introduction to Responsive Web Design
+
+Welcome to Responsive Web Design!
+
+Let's first take a look at what is in the scope of Responsive Web Design (and what is not).
+The Web part of Responsive Web Design means that the content you are creating is designed to be delivered over the web to users' browsers. To do this, you will need to learn the language that browsers use to describe web pages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.
+
+That brings us to design. Web Design focuses on how websites should look and behave to the end user. There are plenty of additional aspects to websites, including how to host a website so people can access it, how to protect your websites and store your users' data, and the ethos behind what should go on a website in the first place. These are somewhat harder to teach, but do require a good understanding of the capabilities of the web in modern contexts.
+
+And what of the word Responsive? Well, that brings us to the idea of modern contexts. In today's world, websites are expected to be just as accessible on laptops, tablets and phones. If you compare your user experience on a document-editing program on a computer versus a document-editing program on a mobile, the features on mobile are likely to be far more constrained. This applies in some way to websites as well, but developers have found interesting ways to adapt to the mobile experience, not in the least by harnessing powerful features built for flexible (a.k.a responsive) web displays such as CSS `flexbox` and CSS `grid`.
+
+Ready to learn about good design practices for the web? Let's get started!
+
+[Begin Course](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)

client/src/pages/learn/responsive-web-design/index.md

@@ -1,6 +1,7 @@
 ---
 title: Responsive Web Design
 superBlock: responsive-web-design
+certification: responsive-web-design
 ---
 
 ## Introduction to Responsive Web Design

client/src/pages/learn/scientific-computing-with-python/index.md

@@ -1,6 +1,7 @@
 ---
 title: Scientific Computing with Python
 superBlock: scientific-computing-with-python
+certification: scientific-computing-with-python
 ---
 
 ## Introduction to Scientific Computing with Python

client/src/redux/prop-types.ts

@@ -86,6 +86,8 @@ export type MarkdownRemark = {
     block: string;
     isBeta: boolean;
     superBlock: SuperBlocks;
+    // TODO: make enum like superBlock
+    certification: string;
     title: typeof certMap[number]['title'];
   };
   headings: [
@@ -130,6 +132,7 @@ export interface VideoLocaleIds {
 export type ChallengeNode = {
   challenge: {
     block: string;
+    certification: string;
     challengeOrder: number;
     challengeType: number;
     dashedName: string;

client/src/resources/cert-and-project-map.ts

@@ -1,7 +1,11 @@
 import { SuperBlocks } from '../../../config/certification-settings';
+import envData from '../../../config/env.json';
+
+const { showNewCurriculum } = envData;
 
 const responsiveWebBase =
   '/learn/responsive-web-design/responsive-web-design-projects';
+const responsiveWeb22Base = '/learn/responsive-web-design-22';
 const jsAlgoBase =
   '/learn/javascript-algorithms-and-data-structures/' +
   'javascript-algorithms-and-data-structures-projects';
@@ -294,38 +298,50 @@ const certMap = [
     certSlug: SuperBlocks.RespWebDesign,
     flag: 'isRespWebDesignCert',
     projects: [
-      {
-        id: 'bd7158d8c442eddfaeb5bd18',
-        title: 'Build a Tribute Page',
-        link: `${responsiveWebBase}/build-a-tribute-page`,
-        certSlug: SuperBlocks.RespWebDesign
-      },
       {
         id: '587d78af367417b2b2512b03',
         title: 'Build a Survey Form',
-        link: `${responsiveWebBase}/build-a-survey-form`,
+        link: getResponsiveWebDesignPath('build-a-survey-form', {
+          showNewCurriculum
+        }),
         certSlug: SuperBlocks.RespWebDesign
       },
       {
-        id: '587d78af367417b2b2512b04',
+        id: 'bd7158d8c442eddfaeb5bd18',
-        title: 'Build a Product Landing Page',
+        title: 'Build a Tribute Page',
-        link: `${responsiveWebBase}/build-a-product-landing-page`,
+        link: getResponsiveWebDesignPath('build-a-tribute-page', {
+          showNewCurriculum
+        }),
         certSlug: SuperBlocks.RespWebDesign
       },
       {
         id: '587d78b0367417b2b2512b05',
         title: 'Build a Technical Documentation Page',
-        link: `${responsiveWebBase}/build-a-technical-documentation-page`,
+        link: getResponsiveWebDesignPath(
+          'build-a-technical-documentation-page',
+          { showNewCurriculum }
+        ),
+        certSlug: SuperBlocks.RespWebDesign
+      },
+      {
+        id: '587d78af367417b2b2512b04',
+        title: 'Build a Product Landing Page',
+        link: getResponsiveWebDesignPath('build-a-product-landing-page', {
+          showNewCurriculum
+        }),
         certSlug: SuperBlocks.RespWebDesign
       },
       {
         id: 'bd7158d8c242eddfaeb5bd13',
         title: 'Build a Personal Portfolio Webpage',
-        link: `${responsiveWebBase}/build-a-personal-portfolio-webpage`,
+        link: getResponsiveWebDesignPath('build-a-personal-portfolio-webpage', {
+          showNewCurriculum
+        }),
         certSlug: SuperBlocks.RespWebDesign
       }
     ]
   },
+
   {
     id: '561abd10cb81ac38a17513bc',
     title: 'JavaScript Algorithms and Data Structures',
@@ -709,6 +725,15 @@ const certMap = [
   }
 ] as const;
 
+function getResponsiveWebDesignPath(
+  project: string,
+  { showNewCurriculum }: { showNewCurriculum: boolean }
+) {
+  return showNewCurriculum
+    ? `${responsiveWeb22Base}/${project}-project/${project}`
+    : `${responsiveWebBase}/${project}/`;
+}
+
 const titles = certMap.map(({ title }) => title);
 type Title = typeof titles[number];
 const legacyProjectMap: Partial<Record<Title, unknown>> = {};

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -2,15 +2,13 @@ import { first } from 'lodash-es';
 import React, { useState, ReactElement } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
-import envData from '../../../../../config/env.json';
 import {
   ChallengeFile,
   ChallengeFiles,
   ResizeProps
 } from '../../../redux/prop-types';
 import ActionRow from './action-row';
-
+import EditorTabs from './editor-tabs';
-const { showUpcomingChanges } = envData;
 
 type Pane = { flex: number };
 
@@ -85,7 +83,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
   } = props;
 
   const challengeFile = getChallengeFile();
-  const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
+  const projectBasedChallenge = hasEditableBoundaries;
   const displayPreview = projectBasedChallenge
     ? showPreview && hasPreview
     : hasPreview;
@@ -124,6 +122,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
         )}
 
         <ReflexElement flex={editorPane.flex} {...resizeProps}>
+          {challengeFile && !hasEditableBoundaries && <EditorTabs />}
           {challengeFile && (
             <ReflexContainer
               key={challengeFile.fileKey}

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -2,12 +2,9 @@ import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
 import i18next from 'i18next';
 import React, { Component, ReactElement } from 'react';
 
-import envData from '../../../../../config/env.json';
 import ToolPanel from '../components/tool-panel';
 import EditorTabs from './editor-tabs';
 
-const { showUpcomingChanges } = envData;
-
 interface MobileLayoutProps {
   editor: JSX.Element | null;
   guideUrl: string;
@@ -70,7 +67,6 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
 
     // Unlike the desktop layout the mobile version does not have an ActionRow,
     // but still needs a way to switch between the different tabs.
-    const projectBasedChallenge = showUpcomingChanges && usesMultifileEditor;
 
     return (
       <>
@@ -93,7 +89,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
             title={i18next.t('learn.editor-tabs.code')}
             {...editorTabPaneProps}
           >
-            {projectBasedChallenge && <EditorTabs />}
+            {usesMultifileEditor && <EditorTabs />}
             {editor}
           </TabPane>
           <TabPane
@@ -103,7 +99,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
           >
             {testOutput}
           </TabPane>
-          {hasNotes && projectBasedChallenge && (
+          {hasNotes && usesMultifileEditor && (
             <TabPane
               eventKey={Tab.Notes}
               title={i18next.t('learn.editor-tabs.notes')}

client/src/templates/Challenges/classic/show.tsx

@@ -409,6 +409,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
       forumTopicId,
       hasEditableBoundaries,
       superBlock,
+      certification,
       title,
       usesMultifileEditor,
       notes
@@ -474,6 +475,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
           <CompletionModal
             block={block}
             blockName={blockName}
+            certification={certification}
             superBlock={superBlock}
           />
           <HelpModal />
@@ -508,6 +510,7 @@ export const query = graphql`
         helpCategory
         videoUrl
         superBlock
+        certification
         translationPending
         forumTopicId
         fields {

client/src/templates/Challenges/components/completion-modal.tsx

@@ -10,6 +10,7 @@ import { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 
 import { dasherize } from '../../../../../utils/slugs';
+import { isProject } from '../../../../utils/challenge-types';
 import Login from '../../../components/Header/components/Login';
 import {
   isSignedInSelector,
@@ -40,7 +41,11 @@ const mapStateToProps = createSelector(
   successMessageSelector,
   (
     challengeFiles: ChallengeFiles,
-    { title, id }: { title: string; id: string },
+    {
+      title,
+      id,
+      challengeType
+    }: { title: string; id: string; challengeType: number },
     completedChallengesIds: string[],
     isOpen: boolean,
     isSignedIn: boolean,
@@ -49,6 +54,7 @@ const mapStateToProps = createSelector(
     challengeFiles,
     title,
     id,
+    challengeType,
     completedChallengesIds,
     isOpen,
     isSignedIn,
@@ -94,6 +100,8 @@ interface CompletionModalsProps {
   allowBlockDonationRequests: (arg0: string) => void;
   block: string;
   blockName: string;
+  certification: string;
+  challengeType: number;
   close: () => void;
   completedChallengesIds: string[];
   currentBlockIds?: string[];
@@ -275,10 +283,30 @@ export class CompletionModalInner extends Component<
   }
 }
 
-const useCurrentBlockIds = (blockName: string) => {
+interface Options {
+  isCertificationBlock: boolean;
+}
+
+interface CertificateNode {
+  challenge: {
+    // TODO: use enum
+    certification: string;
+    tests: { id: string }[];
+  };
+}
+
+const useCurrentBlockIds = (
+  block: string,
+  certification: string,
+  options?: Options
+) => {
   const {
-    allChallengeNode: { edges }
+    allChallengeNode: { edges: challengeEdges },
-  }: { allChallengeNode: AllChallengeNode } = useStaticQuery(graphql`
+    allCertificateNode: { nodes: certificateNodes }
+  }: {
+    allChallengeNode: AllChallengeNode;
+    allCertificateNode: { nodes: CertificateNode[] };
+  } = useStaticQuery(graphql`
     query getCurrentBlockNodes {
       allChallengeNode(
         sort: {
@@ -292,9 +320,17 @@ const useCurrentBlockIds = (blockName: string) => {
         edges {
           node {
             challenge {
-              fields {
+              block
-                blockName
+              id
             }
+          }
+        }
+      }
+      allCertificateNode {
+        nodes {
+          challenge {
+            certification
+            tests {
               id
             }
           }
@@ -303,16 +339,27 @@ const useCurrentBlockIds = (blockName: string) => {
     }
   `);
 
-  const currentBlockIds = edges
+  const currentCertificateIds = certificateNodes
-    .filter(edge => edge.node.challenge.fields.blockName === blockName)
+    .filter(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      node => dasherize(node.challenge.certification) === certification
+    )[0]
+    ?.challenge.tests.map(test => test.id);
+  const currentBlockIds = challengeEdges
+    .filter(edge => edge.node.challenge.block === block)
     .map(edge => edge.node.challenge.id);
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+
-  return currentBlockIds;
+  return options?.isCertificationBlock
+    ? currentCertificateIds
+    : currentBlockIds;
 };
 
 const CompletionModal = (props: CompletionModalsProps) => {
-  const currentBlockIds = useCurrentBlockIds(props.blockName || '');
+  const currentBlockIds = useCurrentBlockIds(
+    props.block || '',
+    props.certification || '',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    { isCertificationBlock: isProject(props.challengeType) }
+  );
   return <CompletionModalInner currentBlockIds={currentBlockIds} {...props} />;
 };
 

client/src/templates/Challenges/projects/backend/Show.tsx

@@ -196,6 +196,7 @@ class BackEnd extends Component<BackEndProps> {
             description,
             instructions,
             translationPending,
+            certification,
             superBlock,
             block
           }
@@ -266,6 +267,7 @@ class BackEnd extends Component<BackEndProps> {
               <CompletionModal
                 block={block}
                 blockName={blockName}
+                certification={certification}
                 superBlock={superBlock}
               />
               <HelpModal />
@@ -294,6 +296,7 @@ export const query = graphql`
         instructions
         challengeType
         helpCategory
+        certification
         superBlock
         block
         translationPending

client/src/templates/Challenges/projects/frontend/Show.tsx

@@ -144,6 +144,7 @@ class Project extends Component<ProjectProps> {
             description,
             instructions,
             superBlock,
+            certification,
             block,
             translationPending
           }
@@ -203,6 +204,7 @@ class Project extends Component<ProjectProps> {
               <CompletionModal
                 block={block}
                 blockName={blockName}
+                certification={certification}
                 superBlock={superBlock}
               />
               <HelpModal />
@@ -232,6 +234,7 @@ export const query = graphql`
         challengeType
         helpCategory
         superBlock
+        certification
         block
         translationPending
         fields {

client/src/templates/Challenges/redux/completion-epic.js

@@ -146,7 +146,8 @@ export default function completionEpic(action$, state$) {
     switchMap(({ type }) => {
       const state = state$.value;
       const meta = challengeMetaSelector(state);
-      const { nextChallengePath, challengeType, superBlock } = meta;
+      const { nextChallengePath, challengeType, superBlock, certification } =
+        meta;
       const closeChallengeModal = of(closeModal('completion'));
 
       let submitter = () => of({ type: 'no-user-signed-in' });
@@ -165,6 +166,7 @@ export default function completionEpic(action$, state$) {
 
       const pathToNavigateTo = async () => {
         return await findPathToNavigateTo(
+          certification,
           nextChallengePath,
           superBlock,
           state,
@@ -182,6 +184,7 @@ export default function completionEpic(action$, state$) {
 }
 
 async function findPathToNavigateTo(
+  certification,
   nextChallengePath,
   superBlock,
   state,
@@ -196,7 +199,7 @@ async function findPathToNavigateTo(
   if (isProjectSubmission) {
     const username = usernameSelector(state);
     try {
-      const response = await getVerifyCanClaimCert(username, superBlock);
+      const response = await getVerifyCanClaimCert(username, certification);
       if (response.status === 200) {
         canClaimCert = response.data?.response?.message === 'can-claim-cert';
       }

client/src/templates/Challenges/video/Show.tsx

@@ -180,6 +180,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
             title,
             description,
             superBlock,
+            certification,
             block,
             translationPending,
             videoId,
@@ -302,6 +303,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
               <CompletionModal
                 block={block}
                 blockName={blockName}
+                certification={certification}
                 superBlock={superBlock}
               />
             </Row>
@@ -339,6 +341,7 @@ export const query = graphql`
         challengeType
         helpCategory
         superBlock
+        certification
         block
         fields {
           blockName

client/src/templates/Introduction/components/cert-challenge.tsx

@@ -23,6 +23,8 @@ import { getVerifyCanClaimCert } from '../../../utils/ajax';
 import CertificationCard from './certification-card';
 
 interface CertChallengeProps {
+  // TODO: create enum/reuse SuperBlocks enum somehow
+  certification: string;
   createFlashMessage: typeof createFlashMessage;
   fetchState: {
     pending: boolean;
@@ -63,6 +65,7 @@ const mapDispatchToProps = {
 };
 
 const CertChallenge = ({
+  certification,
   createFlashMessage,
   steps = {},
   superBlock,
@@ -90,7 +93,7 @@ const CertChallenge = ({
     if (username) {
       void (async () => {
         try {
-          const data = await getVerifyCanClaimCert(username, superBlock);
+          const data = await getVerifyCanClaimCert(username, certification);
           if (data?.message) {
             setCanClaimCert(false);
             createFlashMessage(data.message);

client/src/templates/Introduction/super-block-intro.tsx

@@ -162,7 +162,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
   const {
     data: {
       markdownRemark: {
-        frontmatter: { superBlock, title }
+        frontmatter: { superBlock, title, certification }
       },
       allChallengeNode: { edges }
     },
@@ -176,6 +176,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
   const blockDashedNames = uniq(
     nodesForSuperBlock.map(({ challenge: { block } }) => block)
   );
+
   const i18nSuperBlock = t(`intro:${superBlock}.title`);
   const i18nTitle =
     superBlock === SuperBlocks.CodingInterviewPrep
@@ -184,6 +185,8 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
           cert: i18nSuperBlock
         });
 
+  const defaultCurriculumNames = blockDashedNames;
+
   return (
     <>
       <Helmet>
@@ -203,7 +206,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
             </h2>
             <Spacer />
             <div className='block-ui'>
-              {blockDashedNames.map(blockDashedName => (
+              {defaultCurriculumNames.map(blockDashedName => (
                 <Fragment key={blockDashedName}>
                   <Block
                     blockDashedName={blockDashedName}
@@ -218,6 +221,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
               {superBlock !== SuperBlocks.CodingInterviewPrep && (
                 <div>
                   <CertChallenge
+                    certification={certification}
                     superBlock={superBlock}
                     title={title}
                     user={user}
@@ -260,6 +264,7 @@ export const query = graphql`
   query SuperBlockIntroPageBySlug($slug: String!, $superBlock: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
       frontmatter {
+        certification
         superBlock
         title
       }

client/src/utils/ajax.ts

@@ -178,10 +178,10 @@ export interface GetVerifyCanClaimCert {
 
 export function getVerifyCanClaimCert(
   username: string,
-  superBlock: string
+  certification: string
 ): Promise<GetVerifyCanClaimCert> {
   return get(
-    `/certificate/verify-can-claim-cert?username=${username}&superBlock=${superBlock}`
+    `/certificate/verify-can-claim-cert?username=${username}&superBlock=${certification}`
   );
 }
 

client/utils/challenge-types.js

@@ -36,6 +36,18 @@ exports.challengeTypes = {
   codeally
 };
 
+// (Oliver) I don't think we need this for codeally projects, so they're ignored
+// here
+exports.isProject = challengeType => {
+  if (typeof challengeType !== 'number')
+    throw Error('challengeType must be a number');
+  return (
+    challengeType === frontEndProject ||
+    challengeType === backEndProject ||
+    challengeType === pythonProject
+  );
+};
+
 // turn challengeType to file ext
 exports.pathsMap = {
   [html]: 'html',

client/utils/gatsby/challenge-page-creator.js

@@ -60,6 +60,7 @@ function getTemplateComponent(challengeType) {
 exports.createChallengePages = function (createPage) {
   return function ({ node: { challenge } }, index, allChallengeEdges) {
     const {
+      certification,
       superBlock,
       block,
       fields: { slug },
@@ -76,6 +77,7 @@ exports.createChallengePages = function (createPage) {
       component: getTemplateComponent(challengeType),
       context: {
         challengeMeta: {
+          certification,
           superBlock,
           block,
           template,
@@ -152,13 +154,23 @@ exports.createSuperBlockIntroPages = function (createPage) {
   return function (edge) {
     const {
       fields: { slug },
-      frontmatter: { superBlock }
+      frontmatter: { superBlock, certification }
     } = edge.node;
 
+    if (!certification) {
+      throw Error(
+        `superBlockIntro page, '${superBlock}' must have certification in frontmatter`
+      );
+    }
+
+    // TODO: throw if it encounters an unknown certification. Also, handle
+    // coding-interview-prep. it's not a certification, but it is a superBlock.
+
     createPage({
       path: slug,
       component: superBlockIntro,
       context: {
+        certification,
         superBlock,
         slug
       }

client/utils/help-category-map.json

@@ -85,5 +85,10 @@
   "learn-css-grid-by-building-a-magazine": "HTML-CSS",
   "learn-css-transforms-by-building-a-penguin": "HTML-CSS",
   "learn-typography-by-building-a-nutrition-label": "HTML-CSS",
-  "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS"
+  "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS",
+  "build-a-personal-portfolio-webpage-project": "HTML-CSS",
+  "build-a-product-landing-page-project": "HTML-CSS",
+  "build-a-survey-form-project": "HTML-CSS",
+  "build-a-technical-documentation-page-project": "HTML-CSS",
+  "build-a-tribute-page-project": "HTML-CSS"
 }

config/certification-settings.ts

@@ -113,7 +113,11 @@ export const superBlockCertTypeMap = {
   [SuperBlocks.SciCompPy]: certTypes.sciCompPyV7,
   [SuperBlocks.DataAnalysisPy]: certTypes.dataAnalysisPyV7,
   [SuperBlocks.MachineLearningPy]: certTypes.machineLearningPyV7,
-  [SuperBlocks.RelationalDb]: certTypes.relationalDatabasesV8
+  [SuperBlocks.RelationalDb]: certTypes.relationalDatabasesV8,
+
+  // post-modern
+  // TODO: use enum
+  'responsive-web-design-22': certTypes.respWebDesign
 };
 
 export const certTypeIdMap = {

curriculum/challenges/_meta/build-a-personal-portfolio-webpage-project/meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "Build a Personal Portfolio Webpage Project",
+  "isUpcomingChange": false,
+  "order": 19,
+  "time": "30 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "challengeOrder": [
+    [
+      "bd7158d8c242eddfaeb5bd13",
+      "Build a Personal Portfolio Webpage"
+    ]
+  ]}

curriculum/challenges/_meta/build-a-product-landing-page-project/meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "Build a Product Landing Page Project",
+  "isUpcomingChange": false,
+  "order": 16,
+  "time": "30 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "challengeOrder": [
+    [
+      "587d78af367417b2b2512b04",
+      "Build a Product Landing Page"
+    ]
+  ]}

curriculum/challenges/_meta/build-a-survey-form-project/meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "Build a Survey Form Project",
+  "isUpcomingChange": false,
+  "order": 4,
+  "time": "30 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "challengeOrder": [
+    [
+      "587d78af367417b2b2512b03",
+      "Build a Survey Form"
+    ]
+  ]}

curriculum/challenges/_meta/build-a-technical-documentation-page-project/meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "Build a Technical Documentation Page Project",
+  "isUpcomingChange": false,
+  "order": 13,
+  "time": "30 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "challengeOrder": [
+    [
+      "587d78b0367417b2b2512b05",
+      "Build a Technical Documentation Page"
+    ]
+  ]}

curriculum/challenges/_meta/build-a-tribute-page-project/meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "Build a Tribute Page Project",
+  "isUpcomingChange": false,
+  "order": 9,
+  "time": "30 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "responsive-web-design",
+  "challengeOrder": [
+    [
+      "bd7158d8c442eddfaeb5bd18",
+      "Build a Tribute Page"
+    ]
+  ]}

curriculum/challenges/_meta/learn-accessibility-by-building-a-quiz/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn Accessibility by Building a Quiz",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-accessibility-by-building-a-quiz",
-  "order": 42,
+  "order": 8,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "614ccc21ea91ef1736b9b578",

curriculum/challenges/_meta/learn-basic-css-by-building-a-cafe-menu/meta.json

@@ -1,10 +1,10 @@
 {
   "name": "Learn Basic CSS by Building a Cafe Menu",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-basic-css-by-building-a-cafe-menu",
-  "order": 10,
+  "order": 1,
   "time": "5 hours",
   "template": "",
   "required": [],

curriculum/challenges/_meta/learn-css-animation-by-building-a-ferris-wheel/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn CSS Animation by Building a Ferris Wheel",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-css-animation-by-building-a-ferris-wheel",
-  "order": 15,
+  "order": 18,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "6140c7e645d8e905819f1dd4",

curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn CSS Flexbox by Building a Photo Gallery",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
-  "order": 20,
+  "order": 6,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "61537485c4f2a624f18d7794",

curriculum/challenges/_meta/learn-css-grid-by-building-a-magazine/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn CSS Grid by Building a Magazine",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-css-grid-by-building-a-magazine",
-  "order": 16,
+  "order": 15,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "61437d575fb98f57fa8f7f36",

curriculum/challenges/_meta/learn-css-transforms-by-building-a-penguin/meta.json

@@ -1,14 +1,14 @@
 {
   "name": "Learn CSS Transforms by Building a Penguin",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
   "dashedName": "learn-css-transforms-by-building-a-penguin",
-  "order": 47,
+  "order": 17,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "619665c9abd72906f3ad30f9",

curriculum/challenges/_meta/learn-css-variables-by-building-a-city-skyline/meta.json

@@ -1,10 +1,10 @@
 {
   "name": "Learn CSS Variables by Building a City Skyline",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-css-variables-by-building-a-city-skyline",
-  "order": 8,
+  "order": 14,
   "time": "5 hours",
   "template": "",
   "required": [],

curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn HTML by Building a Cat Photo App",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-html-by-building-a-cat-photo-app",
-  "order": 9,
+  "order": 0,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "5dc174fcf86c76b9248c6eb2",

curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn HTML Forms by Building a Registration Form",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-html-forms-by-building-a-registration-form",
-  "order": 23,
+  "order": 3,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "60eebd07ea685b0e777b5583",

curriculum/challenges/_meta/learn-intermediate-css-by-building-a-picasso-painting/meta.json

@@ -1,6 +1,6 @@
 {
   "name": "Learn Intermediate CSS by Building a Picasso Painting",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-intermediate-css-by-building-a-picasso-painting",
@@ -9,7 +9,6 @@
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "60b69a66b6ddb80858c51578",

curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json

@@ -1,14 +1,14 @@
 {
   "name": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
   "dashedName": "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet",
-  "order": 43,
+  "order": 10,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "6193d8081ec2531581ea7b98",

curriculum/challenges/_meta/learn-responsive-web-design-by-building-a-piano/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn Responsive Web Design by Building a Piano",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-responsive-web-design-by-building-a-piano",
-  "order": 13,
+  "order": 12,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "612e6afc009b450a437940a1",

curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn the CSS Box Model by Building a Rothko Painting",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-the-css-box-model-by-building-a-rothko-painting",
-  "order": 12,
+  "order": 5,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "60a3e3396c7b40068ad6996a",

curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json

@@ -1,15 +1,14 @@
 {
   "name": "Learn Typography by Building a Nutrition Label",
-  "isUpcomingChange": true,
+  "isUpcomingChange": false,
   "usesMultifileEditor": true,
   "hasEditableBoundaries": true,
   "dashedName": "learn-typography-by-building-a-nutrition-label",
-  "order": 25,
+  "order": 7,
   "time": "5 hours",
   "template": "",
   "required": [],
   "superBlock": "responsive-web-design",
-  "isBeta": true,
   "challengeOrder": [
     [
       "615f2abbe7d18d49a1e0e1c8",

curriculum/challenges/english/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml

@@ -1,6 +1,7 @@
 ---
 id: 561add10cb82ac38a17523bc
 title: Back End Development and APIs Certification
+certification: back-end-development-and-apis
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml

@@ -1,5 +1,6 @@
 id: 5e46fc95ac417301a38fb934
 title: Data Analysis with Python Certification
+certification: data-analysis-with-python
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/data-visualization-certification/data-visualization-certification.yml

@@ -1,5 +1,6 @@
 id: 5a553ca864b52e1d8bceea14
 title: Data Visualization Certification
+certification: data-visualization
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml

@@ -1,6 +1,7 @@
 ---
 id: 561acd10cb82ac38a17513bc
 title: Front End Development Libraries Certification
+certification: front-end-development-libraries
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/information-security-certification/information-security-certification.yml

@@ -1,5 +1,6 @@
 id: 5e6021435ac9d0ecd8b94b00
 title: Information Security Certification
+certification: information-security
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml

@@ -1,5 +1,6 @@
 id: 561abd10cb81ac38a17513bc
 title: JavaScript Algorithms and Data Structures Certification
+certification: javascript-algorithms-and-data-structures
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml

@@ -1,5 +1,6 @@
 id: 660add10cb82ac38a17513be
 title: Legacy Back End Certification
+certification: legacy-back-end
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml

@@ -1,5 +1,6 @@
 id: 561add10cb82ac39a17513bc
 title: Legacy Data Visualization Certification
+certification: legacy-data-visualization
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml

@@ -1,5 +1,6 @@
 id: 561add10cb82ac38a17513be
 title: Legacy Front End Certification
+certification: legacy-front-end
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml

@@ -1,5 +1,6 @@
 id: 561add10cb82ac38a17213bd
 title: Legacy Full Stack Certification
+certification: legacy-full-stack
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml

@@ -1,5 +1,6 @@
 id: 561add10cb82ac38a17213bc
 title: Legacy Information Security and Quality Assurance Certification
+certification: legacy-information-security-and-quality-assurance
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml

@@ -1,5 +1,6 @@
 id: 5e46fc95ac417301a38fb935
 title: Machine Learning with Python Certification
+certification: machine-learning-with-python
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/quality-assurance-certification/quality-assurance-certification.yml

@@ -1,5 +1,6 @@
 id: 5e611829481575a52dc59c0e
 title: Quality Assurance Certification
+certification: quality-assurance
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/relational-databases-certification/relational-databases-certification.yml

@@ -1,5 +1,6 @@
 id: 606243f50267e718b1e755f4
 title: Relational Databases Certification
+certification: relational-databases
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml

@@ -1,5 +1,6 @@
 id: 561add10cb82ac38a17513bc
 title: Responsive Web Design Certification
+certification: responsive-web-design
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml

@@ -1,5 +1,6 @@
 id: 5e44431b903586ffb414c951
 title: Scientific Computing with Python Certification
+certification: scientific-computing-with-python
 challengeType: 7
 isPrivate: true
 tests:

curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md

@@ -0,0 +1,47 @@
+---
+id: bd7158d8c242eddfaeb5bd13
+title: Build a Personal Portfolio Webpage
+challengeType: 3
+forumTopicId: 301143
+dashedName: build-a-personal-portfolio-webpage
+---
+
+# --description--
+
+**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
+
+Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+
+You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+
+**User Story #1:** My portfolio should have a welcome section with an id of `welcome-section`.
+
+**User Story #2:** The welcome section should have an `h1` element that contains text.
+
+**User Story #3:** My portfolio should have a projects section with an id of `projects`.
+
+**User Story #4:** The projects section should contain at least one element with a class of `project-tile` to hold a project.
+
+**User Story #5:** The projects section should contain at least one link to a project.
+
+**User Story #6:** My portfolio should have a navbar with an id of `navbar`.
+
+**User Story #7:** The navbar should contain at least one link that I can click on to navigate to different sections of the page.
+
+**User Story #8:** My portfolio should have a link with an id of `profile-link`, which opens my GitHub or FCC profile in a new tab.
+
+**User Story #9:** My portfolio should have at least one media query.
+
+**User Story #10:** The height of the welcome section should be equal to the height of the viewport.
+
+**User Story #11:** The navbar should always be at the top of the viewport.
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/english/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md

@@ -0,0 +1,55 @@
+---
+id: 587d78af367417b2b2512b04
+title: Build a Product Landing Page
+challengeType: 3
+forumTopicId: 301144
+dashedName: build-a-product-landing-page
+---
+
+# --description--
+
+**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
+
+Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+
+You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+
+**User Story #1:** My product landing page should have a `header` element with a corresponding `id="header"`.
+
+**User Story #2:** I can see an image within the `header` element with a corresponding `id="header-img"`. A company logo would make a good image here.
+
+**User Story #3:** Within the `#header` element I can see a `nav` element with a corresponding `id="nav-bar"`.
+
+**User Story #4:** I can see at least three clickable elements inside the `nav` element, each with the class `nav-link`.
+
+**User Story #5:** When I click a `.nav-link` button in the `nav` element, I am taken to the corresponding section of the landing page.
+
+**User Story #6:** I can watch an embedded product video with `id="video"`.
+
+**User Story #7:** My landing page has a `form` element with a corresponding `id="form"`.
+
+**User Story #8:** Within the form, there is an `input` field with `id="email"` where I can enter an email address.
+
+**User Story #9:** The `#email` input field should have placeholder text to let the user know what the field is for.
+
+**User Story #10:** The `#email` input field uses HTML5 validation to confirm that the entered text is an email address.
+
+**User Story #11:** Within the form, there is a submit `input` with a corresponding `id="submit"`.
+
+**User Story #12:** When I click the `#submit` element, the email is submitted to a static page (use this mock URL: <https://www.freecodecamp.com/email-submit>).
+
+**User Story #13:** The navbar should always be at the top of the viewport.
+
+**User Story #14:** My product landing page should have at least one media query.
+
+**User Story #15:** My product landing page should utilize CSS flexbox at least once.
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/english/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md

@@ -0,0 +1,57 @@
+---
+id: 587d78af367417b2b2512b03
+title: Build a Survey Form
+challengeType: 3
+forumTopicId: 301145
+dashedName: build-a-survey-form
+---
+
+# --description--
+
+**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
+
+Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+
+You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+
+**User Story #1:** I can see a title with `id="title"` in H1 sized text.
+
+**User Story #2:** I can see a short explanation with `id="description"` in P sized text.
+
+**User Story #3:** I can see a `form` with `id="survey-form"`.
+
+**User Story #4:** Inside the form element, I am required to enter my name in a field with `id="name"`.
+
+**User Story #5:** Inside the form element, I am required to enter an email in a field with `id="email"`.
+
+**User Story #6:** If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
+
+**User Story #7:** Inside the form, I can enter a number in a field with `id="number"`.
+
+**User Story #8:** If I enter non-numbers in the number input, I will see an HTML5 validation error.
+
+**User Story #9:** If I enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, I will see an HTML5 validation error.
+
+**User Story #10:** For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`.
+
+**User Story #11:** For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.
+
+**User Story #12:** Inside the form element, I can select an option from a dropdown that has a corresponding `id="dropdown"`.
+
+**User Story #13:** Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the `name` attribute.
+
+**User Story #14:** Inside the form element, I can select several fields from a series of checkboxes, each of which must have a `value` attribute.
+
+**User Story #15:** Inside the form element, I am presented with a `textarea` at the end for additional comments.
+
+**User Story #16:** Inside the form element, I am presented with a button with `id="submit"` to submit all my inputs.
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/english/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md

@@ -0,0 +1,55 @@
+---
+id: 587d78b0367417b2b2512b05
+title: Build a Technical Documentation Page
+challengeType: 3
+forumTopicId: 301146
+dashedName: build-a-technical-documentation-page
+---
+
+# --description--
+
+**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
+
+Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+
+You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+
+**User Story #1:** I can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation).
+
+**User Story #2:** Within the `#main-doc` element, I can see several `section` elements, each with a class of `main-section`. There should be a minimum of 5.
+
+**User Story #3:** The first element within each `.main-section` should be a `header` element which contains text that describes the topic of that section.
+
+**User Story #4:** Each `section` element with the class of `main-section` should also have an id that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The `section` that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`).
+
+**User Story #5:** The `.main-section` elements should contain at least 10 `p` elements total (not each).
+
+**User Story #6:** The `.main-section` elements should contain at least 5 `code` elements total (not each).
+
+**User Story #7:** The `.main-section` elements should contain at least 5 `li` items total (not each).
+
+**User Story #8:** I can see a `nav` element with a corresponding `id="navbar"`.
+
+**User Story #9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation.
+
+**User Story #10:** Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`.
+
+**User Story #11:** The `header` element in the navbar must come before any link (`a`) elements in the navbar.
+
+**User Story #12:** Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").
+
+**User Story #13:** When I click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If I click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element that has that id and contains the corresponding `header`.
+
+**User Story #14:** On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user.
+
+**User Story #15:** My Technical Documentation page should use at least one media query.
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/english/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md

@@ -0,0 +1,43 @@
+---
+id: bd7158d8c442eddfaeb5bd18
+title: Build a Tribute Page
+challengeType: 3
+forumTopicId: 301147
+dashedName: build-a-tribute-page
+---
+
+# --description--
+
+**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
+
+Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
+
+You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
+
+**User Story #1:** My tribute page should have an element with a corresponding `id="main"`, which contains all other elements.
+
+**User Story #2:** I should see an element with a corresponding `id="title"`, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
+
+**User Story #3:** I should see either a `figure` or a `div` element with a corresponding `id="img-div"`.
+
+**User Story #4:** Within the `img-div` element, I should see an `img` element with a corresponding `id="image"`.
+
+**User Story #5:** Within the `img-div` element, I should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `img-div`.
+
+**User Story #6:** I should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page.
+
+**User Story #7:** I should see an `a` element with a corresponding `id="tribute-link"`, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab (i.e. `target="_blank"`).
+
+**User Story #8:** The `img` element should responsively resize, relative to the width of its parent element, without exceeding its original size.
+
+**User Story #9:** The `img` element should be centered within its parent element.
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```html
+// solution required
+```