PROD-2456 Add Back Orig Responsive Web Design -> dev

api-server/src/server/middlewares/request-authorization.js

@@ -73,7 +73,6 @@ export default function getRequestAuthorisation({
     const { origin } = getRedirectParams(req);
     const { path } = req;
     if (!isAllowedPath(path)) {
-      console.log('##### path:', path);
       const { accessToken, error, jwt } = getAccessTokenFromRequest(
         req,
         jwtSecret

client/i18n/locales/english/intro.json

@@ -80,31 +80,36 @@
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a tribute page for a subject of your choosing, fictional or real."
-        ] },
+        ]
+      },
       "build-a-personal-portfolio-webpage-project": {
         "title": "Personal Portfolio Webpage",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build your own personal portfolio page."
-        ] },
+        ]
+      },
       "build-a-product-landing-page-project": {
         "title": "Product Landing Page",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a product landing page to market a product of your choice."
-        ] },
+        ]
+      },
       "build-a-survey-form-project": {
         "title": "Survey Form",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a survey form to collect data from your users."
-        ] },
+        ]
+      },
       "build-a-technical-documentation-page-project": {
         "title": "Technical Documentation Page",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a technical documentation page to serve as instruction or reference for a topic."
-        ] },
+        ]
+      },
       "learn-html-by-building-a-cat-photo-app": {
         "title": "Learn HTML by Building a Cat Photo App",
         "intro": [
@@ -181,24 +186,66 @@
           "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": [
-        "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.",
-        "In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work."
-      ] },
-      "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": [
-        "You can use CSS pseudo selectors to change specific HTML elements.",
-        "In this course, you'll build a balance sheet using pseudo selectors. You'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage."
-      ] },
+      "learn-css-transforms-by-building-a-penguin": {
+        "title": "Learn CSS Transforms by Building a Penguin",
+        "intro": [
+          "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.",
+          "In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work."
+        ]
+      },
+      "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": [
+          "You can use CSS pseudo selectors to change specific HTML elements.",
+          "In this course, you'll build a balance sheet using pseudo selectors. You'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage."
+        ]
+      },
       "learn-css-colors-by-building-a-set-of-colored-markers": {
         "title": "Learn CSS Colors by Building a Set of Colored Markers",
         "intro": [
           "Selecting the correct colors for your webpage can greatly improve the aesthetic appeal to your readers.",
           "In this course, you'll build a set of colored markers. You'll learn different ways to set color values and how to pair colors with each other."
-      ] }
+        ]
+      }
+    }
+  },
+  "2022/responsive-web-design-qa": {
+    "title": "(New) Responsive Web Design QA",
+    "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-personal-portfolio-webpage-project-qa": {
+        "title": "Personal Portfolio Webpage QA",
+        "intro": [
+          "This is one of the required projects to earn your certification.",
+          "For this project, you will build your own personal portfolio page."
+        ]
+      },
+      "learn-html-by-building-a-cat-photo-app-qa": {
+        "title": "Learn HTML by Building a Cat Photo App QA",
+        "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-qa": {
+        "title": "Learn Basic CSS by Building a Cafe Menu QA",
+        "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."
+        ]
+      }
     }
   },
   "javascript-algorithms-and-data-structures": {

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

@@ -0,0 +1,20 @@
+---
+title: Responsive Web Design QA
+superBlock: 2022/responsive-web-design-qa
+certification: responsive-web-design-qa
+---
+
+## 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-qa/basic-html-and-html5/)

client/src/pages/learn/2022/responsive-web-design-qa/learn-basic-css-by-building-a-cafe-menu-qa/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Learn Basic CSS by Building a Cafe Menu Project QA
+block: Learn Basic CSS by Building a Cafe Menu QA
+superBlock: Responsive Web Design QA
+---
+
+## Introduction to the Learn Basic CSS by Building a Cafe Menu Project
+
+This is a test for the new project-based curriculum.

client/src/pages/learn/2022/responsive-web-design-qa/learn-html-by-building-a-cat-photo-app-qa/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Learn HTML by Building a Cat Photo App Project QA
+block: Learn HTML by Building a Cat Photo App QA
+superBlock: Responsive Web Design QA
+---
+
+## Introduction to the Learn HTML by Building a Cat Photo App Project
+
+This is a test for the new project-based curriculum.

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

@@ -6,6 +6,7 @@ const { showUpcomingChanges } = config;
 const responsiveWebBase =
   '/learn/responsive-web-design/responsive-web-design-projects';
 const responsiveWeb22Base = '/learn/2022/responsive-web-design';
+const responsiveWeb22BaseQA = '/learn/2022/responsive-web-design-qa';
 const jsAlgoBase =
   '/learn/javascript-algorithms-and-data-structures/' +
   'javascript-algorithms-and-data-structures-projects';
@@ -332,7 +333,22 @@ const certMap = [
       }
     ]
   },
-
+  {
+    id: 'aaaaaaaaaaaaaaaaaaaaaaaa',
+    title: 'Responsive Web Design QA',
+    certSlug: SuperBlocks.RespWebDesignQA,
+    flag: 'isRespWebDesignQACert',
+    projects: [
+      {
+        id: 'bbbbbbbbbbbbbbbbbbbbbbbb',
+        title: 'Build a Personal Portfolio Webpage QA',
+        link: getResponsiveWebDesignPathQA(
+          'build-a-personal-portfolio-webpage-qa'
+        ),
+        certSlug: SuperBlocks.RespWebDesignQA
+      }
+    ]
+  },
   {
     id: '561abd10cb81ac38a17513bc',
     title: 'JavaScript Algorithms and Data Structures',
@@ -720,6 +736,10 @@ function getResponsiveWebDesignPath(project: string) {
   return `${responsiveWeb22Base}/${project}-project/${project}`;
 }
 
+function getResponsiveWebDesignPathQA(project: string) {
+  return `${responsiveWeb22BaseQA}/${project}-project/${project}`;
+}
+
 function getJavaScriptAlgoPath(project: string) {
   return showUpcomingChanges
     ? `${jsAlgo22Base}/${project}-project/${project}`

client/utils/help-category-map.json

@@ -87,6 +87,7 @@
   "learn-typography-by-building-a-nutrition-label": "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-personal-portfolio-webpage-project-qa": "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",

config/certification-settings.ts

@@ -3,6 +3,7 @@ export const certTypes = {
   backEnd: 'isBackEndCert',
   dataVis: 'isDataVisCert',
   respWebDesign: 'isRespWebDesignCert',
+  respWebDesignQA: 'isRespWebDesignQACert',
   frontEndDevLibs: 'isFrontEndLibsCert',
   dataVis2018: 'is2018DataVisCert',
   jsAlgoDataStruct: 'isJsAlgoDataStructCert',
@@ -19,6 +20,7 @@ export const certTypes = {
 
 export enum SuperBlocks {
   RespWebDesignNew = '2022/responsive-web-design',
+  RespWebDesignQA = '2022/responsive-web-design-qa',
   RespWebDesign = 'responsive-web-design',
   JsAlgoDataStruct = 'javascript-algorithms-and-data-structures',
   JsAlgoDataStructNew = '2022/javascript-algorithms-and-data-structures',
@@ -41,6 +43,7 @@ export const certIds = {
   legacyInfosecQaId: '561add10cb82ac38a17213bc',
   legacyFullStackId: '561add10cb82ac38a17213bd',
   respWebDesignId: '561add10cb82ac38a17513bc',
+  respWebDesignQAId: 'aaaaaaaaaaaaaaaaaaaaaaaa',
   frontEndDevLibsId: '561acd10cb82ac38a17513bc',
   dataVis2018Id: '5a553ca864b52e1d8bceea14',
   jsAlgoDataStructId: '561abd10cb81ac38a17513bc',
@@ -60,6 +63,7 @@ export const completionHours = {
   [certTypes.infosecQa]: 300,
   [certTypes.fullStack]: 1800,
   [certTypes.respWebDesign]: 300,
+  [certTypes.respWebDesignQA]: 1,
   [certTypes.frontEndDevLibs]: 300,
   [certTypes.jsAlgoDataStruct]: 300,
   [certTypes.dataVis2018]: 300,
@@ -84,7 +88,7 @@ export const certSlugTypeMap = {
 
   // modern
   [SuperBlocks.RespWebDesign]: certTypes.respWebDesign,
-  [SuperBlocks.RespWebDesignNew]: certTypes.respWebDesign,
+  [SuperBlocks.RespWebDesignNew]: certTypes.respWebDesignQA,
   [SuperBlocks.JsAlgoDataStruct]: certTypes.jsAlgoDataStruct,
   [SuperBlocks.JsAlgoDataStructNew]: certTypes.jsAlgoDataStruct,
   [SuperBlocks.FrontEndDevLibs]: certTypes.frontEndDevLibs,
@@ -122,6 +126,7 @@ export const superBlockCertTypeMap = {
   // post-modern
   // TODO: use enum
   [SuperBlocks.RespWebDesignNew]: certTypes.respWebDesign,
+  [SuperBlocks.RespWebDesignQA]: certTypes.respWebDesignQA,
   [SuperBlocks.JsAlgoDataStructNew]: certTypes.jsAlgoDataStruct
 };
 
@@ -132,6 +137,7 @@ export const certTypeIdMap = {
   [certTypes.infosecQa]: certIds.legacyInfosecQaId,
   [certTypes.fullStack]: certIds.legacyFullStackId,
   [certTypes.respWebDesign]: certIds.respWebDesignId,
+  [certTypes.respWebDesignQA]: certIds.respWebDesignQAId,
   [certTypes.frontEndDevLibs]: certIds.frontEndDevLibsId,
   [certTypes.jsAlgoDataStruct]: certIds.jsAlgoDataStructId,
   [certTypes.dataVis2018]: certIds.dataVis2018Id,
@@ -151,6 +157,7 @@ export const certTypeTitleMap = {
   [certTypes.infosecQa]: 'Legacy Information Security and Quality Assurance',
   [certTypes.fullStack]: 'Legacy Full Stack',
   [certTypes.respWebDesign]: 'Responsive Web Design',
+  [certTypes.respWebDesignQA]: 'Responsive Web Design QA',
   [certTypes.frontEndDevLibs]: 'Front End Development Libraries',
   [certTypes.jsAlgoDataStruct]: 'JavaScript Algorithms and Data Structures',
   [certTypes.dataVis2018]: 'Data Visualization',

curriculum-server/source-curriculum.ts

@@ -6,17 +6,21 @@ interface Curriculum {
   [key: string]: unknown;
 }
 
-const curriculumList = Object.keys(curriculum as Curriculum).map(key => {
+const curriculumList: Array<Curriculum> = Object.keys(curriculum as Curriculum)
+.map(key => {
   if (key === '2022/responsive-web-design') {
     return { '2022-responsive-web-design': (curriculum as Curriculum)[key] };
+  } else if (key === '2022/responsive-web-design-qa') {
+    return { '2022-responsive-web-design-qa': (curriculum as Curriculum)[key] };
   } else {
     return { [key]: (curriculum as Curriculum)[key] };
   }
 });
 
-const patchedCurriculum = curriculumList.reduce((prev, curr) => {
-  return { ...prev, ...curr };
-}, {});
+const patchedCurriculum = curriculumList
+  .reduce((prev, curr) => {
+    return { ...prev, ...curr };
+  }, {});
 
 void fs
   .mkdir('data', { recursive: true })

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

@@ -0,0 +1,15 @@
+{
+  "name": "Build a Personal Portfolio Webpage Project QA",
+  "isUpcomingChange": false,
+  "usesMultifileEditor": true,
+  "order": 19,
+  "time": "30 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "2022/responsive-web-design-qa",
+  "challengeOrder": [
+    [
+      "bbbbbbbbbbbbbbbbbbbbbbbb",
+      "Build a Personal Portfolio Webpage QA"
+    ]
+  ]}

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

@@ -0,0 +1,21 @@
+{
+  "name": "Learn Basic CSS by Building a Cafe Menu QA",
+  "isUpcomingChange": false,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "learn-basic-css-by-building-a-cafe-menu-qa",
+  "order": 1,
+  "time": "5 hours",
+  "template": "",
+  "required": [],
+  "superBlock": "2022/responsive-web-design-qa",
+  "challengeOrder": [
+    [
+      "eeeeeeeeeeeeeeeeeeeeeeee",
+      "Step 1"
+    ],
+    [
+      "ffffffffffffffffffffffff",
+      "Step 2"
+    ]
+  ]}