From e37faff9e6722af66c15f275509e0bf38f3e9b92 Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Wed, 11 Feb 2026 15:04:30 +0300 Subject: [PATCH] feat(learn): add catalog (#65596) Co-authored-by: jdwilkin4 --- client/i18n/locales.test.ts | 8 +- client/i18n/locales/english/intro.json | 1241 ++++++++++++++++- client/i18n/locales/english/translations.json | 23 +- client/src/assets/superblock-icon.tsx | 25 + client/src/components/Map/index.tsx | 6 +- client/src/components/catalog-item.tsx | 61 + .../src/components/landing/components/faq.tsx | 1 + .../landing/components/landing-catalog.tsx | 73 + client/src/components/landing/landing.css | 25 + client/src/pages/catalog.css | 69 +- client/src/pages/catalog.tsx | 181 ++- client/src/pages/index.tsx | 3 + .../absolute-and-relative-units/index.md | 9 + .../pages/learn/attribute-selectors/index.md | 9 + client/src/pages/learn/basic-css/index.md | 9 + .../src/pages/learn/computer-basics/index.md | 9 + .../learn/css-and-accessibility/index.md | 9 + .../src/pages/learn/css-animations/index.md | 9 + client/src/pages/learn/css-box-model/index.md | 9 + client/src/pages/learn/css-colors/index.md | 9 + client/src/pages/learn/css-flexbox/index.md | 9 + client/src/pages/learn/css-grid/index.md | 9 + .../src/pages/learn/css-positioning/index.md | 9 + .../src/pages/learn/css-typography/index.md | 9 + client/src/pages/learn/css-variables/index.md | 9 + .../learn/design-for-developers/index.md | 9 + .../learn/html-and-accessibility/index.md | 9 + .../learn/html-forms-and-tables/index.md | 9 + .../learn/lab-book-inventory-app/index.md | 9 + .../learn/lab-page-of-playing-cards/index.md | 9 + .../learn/lab-product-landing-page/index.md | 9 + .../src/pages/learn/lab-survey-form/index.md | 9 + .../lab-technical-documentation-page/index.md | 9 + .../learn/learn-python-for-beginners/index.md | 9 + .../pseudo-classes-and-elements/index.md | 9 + .../pages/learn/responsive-design/index.md | 9 + client/src/pages/learn/styling-forms/index.md | 9 + .../components/super-block-intro.tsx | 13 +- client/src/templates/Introduction/intro.css | 8 +- .../cat-blog-page/669aff9f5488f1bea056416d.md | 58 - .../cat-blog-page/669fc7e141e4703748c558bf.md | 43 - .../cat-blog-page/669fc938d38e6e38ace9251e.md | 87 -- .../cat-blog-page/669fcb06c3034a39f5431a38.md | 69 - .../cat-photo-app/5dc174fcf86c76b9248c6eb2.md | 60 - .../cat-photo-app/5dc1798ff86c76b9248c6eb3.md | 86 -- .../cat-photo-app/5dc17d3bf86c76b9248c6eb4.md | 66 - .../cat-photo-app/5dc17dc8f86c76b9248c6eb5.md | 88 -- .../event-hub/66ebd4ae2812430bb883c787.md | 335 ----- .../learn-python-better-calculator-video.md | 37 + .../learn-python-functions-video.md | 57 + .../learn-python-if-comparisons-video.md | 37 + .../learn-python-if-statements-video.md | 47 + .../learn-python-return-statement-video.md | 44 + .../learn-python-drawing-shape-video.md | 54 + .../learn-python-numbers-video.md | 37 + .../learn-python-strings-video.md | 49 + .../learn-python-user-input-video.md | 37 + .../learn-python-variables-types-video.md | 37 + .../learn-python-list-functions-video.md | 43 + .../learn-python-lists-video.md | 42 + .../learn-python-tuples-video.md | 45 + .../learn-python-classes-objects-video.md | 37 + .../learn-python-inheritance-video.md | 37 + .../learn-python-interpreter-video.md | 37 + .../learn-python-object-functions-video.md | 69 + .../learn-python-quiz-project-video.md | 37 + .../learn-python-comments-video.md | 37 + .../learn-python-modules-pip-video.md | 37 + .../learn-python-reading-files-video.md | 37 + .../learn-python-try-except-video.md | 45 + .../learn-python-writing-files-video.md | 37 + .../learn-python-2d-lists-video.md | 47 + .../learn-python-dictionaries-video.md | 105 ++ .../learn-python-exponent-functions-video.md | 37 + .../learn-python-for-loops-video.md | 49 + .../learn-python-guessing-game-video.md | 45 + .../learn-python-translator-video.md | 37 + .../learn-python-while-loop-video.md | 83 ++ .../learn-python-hello-world-video.md | 37 + .../learn-python-install-video.md | 37 + .../learn-python-intro-video.md | 37 + .../learn-python-basic-calculator-video.md | 37 + .../learn-python-mad-libs-video.md | 49 + .../recipe-page/668f08ea07b99b1f4a91acab.md | 224 --- curriculum/schema/challenge-schema.js | 3 +- curriculum/schema/curriculum-schema.js | 25 +- curriculum/src/build-curriculum.ts | 27 +- .../structure/blocks/cat-blog-page.json | 28 - .../structure/blocks/cat-photo-app.json | 28 - curriculum/structure/blocks/event-hub.json | 12 - .../learn-python-control-flow-functions.json | 30 + .../blocks/learn-python-core-primitives.json | 30 + .../blocks/learn-python-data-structures.json | 22 + .../structure/blocks/learn-python-oop.json | 30 + .../learn-python-practical-errors-files.json | 30 + .../blocks/learn-python-projects-loops.json | 38 + .../learn-python-setup-first-steps.json | 22 + .../learn-python-small-projects-basics.json | 18 + curriculum/structure/blocks/recipe-page.json | 15 - curriculum/structure/curriculum.json | 27 +- .../absolute-and-relative-units.json | 8 + .../superblocks/attribute-selectors.json | 8 + .../structure/superblocks/basic-css.json | 16 + .../structure/superblocks/basic-html.json | 25 +- .../superblocks/computer-basics.json | 9 + .../superblocks/css-and-accessibility.json | 9 + .../structure/superblocks/css-animations.json | 11 + .../structure/superblocks/css-box-model.json | 9 + .../structure/superblocks/css-colors.json | 9 + .../structure/superblocks/css-flexbox.json | 9 + .../structure/superblocks/css-grid.json | 10 + .../superblocks/css-positioning.json | 9 + .../structure/superblocks/css-typography.json | 9 + .../structure/superblocks/css-variables.json | 9 + .../superblocks/design-for-developers.json | 9 + .../superblocks/full-stack-open.json | 28 +- .../superblocks/html-and-accessibility.json | 17 + .../superblocks/html-forms-and-tables.json | 12 + .../superblocks/lab-book-inventory-app.json | 3 + .../lab-page-of-playing-cards.json | 3 + .../superblocks/lab-product-landing-page.json | 3 + .../superblocks/lab-survey-form.json | 3 + .../lab-technical-documentation-page.json | 3 + .../learn-python-for-beginners.json | 12 + .../pseudo-classes-and-elements.json | 10 + .../superblocks/responsive-design.json | 8 + .../structure/superblocks/semantic-html.json | 13 +- .../structure/superblocks/styling-forms.json | 11 + packages/shared/src/config/catalog.test.ts | 4 +- packages/shared/src/config/catalog.ts | 173 ++- .../src/config/certification-settings.ts | 27 +- packages/shared/src/config/curriculum.ts | 59 +- 132 files changed, 4303 insertions(+), 1284 deletions(-) create mode 100644 client/src/components/catalog-item.tsx create mode 100644 client/src/components/landing/components/landing-catalog.tsx create mode 100644 client/src/pages/learn/absolute-and-relative-units/index.md create mode 100644 client/src/pages/learn/attribute-selectors/index.md create mode 100644 client/src/pages/learn/basic-css/index.md create mode 100644 client/src/pages/learn/computer-basics/index.md create mode 100644 client/src/pages/learn/css-and-accessibility/index.md create mode 100644 client/src/pages/learn/css-animations/index.md create mode 100644 client/src/pages/learn/css-box-model/index.md create mode 100644 client/src/pages/learn/css-colors/index.md create mode 100644 client/src/pages/learn/css-flexbox/index.md create mode 100644 client/src/pages/learn/css-grid/index.md create mode 100644 client/src/pages/learn/css-positioning/index.md create mode 100644 client/src/pages/learn/css-typography/index.md create mode 100644 client/src/pages/learn/css-variables/index.md create mode 100644 client/src/pages/learn/design-for-developers/index.md create mode 100644 client/src/pages/learn/html-and-accessibility/index.md create mode 100644 client/src/pages/learn/html-forms-and-tables/index.md create mode 100644 client/src/pages/learn/lab-book-inventory-app/index.md create mode 100644 client/src/pages/learn/lab-page-of-playing-cards/index.md create mode 100644 client/src/pages/learn/lab-product-landing-page/index.md create mode 100644 client/src/pages/learn/lab-survey-form/index.md create mode 100644 client/src/pages/learn/lab-technical-documentation-page/index.md create mode 100644 client/src/pages/learn/learn-python-for-beginners/index.md create mode 100644 client/src/pages/learn/pseudo-classes-and-elements/index.md create mode 100644 client/src/pages/learn/responsive-design/index.md create mode 100644 client/src/pages/learn/styling-forms/index.md delete mode 100644 curriculum/challenges/english/blocks/cat-blog-page/669aff9f5488f1bea056416d.md delete mode 100644 curriculum/challenges/english/blocks/cat-blog-page/669fc7e141e4703748c558bf.md delete mode 100644 curriculum/challenges/english/blocks/cat-blog-page/669fc938d38e6e38ace9251e.md delete mode 100644 curriculum/challenges/english/blocks/cat-blog-page/669fcb06c3034a39f5431a38.md delete mode 100644 curriculum/challenges/english/blocks/cat-photo-app/5dc174fcf86c76b9248c6eb2.md delete mode 100644 curriculum/challenges/english/blocks/cat-photo-app/5dc1798ff86c76b9248c6eb3.md delete mode 100644 curriculum/challenges/english/blocks/cat-photo-app/5dc17d3bf86c76b9248c6eb4.md delete mode 100644 curriculum/challenges/english/blocks/cat-photo-app/5dc17dc8f86c76b9248c6eb5.md delete mode 100644 curriculum/challenges/english/blocks/event-hub/66ebd4ae2812430bb883c787.md create mode 100644 curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-better-calculator-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-functions-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-comparisons-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-statements-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-return-statement-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-drawing-shape-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-numbers-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-strings-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-user-input-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-variables-types-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-list-functions-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-lists-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-tuples-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-oop/learn-python-classes-objects-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-oop/learn-python-inheritance-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-oop/learn-python-interpreter-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-oop/learn-python-object-functions-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-oop/learn-python-quiz-project-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-comments-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-modules-pip-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-reading-files-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-try-except-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-writing-files-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-2d-lists-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-dictionaries-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-exponent-functions-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-for-loops-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-guessing-game-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-translator-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-while-loop-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-hello-world-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-install-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-intro-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-basic-calculator-video.md create mode 100644 curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-mad-libs-video.md delete mode 100644 curriculum/challenges/english/blocks/recipe-page/668f08ea07b99b1f4a91acab.md delete mode 100644 curriculum/structure/blocks/cat-blog-page.json delete mode 100644 curriculum/structure/blocks/cat-photo-app.json delete mode 100644 curriculum/structure/blocks/event-hub.json create mode 100644 curriculum/structure/blocks/learn-python-control-flow-functions.json create mode 100644 curriculum/structure/blocks/learn-python-core-primitives.json create mode 100644 curriculum/structure/blocks/learn-python-data-structures.json create mode 100644 curriculum/structure/blocks/learn-python-oop.json create mode 100644 curriculum/structure/blocks/learn-python-practical-errors-files.json create mode 100644 curriculum/structure/blocks/learn-python-projects-loops.json create mode 100644 curriculum/structure/blocks/learn-python-setup-first-steps.json create mode 100644 curriculum/structure/blocks/learn-python-small-projects-basics.json delete mode 100644 curriculum/structure/blocks/recipe-page.json create mode 100644 curriculum/structure/superblocks/absolute-and-relative-units.json create mode 100644 curriculum/structure/superblocks/attribute-selectors.json create mode 100644 curriculum/structure/superblocks/basic-css.json create mode 100644 curriculum/structure/superblocks/computer-basics.json create mode 100644 curriculum/structure/superblocks/css-and-accessibility.json create mode 100644 curriculum/structure/superblocks/css-animations.json create mode 100644 curriculum/structure/superblocks/css-box-model.json create mode 100644 curriculum/structure/superblocks/css-colors.json create mode 100644 curriculum/structure/superblocks/css-flexbox.json create mode 100644 curriculum/structure/superblocks/css-grid.json create mode 100644 curriculum/structure/superblocks/css-positioning.json create mode 100644 curriculum/structure/superblocks/css-typography.json create mode 100644 curriculum/structure/superblocks/css-variables.json create mode 100644 curriculum/structure/superblocks/design-for-developers.json create mode 100644 curriculum/structure/superblocks/html-and-accessibility.json create mode 100644 curriculum/structure/superblocks/html-forms-and-tables.json create mode 100644 curriculum/structure/superblocks/lab-book-inventory-app.json create mode 100644 curriculum/structure/superblocks/lab-page-of-playing-cards.json create mode 100644 curriculum/structure/superblocks/lab-product-landing-page.json create mode 100644 curriculum/structure/superblocks/lab-survey-form.json create mode 100644 curriculum/structure/superblocks/lab-technical-documentation-page.json create mode 100644 curriculum/structure/superblocks/learn-python-for-beginners.json create mode 100644 curriculum/structure/superblocks/pseudo-classes-and-elements.json create mode 100644 curriculum/structure/superblocks/responsive-design.json create mode 100644 curriculum/structure/superblocks/styling-forms.json diff --git a/client/i18n/locales.test.ts b/client/i18n/locales.test.ts index ef94c59c5d8..21edaae9b0d 100644 --- a/client/i18n/locales.test.ts +++ b/client/i18n/locales.test.ts @@ -10,8 +10,9 @@ import { LangCodes } from '@freecodecamp/shared/config/i18n'; import { - catalogSuperBlocks, - SuperBlocks + SuperBlocks, + superBlockStages, + SuperBlockStage } from '@freecodecamp/shared/config/curriculum'; import intro from './locales/english/intro.json'; @@ -85,13 +86,14 @@ describe('Locale tests:', () => { describe('Intro file structure tests:', () => { const typedIntro = intro as unknown as Intro; const superblocks = Object.values(SuperBlocks); + const catalogSuperBlocks = superBlockStages[SuperBlockStage.Catalog]; for (const superBlock of superblocks) { test(`superBlock ${superBlock} has required properties`, () => { expect(typeof typedIntro[superBlock].title).toBe('string'); // catalog superblocks should have a summary if (catalogSuperBlocks.includes(superBlock)) { - expect(typedIntro[superBlock].intro).toBeInstanceOf(Array); + expect(typedIntro[superBlock].summary).toBeInstanceOf(Array); } expect(typedIntro[superBlock].intro).toBeInstanceOf(Array); diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 09094c4c97c..3447f382be3 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -941,6 +941,67 @@ } } }, + "learn-python-for-beginners": { + "title": "Learn Python for Beginners", + "summary": [ + "Learn the fundamentals of Python programming from the ground up by practicing foundational concepts and building small projects." + ], + "intro": [ + "Python is one of the most popular programming languages today. It's easy to learn, readable, and versatile.", + "In this comprehensive course, you'll learn the fundamentals of Python programming from the ground up. You'll start with basic concepts like variables and data types, progress through control flow and functions, and build projects to practice what you've learned." + ], + "note": "", + "blocks": { + "learn-python-setup-first-steps": { + "title": "Setup & First Steps", + "intro": [ + "In these videos, popular programming instructor Mike Dane will introduce you to Python and show you how to setup your local environment." + ] + }, + "learn-python-core-primitives": { + "title": "Core Primitives: Variables, Types, Basic I/O", + "intro": [ + "In these videos, you will learn about variables, data types, strings, numbers, and getting input from the user." + ] + }, + "learn-python-small-projects-basics": { + "title": "Small Projects: Using Basics", + "intro": [ + "In these videos, you will practice what you have learned so far by building a basic calculator app and mad libs game." + ] + }, + "learn-python-data-structures": { + "title": "Data Structures: Lists and Tuples", + "intro": [ + "In these videos, you will learn about lists, tuples and common operations." + ] + }, + "learn-python-control-flow-functions": { + "title": "Control Flow and Functions", + "intro": [ + "In these videos, you will learn how to control the flow of your programs with if statements. You will also learn how to write reusable code with functions." + ] + }, + "learn-python-projects-loops": { + "title": "Dictionaries and Loops", + "intro": [ + "In these videos, you will learn how to work with dictionaries and various loops include the while and for loops." + ] + }, + "learn-python-practical-errors-files": { + "title": "Practical Python: Errors, Files and Modules", + "intro": [ + "In these videos, you will learn how to handle errors gracefully, read and write to files, and organize your code with modules and external packages." + ] + }, + "learn-python-oop": { + "title": "Object Oriented Programming", + "intro": [ + "In these videos, you will learn about object-oriented programming by creating classes and objects. You will practice these skills by building a multiple choice quiz application." + ] + } + } + }, "information-security": { "title": "Information Security", "intro": [ @@ -4530,6 +4591,70 @@ } } }, + "html-forms-and-tables": { + "title": "HTML Forms and Tables", + "summary": [ + "Learn how to build accessible forms and data tables with semantic HTML." + ], + "intro": [ + "Learn how to build accessible forms and data tables with semantic HTML.", + "Practice structuring inputs, labels, and tabular data so everyone can navigate and submit information confidently." + ], + "blocks": { + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lessons, you will learn about forms, the role of labels, inputs and buttons in creating forms, client-side form validation, and form states." + ] + }, + "workshop-hotel-feedback-form": { + "title": "Build a Hotel Feedback Form", + "intro": [ + "In this workshop, you will build a Hotel Feedback Form.", + "You will practice working with labels, inputs, fieldsets, legends, textareas and buttons." + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lessons, you will learn about HTML tables, how to create them, and when to use them." + ] + }, + "workshop-final-exams-table": { + "title": "Build a Final Exams Table", + "intro": [ + "In this workshop, you will practice working with HTML tables by building a table of final exams." + ] + }, + "lab-book-catalog-table": { + "title": "Build a Book Catalog Table", + "intro": [ + "In this lab, you'll review HTML tables by building a book information table.", + "You'll practice the different table components like the thead, tbody, th, tr, and td elements." + ] + }, + "lecture-working-with-html-tools": { + "title": "Working with HTML Tools", + "intro": [ + "In these lectures, you will learn about HTML tools and how they let you write better code. These tools include HTML validators, DOM Inspector, and the browser developer tools." + ] + }, + "review-html-tables-and-forms": { + "title": "HTML Tables and Forms Review", + "intro": [ + "Before you are quizzed on HTML forms, tables and tools, you first need to review the concepts.", + "Open up this page to review the table, input, and button elements as well as commonly used tools like the HTML validator and more." + ] + }, + "quiz-html-tables-and-forms": { + "title": "HTML Tables and Forms Quiz", + "intro": [ + "The following quiz will test your knowledge of HTML tables, forms and commonly used HTML tools.", + "If you're getting ready for the exam, there are several quiz sets available for practice. After completing a quiz, you can revisit this page to access a new set of questions." + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. We are currently publishing the first three chapters, and future chapters will be released as they are developed by our instructional design team. Once all the chapters are available, we will release the certification exam.", @@ -6081,18 +6206,145 @@ ], "intro": ["Larger intro for the superblock page."], "blocks": { - "cat-photo-app": { - "title": "Build a Cat Photo App", + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", "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." + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." ] }, - "recipe-page": { + "lab-debug-camperbots-profile-page": { + "title": "Debug Camperbot's Profile Page", + "intro": [ + "Camperbot is learning how to code too and needs some help with their HTML.", + "In this lab, you will help Camperbot find and fix the errors in their code." + ] + }, + "lecture-understanding-html-attributes": { + "title": "Understanding HTML Attributes", + "intro": [ + "In these lectures, you will learn more about HTML (HyperText Markup Language), a markup language for creating web pages.", + "You will learn about HTML's role on the web, and what HTML attributes are." + ] + }, + "lab-debug-pet-adoption-page": { + "title": "Debug a Pet Adoption Page", + "intro": [ + "In this lab, you will need to find and fix the errors in this pet adoption page." + ] + }, + "lecture-understanding-the-html-boilerplate": { + "title": "Understanding the HTML Boilerplate", + "intro": [ + "In these lectures, you will learn about the HTML boilerplate which is a ready-made template for your webpages.", + "You will learn how to work with the link element, meta element and more." + ] + }, + "workshop-cat-photo-app": { + "title": "Build a Cat Photo App", + "intro": [ + "HTML stands for HyperText Markup Language and it represents the content and structure of a web page.", + "In this workshop, you will learn how to work with basic HTML elements such as headings, paragraphs, images, links, and lists." + ] + }, + "lab-recipe-page": { "title": "Build a Recipe Page", "intro": [ "In this lab, you'll review HTML basics by creating a web page of your favorite recipe. You'll create an HTML boilerplate and work with headings, lists, images, and more." ] + }, + "lecture-html-fundamentals": { + "title": "HTML Fundamentals", + "intro": [ + "In these lectures, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more." + ] + }, + "workshop-bookstore-page": { + "title": "Build a Bookstore Page", + "intro": [ + "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page." + ] + }, + "lecture-understanding-how-html-affects-seo": { + "title": "Understanding How HTML Affects SEO", + "intro": [ + "In these lectures, you will learn how your HTML code impacts search engine optimization." + ] + }, + "lab-travel-agency-page": { + "title": "Build a Travel Agency Page", + "intro": [ + "In this lab, you'll review working with HTML fundamentals by creating a web page for a travel agency. You'll work with images, the figure element, the figcaption element, the anchor element, and more." + ] + }, + "lecture-working-with-audio-and-video-elements": { + "title": "Working with Audio and Video Elements", + "intro": [ + "In these lectures, you will learn how to work with the audio and video elements." + ] + }, + "workshop-html-video-player": { + "title": "Build an HTML Video Player", + "intro": [ + "In this workshop, you'll use HTML to create a basic video player.", + "This project will cover the video element, the video player setup, and more." + ] + }, + "lab-html-audio-and-video-player": { + "title": "Build an HTML Audio and Video Player", + "intro": [ + "In this lab, you will build an HTML audio and video player using the video and audio elements with controls and source attributes." + ] + }, + "lecture-working-with-images-and-svgs": { + "title": "Working with Images and SVGs", + "intro": [ + "In these lectures, you will learn how to work with SVGs and learn about techniques for optimizing your images." + ] + }, + "workshop-build-a-heart-icon": { + "title": "Build a Heart Icon", + "intro": [ + "In this workshop, you will practice working with SVGs by building a heart icon" + ] + }, + "lecture-working-with-media": { + "title": "Working with the iframe Element", + "intro": [ + "In these lectures, you will learn how to work with the iframe element which is used to embed an external site on your web page." + ] + }, + "workshop-build-a-video-display-using-iframe": { + "title": "Build a Video Display Using iframe", + "intro": [ + "In this workshop, you'll learn how to work with the iframe element by building a video display." + ] + }, + "lab-video-compilation-page": { + "title": "Build a Video Compilation Page", + "intro": [ + "In this lab, you'll create a video compilation web page. You'll practice working with the iframe element." + ] + }, + "lecture-working-with-links": { + "title": "Working with Links", + "intro": [ + "In these lectures, you will learn about links, the target attribute, different link states, absolute, and relative paths, and more." + ] + }, + "review-basic-html": { + "title": "Basic HTML Review", + "intro": [ + "Before you are quizzed on the HTML knowledge you have gained so far, you first need to review the concepts.", + "Open up this page to review the HTML boilerplate, audio and video elements, the different target attribute values and more." + ] + }, + "quiz-basic-html": { + "title": "Basic HTML Quiz", + "intro": [ + "The following quiz will test your knowledge of the basic HTML concepts you have learned so far.", + "If you're getting ready for the exam, there are several quiz sets available for practice. After completing a quiz, you can revisit this page to access a new set of questions." + ] } } }, @@ -6103,17 +6355,992 @@ ], "intro": ["Larger intro for the superblock page."], "blocks": { - "cat-blog-page": { + "lecture-importance-of-semantic-html": { + "title": "Importance of Semantic HTML", + "intro": [ + "In these lectures, you will learn about semantic HTML and why you should care about it, semantic elements, how semantic HTML differs from presentational HTML, and more." + ] + }, + "lecture-understanding-nuanced-semantic-elements": { + "title": "Understanding Nuanced Semantic Elements", + "intro": [ + "In these lectures, you will learn when you should use certain semantic elements like the em element over the i element, description lists, and more." + ] + }, + "workshop-major-browsers-list": { + "title": "Build a List of Major Web Browsers", + "intro": [ + "In this workshop, you will build a description list and work with the dl, dt, and dd elements." + ] + }, + "lecture-working-with-text-and-time-semantic-elements": { + "title": "Working with Text and Time Semantic Elements ", + "intro": [ + "In this lecture, you will learn about the importance of semantics in conveying meaning for text and time-related content including the time, blockquote elements and more." + ] + }, + "workshop-quincys-job-tips": { + "title": "Build Quincy's Job Tips Page", + "intro": [ + "In this workshop, you will practice working with semantic HTML by using the q, blockquote and cite elements." + ] + }, + "lecture-working-with-specialized-semantic-elements": { + "title": "Working with Specialized Semantic Elements", + "intro": [ + "In this lecture, you will learn about specialized semantic elements like u, s, code elements and more." + ] + }, + "workshop-blog-page": { "title": "Build a Cat Blog Page", "intro": [ "In this workshop, you will build an HTML only blog page using semantic elements including the main, nav, article and footer elements." ] }, - "event-hub": { + "lab-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." ] + }, + "review-semantic-html": { + "title": "Semantic HTML Review", + "intro": [ + "Before you are quizzed on semantic HTML, you first need to review the concepts.", + "Open up this page to review the em, strong, blockquote, address and more semantic HTML elements." + ] + }, + "quiz-semantic-html": { + "title": "Semantic HTML Quiz", + "intro": [ + "The following quiz will test your knowledge on semantic HTML concepts you have learned so far.", + "If you're getting ready for the exam, there are several quiz sets available for practice. After completing a quiz, you can revisit this page to access a new set of questions." + ] + } + } + }, + "lab-survey-form": { + "title": "Build a Survey Form", + "summary": [ + "Create a complete survey form while practicing HTML structure and accessible form controls." + ], + "intro": [ + "Build a complete survey form with semantic HTML and accessible inputs." + ], + "blocks": { + "lab-survey-form": { + "title": "Build a Survey Form", + "intro": [ + "In this lab, you'll review HTML forms by creating a survey form.", + "You'll practice working with the label element, the different input elements, the required attribute, and more. " + ] + } + } + }, + "html-and-accessibility": { + "title": "Accessibility", + "summary": [ + "Learn how to write inclusive HTML using accessibility best practices and ARIA." + ], + "intro": [ + "Practice writing accessible HTML structures and form experiences." + ], + "blocks": { + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lessons, you will learn about accessibility and its importance, assistive tools for people with disabilities, HTML attributes that let you create inclusive websites, accessibility best practices, and much more." + ] + }, + "workshop-debug-coding-journey-blog-page": { + "title": "Debug a Coding Journey Blog Page", + "intro": [ + "In this workshop, you will debug and fix accessibility errors in a coding blog page." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lessons, you will learn about how to create accessible tables and forms." + ] + }, + "workshop-tech-conference-schedule": { + "title": "Build a Tech Conference Schedule Table", + "intro": [ + "In this workshop, you will build an accessible tech conference schedule table." + ] + }, + "lab-debug-donation-form": { + "title": "Debug a Donation Form", + "intro": [ + "In this lab you will debug a donation form by fixing HTML syntax errors and improving accessibility." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "workshop-accessible-audio-controller": { + "title": "Build an Accessible Audio Controller", + "intro": [ + "In this workshop, you will practice accessible HTML by building an audio controller that uses the aria-labelledby attribute." + ] + }, + "lecture-accessible-media-elements": { + "title": "Working with Accessible Media Elements", + "intro": [ + "In these lectures, you will learn about how to create accessible links, audio and video content." + ] + }, + "lab-checkout-page": { + "title": "Build a Checkout Page", + "intro": [ + "In this lab, you'll create an accessible checkout page.", + "You'll practice concepts like alt attributes and ARIA roles." + ] + }, + "lab-movie-review-page": { + "title": "Design a Movie Review Page", + "intro": [ + "In this lab, you'll create a movie review page.", + "You'll practice concepts like semantic HTML, alt attributes, accessible lists, and hiding decorative content from screen readers using aria-hidden." + ] + }, + "lab-multimedia-player": { + "title": "Build a Multimedia Player", + "intro": [ + "In this lab, you'll build a multimedia player.", + "You will practice working with the audio and video elements, the controls attribute, and the aria-label attribute." + ] + }, + "review-html-accessibility": { + "title": "HTML Accessibility Review", + "intro": [ + "Before you are quizzed on HTML and accessibility, you first need to review the concepts.", + "Open up this page to review concepts including the aria-hidden, aria-describedby, tabindex attributes and more." + ] + }, + "quiz-html-accessibility": { + "title": "HTML Accessibility Quiz", + "intro": [ + "The following quiz will test your knowledge on the accessibility concepts you have learned so far.", + "If you're getting ready for the exam, there are several quiz sets available for practice. After completing a quiz, you can revisit this page to access a new set of questions." + ] + } + } + }, + "computer-basics": { + "title": "Computer Basics", + "summary": [ + "Build a foundation in computer, internet, and tooling basics for web development." + ], + "intro": [ + "Get comfortable with the tools and concepts that power modern web development." + ], + "blocks": { + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lessons, you will learn about the computer, its different parts, internet service providers (ISPs), and the tools professional developers use." + ] + }, + "lecture-working-with-file-systems": { + "title": "Working with File Systems", + "intro": [ + "In these lessons, you will learn how to work with file and folder systems on your computers. You will learn how to create, move, and delete files and folders, the best practices for naming and organizing files and folders, and more." + ] + }, + "lecture-browsing-the-web-effectively": { + "title": "Browsing the Web Effectively", + "intro": [ + "In these lessons, you will learn about what websites, search engine, and web browsers are, the different browsers available, and how to get the best out of a search engine." + ] + }, + "review-computer-basics": { + "title": "Computer Basics Review", + "intro": [ + "Before you are quizzed on basic computer and internet concepts, you first need to review.", + "Open up this page to review concepts like RAM, Internet service providers, common web browsers, search engines and more." + ] + }, + "quiz-computer-basics": { + "title": "Computer Basics Quiz", + "intro": [ + "Test what you've learned in this quiz of basic computer knowledge." + ] + } + } + }, + "basic-css": { + "title": "Basic CSS", + "summary": [ + "Learn core CSS concepts and start styling real-world layouts." + ], + "intro": [ + "Learn the fundamentals of CSS and apply them to practical layouts." + ], + "blocks": { + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lessons are all about CSS. You will learn what CSS is and its role on the web, a CSS rule and its anatomy, the three ways to write CSS and when to use each, inline and block elements, and many more." + ] + }, + "workshop-cafe-menu": { + "title": "Design a Cafe Menu", + "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 workshop, you'll learn CSS by designing a menu page for a cafe webpage." + ] + }, + "lab-business-card": { + "title": "Design a Business Card", + "intro": [ + "In this lab, you'll create a business card and style it using CSS.", + "You'll practice style properties like color, font-size, text-align, and more." + ] + }, + "lecture-css-specificity-the-cascade-algorithm-and-inheritance": { + "title": "CSS Specificity, the Cascade Algorithm, and Inheritance", + "intro": [ + "In these lessons, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "CSS Fundamentals Review", + "intro": [ + "Before you are quizzed on basic CSS concepts, you first need to review.", + "Open up this page to review concepts including margin, padding, CSS combinators, CSS specificity and more." + ] + }, + "quiz-basic-css": { + "title": "CSS Fundamentals Quiz", + "intro": [ + "Test what you've learned in this quiz of basic CSS knowledge." + ] + }, + "lecture-styling-lists-and-links": { + "title": "Styling Lists and Links", + "intro": [ + "In these lessons, you will learn the properties you need to know to effectively style lists and links, including link states like link, visited, hover, and active." + ] + }, + "lab-stylized-to-do-list": { + "title": "Build a Stylized To-Do List", + "intro": [ + "In this lab, you'll build a To-Do list and apply different styles to the links", + "You'll practice style properties like text-decoration, list-style-type and how to change styles on hover or click." + ] + }, + "lecture-working-with-backgrounds-and-borders": { + "title": "Working with Backgrounds and Borders", + "intro": [ + "In these lessons, you will learn about the properties and values you need to know to style backgrounds and borders of elements, alongside the accessibility considerations for backgrounds." + ] + }, + "lab-blog-post-card": { + "title": "Design a Blog Post Card", + "intro": [ + "In this lab, you'll design a blog post card using HTML and CSS", + "You'll practice concepts like background-color, border-radius, margins, paddings, and more." + ] + }, + "review-css-backgrounds-and-borders": { + "title": "Lists, Links, CSS Background and Borders Review", + "intro": [ + "Before you are quizzed on CSS backgrounds and borders, you first need to review.", + "Open up this page to review concepts including the background-image property, border property and more." + ] + }, + "quiz-css-backgrounds-and-borders": { + "title": "CSS Backgrounds and Borders Quiz", + "intro": [ + "Test what you've learned in this quiz of backgrounds and borders in CSS." + ] + } + } + }, + "design-for-developers": { + "title": "Design", + "summary": [ + "Explore UI design fundamentals and user-centered design principles for developers." + ], + "intro": [ + "Learn the design principles that help developers build better interfaces." + ], + "blocks": { + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lessons, you will learn about the fundamentals of user interface (UI) design. You will learn about the terms you need to know to communicate with designers, visual hierarchy, scaling, alignment, whitespace, and much more." + ] + }, + "lecture-user-centered-design": { + "title": "User-Centered Design", + "intro": [ + "In these lessons, you will learn about best practices for designing user-facing features like dark mode, breadcrumbs, modal dialogs, and much more. You will also learn how to conduct user research, user requirements and testing." + ] + }, + "lecture-common-design-tools": { + "title": "Common Design Tools", + "intro": [ + "In these lessons, you will learn about the common design tools developers should know. You will also learn about design briefs and how developers work with them." + ] + }, + "review-design-fundamentals": { + "title": "Design Fundamentals Review", + "intro": [ + "Before you are quizzed on the design fundamentals you have learned so far, you first need to review.", + "Open up this page to review concepts like user-centered design, scale, alignment, good visual hierarchy and more." + ] + }, + "quiz-design-fundamentals": { + "title": "Design Fundamentals Quiz", + "intro": [ + "Test what you've learned in this quiz of UI design fundamentals." + ] + } + } + }, + "absolute-and-relative-units": { + "title": "Absolute and Relative Units", + "summary": [ + "Understand when to use absolute and relative CSS units to build flexible layouts." + ], + "intro": ["Learn to size elements responsively with CSS units."], + "blocks": { + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lessons, you will learn about relative and absolute units, and how they both impact what you see in the browser." + ] + }, + "lab-event-flyer-page": { + "title": "Build an Event Flyer Page", + "intro": [ + "In this lab, you'll create an event flyer page.", + "You will practice aligning elements using absolute and relative CSS." + ] + }, + "review-css-relative-and-absolute-units": { + "title": "CSS Relative and Absolute Units Review", + "intro": [ + "Before you are quizzed on relative and absolute units, you first need to review.", + "Open up this page to review concepts like percentages, px, rem, em, and more." + ] + }, + "quiz-css-relative-and-absolute-units": { + "title": "CSS Relative and Absolute Units Quiz", + "intro": [ + "Test what you've learned in this quiz of relative and absolute units in CSS." + ] + } + } + }, + "pseudo-classes-and-elements": { + "title": "Pseudo Classes and Elements", + "summary": [ + "Use pseudo-classes and pseudo-elements to create richer, more interactive styles." + ], + "intro": [ + "Add interaction and detail with CSS pseudo-classes and pseudo-elements." + ], + "blocks": { + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lessons, you will learn about pseudo-classes and pseudo-elements, alongside their examples and how they work." + ] + }, + "workshop-greeting-card": { + "title": "Design a Greeting Card", + "intro": [ + "In the previous lessons, you learned how to work with the different types of pseudo-classes.", + "In this workshop, you will have a chance to practice what you have learned by designing a greeting card." + ] + }, + "workshop-parent-teacher-conference-form": { + "title": "Design a Parent Teacher Conference Form", + "intro": [ + "In this workshop, you will practice how to style radio buttons with different types of pseudo-selectors by building a parent-teacher conference form.", + "You'll practice concepts including the ::before pseudo-element selector, the transform property, and more." + ] + }, + "lab-job-application-form": { + "title": "Build a Job Application Form", + "intro": [ + "In this lab you'll build a job application form and style it using pseudo-classes.", + "You'll practice concepts like :hover, :active, :focus, and more." + ] + }, + "review-css-pseudo-classes": { + "title": "CSS Pseudo-classes Review", + "intro": [ + "Before you're quizzed on CSS pseudo-classes and pseudo-elements, you should review what you've learned about them.", + "Open up this page to review concepts like the ::before and ::after pseudo-elements as well as the :hover, :active pseudo-classes and more." + ] + }, + "quiz-css-pseudo-classes": { + "title": "CSS Pseudo-classes Quiz", + "intro": ["Test your knowledge of CSS pseudo-classes with this quiz."] + } + } + }, + "css-colors": { + "title": "Colors", + "summary": [ + "Work with CSS color formats and build cohesive color palettes." + ], + "intro": ["Learn to apply color with CSS to create polished visuals."], + "blocks": { + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lessons, you will learn about linear and radial gradients, the color theory, different kinds of colors like named, RGB, Hex, and HSL colors. You will learn how these colors work, and which to use in specific cases." + ] + }, + "workshop-colored-markers": { + "title": "Build a Set of Colored Markers", + "intro": [ + "In this workshop, you'll build a set of colored markers. You'll practice different ways to set color values and how to pair colors with each other." + ] + }, + "lab-colored-boxes": { + "title": "Design a Set of Colored Boxes", + "intro": [ + "In this lab, you'll create a color grid and practice adding background colors to the grid items using hex codes, RGB, and predefined color names." + ] + }, + "review-css-colors": { + "title": "CSS Colors Review", + "intro": [ + "Before you're quizzed on CSS colors, you should review what you've learned about them.", + "Open up this page to review concepts like the rgb() function, hsl() function, hex codes, and more." + ] + }, + "quiz-css-colors": { + "title": "CSS Colors Quiz", + "intro": ["Test your knowledge of CSS colors with this quiz."] + } + } + }, + "styling-forms": { + "title": "Styling Forms", + "summary": ["Apply CSS techniques to create clean, usable form layouts."], + "intro": ["Style form elements to improve usability and visual clarity."], + "blocks": { + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lessons, you will learn about the best practices for styling forms and issues you can encounter while styling special inputs like color and datetime-local." + ] + }, + "workshop-registration-form": { + "title": "Design a Registration Form", + "intro": [ + "In this workshop, you'll learn how to design HTML forms by designing 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." + ] + }, + "lab-contact-form": { + "title": "Design a Contact Form", + "intro": [ + "In this lab, you'll design a contact form in HTML and style it using CSS." + ] + }, + "workshop-game-settings-panel": { + "title": "Build a Game Settings Panel", + "intro": [ + "In this workshop, you will practice styling checkboxes by building a game settings panel." + ] + }, + "lab-feature-selection": { + "title": "Design a Feature Selection Page", + "intro": [ + "In this lab, you'll build a feature selection page with custom-styled checkboxes.", + "You'll create feature cards with labels and checkboxes, then give custom styling to the checkboxes." + ] + }, + "review-styling-forms": { + "title": "Styling Forms Review", + "intro": [ + "Before you're quizzed on styling forms, you should review what you've learned.", + "Open up this page to review how to style form inputs, working with appearance: none and more." + ] + }, + "quiz-styling-forms": { + "title": "Styling Forms Quiz", + "intro": [ + "In this quiz, you will test your knowledge of how to style forms." + ] + } + } + }, + "css-box-model": { + "title": "The Box Model", + "summary": [ + "Master the CSS box model, spacing, and layout effects for precise designs." + ], + "intro": ["Learn how spacing, borders, and layout effects work together."], + "blocks": { + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lessons, you will learn about working with CSS transforms, overflow, and filters. You will also learn about the box model and how it works." + ] + }, + "workshop-rothko-painting": { + "title": "Design a Rothko Painting", + "intro": [ + "Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.", + "In this workshop, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces." + ] + }, + "lab-confidential-email-page": { + "title": "Build a Confidential Email Page", + "intro": [ + "In this lab, you'll create a web page using HTML and mask the content using CSS properties." + ] + }, + "review-css-layout-and-effects": { + "title": "CSS Layouts and Effects Review", + "intro": [ + "Before you are quizzed on CSS Layouts and Effects, you first need to review.", + "Open up this page to review concepts like the transform property, the box model, the overflow property and more." + ] + }, + "quiz-css-layout-and-effects": { + "title": "CSS Layout and Effects Quiz", + "intro": [ + "In this quiz, you will test your knowledge of the box model, transforms, filters, and overflow in CSS." + ] + } + } + }, + "css-flexbox": { + "title": "Flexbox", + "summary": [ + "Build responsive layouts using the Flexbox model and alignment tools." + ], + "intro": ["Use Flexbox to build responsive, aligned layouts."], + "blocks": { + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lessons, you will learn how CSS flexbox works, its properties, and when you should use it." + ] + }, + "workshop-flexbox-photo-gallery": { + "title": "Build a Flexbox Photo Gallery", + "intro": [ + "In this workshop, you'll use Flexbox to build a responsive photo gallery webpage." + ] + }, + "lab-pricing-plans-layout": { + "title": "Build a Pricing Plans Layout", + "intro": [ + "In this lab, you'll create a pricing plans layout.", + "You'll practice aligning elements using flexbox properties like flex-direction, justify-content, align-self, and more." + ] + }, + "review-css-flexbox": { + "title": "CSS Flexbox Review", + "intro": [ + "Before you're quizzed on CSS flexbox, you should review what you've learned.", + "Open up this page to review concepts like the flex-direction, justify-content, align-items, flex-wrap properties, and more." + ] + }, + "quiz-css-flexbox": { + "title": "CSS Flexbox Quiz", + "intro": ["Test what you've learned on CSS flexbox with this quiz."] + } + } + }, + "lab-page-of-playing-cards": { + "title": "Build a Page of Playing Cards", + "summary": [ + "Create a multi-card layout to practice flexible CSS composition." + ], + "intro": ["Build a card-based layout and practice reusable styling."], + "blocks": { + "lab-page-of-playing-cards": { + "title": "Build a Page of Playing Cards", + "intro": [ + "In this lab, you'll use flexbox to create a webpage of playing cards.", + "You'll practice aligning elements using flexbox properties like flex-direction, justify-content, align-self, and more." + ] + } + } + }, + "css-typography": { + "title": "Typography", + "summary": [ + "Learn how to style text for readability, hierarchy, and visual balance." + ], + "intro": ["Use typography to improve readability and visual hierarchy."], + "blocks": { + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lessons, you will learn about typography and its best practices, fonts, and the text-shadow property." + ] + }, + "workshop-nutritional-label": { + "title": "Build a Nutritional Label", + "intro": [ + "Typography is the art of styling your text to be easily readable and suit its purpose.", + "In this workshop, you'll use typography to build a nutrition label webpage. You'll practice how to style text, adjust line height, and position your text using CSS." + ] + }, + "lab-newspaper-article": { + "title": "Build a Newspaper Article", + "intro": [ + "In this lab, you'll build a newspaper article page using HTML and CSS.", + "You'll style the fonts using properties like font-family, font-size, font-weight, and more." + ] + }, + "review-css-typography": { + "title": "CSS Typography Review", + "intro": [ + "Before you're quizzed on the fundamentals of typography, you should review what you've learned.", + "Open up this page to review concepts like web safe fonts, the font-family property and more." + ] + }, + "quiz-css-typography": { + "title": "CSS Typography Quiz", + "intro": ["Test your knowledge of typography with this quiz."] + } + } + }, + "css-and-accessibility": { + "title": "Accessibility", + "summary": [ + "Apply CSS techniques that support accessible and inclusive interfaces." + ], + "intro": ["Design with accessibility in mind while styling UI elements."], + "blocks": { + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lessons, you will learn about best practices for accessibility in CSS, and the tools for checking good color contrast on websites." + ] + }, + "workshop-accessibility-quiz": { + "title": "Build a Quiz Webpage", + "intro": [ + "Accessibility is the process of making your webpages usable for everyone, including people with disabilities.", + "In this workshop, you'll build a quiz webpage. You'll learn accessibility tools such as keyboard shortcuts, ARIA attributes, and design best practices." + ] + }, + "lab-tribute-page": { + "title": "Build a Tribute Page", + "intro": [ + "In this lab, you'll build a tribute page for a subject of your choosing, fictional or real." + ] + }, + "review-css-accessibility": { + "title": "CSS Accessibility Review", + "intro": [ + "Before you're quizzed on CSS and accessibility, you should review what you've learned.", + "Open up this page to review concepts like color contrast tools and accessibility best practices." + ] + }, + "quiz-css-accessibility": { + "title": "CSS Accessibility Quiz", + "intro": [ + "In this quiz, you'll test what you've learned about making your webpages accessible with CSS." + ] + } + } + }, + "css-positioning": { + "title": "Positioning", + "summary": [ + "Use positioning and floats to control layout and element flow." + ], + "intro": ["Control layout with floats and CSS positioning tools."], + "blocks": { + "lecture-understanding-how-to-work-with-floats-and-positioning-in-css": { + "title": "Understanding How to Work with Floats and Positioning in CSS", + "intro": [ + "In these lessons, you will learn how to use CSS positioning and floats. You will learn about absolute, relative, fixed, and sticky positioning. You will also use the z-index property." + ] + }, + "workshop-cat-painting": { + "title": "Build a Cat Painting", + "intro": [ + "Mastering CSS positioning is essential for creating visually appealing and responsive web layouts.", + "In this workshop, you will build a cat painting. You'll learn about how to work with absolute positioning, the z-index property, and the transform property." + ] + }, + "lab-house-painting": { + "title": "Build a House Painting", + "intro": [ + "In this lab, you'll build a house painting using CSS.", + "You'll design individual elements of the house and position them using CSS properties like position, top, left, and more." + ] + }, + "review-css-positioning": { + "title": "CSS Positioning Review", + "intro": [ + "Before you're quizzed on the fundamentals of CSS positioning, you should review what you've learned.", + "Open up this page to review concepts like floats, relative positioning, absolute positioning and more." + ] + }, + "quiz-css-positioning": { + "title": "CSS Positioning Quiz", + "intro": ["Test your knowledge of CSS positioning with this quiz."] + } + } + }, + "attribute-selectors": { + "title": "Attribute Selectors", + "summary": ["Target elements precisely with CSS attribute selectors."], + "intro": ["Select elements with precision using attribute selectors."], + "blocks": { + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lessons, you will learn about attribute selectors and how to use them to target elements like links and lists." + ] + }, + "workshop-balance-sheet": { + "title": "Build a Balance Sheet", + "intro": [ + "In this workshop, 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." + ] + }, + "review-css-attribute-selectors": { + "title": "CSS Attribute Selectors Review", + "intro": [ + "Before you're quizzed on the fundamentals of CSS attribute selectors, you should review what you've learned about them.", + "Open up this page to review concepts like how to work with different attribute selectors that target links with the href and title attributes." + ] + }, + "quiz-css-attribute-selectors": { + "title": "CSS Attribute Selectors Quiz", + "intro": [ + "Test your knowledge of CSS attribute selectors with this quiz." + ] + } + } + }, + "lab-book-inventory-app": { + "title": "Build a Book Inventory App", + "summary": ["Build a structured layout for managing a book inventory."], + "intro": ["Create a structured UI for a book inventory layout."], + "blocks": { + "lab-book-inventory-app": { + "title": "Build a Book Inventory App", + "intro": [ + "In this lab, you'll create a book inventory app.", + "You'll practice CSS attribute selectors like [attribute], [attribute=value], [attribute~=value], and more." + ] + } + } + }, + "responsive-design": { + "title": "Responsive Design", + "summary": [ + "Learn responsive design principles and build layouts that adapt to any screen." + ], + "intro": ["Make layouts adapt to different screen sizes and devices."], + "blocks": { + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lessons, you will learn about the best practices for responsive web design, the roles concepts like grid, flexbox, media queries, and media breakpoints play in responsive design, and more." + ] + }, + "workshop-piano": { + "title": "Design a Piano", + "intro": [ + "Responsive Design tells your webpage how it should look on different-sized screens.", + "In this workshop, you'll use CSS and responsive design to code a piano. You'll also practice media queries and pseudo selectors." + ] + }, + "review-responsive-web-design": { + "title": "Responsive Web Design Review", + "intro": [ + "Before you're quizzed on the fundamentals of responsive design, you should review what you've learned.", + "Open up this page to review concepts like media queries, media breakpoints and mobile first approach design." + ] + }, + "quiz-responsive-web-design": { + "title": "Responsive Web Design Quiz", + "intro": [ + "Test what you've learned about making your webpages responsive with this quiz." + ] + } + } + }, + "lab-technical-documentation-page": { + "title": "Build a Technical Documentation Page", + "summary": [ + "Create a documentation page and practice responsive structure and layout." + ], + "intro": [ + "Build a documentation page with clear structure and navigation." + ], + "blocks": { + "lab-technical-documentation-page": { + "title": "Build a Technical Documentation Page", + "intro": [ + "In this lab, you'll build a technical documentation page to serve as instruction or reference for a topic.", + "You'll also practice media queries to create a responsive design." + ] + } + } + }, + "css-variables": { + "title": "Variables", + "summary": ["Use CSS variables to build reusable, theme-friendly styles."], + "intro": ["Create maintainable styles using CSS custom properties."], + "blocks": { + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lessons, you will learn how to define and use custom properties (also known as CSS variables). You will also learn about the @property rule and how it works." + ] + }, + "workshop-city-skyline": { + "title": "Build a City Skyline", + "intro": [ + "CSS variables help you organize your styles and reuse them.", + "In this workshop, you'll build a city skyline. You'll practice how to configure CSS variables so you can reuse them whenever you want." + ] + }, + "lab-availability-table": { + "title": "Build an Availability Table", + "intro": [ + "For this lab, you'll create an availability table that shows the availability of people for a meeting.", + "You'll practice using CSS variables to store and reuse colors, fonts, and other styles." + ] + }, + "review-css-variables": { + "title": "CSS Variables Review", + "intro": [ + "Before you're quizzed on the fundamentals of CSS variables, you should review what you've learned.", + "Open up this page to review how to work with CSS custom properties (CSS variables) and the @property rule." + ] + }, + "quiz-css-variables": { + "title": "CSS Variables Quiz", + "intro": ["Test your knowledge of CSS variables with this quiz."] + } + } + }, + "css-grid": { + "title": "Grid", + "summary": ["Design complex layouts using the CSS Grid system."], + "intro": ["Build multi-dimensional layouts with CSS Grid."], + "blocks": { + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lessons, you will learn about CSS grid, its several properties and how to use them, and how CSS grid differs from flexbox." + ] + }, + "workshop-magazine": { + "title": "Build a Magazine", + "intro": [ + "CSS Grid gives you control over the rows and columns of your webpage design.", + "In this workshop, you'll build a magazine article. You'll practice how to use CSS Grid, including concepts like grid rows and grid columns." + ] + }, + "lab-newspaper-layout": { + "title": "Design a Newspaper Layout", + "intro": [ + "In this lab, you will design a newspaper layout using CSS Grid, including concepts like grid rows and grid columns." + ] + }, + "lecture-debugging-css": { + "title": "Debugging CSS", + "intro": [ + "In this lesson, you'll learn how to debug CSS using your browser's developer tools and CSS validators." + ] + }, + "review-css-grid": { + "title": "CSS Grid Review", + "intro": [ + "Before you're quizzed on the fundamentals of CSS Grid, you should review what you've learned.", + "Open up this page to review how to work with the different CSS Grid properties like grid-template-columns, grid-gap and more." + ] + }, + "quiz-css-grid": { + "title": "CSS Grid Quiz", + "intro": ["Test your knowledge of CSS Grid with this quiz."] + } + } + }, + "lab-product-landing-page": { + "title": "Build a Product Landing Page", + "summary": [ + "Build a complete landing page and apply layout, typography, and responsive design." + ], + "intro": [ + "Create a product landing page with cohesive layout and styling." + ], + "blocks": { + "lab-product-landing-page": { + "title": "Build a Product Landing Page", + "intro": [ + "In this project, you'll build a product landing page to market a product of your choice." + ] + } + } + }, + "css-animations": { + "title": "Animations", + "summary": ["Create engaging UI motion with accessible CSS animations."], + "intro": [ + "Add motion with CSS animations while keeping usability in mind." + ], + "blocks": { + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lessons, you will learn about CSS animations and their accessibility concerns. You will also learn how prefers-reduced-motion can help address those accessibility concerns." + ] + }, + "workshop-ferris-wheel": { + "title": "Build an Animated Ferris Wheel", + "intro": [ + "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.", + "In this workshop, you'll build a Ferris wheel. You'll practice how to use CSS to animate elements, transform them, and adjust their speed." + ] + }, + "lab-moon-orbit": { + "title": "Build a Moon Orbit", + "intro": [ + "In this lab, you'll create an animation of the moon orbiting the earth.", + "You'll practice animation properties like animation-name, animation-duration, animation-timing-function, and more." + ] + }, + "workshop-flappy-penguin": { + "title": "Build a Flappy 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 workshop, 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." + ] + }, + "lab-personal-portfolio": { + "title": "Build a Personal Portfolio", + "intro": [ + "In this project, you'll build your own personal portfolio page." + ] + }, + "review-css-animations": { + "title": "CSS Animations Review", + "intro": [ + "Before you're quizzed on working with CSS animations, you should review what you've learned about them.", + "Open up this page to review concepts including prefers-reduced-motion, the @keyframes rule and more." + ] + }, + "quiz-css-animations": { + "title": "CSS Animations Quiz", + "intro": ["Test your knowledge of CSS animations with this quiz."] } } }, diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index 03a4b25bab8..e9ccc7caca2 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -204,6 +204,10 @@ ], "cta": "Start Learning Now (it's free)" }, + "catalog": { + "heading": "Explore Course Catalog", + "seeAll": "See All Courses" + }, "certification-heading": "Earn free verified certifications in:", "core-certs-heading": "Recommended curriculum:", "learn-english-heading": "Learn English for Developers:", @@ -710,7 +714,8 @@ "exam": "Exam", "warm-up": "Warm-up", "learn": "Learn", - "practice": "Practice" + "practice": "Practice", + "video": "Video" }, "archive": { "title": "Archived Coursework", @@ -1257,6 +1262,7 @@ "college-algebra-with-python-v8-cert": "College Algebra with Python Certification", "foundational-c-sharp-with-microsoft": "Foundational C# with Microsoft", "foundational-c-sharp-with-microsoft-cert": "Foundational C# with Microsoft Certification", + "learn-python-for-beginners": "Learn Python for Beginners", "a2-english-for-developers": "A2 English for Developers", "a2-english-for-developers-cert": "A2 English for Developers Certification (Beta)", "b1-english-for-developers": "B1 English for Developers", @@ -1429,6 +1435,21 @@ "beginner": "Beginner", "intermediate": "Intermediate", "advanced": "Advanced" + }, + "duration": "{{duration}} hours", + "no-results": "No courses found. Try adjusting your filters to see more results.", + "topic": { + "html": "HTML", + "css": "CSS", + "js": "JavaScript", + "react": "React", + "python": "Python", + "data-analysis": "Data Analysis", + "machine-learning": "Machine Learning", + "d3": "D3", + "api": "APIs", + "information-security": "Information Security", + "computer-fundamentals": "Computer Fundamentals" } } } diff --git a/client/src/assets/superblock-icon.tsx b/client/src/assets/superblock-icon.tsx index bc1069b4541..e334d193f28 100644 --- a/client/src/assets/superblock-icon.tsx +++ b/client/src/assets/superblock-icon.tsx @@ -56,6 +56,31 @@ const iconMap = { [SuperBlocks.SemanticHtml]: Code, [SuperBlocks.FullStackOpen]: Code, [SuperBlocks.DevPlayground]: Code, + [SuperBlocks.HtmlFormsAndTables]: ResponsiveDesign, + [SuperBlocks.LabSurveyForm]: Code, + [SuperBlocks.HtmlAndAccessibility]: ResponsiveDesign, + [SuperBlocks.ComputerBasics]: Code, + [SuperBlocks.BasicCss]: Code, + [SuperBlocks.DesignForDevelopers]: Code, + [SuperBlocks.AbsoluteAndRelativeUnits]: Code, + [SuperBlocks.PseudoClassesAndElements]: Code, + [SuperBlocks.CssColors]: Code, + [SuperBlocks.StylingForms]: Code, + [SuperBlocks.CssBoxModel]: Code, + [SuperBlocks.CssFlexbox]: Code, + [SuperBlocks.LabPageOfPlayingCards]: Code, + [SuperBlocks.CssTypography]: Code, + [SuperBlocks.CssAndAccessibility]: ResponsiveDesign, + [SuperBlocks.CssPositioning]: Code, + [SuperBlocks.AttributeSelectors]: Code, + [SuperBlocks.LabBookInventoryApp]: Code, + [SuperBlocks.ResponsiveDesign]: ResponsiveDesign, + [SuperBlocks.LabTechnicalDocumentationPage]: Code, + [SuperBlocks.CssVariables]: Code, + [SuperBlocks.CssGrid]: Code, + [SuperBlocks.LabProductLandingPage]: Code, + [SuperBlocks.CssAnimations]: Code, + [SuperBlocks.LearnPythonForBeginners]: PythonIcon, [SuperBlocks.RespWebDesignV9]: ResponsiveDesign, [SuperBlocks.JsV9]: JavaScriptIcon, [SuperBlocks.FrontEndDevLibsV9]: ReactIcon, diff --git a/client/src/components/Map/index.tsx b/client/src/components/Map/index.tsx index b693e43a6ea..a3b73c888a0 100644 --- a/client/src/components/Map/index.tsx +++ b/client/src/components/Map/index.tsx @@ -94,7 +94,11 @@ function Map({ forLanding = false }: MapProps) { showUpcomingChanges }) // remove legacy superblocks from main maps - shown in archive map only - .filter(stage => stage !== SuperBlockStage.Legacy) + .filter( + stage => + stage !== SuperBlockStage.Legacy && + stage !== SuperBlockStage.Catalog + ) .map(stage => { const superblocks = superBlockStages[stage]; if (superblocks.length === 0) { diff --git a/client/src/components/catalog-item.tsx b/client/src/components/catalog-item.tsx new file mode 100644 index 00000000000..0a3a9a4e08b --- /dev/null +++ b/client/src/components/catalog-item.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faClock, faStairs } from '@fortawesome/free-solid-svg-icons'; +import { useTranslation } from 'react-i18next'; +import { Link } from './helpers'; + +interface CatalogItemProps { + superBlock: string; + level: string; + hours: number; + topic: string; + showAllSummaries?: boolean; +} + +const CatalogItem: React.FC = ({ + superBlock, + level, + hours, + topic, + showAllSummaries = false +}) => { + const { t } = useTranslation(); + + const { title, summary } = t(`intro:${superBlock}`, { + returnObjects: true + }) as { + title: string; + summary: string[]; + }; + + return ( + +
+
+ {t(`curriculum.catalog.topic.${topic}`)} +
+

{title}

+ {showAllSummaries ? ( + summary.map((text, i) =>

{text}

) + ) : summary && summary.length > 0 ? ( +

{summary[0]}

+ ) : null} +
+
+
+ +   {t(`curriculum.catalog.levels.${level}`)} +
+
+ +  {' '} + {showAllSummaries + ? t('curriculum.catalog.duration', { duration: hours }) + : `${hours} hours`} +
+
+ + ); +}; + +export default CatalogItem; diff --git a/client/src/components/landing/components/faq.tsx b/client/src/components/landing/components/faq.tsx index 47253f1a91d..3dfcbaeccbb 100644 --- a/client/src/components/landing/components/faq.tsx +++ b/client/src/components/landing/components/faq.tsx @@ -22,6 +22,7 @@ const Faq = (): JSX.Element => { xs={12} className='faq-section' > +

{t('landing.faq')}

{faqItems.map((faq, i) => ( diff --git a/client/src/components/landing/components/landing-catalog.tsx b/client/src/components/landing/components/landing-catalog.tsx new file mode 100644 index 00000000000..945b0f61183 --- /dev/null +++ b/client/src/components/landing/components/landing-catalog.tsx @@ -0,0 +1,73 @@ +import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Col, Row, Container } from '@freecodecamp/ui'; +import { Link } from '../../helpers'; +import { catalog } from '@freecodecamp/shared/config/catalog'; +import { SuperBlocks } from '@freecodecamp/shared/config/curriculum'; +import CatalogItem from '../../catalog-item'; + +import '../landing.css'; +import LinkButton from '../../../assets/icons/link-button'; + +const LandingCatalog = (): JSX.Element => { + const { t } = useTranslation(); + + const featuredCourses = useMemo(() => { + // Get featured courses: Learn Python for Beginners, Computer Basics, Basic HTML + const featuredSuperBlocks = [ + SuperBlocks.LearnPythonForBeginners, + SuperBlocks.ComputerBasics, + SuperBlocks.BasicHtml + ]; + const courses = catalog.filter(course => + featuredSuperBlocks.includes(course.superBlock) + ); + // Sort by the order in featuredSuperBlocks + return courses.sort( + (a, b) => + featuredSuperBlocks.indexOf(a.superBlock) - + featuredSuperBlocks.indexOf(b.superBlock) + ); + }, []); + + return ( +
+ + + +

+ {t('landing.catalog.heading')} +

+ + + + + +
+ {featuredCourses.map(course => { + const { superBlock, level, hours, topic } = course; + + return ( + + ); + })} + +

{t('landing.catalog.seeAll')}

+ + +
+ + +
+ ); +}; + +LandingCatalog.displayName = 'LandingCatalog'; +export default LandingCatalog; diff --git a/client/src/components/landing/landing.css b/client/src/components/landing/landing.css index 5246b7820cc..f4ca3285a55 100644 --- a/client/src/components/landing/landing.css +++ b/client/src/components/landing/landing.css @@ -455,3 +455,28 @@ figcaption.caption { font-weight: normal; text-align: center; } + +/* Landing Catalog Styles */ +.landing-catalog-container { + background-color: var(--primary-background); + padding-top: 3rem; + padding-bottom: 3rem; +} + +.landing-catalog-wrap { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + width: 100%; + gap: 2rem; +} + +.landing-catalog .catalog-item.catalog-item-see-all { + display: flex; + align-items: center; + justify-content: center; + min-height: 280px; + text-align: center; + fill: var(--secondary-color); + flex-direction: row; + gap: 10px; +} diff --git a/client/src/pages/catalog.css b/client/src/pages/catalog.css index df6ecc5c893..ce2d4f86178 100644 --- a/client/src/pages/catalog.css +++ b/client/src/pages/catalog.css @@ -1,22 +1,83 @@ .catalog-wrap { - display: flex; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + width: 100%; gap: 2rem; - justify-content: space-evenly; +} + +.catalog-filters { + display: flex; + gap: 1rem; + justify-content: flex-start; flex-wrap: wrap; + margin-bottom: 1rem; +} + +.catalog-filters .dropdown { + min-width: 250px; +} + +.catalog-filters .dropdown-menu { + max-height: 300px; + overflow-y: auto; +} + +.catalog-filters .dropdown-item { + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; +} + +.catalog-filters button { + display: flex; + width: 100%; + align-items: center; +} + +.catalog-filters .dropdown-menu .dropdown-item input[type='checkbox'] { + flex-shrink: 0; +} + +.filter-checkbox { + cursor: pointer; + width: 18px; + height: 18px; + margin: 0 0.5rem 0 0; + vertical-align: middle; + flex-shrink: 0; +} + +.catalog-item-top { + display: flex; + flex-direction: column; + gap: 10px; } .catalog-item { + text-decoration: none; padding: 1rem; background-color: var(--primary-background); - width: 400px; - min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; + border: 1px solid var(--background-quaternary); + max-width: 400px; +} + +.catalog-item h3 { + margin: 0; } .catalog-item-bottom { display: flex; justify-content: space-between; align-items: flex-end; + color: var(--quaternary-color); + font-size: 0.9rem; +} + +.catalog-item p { + margin-bottom: 0.9rem; } diff --git a/client/src/pages/catalog.tsx b/client/src/pages/catalog.tsx index 626e7215f05..5cd54b35ede 100644 --- a/client/src/pages/catalog.tsx +++ b/client/src/pages/catalog.tsx @@ -1,55 +1,166 @@ -import React from 'react'; +import React, { useState, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { Col, Spacer } from '@freecodecamp/ui'; -import { ButtonLink } from '../components/helpers'; +import { Col, Spacer, Dropdown, MenuItem, Alert } from '@freecodecamp/ui'; import { catalog } from '@freecodecamp/shared/config/catalog'; import { showUpcomingChanges } from '../../config/env.json'; import FourOhFour from '../components/FourOhFour'; +import CatalogItem from '../components/catalog-item'; import './catalog.css'; const CatalogPage = () => { const { t } = useTranslation(); + const [selectedLevels, setSelectedLevels] = useState(['all']); + const [selectedTopics, setSelectedTopics] = useState(['all']); + + // Extract unique levels and topics from catalog + const uniqueLevels = useMemo(() => { + const levels = [...new Set(catalog.map(item => item.level))]; + return levels.sort(); + }, []); + + const uniqueTopics = useMemo(() => { + const topics = [...new Set(catalog.map(item => item.topic))]; + return topics.sort(); + }, []); + + // Handle level filter change + const handleLevelChange = (level: string) => { + if (level === 'all') { + setSelectedLevels(['all']); + } else { + setSelectedLevels(prev => { + const filtered = prev.filter(l => l !== 'all'); + if (filtered.includes(level)) { + const updated = filtered.filter(l => l !== level); + return updated.length === 0 ? ['all'] : updated; + } else { + return [...filtered, level]; + } + }); + } + }; + + // Handle topic filter change + const handleTopicChange = (topic: string) => { + if (topic === 'all') { + setSelectedTopics(['all']); + } else { + setSelectedTopics(prev => { + const filtered = prev.filter(t => t !== 'all'); + if (filtered.includes(topic)) { + const updated = filtered.filter(t => t !== topic); + return updated.length === 0 ? ['all'] : updated; + } else { + return [...filtered, topic]; + } + }); + } + }; + + const filteredCatalog = useMemo(() => { + return catalog.filter(course => { + const levelMatch = + selectedLevels.includes('all') || selectedLevels.includes(course.level); + const topicMatch = + selectedTopics.includes('all') || selectedTopics.includes(course.topic); + return levelMatch && topicMatch; + }); + }, [selectedLevels, selectedTopics]); + return showUpcomingChanges ? (

{t('curriculum.catalog.title')}

+ -
- {catalog.map(course => { - const { superBlock, level, hours } = course; +
+ + + Level:{' '} + {selectedLevels.includes('all') + ? 'All' + : `${selectedLevels.length} selected`} + + + handleLevelChange('all')}> + {}} + className='filter-checkbox' + /> + All + + {uniqueLevels.map(level => ( + handleLevelChange(level)}> + {}} + className='filter-checkbox' + /> + {t(`curriculum.catalog.levels.${level}`)} + + ))} + + + + + Topic:{' '} + {selectedTopics.includes('all') + ? 'All' + : `${selectedTopics.length} selected`} + + + handleTopicChange('all')}> + {}} + className='filter-checkbox' + /> + All + + {uniqueTopics.map(topic => ( + handleTopicChange(topic)}> + {}} + className='filter-checkbox' + /> + {t(`curriculum.catalog.topic.${topic}`)} + + ))} + + +
+ + + + {filteredCatalog.length === 0 ? ( + {t('curriculum.catalog.no-results')} + ) : ( +
+ {filteredCatalog.map(course => { + const { superBlock, level, hours, topic } = course; - const { title, summary } = t(`intro:${superBlock}`, { - returnObjects: true - }) as { - title: string; - summary: string[]; - }; - - return ( -
-
-

{title}

-
- {summary.map((text, i) => ( -

{text}

- ))} -
-
-
- {t(`curriculum.catalog.levels.${level}`)} • {hours}{' '} - hours -
- - {t('buttons.go-to-course')} - -
-
- ); - })} -
+ return ( + + ); + })} +
+ )}
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index c09be5c0142..5e0be95d5cc 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -6,9 +6,11 @@ import { Loader } from '../components/helpers'; import LandingTop from '../components/landing/components/landing-top'; import Testimonials from '../components/landing/components/testimonials'; import Certifications from '../components/landing/components/certifications'; +import LandingCatalog from '../components/landing/components/landing-catalog'; import Faq from '../components/landing/components/faq'; import Benefits from '../components/landing/components/benefits'; import { useClaimableCertsNotification } from '../components/helpers/use-claimable-certs-notification'; +import { showUpcomingChanges } from '../../config/env.json'; import '../components/landing/landing.css'; @@ -22,6 +24,7 @@ const Landing = () => ( + {showUpcomingChanges && } ); diff --git a/client/src/pages/learn/absolute-and-relative-units/index.md b/client/src/pages/learn/absolute-and-relative-units/index.md new file mode 100644 index 00000000000..ad51d21b516 --- /dev/null +++ b/client/src/pages/learn/absolute-and-relative-units/index.md @@ -0,0 +1,9 @@ +--- +title: Absolute and Relative Units +superBlock: absolute-and-relative-units +certification: absolute-and-relative-units +--- + +## Absolute and Relative Units + +Understand when to use absolute and relative CSS units to build flexible layouts. diff --git a/client/src/pages/learn/attribute-selectors/index.md b/client/src/pages/learn/attribute-selectors/index.md new file mode 100644 index 00000000000..d73d8b5d4bb --- /dev/null +++ b/client/src/pages/learn/attribute-selectors/index.md @@ -0,0 +1,9 @@ +--- +title: Attribute Selectors +superBlock: attribute-selectors +certification: attribute-selectors +--- + +## Attribute Selectors + +Target elements precisely with CSS attribute selectors. diff --git a/client/src/pages/learn/basic-css/index.md b/client/src/pages/learn/basic-css/index.md new file mode 100644 index 00000000000..727326ce92e --- /dev/null +++ b/client/src/pages/learn/basic-css/index.md @@ -0,0 +1,9 @@ +--- +title: Basic CSS +superBlock: basic-css +certification: basic-css +--- + +## Basic CSS + +Learn core CSS concepts and start styling real-world layouts. diff --git a/client/src/pages/learn/computer-basics/index.md b/client/src/pages/learn/computer-basics/index.md new file mode 100644 index 00000000000..12c86b37384 --- /dev/null +++ b/client/src/pages/learn/computer-basics/index.md @@ -0,0 +1,9 @@ +--- +title: Computer Basics +superBlock: computer-basics +certification: computer-basics +--- + +## Computer Basics + +Build a foundation in computer, internet, and tooling basics for web development. diff --git a/client/src/pages/learn/css-and-accessibility/index.md b/client/src/pages/learn/css-and-accessibility/index.md new file mode 100644 index 00000000000..56f37a475f4 --- /dev/null +++ b/client/src/pages/learn/css-and-accessibility/index.md @@ -0,0 +1,9 @@ +--- +title: Accessibility +superBlock: css-and-accessibility +certification: css-and-accessibility +--- + +## CSS and Accessibility + +Apply CSS techniques that support accessible and inclusive interfaces. diff --git a/client/src/pages/learn/css-animations/index.md b/client/src/pages/learn/css-animations/index.md new file mode 100644 index 00000000000..a3514d73969 --- /dev/null +++ b/client/src/pages/learn/css-animations/index.md @@ -0,0 +1,9 @@ +--- +title: Animations +superBlock: css-animations +certification: css-animations +--- + +## CSS Animations + +Create engaging UI motion with accessible CSS animations. diff --git a/client/src/pages/learn/css-box-model/index.md b/client/src/pages/learn/css-box-model/index.md new file mode 100644 index 00000000000..ad153ffe590 --- /dev/null +++ b/client/src/pages/learn/css-box-model/index.md @@ -0,0 +1,9 @@ +--- +title: The Box Model +superBlock: css-box-model +certification: css-box-model +--- + +## CSS Box Model + +Master the CSS box model, spacing, and layout effects for precise designs. diff --git a/client/src/pages/learn/css-colors/index.md b/client/src/pages/learn/css-colors/index.md new file mode 100644 index 00000000000..19a985e710a --- /dev/null +++ b/client/src/pages/learn/css-colors/index.md @@ -0,0 +1,9 @@ +--- +title: Colors +superBlock: css-colors +certification: css-colors +--- + +## CSS Colors + +Work with CSS color formats and build cohesive color palettes. diff --git a/client/src/pages/learn/css-flexbox/index.md b/client/src/pages/learn/css-flexbox/index.md new file mode 100644 index 00000000000..15d01b68749 --- /dev/null +++ b/client/src/pages/learn/css-flexbox/index.md @@ -0,0 +1,9 @@ +--- +title: Flexbox +superBlock: css-flexbox +certification: css-flexbox +--- + +## CSS Flexbox + +Build responsive layouts using the Flexbox model and alignment tools. diff --git a/client/src/pages/learn/css-grid/index.md b/client/src/pages/learn/css-grid/index.md new file mode 100644 index 00000000000..ec9a986b9ab --- /dev/null +++ b/client/src/pages/learn/css-grid/index.md @@ -0,0 +1,9 @@ +--- +title: Grid +superBlock: css-grid +certification: css-grid +--- + +## CSS Grid + +Design complex layouts using the CSS Grid system. diff --git a/client/src/pages/learn/css-positioning/index.md b/client/src/pages/learn/css-positioning/index.md new file mode 100644 index 00000000000..557e5283362 --- /dev/null +++ b/client/src/pages/learn/css-positioning/index.md @@ -0,0 +1,9 @@ +--- +title: Positioning +superBlock: css-positioning +certification: css-positioning +--- + +## CSS Positioning + +Use positioning and floats to control layout and element flow. diff --git a/client/src/pages/learn/css-typography/index.md b/client/src/pages/learn/css-typography/index.md new file mode 100644 index 00000000000..cd16479134a --- /dev/null +++ b/client/src/pages/learn/css-typography/index.md @@ -0,0 +1,9 @@ +--- +title: Typography +superBlock: css-typography +certification: css-typography +--- + +## CSS Typography + +Learn how to style text for readability, hierarchy, and visual balance. diff --git a/client/src/pages/learn/css-variables/index.md b/client/src/pages/learn/css-variables/index.md new file mode 100644 index 00000000000..667371d095f --- /dev/null +++ b/client/src/pages/learn/css-variables/index.md @@ -0,0 +1,9 @@ +--- +title: Variables +superBlock: css-variables +certification: css-variables +--- + +## CSS Variables + +Use CSS variables to build reusable, theme-friendly styles. diff --git a/client/src/pages/learn/design-for-developers/index.md b/client/src/pages/learn/design-for-developers/index.md new file mode 100644 index 00000000000..f480669865e --- /dev/null +++ b/client/src/pages/learn/design-for-developers/index.md @@ -0,0 +1,9 @@ +--- +title: Design +superBlock: design-for-developers +certification: design-for-developers +--- + +## Design for Developers + +Explore UI design fundamentals and user-centered design principles for developers. diff --git a/client/src/pages/learn/html-and-accessibility/index.md b/client/src/pages/learn/html-and-accessibility/index.md new file mode 100644 index 00000000000..a95b18a984d --- /dev/null +++ b/client/src/pages/learn/html-and-accessibility/index.md @@ -0,0 +1,9 @@ +--- +title: Accessibility +superBlock: html-and-accessibility +certification: html-and-accessibility +--- + +## HTML and Accessibility + +Learn how to write inclusive HTML using accessibility best practices and ARIA. diff --git a/client/src/pages/learn/html-forms-and-tables/index.md b/client/src/pages/learn/html-forms-and-tables/index.md new file mode 100644 index 00000000000..87bba7962d5 --- /dev/null +++ b/client/src/pages/learn/html-forms-and-tables/index.md @@ -0,0 +1,9 @@ +--- +title: HTML Forms and Tables +superBlock: html-forms-and-tables +certification: html-forms-and-tables +--- + +## Introduction to HTML Forms and Tables + +Learn how to build accessible forms and data tables with semantic HTML. diff --git a/client/src/pages/learn/lab-book-inventory-app/index.md b/client/src/pages/learn/lab-book-inventory-app/index.md new file mode 100644 index 00000000000..b97e4eca3be --- /dev/null +++ b/client/src/pages/learn/lab-book-inventory-app/index.md @@ -0,0 +1,9 @@ +--- +title: Build a Book Inventory App +superBlock: lab-book-inventory-app +certification: lab-book-inventory-app +--- + +## Build a Book Inventory App + +Build a structured layout for managing a book inventory. diff --git a/client/src/pages/learn/lab-page-of-playing-cards/index.md b/client/src/pages/learn/lab-page-of-playing-cards/index.md new file mode 100644 index 00000000000..0eec4c3126c --- /dev/null +++ b/client/src/pages/learn/lab-page-of-playing-cards/index.md @@ -0,0 +1,9 @@ +--- +title: Build a Page of Playing Cards +superBlock: lab-page-of-playing-cards +certification: lab-page-of-playing-cards +--- + +## Build a Page of Playing Cards + +Create a multi-card layout to practice flexible CSS composition. diff --git a/client/src/pages/learn/lab-product-landing-page/index.md b/client/src/pages/learn/lab-product-landing-page/index.md new file mode 100644 index 00000000000..74adf6a55d1 --- /dev/null +++ b/client/src/pages/learn/lab-product-landing-page/index.md @@ -0,0 +1,9 @@ +--- +title: Build a Product Landing Page +superBlock: lab-product-landing-page +certification: lab-product-landing-page +--- + +## Build a Product Landing Page + +Build a complete landing page and apply layout, typography, and responsive design. diff --git a/client/src/pages/learn/lab-survey-form/index.md b/client/src/pages/learn/lab-survey-form/index.md new file mode 100644 index 00000000000..6aebf1eeff0 --- /dev/null +++ b/client/src/pages/learn/lab-survey-form/index.md @@ -0,0 +1,9 @@ +--- +title: Build a Survey Form +superBlock: lab-survey-form +certification: lab-survey-form +--- + +## Build a Survey Form + +Create a complete survey form while practicing HTML structure and accessible form controls. diff --git a/client/src/pages/learn/lab-technical-documentation-page/index.md b/client/src/pages/learn/lab-technical-documentation-page/index.md new file mode 100644 index 00000000000..80d498e044b --- /dev/null +++ b/client/src/pages/learn/lab-technical-documentation-page/index.md @@ -0,0 +1,9 @@ +--- +title: Build a Technical Documentation Page +superBlock: lab-technical-documentation-page +certification: lab-technical-documentation-page +--- + +## Build a Technical Documentation Page + +Create a documentation page and practice responsive structure and layout. diff --git a/client/src/pages/learn/learn-python-for-beginners/index.md b/client/src/pages/learn/learn-python-for-beginners/index.md new file mode 100644 index 00000000000..53edfe49015 --- /dev/null +++ b/client/src/pages/learn/learn-python-for-beginners/index.md @@ -0,0 +1,9 @@ +--- +title: Learn Python for Beginners +superBlock: learn-python-for-beginners +certification: learn-python-for-beginners +--- + +## Introduction to Learn Python for Beginners + +Learn the fundamentals of Python programming from the ground up. Python is one of the most popular programming languages today and is great for beginners. diff --git a/client/src/pages/learn/pseudo-classes-and-elements/index.md b/client/src/pages/learn/pseudo-classes-and-elements/index.md new file mode 100644 index 00000000000..7a6a69b2cfc --- /dev/null +++ b/client/src/pages/learn/pseudo-classes-and-elements/index.md @@ -0,0 +1,9 @@ +--- +title: Pseudo Classes and Elements +superBlock: pseudo-classes-and-elements +certification: pseudo-classes-and-elements +--- + +## Pseudo Classes and Elements + +Use pseudo-classes and pseudo-elements to create richer, more interactive styles. diff --git a/client/src/pages/learn/responsive-design/index.md b/client/src/pages/learn/responsive-design/index.md new file mode 100644 index 00000000000..8a2de3249c3 --- /dev/null +++ b/client/src/pages/learn/responsive-design/index.md @@ -0,0 +1,9 @@ +--- +title: Responsive Design +superBlock: responsive-design +certification: responsive-design +--- + +## Responsive Design + +Learn responsive design principles and build layouts that adapt to any screen. diff --git a/client/src/pages/learn/styling-forms/index.md b/client/src/pages/learn/styling-forms/index.md new file mode 100644 index 00000000000..cc09de878ae --- /dev/null +++ b/client/src/pages/learn/styling-forms/index.md @@ -0,0 +1,9 @@ +--- +title: Styling Forms +superBlock: styling-forms +certification: styling-forms +--- + +## Styling Forms + +Apply CSS techniques to create clean, usable form layouts. diff --git a/client/src/templates/Introduction/components/super-block-intro.tsx b/client/src/templates/Introduction/components/super-block-intro.tsx index 540b80f2474..9fe7f240f88 100644 --- a/client/src/templates/Introduction/components/super-block-intro.tsx +++ b/client/src/templates/Introduction/components/super-block-intro.tsx @@ -96,20 +96,27 @@ function SuperBlockIntro({ const { t } = useTranslation(); const superBlockIntroObj: { title: string; - intro: string[]; + intro: string[] | string; note: string; } = t(`intro:${superBlock}`, { returnObjects: true }) as { title: string; - intro: string[]; + intro: string[] | string; note: string; }; const { title: i18nSuperBlock, - intro: superBlockIntroText, + intro: introRaw, note: superBlockNoteText } = superBlockIntroObj; + // Ensure intro is always an array + const superBlockIntroText = Array.isArray(introRaw) + ? introRaw + : typeof introRaw === 'string' + ? [introRaw] + : ['']; + const IntroTopDefault = ({ fsd }: { fsd: boolean }) => ( <> {archivedSuperBlocks.includes(superBlock) && } diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css index 75b0d37509d..64d884c7a86 100644 --- a/client/src/templates/Introduction/intro.css +++ b/client/src/templates/Introduction/intro.css @@ -13,8 +13,9 @@ } .block-label { - align-self: center; + align-self: start; height: fit-content; + width: fit-content; padding: 1px 6px 2px; font-size: 0.85rem; border: 1px solid; @@ -27,26 +28,31 @@ background-color: var(--tertiary-background); } +.block-label-html, .block-label-lecture { border-color: var(--yellow-color); color: var(--yellow-color); } +.block-label-css, .block-label-workshop { border-color: var(--highlight-color); color: var(--highlight-color); } +.block-label-python, .block-label-lab { border-color: var(--success-color); color: var(--success-color); } +.block-label-javascript, .block-label-review { border-color: var(--purple-color); color: var(--purple-color); } +.block-label-computer-fundamentals, .block-label-quiz { border-color: var(--danger-color); color: var(--danger-color); diff --git a/curriculum/challenges/english/blocks/cat-blog-page/669aff9f5488f1bea056416d.md b/curriculum/challenges/english/blocks/cat-blog-page/669aff9f5488f1bea056416d.md deleted file mode 100644 index 2865934d5f8..00000000000 --- a/curriculum/challenges/english/blocks/cat-blog-page/669aff9f5488f1bea056416d.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 669aff9f5488f1bea056416d -title: Step 1 -challengeType: 0 -dashedName: step-1 -demoType: onLoad ---- - -# --description-- - -In this workshop, you will practice working with semantic HTML by building a blog page dedicated to Mr. Whiskers the cat. - -To begin the project, add the ``, and an `html` element with a `lang` attribute of `en`. - -Remember that you learned how to build a basic HTML boilerplate like this in the previous module. - -```html - - - - -``` - -# --hints-- - -You should have the ``. - -```js -assert.match(code, //i); -``` - -You should have an opening `html` tag with the language set to english. - -```js -assert.match(code, //gi); -``` - -You should have a closing `html` tag. - -```js -assert.match(code, /<\/html>/i); -``` - -Your `DOCTYPE` should come before the `html` element. - -```js -assert.match(code, /[.\n\s]*/im) -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/blocks/cat-blog-page/669fc7e141e4703748c558bf.md b/curriculum/challenges/english/blocks/cat-blog-page/669fc7e141e4703748c558bf.md deleted file mode 100644 index 9213298dcd8..00000000000 --- a/curriculum/challenges/english/blocks/cat-blog-page/669fc7e141e4703748c558bf.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 669fc7e141e4703748c558bf -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Inside the `html` element, add a `head` element. - -# --hints-- - -You should have an opening `head` tag. - -```js -assert.match(code, //i); -``` - -You should have a closing `head` tag. - -```js -assert.match(code, /<\/head>/i); -``` - -Your opening `head` tag should come before the closing `head` tag. - -```js -assert.match(code, /[.\n\s]*<\/head>/im) -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/blocks/cat-blog-page/669fc938d38e6e38ace9251e.md b/curriculum/challenges/english/blocks/cat-blog-page/669fc938d38e6e38ace9251e.md deleted file mode 100644 index 54f45919cbc..00000000000 --- a/curriculum/challenges/english/blocks/cat-blog-page/669fc938d38e6e38ace9251e.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 669fc938d38e6e38ace9251e -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Inside your `head` element, nest a `meta` element with the `charset` attribute set to the value `"UTF-8"`. - -Below that `meta` element, add a `title` element. - -The `title` element's text should be `Mr. Whiskers' Blog`. - -# --hints-- - -You should have a `meta` element. - -```js -assert.isNotNull(document.querySelector("meta")); -``` - -The `meta` element is a void element, it should not have an end tag ``. - -```js -assert.notMatch(code, /<\/meta>/i); -``` - -Your `meta` tag should have a `charset` attribute. - -```js -assert.match(code, / meta'); -assert.strictEqual(meta?.parentElement?.tagName, 'HEAD'); -``` - -You should have an opening `title` tag. - -```js -assert.match(code, //i); -``` - -You should have a closing `title` tag. - -```js -assert.match(code, /<\/title>/i); -``` - -Your `title` element should be nested in your `head` element. - -```js -assert.match(code, /<head>.*\s*<title>.*<\/title>.*\s*<\/head>/si); -``` - -Your `title` element should have the text `Mr. Whiskers' Blog`. You may need to check your spelling. - -```js -const titleText = document.querySelector('title')?.innerText -assert.strictEqual(titleText, "Mr. Whiskers' Blog"); -``` - -# --seed-- - -## --seed-contents-- - -```html -<!DOCTYPE html> -<html lang="en"> - --fcc-editable-region-- - <head> - - </head> - --fcc-editable-region-- -</html> -``` diff --git a/curriculum/challenges/english/blocks/cat-blog-page/669fcb06c3034a39f5431a38.md b/curriculum/challenges/english/blocks/cat-blog-page/669fcb06c3034a39f5431a38.md deleted file mode 100644 index e2a63b345c2..00000000000 --- a/curriculum/challenges/english/blocks/cat-blog-page/669fcb06c3034a39f5431a38.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 669fcb06c3034a39f5431a38 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -To prepare creating some actual content, add a `body` element below the `head` element. - -# --hints-- - -You should have an opening `<body>` tag. - -```js -assert.match(code, /<body>/i); -``` - -You should have a closing `</body>` tag. - -```js -assert.match(code, /<\/body>/i); -``` - -You should not change your `head` element. Make sure you did not delete your closing tag. - -```js -assert.match(code, /<head>/i); -assert.match(code, /<\/head>/i); -``` - -Your `body` element should come after your `head` element. - -```js -assert.match(code, /<\/head>[.\n\s]*<body>/im) -``` - -# --seed-- - -## --seed-contents-- - -```html -<!DOCTYPE html> -<html lang="en"> - --fcc-editable-region-- - <head> - <title>Mr. Whiskers' Blog - - - - --fcc-editable-region-- - -``` - - -# --solutions-- - -```html - - - - Mr. Whiskers' Blog - - - - - -``` diff --git a/curriculum/challenges/english/blocks/cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/english/blocks/cat-photo-app/5dc174fcf86c76b9248c6eb2.md deleted file mode 100644 index 030316350bb..00000000000 --- a/curriculum/challenges/english/blocks/cat-photo-app/5dc174fcf86c76b9248c6eb2.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -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: ``. - -```js -assert.exists(document.querySelector('h1')); -``` - -Your `h1` tags should be in lowercase. By convention, all HTML tags are written in lowercase. - -```js -assert.notMatch(code, /<\/?H1>/); -``` - -Your `h1` element should have a closing tag. Closing tags have this syntax: ``. - -```js -assert.match(code, /<\/h1\>/); -``` - -Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags. - -```js -assert.equal(document.querySelector('h1')?.innerText.toLowerCase(), 'catphotoapp'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/blocks/cat-photo-app/5dc1798ff86c76b9248c6eb3.md b/curriculum/challenges/english/blocks/cat-photo-app/5dc1798ff86c76b9248c6eb3.md deleted file mode 100644 index c2224442f79..00000000000 --- a/curriculum/challenges/english/blocks/cat-photo-app/5dc1798ff86c76b9248c6eb3.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 5dc1798ff86c76b9248c6eb3 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Below the `h1` element, add an `h2` element with this text: - -`Cat Photos` - -# --hints-- - -Your `h1` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert.exists(document.querySelector('h1')); -``` - -Your `h1` element should have a closing tag. Closing tags have this syntax: ``. - -```js -assert.match(code, /<\/h1\>/); -``` - -You should only have one `h1` element. Remove the extra. - -```js -assert.lengthOf(document.querySelectorAll('h1'), 1); -``` - -Your `h1` element's text should be 'CatPhotoApp'. You have either omitted the text or have a typo. - -```js -assert.equal(document.querySelector('h1')?.innerText.toLowerCase(), 'catphotoapp'); -``` - -Your `h2` tags should be in lowercase. By convention, all HTML tags are written in lowercase. - -```js -assert.notMatch(code, /<\/?H2>/); -``` - -Your `h2` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert.exists(document.querySelector('h2')); -``` - -Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert.match(code, /<\/h2\>/); -``` - -Your `h2` element's text should be `Cat Photos`. Only place the text `Cat Photos` between the opening and closing `h2` tags. - -```js -assert.equal(document.querySelector('h2')?.innerText.toLowerCase(), 'cat photos'); -``` - -Your `h2` element should be below the `h1` element. The `h1` element has greater importance and must be above the `h2` element. - -```js -const collection = [...document.querySelectorAll('h1,h2')].map( - (node) => node.nodeName -); -assert.isBelow(collection.indexOf('H1'), collection.indexOf('H2')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- -

CatPhotoApp

- ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/blocks/cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/english/blocks/cat-photo-app/5dc17d3bf86c76b9248c6eb4.md deleted file mode 100644 index a1d1b5e6dcd..00000000000 --- a/curriculum/challenges/english/blocks/cat-photo-app/5dc17d3bf86c76b9248c6eb4.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 5dc17d3bf86c76b9248c6eb4 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Create a `p` element below your `h2` element and give it the following text: - -`Everyone loves cute cats online!` - -# --hints-- - -Your `p` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert.exists(document.querySelector('p')); -``` - -Your `p` tags should be in lowercase. By convention, all HTML tags are written in lowercase. - -```js -assert.notMatch(code, /<\/?P>/); -``` - -Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert.match(code, /<\/p\>/); -``` - -Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo. - -```js -const extraSpacesRemoved = document - .querySelector('p') - ?.innerText.replace(/\s+/g, ' '); -assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i); -``` - -Your `p` element should be below the `h2` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('h2,p')].map( - (node) => node.nodeName -); -assert.isBelow(collection.indexOf('H2'), collection.indexOf('P')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

---fcc-editable-region-- -

Cat Photos

- ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/blocks/cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/english/blocks/cat-photo-app/5dc17dc8f86c76b9248c6eb5.md deleted file mode 100644 index 224bba20d8d..00000000000 --- a/curriculum/challenges/english/blocks/cat-photo-app/5dc17dc8f86c76b9248c6eb5.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5dc17dc8f86c76b9248c6eb5 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with ``. - -Here is an example of a comment with the `TODO: Remove h1`: - -```html - -``` - -Add a comment above the `p` element with this text: - -`TODO: Add link to cat photos` - -# --hints-- - -Your comment should start with ``. You are missing one or more of the characters that define the end of a comment. - -```js -assert.match(code, /-->/); -``` - -Your code should not have extra opening/closing comment characters. You have an extra `` displaying in the browser. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert.isBelow(noSpaces.match(//g)?.length, 2); -``` - -Your comment should be above the `p` element. You have them in the wrong order. - -```js -assert.match( - code.replace(/\s/g, ''), - /

everyonelovescutecatsonline!<\/p>/i -); -``` - -Your comment should contain the text `TODO: Add link to cat photos`. - -```js -assert.match(code, //i); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-

Cat Photos

---fcc-editable-region-- - -

Everyone loves cute cats online!

- ---fcc-editable-region-- - - -``` - -# --solutions-- - -```html - - -

CatPhotoApp

-

Cat Photos

- -

Everyone loves cute cats online!

- - -``` diff --git a/curriculum/challenges/english/blocks/event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/english/blocks/event-hub/66ebd4ae2812430bb883c787.md deleted file mode 100644 index daebc74e2ac..00000000000 --- a/curriculum/challenges/english/blocks/event-hub/66ebd4ae2812430bb883c787.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 66ebd4ae2812430bb883c787 -title: Build an Event Hub -challengeType: 25 -dashedName: lab-event-hub -demoType: onClick ---- - -# --description-- - -In this lab you will utilize the semantic HTML elements to create the structure of a web page. You'll add content and images to make it look like a real event hub. - -Fulfill the user stories below and get all the tests to pass to complete the lab. - -**User Stories:** - -1. You should have a `header` element. -1. Inside the `header` element, you should have an `h1` element that contains the text `Event Hub`, and a `nav` element. -1. Inside the `nav` element, you should have an unordered list of two items containing links to different sections of the page. The first item should have the text `Upcoming Events`, and the second item should have the text `Past Events`. -1. Each link should be represented by an `a` element with an `href` attribute that links to the corresponding section of the page, `#upcoming-events` and `#past-events` respectively. -1. You should have a `main` element that contains the different sections of the page. -1. Inside the `main` element, you should have two `section` elements. -1. The first `section` element should have an `id` attribute with the value `upcoming-events` -1. Inside the `#upcoming-events` section, you should have: - - - An `h2` element with the text `Upcoming Events`. - - Two `article` elements. Each article should represent an event, and it should have : - - An `h3` element for the event title. - - A `p` element for the event description. You can add a date at the bottom if you like. - -1. The second `section` element should have an `id` attribute with the value `past-events`. -1. Inside the `#past-events` section, you should have: - - - An `h2` element with the text `Past Events`. - - Two `article` elements. Each article element should represent a past event, and it should have: - - An `h3` element for the event title, - - A `p` element for the event description. You can add a date at the bottom if you like. - - An image element with the `src` attribute pointing to an image file and the `alt` attribute with a description of the image. - -**Note:** You can use any text for the event descriptions and dates. You can use the following image URLs for the images if you like: - -- `https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg`. -- `https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg`. - -# --hints-- - -You should have a `header` element. - -```js -assert.isNotNull(document.querySelector("header")); -``` - -Your `header` element should come after the opening `body` tag. - -```js -assert.equal(document.querySelector("body")?.firstElementChild?.tagName, "HEADER"); -``` - -Inside the `header` element, you should have an `h1` element that contains the text `Event Hub`. - -```js -const h1Element = document.querySelector('header h1'); -assert.strictEqual(h1Element?.innerText, "Event Hub"); -``` - -Inside the `header` element, after the `h1` element, you should have a `nav` element. - -```js -assert.isNotNull(document.querySelector("header>h1+nav")); -``` - -Your `nav` element should contain an unordered list of two items. - -```js -const liElements = document.querySelectorAll('header nav>ul>li'); - -assert.isNotNull('header nav>ul'); -assert.strictEqual(liElements.length, 2); -``` - -The first item in the unordered list should be a link. - -```js -const firstLink = document.querySelectorAll('header nav ul li a')[0]; -assert.exists(firstLink); -``` - -The second item in the unordered list should be a link. - -```js -const secondLink = document.querySelectorAll('header nav ul li a')[1]; -assert.exists(secondLink); -``` - -The text of the first item in the unordered list should be `Upcoming Events`. - -```js -const firstLink = document.querySelectorAll('header nav>ul>li>a')[0]; -assert.strictEqual(firstLink.innerText, "Upcoming Events"); -``` - -The first item in the unordered list should have the `href` set to `#upcoming-events`. - -```js -const anchorElement = document.querySelectorAll("header nav>ul>li>a")[0]; -const hrefAttribute = anchorElement?.getAttribute("href"); -assert.strictEqual(hrefAttribute, "#upcoming-events"); -``` - -The text of the second item in the unordered list should be `Past Events`. - -```js -const secondLink = document.querySelectorAll('header nav>ul>li>a')[1]; -assert.strictEqual(secondLink.innerText, "Past Events"); -``` - -The second item in the unordered list should have the `href` set to `#past-events`. - -```js -const anchorElement = document.querySelectorAll("header nav>ul>li>a")[1]; -const hrefAttribute = anchorElement?.getAttribute("href"); -assert.strictEqual(hrefAttribute, "#past-events"); -``` - -You should have a `main` element after the `header` element closing tag. - -```js -const mainElement = document.querySelector("body>header+main"); -assert.isNotNull(mainElement); -``` - -Inside the `main` element, you should have two `section` elements. - -```js -const sectionElements = document.querySelectorAll('body>header+main>section'); -assert.strictEqual(sectionElements.length, 2); -``` - -Your first `section` element should have an `id` attribute with the value `upcoming-events`. - -```js -const firstSection = document.querySelectorAll('body>header+main>section')[0]; -const idAttribute = firstSection?.getAttribute("id"); -assert.strictEqual(idAttribute, "upcoming-events"); -``` - -Your second `section` element should have an `id` attribute with the value `past-events`. - -```js -const secondSection = document.querySelectorAll('body>header+main>section')[1]; -const idAttribute = secondSection?.getAttribute("id"); -assert.strictEqual(idAttribute, "past-events"); -``` - -Inside the `#upcoming-events` section, you should have an `h2` element with the text `Upcoming Events`. - -```js -const h2Element = document.querySelector('#upcoming-events h2'); -assert.strictEqual(h2Element?.innerText, "Upcoming Events"); -``` - -Inside the `#upcoming-events` section, you should have two `article` elements below the `h2` element. - -```js -const articleElements = document.querySelectorAll('#upcoming-events h2 ~ article'); -assert.strictEqual(articleElements.length, 2); -``` - -Both of the `article` elements inside the `#upcoming-events` section should have an `h3` element for the event title. - -```js -const h3Elements = document.querySelectorAll('#upcoming-events article h3'); -assert.strictEqual(h3Elements.length, 2); -``` - -Both of the `article` elements inside the `#upcoming-events` section should have a paragraph element for the event description. - -```js -const articles = document.querySelectorAll('#upcoming-events article'); -assert.isNotEmpty(articles); -articles.forEach(article => { - assert.isAtLeast(article.querySelectorAll('h3 ~ p').length, 1); -}); -``` - -Inside the `#past-events` section, you should have an `h2` element with the text `Past Events`. - -```js -const h2Element = document.querySelector('#past-events h2'); -assert.strictEqual(h2Element?.innerText, "Past Events"); -``` - -Inside the `#past-events` section, you should have two `article` elements below the `h2` element. - -```js -const articleElements = document.querySelectorAll('#past-events h2 ~ article'); -assert.strictEqual(articleElements.length, 2); -``` - -Both of the `article` elements inside the `#past-events` section should have an `h3` element for the event title. - -```js -const h3Elements = document.querySelectorAll('#past-events article h3'); -assert.strictEqual(h3Elements.length, 2); -``` - -Both of the `article` elements inside the `#past-events` section should have a paragraph element for the event description. - -```js -const articles = document.querySelectorAll('#past-events article'); -assert.isNotEmpty(articles); -articles.forEach(article => { - assert.isAtLeast(article.querySelectorAll('h3 ~ p').length, 1); -}); -``` - -Both of the `article` elements inside the `#past-events` section should have an image element. - -```js -const imgElements = document.querySelectorAll('#past-events article img'); -assert.strictEqual(imgElements.length, 2); -``` - -Both of the image elements inside the `#past-events` section should have the `src` attribute pointing to an image file. - -```js -const imgElements = document.querySelectorAll('#past-events article img'); -assert.strictEqual(imgElements.length, 2); - -for (let img of imgElements) { - assert.exists(img.getAttribute("src")); -} -``` - -Both of the image elements inside the `#past-events` section should have the `alt` attribute with a description of the image. - -```js -const imgElements = document.querySelectorAll('#past-events article img'); -assert.strictEqual(imgElements.length, 2); - -for (let img of imgElements) { - assert.exists(img.getAttribute("alt")); -} -``` - -Each `h3` element should have the event title. - -```js -const eventTitles = document.querySelectorAll('h3'); -assert.isNotEmpty(eventTitles); -eventTitles.forEach((eventTitle => assert.isNotEmpty(eventTitle.innerText))); -``` - -Each `p` element should have the event description. - -```js -const eventDescriptions = document.querySelectorAll('p'); -assert.isNotEmpty(eventDescriptions); -eventDescriptions.forEach((eventDescription => assert.isNotEmpty(eventDescription.innerText))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Event Hub - - - - - - - -``` - -# --solutions-- - -```html - - - - - - Event Hub - - -
-

Event Hub

- -
-
-
-

Upcoming Events

-
-

AI & Machine Learning Conference 2024

-

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

-
-
-

Web Development Bootcamp

-

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

-
-
-
-

Past Events

-
-

Cybersecurity Summit 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

- Image from Cybersecurity Summit 2024 -
-
-

Blockchain Expo 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

- Image from Blockchain Expo 2024 -
-
-
- - -``` - diff --git a/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-better-calculator-video.md b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-better-calculator-video.md new file mode 100644 index 00000000000..2e969e83611 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-better-calculator-video.md @@ -0,0 +1,37 @@ +--- +id: a9f9c5bf295034800d6c77ad +title: Building a Better Calculator +challengeType: 11 +videoId: lOltMrA6kuY +dashedName: building-a-better-calculator-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to build an improved calculator program using if statements. + +# --questions-- + +## --text-- + +Which of the following built-in functions is used to convert a string to a float? + +## --answers-- + +`floats()` + +--- + +`floating_point()` + +--- + +`float()` + +--- + +`fl()` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-functions-video.md b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-functions-video.md new file mode 100644 index 00000000000..f73f9d1c5e5 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-functions-video.md @@ -0,0 +1,57 @@ +--- +id: 58d5d031e969765037c1bebb +title: Functions +challengeType: 11 +videoId: QN3UNoJVS9g +dashedName: functions-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to define and call a function. + +# --questions-- + +## --text-- + +Which of the following is the correct way to call a function? + +## --answers-- + +```python +def sayhi(): + print("Hello World") + +sayhi()() +``` + +--- + +```python +def sayhi(): + print("Hello World") + +()sayhi() +``` + +--- + +```python +def sayhi(): + print("Hello World") + +sayhi +``` + +--- + +```python +def sayhi(): + print("Hello World") + +sayhi() +``` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-comparisons-video.md b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-comparisons-video.md new file mode 100644 index 00000000000..c09c70427de --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-comparisons-video.md @@ -0,0 +1,37 @@ +--- +id: 8314d0bbddb0aa027a144705 +title: If Statements and Comparisons +challengeType: 11 +videoId: frb0CCrS9X8 +dashedName: if-statements-and-comparisons-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn about comparison operators. + +# --questions-- + +## --text-- + +Which of the following operators is used to check if one number is greater than or equal to another number? + +## --answers-- + +`<` + +--- + +`<=` + +--- + +`>` + +--- + +`>=` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-statements-video.md b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-statements-video.md new file mode 100644 index 00000000000..cc568e7a40b --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-if-statements-video.md @@ -0,0 +1,47 @@ +--- +id: 08854a2c6f052efa1e5270d2 +title: If Statements +challengeType: 11 +videoId: lruoyNlItfg +dashedName: if-statements-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to use if statements to control the flow of your Python programs based on conditions. + +# --questions-- + +## --text-- + +What will be the output for the following code? + +```python +is_male = True +is_tall = True + +if is_male or is_tall: + print("You are a male") +else: + print("You are not a male") +``` + +## --answers-- + +`"You are not a male"` + +--- + +`"You are a male"` + +--- + +`"You are not a male" and "You are a male"` + +--- + +`None` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-return-statement-video.md b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-return-statement-video.md new file mode 100644 index 00000000000..46ce119f28c --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-control-flow-functions/learn-python-return-statement-video.md @@ -0,0 +1,44 @@ +--- +id: c6c9dae4017830e187eeaf42 +title: Return Statement +challengeType: 11 +videoId: Gx3VTsaMCHU +dashedName: return-statement-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to use the return statement in functions. + +# --questions-- + +## --text-- + +What will be the output for the following code? + +```python +def cube(num): + num*num*num + +print(cube(3)) +``` + +## --answers-- + +`None` + +--- + +`Undefined` + +--- + +`3` + +--- + +`27` + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-drawing-shape-video.md b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-drawing-shape-video.md new file mode 100644 index 00000000000..fc3ad498a20 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-drawing-shape-video.md @@ -0,0 +1,54 @@ +--- +id: 62baa9d28e8723f635a0093e +title: Drawing a Shape +challengeType: 11 +videoId: vcNZZSeyZkY +dashedName: drawing-a-shape-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to print a basic shape to the console using `print` statements. + +# --questions-- + +## --text-- + +Which of the following is the correct way to print a triangle to the console? + +## --answers-- + +```python +print(" /| / | / | /___|") +``` + +--- + +```python +print( /|) +print( / |) +print( / |) +print(/___|) +``` + +--- + +```python +print(" /|") +print(" / |") +print(" / |") +print("/___|") +``` + +--- + +```python +print(" /|") +print(" / |") +print(" / |") +print("/___|") +``` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-numbers-video.md b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-numbers-video.md new file mode 100644 index 00000000000..10705f09d0a --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-numbers-video.md @@ -0,0 +1,37 @@ +--- +id: 8ad37ddb7a23050f71cc9cc9 +title: Working with Numbers +challengeType: 11 +videoId: C7sxe5GAArQ +dashedName: working-with-numbers-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to work with basic arithmetic operations and built-in number functions. + +# --questions-- + +## --text-- + +Which of the following built-in functions is used to return the base number raised to a power? + +## --answers-- + +`base()` + +--- + +`power()` + +--- + +`pow()` + +--- + +`exp()` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-strings-video.md b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-strings-video.md new file mode 100644 index 00000000000..ba673dd565a --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-strings-video.md @@ -0,0 +1,49 @@ +--- +id: 0e2f4bd857b1edc70bfcd1f9 +title: Working with Strings +challengeType: 11 +videoId: OrejgL7kP3M +dashedName: working-with-strings-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn about string concatenation, indexing, and useful string methods. + +# --questions-- + +## --text-- + +Which of the following is the correct way to access the first character of a string? + +## --answers-- + +```python +phrase = "Giraffe Academy" +print(phrase[1]) +``` + +--- + +```python +phrase = "Giraffe Academy" +print(phrase[0]) +``` + +--- + +```python +phrase = "Giraffe Academy" +print(phrase[-1]) +``` + +--- + +```python +phrase = "Giraffe Academy" +print(phrase[2]) +``` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-user-input-video.md b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-user-input-video.md new file mode 100644 index 00000000000..1d11cc532d5 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-user-input-video.md @@ -0,0 +1,37 @@ +--- +id: 155ca30775751b78a860a79b +title: Getting Input from Users +challengeType: 11 +videoId: C0L4cnqKqDw +dashedName: getting-input-from-users-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to get input from the user. + +# --questions-- + +## --text-- + +Which of the following built-in functions is used to get input from the user? + +## --answers-- + +`input()` + +--- + +`os.stdin()` + +--- + +`stdin()` + +--- + +`prompt()` + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-variables-types-video.md b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-variables-types-video.md new file mode 100644 index 00000000000..b4ab786b781 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-core-primitives/learn-python-variables-types-video.md @@ -0,0 +1,37 @@ +--- +id: 315017f4457c19d45c2be034 +title: Variables and Data Types +challengeType: 11 +videoId: sIw317W39X0 +dashedName: variables-and-data-types-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn about the different data types in Python including integers, strings and booleans. + +# --questions-- + +## --text-- + +What is a boolean? + +## --answers-- + +It is a data type that represents an `undefined` value. + +--- + +It is a data type that represents a sequence of characters. + +--- + +It is a data type that represents `True` or `False`. + +--- + +It is a data type that represents a float. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-list-functions-video.md b/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-list-functions-video.md new file mode 100644 index 00000000000..4fa4b8c590d --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-list-functions-video.md @@ -0,0 +1,43 @@ +--- +id: 24a45b3960b3aa68dff2cd9e +title: List Functions +challengeType: 11 +videoId: _5FQ5f3RW5U +dashedName: list-functions-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to work with useful methods including the `append()`, `index()`, `clear()`, `sort()`, and `reverse()` methods. + +# --questions-- + +## --text-- + +What will be the output for the following code? + +```python +friends = ["Kevin", "Karen", "Jim", "Oscar", "Toby"] + +print(friends.index("Oscar")) +``` + +## --answers-- + +4 + +--- + +1 + +--- + +2 + +--- + +3 + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-lists-video.md b/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-lists-video.md new file mode 100644 index 00000000000..76e34304e1c --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-lists-video.md @@ -0,0 +1,42 @@ +--- +id: 39a400e9163c5a0b33587e18 +title: Lists +challengeType: 11 +videoId: DtMPzGOHZ2M +dashedName: lists-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn about lists, list indexing, slicing, and basic list operations. + +# --questions-- + +## --text-- + +What will be the output for the following code? + +```python +friends = ["Kevin", "Karen", "Jim"] +print(friends[-1]) +``` + +## --answers-- + +`"Kevin"` + +--- + +`"Jim"` + +--- + +`"Karen"` + +--- + +`Error` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-tuples-video.md b/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-tuples-video.md new file mode 100644 index 00000000000..11bf35913f1 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-data-structures/learn-python-tuples-video.md @@ -0,0 +1,45 @@ +--- +id: 5ed596ba3306cf2c1a94bb92 +title: Tuples +challengeType: 11 +videoId: g6fwjiEFG-Y +dashedName: tuples-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn about tuples in Python and how they differ from lists. + +# --questions-- + +## --text-- + +Which of the following is the correct way to create a tuple? + +## --answers-- + +```python +coordinates = [4, 5] +``` + +--- + +```python +coordinates = (4, 5) +``` + +--- + +```python +coordinates = <4, 5> +``` + +--- + +```python +coordinates = /4, 5/ +``` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-oop/learn-python-classes-objects-video.md b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-classes-objects-video.md new file mode 100644 index 00000000000..21582bd38b2 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-classes-objects-video.md @@ -0,0 +1,37 @@ +--- +id: a0339c4075344cbfc2cd939c +title: Classes and Objects +challengeType: 11 +videoId: fR3dh5_MPJs +dashedName: classes-and-objects-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to create classes and objects in Python to write object-oriented programs. + +# --questions-- + +## --text-- + +What is the role of `def __init__(self):` inside of a class? + +## --answers-- + +It represents a function for calling the method. + +--- + +It specifies the type of the class. + +--- + +It allows a class to inherit methods from another class. + +--- + +It represents an initializer method. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-oop/learn-python-inheritance-video.md b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-inheritance-video.md new file mode 100644 index 00000000000..a30dea1cd53 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-inheritance-video.md @@ -0,0 +1,37 @@ +--- +id: 697fe5c032baa3841ab62a64 +title: Inheritance +challengeType: 11 +videoId: uHdNSULVpgY +dashedName: inheritance-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn about inheritance in object oriented programming. + +# --questions-- + +## --text-- + +What is inheritance in object oriented programming? + +## --answers-- + +This is when a class reuses code from a function. + +--- + +This is when a class creates a copy of another class. + +--- + +This is when a class inherits properties and behaviors from another class. + +--- + +This is when a class hides its methods and variables from other classes. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-oop/learn-python-interpreter-video.md b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-interpreter-video.md new file mode 100644 index 00000000000..8199a37c840 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-interpreter-video.md @@ -0,0 +1,37 @@ +--- +id: 697fe6c932baa3841ab62a65 +title: Python Interpreter +challengeType: 11 +videoId: -c1vFEsIod4 +dashedName: python-interpreter-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to work with the Python interpreter. + +# --questions-- + +## --text-- + +What is the Python interpreter? + +## --answers-- + +This is a program that writes Python code for you. + +--- + +This is a tool that compiles Python into Java or C++. + +--- + +This is a library that stores Python functions. + +--- + +This is a program that reads and executes Python code. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-oop/learn-python-object-functions-video.md b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-object-functions-video.md new file mode 100644 index 00000000000..3441b78b980 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-object-functions-video.md @@ -0,0 +1,69 @@ +--- +id: 697fe3cb32baa3841ab62a63 +title: Object Functions +challengeType: 11 +videoId: 3Mla2uUDSu8 +dashedName: object-functions-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to work with functions inside of classes. + +# --questions-- + +## --text-- + +Which of the following is the correct way to create a function inside of a class? + +## --answers-- + +```python +class Student: + def __init__(self, name, age): + self.name = name + self.age = age + + def greet(self.function): + return f"Hello, my name is {self.name} and I am {self.age} years old." +``` + +--- + +```python +class Student: + def __init__(self, name, age): + self.name = name + self.age = age + + def greet(self): + return f"Hello, my name is {self.name} and I am {self.age} years old." +``` + +--- + +```python +class Student: + def __init__(self, name, age): + self.name = name + self.age = age + + def greet(self): + self.pass +``` + +--- + +```python +class Student: + def __init__(self, name, age): + self.name = name + self.age = age + + greet = (self): + return f"Hello, my name is {self.name} and I am {self.age} years old." +``` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-oop/learn-python-quiz-project-video.md b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-quiz-project-video.md new file mode 100644 index 00000000000..9860638d339 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-oop/learn-python-quiz-project-video.md @@ -0,0 +1,37 @@ +--- +id: 9afe5e8141b13e9f1d59d46e +title: Building a Multiple Choice Quiz +challengeType: 11 +videoId: GJMmSaB8RN0 +dashedName: building-a-multiple-choice-quiz-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will practice what you have learned about classes and objects by building a multiple choice quiz. + +# --questions-- + +## --text-- + +Which of the following is the correct way to import the `Question` class from the `Question` module? + +## --answers-- + +`Question import` + +--- + +`from Question` + +--- + +`from Question import Question` + +--- + +`import Question.py` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-comments-video.md b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-comments-video.md new file mode 100644 index 00000000000..5870c469035 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-comments-video.md @@ -0,0 +1,37 @@ +--- +id: 71ac60e6488b40e997219f15 +title: Comments +challengeType: 11 +videoId: CY-CMJIt1z8 +dashedName: comments-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to write comments in Python to document your code and make it more readable. + +# --questions-- + +## --text-- + +Which of the following is a single line comment in Python? + +## --answers-- + +`# This program is cool` + +--- + +`> This program is cool` + +--- + +`''' This program is cool` + +--- + +`// This program is cool` + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-modules-pip-video.md b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-modules-pip-video.md new file mode 100644 index 00000000000..37a0b424419 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-modules-pip-video.md @@ -0,0 +1,37 @@ +--- +id: 2ccc34bd3f7bb4ae97a67ea3 +title: Modules and pip +challengeType: 11 +videoId: HJ-dHUXmpcg +dashedName: modules-and-pip-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to use modules and pip to extend Python's functionality with external packages. + +# --questions-- + +## --text-- + +What is pip used for? + +## --answers-- + +It is used to sort python modules. + +--- + +It is used to explain python modules. + +--- + +It is used to install python modules. + +--- + +It is used to lint Python programs. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-reading-files-video.md b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-reading-files-video.md new file mode 100644 index 00000000000..bf3f975c78e --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-reading-files-video.md @@ -0,0 +1,37 @@ +--- +id: 04e25c4fdc9ee0e71a844fd6 +title: Reading Files +challengeType: 11 +videoId: enOW7u6LWyg +dashedName: reading-files-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to read files in Python and process their contents. + +# --questions-- + +## --text-- + +What is the role of the `"r"` in the `open()` function? + +## --answers-- + +It specifies the range mode. + +--- + +It specifies the rename mode. + +--- + +It specifies the random access mode. + +--- + +It specifies the read mode. + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-try-except-video.md b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-try-except-video.md new file mode 100644 index 00000000000..3d4a8fba423 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-try-except-video.md @@ -0,0 +1,45 @@ +--- +id: 2a486e3e521b79b874fb5e9a +title: Try/Except +challengeType: 11 +videoId: 1tkhMom_SZw +dashedName: try-except-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to handle exceptions using try/except blocks to make your programs more robust. + +# --questions-- + +## --text-- + +What will be the result for the following code if the user provides the string `"random"`? + +```python +try: + number = int(input("Enter a number: ")) + print(number) +except: + print("Invalid Input") +``` + +## --answers-- + +Nothing will be output to the console. + +--- + +The string `"random"` will be output to the console. + +--- + +The string `"Invalid Input"` will be output to the console. + +--- + +The program will crash. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-writing-files-video.md b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-writing-files-video.md new file mode 100644 index 00000000000..df16829392e --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-practical-errors-files/learn-python-writing-files-video.md @@ -0,0 +1,37 @@ +--- +id: bfab38e6a6c1165f7774514d +title: Writing to Files +challengeType: 11 +videoId: QR95sRxsehY +dashedName: writing-to-files-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to write data to files in Python. + +# --questions-- + +## --text-- + +What is the role of the `"a"` in the `open()` function? + +## --answers-- + +It specifies the append mode. + +--- + +It specifies the alternate mode. + +--- + +It specifies the access mode. + +--- + +It specifies the apply mode. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-2d-lists-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-2d-lists-video.md new file mode 100644 index 00000000000..d28c58b017b --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-2d-lists-video.md @@ -0,0 +1,47 @@ +--- +id: 28119f9dc5f93e3ac5d7c58a +title: 2D Lists and Nested Loops +challengeType: 11 +videoId: 2lKgjX3gzmM +dashedName: 2d-lists-and-nested-loops-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to create 2D lists and use nested loops to work with multi-dimensional data structures. + +# --questions-- + +## --text-- + +What will be the output for the following code? + +```python +number_grid = [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9] +] + +print(number_grid[2][1]) +``` + +## --answers-- + +8 + +--- + +7 + +--- + +9 + +--- + +1 + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-dictionaries-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-dictionaries-video.md new file mode 100644 index 00000000000..03f4a783d10 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-dictionaries-video.md @@ -0,0 +1,105 @@ +--- +id: 3625fbc38b9428ae98d98f23 +title: Dictionaries +challengeType: 11 +videoId: FBfYADu3CIo +dashedName: dictionaries-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to work with dictionaries in Python to store key-value pairs. + +# --questions-- + +## --text-- + +Which of the following will correctly output the string `"March"` to the console? + +## --answers-- + +```python +month_conversions = { + "Jan": "January", + "Feb": "February", + "Mar": "March", + "Apr": "April", + "May": "May", + "Jun": "June", + "Jul": "July", + "Aug": "August", + "Sep": "September", + "Oct": "October", + "Nov": "November", + "Dec": "December" +} + +print(month_conversions<"Mar">) +``` + +--- + +```python +month_conversions = { + "Jan": "January", + "Feb": "February", + "Mar": "March", + "Apr": "April", + "May": "May", + "Jun": "June", + "Jul": "July", + "Aug": "August", + "Sep": "September", + "Oct": "October", + "Nov": "November", + "Dec": "December" +} + +print(month_conversions("Mar")) +``` + +--- + +```python +month_conversions = { + "Jan": "January", + "Feb": "February", + "Mar": "March", + "Apr": "April", + "May": "May", + "Jun": "June", + "Jul": "July", + "Aug": "August", + "Sep": "September", + "Oct": "October", + "Nov": "November", + "Dec": "December" +} + +print(month_conversions["March"]) +``` + +--- + +```python +month_conversions = { + "Jan": "January", + "Feb": "February", + "Mar": "March", + "Apr": "April", + "May": "May", + "Jun": "June", + "Jul": "July", + "Aug": "August", + "Sep": "September", + "Oct": "October", + "Nov": "November", + "Dec": "December" +} + +print(month_conversions["Mar"]) +``` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-exponent-functions-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-exponent-functions-video.md new file mode 100644 index 00000000000..66b05d51f70 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-exponent-functions-video.md @@ -0,0 +1,37 @@ +--- +id: a4cfb218d22efcfa7cc49d80 +title: Exponent Functions +challengeType: 11 +videoId: KLDvy0wFFX4 +dashedName: exponent-functions-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to write a function that calculates exponents and powers in Python. + +# --questions-- + +## --text-- + +What does the `range()` function in Python do? + +## --answers-- + +It returns a number from a list. + +--- + +It creates a list of random numbers. + +--- + +It generates a sequence of integers between a starting and stopping point. + +--- + +It generates a sequence of floats between a starting and stopping point. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-for-loops-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-for-loops-video.md new file mode 100644 index 00000000000..dabbc03c283 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-for-loops-video.md @@ -0,0 +1,49 @@ +--- +id: 030401977064585ddd4c7746 +title: For Loops +challengeType: 11 +videoId: x13V1UMMQeI +dashedName: for-loops-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to use for loops to iterate over sequences like lists and ranges. + +# --questions-- + +## --text-- + +Which of the following is the correct way to iterate over each letter in the string `"Giraffe Academy"`? + +## --answers-- + +```python +for (letter) in "Giraffe Academy": + print(letter) +``` + +--- + +```python +for key, letter in "Giraffe Academy": + print(letter) +``` + +--- + +```python +for letter in "Giraffe Academy": + print(letter) +``` + +--- + +```python +for letter, value in "Giraffe Academy": + print(letter) +``` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-guessing-game-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-guessing-game-video.md new file mode 100644 index 00000000000..492943844fc --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-guessing-game-video.md @@ -0,0 +1,45 @@ +--- +id: d4876f74547b26d5c330423e +title: Building a Guessing Game +challengeType: 11 +videoId: sHyQCBFRoug +dashedName: building-a-guessing-game-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will build a guessing game that uses loops and conditionals. + +# --questions-- + +## --text-- + +What does the condition `guess != secret_word` mean in this code? + +```python +secret_word = "giraffe" +guess = "" + +while guess != secret_word: + guess = input("Enter guess: ") +``` + +## --answers-- + +If `guess` is not equal to `secret_word`. + +--- + +If `guess` is equal to `secret_word`. + +--- + +If `guess` is greater than `secret_word`. + +--- + +If `guess` is less than `secret_word`. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-translator-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-translator-video.md new file mode 100644 index 00000000000..a12c2e4e2f2 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-translator-video.md @@ -0,0 +1,37 @@ +--- +id: 703bcd12c0edae7773eeec64 +title: Building a Translator +challengeType: 11 +videoId: 3Sa5rwlKdGQ +dashedName: building-a-translator-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will build a simple translator program using dictionaries and user input. + +# --questions-- + +## --text-- + +Which of the following methods is used to check if all characters in a string are uppercase? + +## --answers-- + +`upper()` + +--- + +`isupper()` + +--- + +`toupper()` + +--- + +`hasupper()` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-while-loop-video.md b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-while-loop-video.md new file mode 100644 index 00000000000..741ebdaf9e1 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-projects-loops/learn-python-while-loop-video.md @@ -0,0 +1,83 @@ +--- +id: 474c23ec0df6e7af920e0526 +title: While Loop +challengeType: 11 +videoId: s6yz4Ew8dwQ +dashedName: while-loop-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to work with while loops to repeat code blocks as long as a condition is `True`. + +# --questions-- + +## --text-- + +What will be the output for the following code? + +```python +i = 1 + +while i <= 10: + print(i) + i += 1 +print("Done with loop") +``` + +## --answers-- + +```md +1 +3 +5 +7 +9 +Done with loop +``` + +--- + +```md +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +Done with loop +``` + +--- + +```md +2 +4 +6 +8 +10 +Done with loop +``` + +--- + +```md +1 +2 +3 +4 +5 +6 +7 +8 +9 +Done with loop +``` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-hello-world-video.md b/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-hello-world-video.md new file mode 100644 index 00000000000..4fe69046597 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-hello-world-video.md @@ -0,0 +1,37 @@ +--- +id: 8ca3a380a75d00443d9e09bd +title: Hello World Program +challengeType: 11 +videoId: H2WnzGCeydQ +dashedName: hello-world-program-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to write your first program in Python. + +# --questions-- + +## --text-- + +Which of the following is the correct way to print `"Hello World"` to the console? + +## --answers-- + +`print("Hello World")` + +--- + +`printf("Hello World")` + +--- + +`prints("Hello World")` + +--- + +`printing("Hello World")` + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-install-video.md b/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-install-video.md new file mode 100644 index 00000000000..e2994f44085 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-install-video.md @@ -0,0 +1,37 @@ +--- +id: edeae16d4bf9505165740c75 +title: Installing Python and PyCharm +challengeType: 11 +videoId: RgGQJDOms1M +dashedName: installing-python-and-pycharm-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will learn how to install Python and PyCharm onto your computer. + +# --questions-- + +## --text-- + +What is PyCharm used for? + +## --answers-- + +It is a programming language similar to Python used for developing mobile apps. + +--- + +It is a Python library used for data analysis. + +--- + +It is an IDE used to run Python programs. + +--- + +It is an operating system designed for developers. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-intro-video.md b/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-intro-video.md new file mode 100644 index 00000000000..02d840742e7 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-intro-video.md @@ -0,0 +1,37 @@ +--- +id: 05b8c9b04c6df84636956fab +title: Introduction +challengeType: 11 +videoId: EgQZWE8in68 +dashedName: introduction-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, instructor Mike Dane explains why you should learn Python. + +# --questions-- + +## --text-- + +What is one reason to learn Python? + +## --answers-- + +It is required to be learned before any other programming language. + +--- + +It is one of the most popular programming languages used in the industry. + +--- + +It is the fastest programming language for all types of applications. + +--- + +It is only useful for complex gaming applications. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-basic-calculator-video.md b/curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-basic-calculator-video.md new file mode 100644 index 00000000000..cd7fa9c87ab --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-basic-calculator-video.md @@ -0,0 +1,37 @@ +--- +id: 6ec8578710ffa3471b74888e +title: Building a Basic Calculator +challengeType: 11 +videoId: vA10XU1O3QQ +dashedName: building-a-basic-calculator-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will build a basic calculator program that can perform addition, subtraction, multiplication, and division operations. + +# --questions-- + +## --text-- + +Which function is used to convert a string to an integer? + +## --answers-- + +`convert()` + +--- + +`str()` + +--- + +`integer()` + +--- + +`int()` + +## --video-solution-- + +4 diff --git a/curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-mad-libs-video.md b/curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-mad-libs-video.md new file mode 100644 index 00000000000..46908197309 --- /dev/null +++ b/curriculum/challenges/english/blocks/learn-python-small-projects-basics/learn-python-mad-libs-video.md @@ -0,0 +1,49 @@ +--- +id: 024ffa91a50a44335be33ee7 +title: Mad Libs Game +challengeType: 11 +videoId: XRmMTKa-xlc +dashedName: mad-libs-game-learn-python-full-course-for-beginners +--- + +# --description-- + +In this video, you will create a Mad Libs game that takes user input and creates funny stories. + +# --questions-- + +## --text-- + +Which of the following is the correct way to get input from a user and print the result to the console? + +## --answers-- + +```python +color = input("Enter a color: ") +print(Roses are + color) +``` + +--- + +```python +color = input("Enter a color: ") +print("Roses are " + "color") +``` + +--- + +```python +color = input("Enter a color: ") +print("Roses are " + color) +``` + +--- + +```python +color = prompt("Enter a color: ") +print("Roses are " + color) +``` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/blocks/recipe-page/668f08ea07b99b1f4a91acab.md b/curriculum/challenges/english/blocks/recipe-page/668f08ea07b99b1f4a91acab.md deleted file mode 100644 index a84e101e1a7..00000000000 --- a/curriculum/challenges/english/blocks/recipe-page/668f08ea07b99b1f4a91acab.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -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, /[\s\S]*<\/\s*html\s*>/gi); -``` - -You should have a `head` element within the `html` element. - -```js -assert.match(code, /[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\/\s*html\s*>/i); -``` - -You should have `title` element within your `head` element. - -```js -assert.match(code, /<\s*head\s*>[\s\S]*<\s*title\s*>[\s\S]*<\/\s*title\s*>[\s\S]*<\/\s*head\s*>/i); -``` - -Your `title` element should have your recipe title. - -```js -assert.isAbove(document.querySelector('title')?.innerText.trim().length, 0); -``` - -You should have a `meta` element within your `head` element. - -```js -assert.match(code, /<\s*head\s*>[\s\S]*<\s*meta[\s\S]*>[\s\S]*<\/\s*head\s*>/i); -``` - -Your `meta` element should have its `charset` attribute set to `UTF-8`. - -```js -assert.match(code, /<\s*meta[\s\S]+?charset\s*=\s*('|")UTF-8\1/i); -``` - -You should have a `body` element within your `html` element. - -```js -assert.match(code, /<\s*html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\s*body\s*>[\s\S]*<\/\s*body\s*>[\s\S]*<\/\s*html\s*>/i); -``` - -You should have an `h1` element with the name of your recipe. - -```js -assert.isAbove(document.querySelector('h1')?.innerText.length, 0); -``` - -You should only have one `h1` element. - -```js -assert.lengthOf(document.querySelectorAll('h1'), 1); -``` - -You should have a `p` element below your `h1` element. - -```js -assert.strictEqual(document.querySelector('h1')?.nextElementSibling, document.querySelector('p')); -``` - -Your first `p` element should describe your recipe. - -```js -assert.isNotEmpty(document.querySelector('p')?.textContent?.trim()); -``` - -Your first `h2` element should have the text `Ingredients`. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.innerText, 'Ingredients'); -``` - -You should have an unordered list element below your first `h2` element. - -```js -assert.strictEqual(document.querySelector('ul')?.previousElementSibling.tagName, 'H2'); -``` - -You should have at least four list item elements in your unordered list with the ingredients. - -```js -const els = document.querySelectorAll('ul > li'); -assert.isAbove(els.length, 3); -els.forEach(el => assert.isAbove(el.innerText.trim().length, 0)) -``` - -Your second `h2` element should have the text `Instructions`. - -```js -assert.equal(document.querySelectorAll('h2')[1]?.innerText, 'Instructions'); -``` - -You should have an ordered list element below your second `h2` element. - -```js -assert.strictEqual(document.querySelectorAll('h2')?.[1]?.nextElementSibling?.tagName, "OL"); -``` - -You should have at least four list item elements in your ordered list with the instructions. - -```js -const els = document.querySelectorAll('ol > li'); -assert.isAbove(els.length, 3); -els.forEach(el => assert.isAbove(el.innerText.trim().length, 0)) -``` - -You should have at least one `img` element. - -```js -assert.exists(document.querySelector('img')); -``` - -All your `img` elements should have a valid `src` attribute and value. - -```js -const img = document.querySelector('img'); -const rawSrc = img?.getAttribute('src'); -const resolvedSrc = img?.src; -const re = new RegExp(window.location.href, "ig"); - -assert.isAbove(rawSrc?.trim().length, 0, "The 'src' attribute must be explicitly set."); -assert.notMatch(resolvedSrc, re, "The 'src' should not start with the current page URL"); - -img.onload = () => { - console.log('Image loaded successfully.'); -}; - -img.onerror = (error) => { - console.error('Image failed to load:', error); - assert.fail("Your image's URL should be valid."); // Make the test instafail -}; - -if (img.complete) { - img.onload && img.onload(); -}; -``` - -All your `img` elements should have an `alt` attribute to describe the image. - -```js -assert.isAbove(document.querySelector('img')?.alt.length, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - - - - - - Chocolate chip cookies recipe - - - -

Chocolate Chip Cookies

-

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.

- Ingredients for baking: three eggs, a bowl of flour, a glass of milk, and a whisk arranged on a wooden table. -

Ingredients

-
    -
  • 1 cup all-purpose flour
    • -
  • 1/2 teaspoon baking soda
    • -
  • 1/4 cup unsalted butter, softened
    • -
  • 1/4 cup granulated sugar
    • -
  • 1/2 teaspoon vanilla extract
    • -
  • 1/2 cup mini chocolate chips
    • -
-

Instructions

-
    -
  1. Preheat your oven to 350°F (175°C) and line a baking sheet with parchment paper.
    2. -
  2. In a bowl, whisk together the flour and baking soda.
    3. -
  3. In another bowl, beat the butter, sugar, and vanilla extract until creamy.
    4. -
  4. Gradually add the dry ingredients to the wet mixture, then fold in the mini chocolate chips.
    5. -
  5. Drop small spoonfuls of dough onto the baking sheet.
    6. -
  6. Bake for 8-10 minutes, then let cool before enjoying!
    7. -
- - - -``` diff --git a/curriculum/schema/challenge-schema.js b/curriculum/schema/challenge-schema.js index 8c0f1f3178e..df08bbb9187 100644 --- a/curriculum/schema/challenge-schema.js +++ b/curriculum/schema/challenge-schema.js @@ -6,7 +6,6 @@ const { } = require('@freecodecamp/shared/config/challenge-types'); const { chapterBasedSuperBlocks, - catalogSuperBlocks, languageSuperBlocks, SuperBlocks } = require('@freecodecamp/shared/config/curriculum'); @@ -135,7 +134,7 @@ const schema = Joi.object().keys({ block: Joi.string().regex(slugRE).required(), blockId: Joi.objectId(), blockLabel: Joi.when('superBlock', { - is: [...chapterBasedSuperBlocks, ...catalogSuperBlocks], + is: [...chapterBasedSuperBlocks], then: Joi.valid( 'workshop', 'lab', diff --git a/curriculum/schema/curriculum-schema.js b/curriculum/schema/curriculum-schema.js index 6ae0993fd14..f102f106192 100644 --- a/curriculum/schema/curriculum-schema.js +++ b/curriculum/schema/curriculum-schema.js @@ -33,7 +33,30 @@ const superblocks = [ 'college-algebra-with-python', 'project-euler', '2022/responsive-web-design', - 'the-odin-project' + 'the-odin-project', + 'lab-survey-form', + 'html-and-accessibility', + 'computer-basics', + 'basic-css', + 'design-for-developers', + 'absolute-and-relative-units', + 'pseudo-classes-and-elements', + 'css-colors', + 'styling-forms', + 'css-box-model', + 'css-flexbox', + 'lab-page-of-playing-cards', + 'css-typography', + 'css-and-accessibility', + 'css-positioning', + 'attribute-selectors', + 'lab-book-inventory-app', + 'responsive-design', + 'lab-technical-documentation-page', + 'css-variables', + 'css-grid', + 'lab-product-landing-page', + 'css-animations' ]; const schema = Joi.object().keys( diff --git a/curriculum/src/build-curriculum.ts b/curriculum/src/build-curriculum.ts index 8deaa6631e2..38d178f356f 100644 --- a/curriculum/src/build-curriculum.ts +++ b/curriculum/src/build-curriculum.ts @@ -202,7 +202,32 @@ export const superBlockNames = { 'python-v9': SuperBlocks.PythonV9, 'relational-databases-v9': SuperBlocks.RelationalDbV9, 'back-end-development-and-apis-v9': SuperBlocks.BackEndDevApisV9, - 'full-stack-developer-v9': SuperBlocks.FullStackDeveloperV9 + 'full-stack-developer-v9': SuperBlocks.FullStackDeveloperV9, + 'html-forms-and-tables': SuperBlocks.HtmlFormsAndTables, + 'learn-python-for-beginners': SuperBlocks.LearnPythonForBeginners, + 'lab-survey-form': SuperBlocks.LabSurveyForm, + 'html-and-accessibility': SuperBlocks.HtmlAndAccessibility, + 'computer-basics': SuperBlocks.ComputerBasics, + 'basic-css': SuperBlocks.BasicCss, + 'design-for-developers': SuperBlocks.DesignForDevelopers, + 'absolute-and-relative-units': SuperBlocks.AbsoluteAndRelativeUnits, + 'pseudo-classes-and-elements': SuperBlocks.PseudoClassesAndElements, + 'css-colors': SuperBlocks.CssColors, + 'styling-forms': SuperBlocks.StylingForms, + 'css-box-model': SuperBlocks.CssBoxModel, + 'css-flexbox': SuperBlocks.CssFlexbox, + 'lab-page-of-playing-cards': SuperBlocks.LabPageOfPlayingCards, + 'css-typography': SuperBlocks.CssTypography, + 'css-and-accessibility': SuperBlocks.CssAndAccessibility, + 'css-positioning': SuperBlocks.CssPositioning, + 'attribute-selectors': SuperBlocks.AttributeSelectors, + 'lab-book-inventory-app': SuperBlocks.LabBookInventoryApp, + 'responsive-design': SuperBlocks.ResponsiveDesign, + 'lab-technical-documentation-page': SuperBlocks.LabTechnicalDocumentationPage, + 'css-variables': SuperBlocks.CssVariables, + 'css-grid': SuperBlocks.CssGrid, + 'lab-product-landing-page': SuperBlocks.LabProductLandingPage, + 'css-animations': SuperBlocks.CssAnimations }; export const superBlockToFilename = Object.entries(superBlockNames).reduce( diff --git a/curriculum/structure/blocks/cat-blog-page.json b/curriculum/structure/blocks/cat-blog-page.json deleted file mode 100644 index afb71c1be8a..00000000000 --- a/curriculum/structure/blocks/cat-blog-page.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "Build a Cat Blog Page", - "blockLabel": "workshop", - "blockLayout": "challenge-grid", - "isUpcomingChange": true, - "usesMultifileEditor": true, - "hasEditableBoundaries": true, - "dashedName": "cat-blog-page", - "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/structure/blocks/cat-photo-app.json b/curriculum/structure/blocks/cat-photo-app.json deleted file mode 100644 index 795c898f6e6..00000000000 --- a/curriculum/structure/blocks/cat-photo-app.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "Build a Cat Photo App", - "blockLabel": "workshop", - "blockLayout": "challenge-grid", - "isUpcomingChange": true, - "usesMultifileEditor": true, - "hasEditableBoundaries": true, - "dashedName": "cat-photo-app", - "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/structure/blocks/event-hub.json b/curriculum/structure/blocks/event-hub.json deleted file mode 100644 index a6e71ee340f..00000000000 --- a/curriculum/structure/blocks/event-hub.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "Build an Event Hub", - "blockLabel": "lab", - "blockLayout": "link", - "isUpcomingChange": true, - "usesMultifileEditor": true, - "dashedName": "event-hub", - "challengeOrder": [ - { "id": "66ebd4ae2812430bb883c787", "title": "Build an Event Hub" } - ], - "helpCategory": "HTML-CSS" -} diff --git a/curriculum/structure/blocks/learn-python-control-flow-functions.json b/curriculum/structure/blocks/learn-python-control-flow-functions.json new file mode 100644 index 00000000000..a490663e698 --- /dev/null +++ b/curriculum/structure/blocks/learn-python-control-flow-functions.json @@ -0,0 +1,30 @@ +{ + "name": "Control Flow and Functions", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-control-flow-functions", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "58d5d031e969765037c1bebb", + "title": "Functions" + }, + { + "id": "c6c9dae4017830e187eeaf42", + "title": "Return Statement" + }, + { + "id": "08854a2c6f052efa1e5270d2", + "title": "If Statements" + }, + { + "id": "8314d0bbddb0aa027a144705", + "title": "If Statements and Comparisons" + }, + { + "id": "a9f9c5bf295034800d6c77ad", + "title": "Building a Better Calculator" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-core-primitives.json b/curriculum/structure/blocks/learn-python-core-primitives.json new file mode 100644 index 00000000000..cfded85ae6d --- /dev/null +++ b/curriculum/structure/blocks/learn-python-core-primitives.json @@ -0,0 +1,30 @@ +{ + "name": "Core Primitives: Variables, Types, Basic I/O", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-core-primitives", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "62baa9d28e8723f635a0093e", + "title": "Drawing a Shape" + }, + { + "id": "315017f4457c19d45c2be034", + "title": "Variables and Data Types" + }, + { + "id": "0e2f4bd857b1edc70bfcd1f9", + "title": "Working with Strings" + }, + { + "id": "8ad37ddb7a23050f71cc9cc9", + "title": "Working with Numbers" + }, + { + "id": "155ca30775751b78a860a79b", + "title": "Getting Input from Users" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-data-structures.json b/curriculum/structure/blocks/learn-python-data-structures.json new file mode 100644 index 00000000000..1b103c351c9 --- /dev/null +++ b/curriculum/structure/blocks/learn-python-data-structures.json @@ -0,0 +1,22 @@ +{ + "name": "Data Structures: Lists and Tuples", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-data-structures", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "39a400e9163c5a0b33587e18", + "title": "Lists" + }, + { + "id": "24a45b3960b3aa68dff2cd9e", + "title": "List Functions" + }, + { + "id": "5ed596ba3306cf2c1a94bb92", + "title": "Tuples" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-oop.json b/curriculum/structure/blocks/learn-python-oop.json new file mode 100644 index 00000000000..1b2b15f9646 --- /dev/null +++ b/curriculum/structure/blocks/learn-python-oop.json @@ -0,0 +1,30 @@ +{ + "name": "Object Oriented Programming", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-oop", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "a0339c4075344cbfc2cd939c", + "title": "Classes and Objects" + }, + { + "id": "9afe5e8141b13e9f1d59d46e", + "title": "Building a Multiple Choice Quiz" + }, + { + "id": "697fe3cb32baa3841ab62a63", + "title": "Object Functions" + }, + { + "id": "697fe5c032baa3841ab62a64", + "title": "Inheritance" + }, + { + "id": "697fe6c932baa3841ab62a65", + "title": "Python Interpreter" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-practical-errors-files.json b/curriculum/structure/blocks/learn-python-practical-errors-files.json new file mode 100644 index 00000000000..47a966d696a --- /dev/null +++ b/curriculum/structure/blocks/learn-python-practical-errors-files.json @@ -0,0 +1,30 @@ +{ + "name": "Practical Python: Errors, Files and Modules", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-practical-errors-files", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "71ac60e6488b40e997219f15", + "title": "Comments" + }, + { + "id": "2a486e3e521b79b874fb5e9a", + "title": "Try/Except" + }, + { + "id": "04e25c4fdc9ee0e71a844fd6", + "title": "Reading Files" + }, + { + "id": "bfab38e6a6c1165f7774514d", + "title": "Writing to Files" + }, + { + "id": "2ccc34bd3f7bb4ae97a67ea3", + "title": "Modules and pip" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-projects-loops.json b/curriculum/structure/blocks/learn-python-projects-loops.json new file mode 100644 index 00000000000..05b8c406acc --- /dev/null +++ b/curriculum/structure/blocks/learn-python-projects-loops.json @@ -0,0 +1,38 @@ +{ + "name": "Dictionaries and Loops", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-projects-loops", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "3625fbc38b9428ae98d98f23", + "title": "Dictionaries" + }, + { + "id": "474c23ec0df6e7af920e0526", + "title": "While Loop" + }, + { + "id": "d4876f74547b26d5c330423e", + "title": "Building a Guessing Game" + }, + { + "id": "030401977064585ddd4c7746", + "title": "For Loops" + }, + { + "id": "a4cfb218d22efcfa7cc49d80", + "title": "Exponent Functions" + }, + { + "id": "28119f9dc5f93e3ac5d7c58a", + "title": "2D Lists and Nested Loops" + }, + { + "id": "703bcd12c0edae7773eeec64", + "title": "Building a Translator" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-setup-first-steps.json b/curriculum/structure/blocks/learn-python-setup-first-steps.json new file mode 100644 index 00000000000..8b5f28662e6 --- /dev/null +++ b/curriculum/structure/blocks/learn-python-setup-first-steps.json @@ -0,0 +1,22 @@ +{ + "name": "Setup & First Steps", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-setup-first-steps", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "05b8c9b04c6df84636956fab", + "title": "Introduction" + }, + { + "id": "edeae16d4bf9505165740c75", + "title": "Installing Python and PyCharm" + }, + { + "id": "8ca3a380a75d00443d9e09bd", + "title": "Hello World Program" + } + ] +} diff --git a/curriculum/structure/blocks/learn-python-small-projects-basics.json b/curriculum/structure/blocks/learn-python-small-projects-basics.json new file mode 100644 index 00000000000..b2d5dd265ee --- /dev/null +++ b/curriculum/structure/blocks/learn-python-small-projects-basics.json @@ -0,0 +1,18 @@ +{ + "name": "Small Projects: Using Basics", + "blockLabel": "lecture", + "blockLayout": "challenge-list", + "isUpcomingChange": false, + "dashedName": "learn-python-small-projects-basics", + "helpCategory": "Python", + "challengeOrder": [ + { + "id": "6ec8578710ffa3471b74888e", + "title": "Building a Basic Calculator" + }, + { + "id": "024ffa91a50a44335be33ee7", + "title": "Mad Libs Game" + } + ] +} diff --git a/curriculum/structure/blocks/recipe-page.json b/curriculum/structure/blocks/recipe-page.json deleted file mode 100644 index e05cb601f7f..00000000000 --- a/curriculum/structure/blocks/recipe-page.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "Build a Recipe Page", - "blockLabel": "lab", - "blockLayout": "link", - "isUpcomingChange": true, - "usesMultifileEditor": true, - "dashedName": "recipe-page", - "challengeOrder": [ - { - "id": "668f08ea07b99b1f4a91acab", - "title": "Build a Recipe Page" - } - ], - "helpCategory": "HTML-CSS" -} diff --git a/curriculum/structure/curriculum.json b/curriculum/structure/curriculum.json index a75435360ee..6bcc4334473 100644 --- a/curriculum/structure/curriculum.json +++ b/curriculum/structure/curriculum.json @@ -36,7 +36,32 @@ "python-v9", "relational-databases-v9", "back-end-development-and-apis-v9", - "full-stack-developer-v9" + "full-stack-developer-v9", + "html-forms-and-tables", + "learn-python-for-beginners", + "lab-survey-form", + "html-and-accessibility", + "computer-basics", + "basic-css", + "design-for-developers", + "absolute-and-relative-units", + "pseudo-classes-and-elements", + "css-colors", + "styling-forms", + "css-box-model", + "css-flexbox", + "lab-page-of-playing-cards", + "css-typography", + "css-and-accessibility", + "css-positioning", + "attribute-selectors", + "lab-book-inventory-app", + "responsive-design", + "lab-technical-documentation-page", + "css-variables", + "css-grid", + "lab-product-landing-page", + "css-animations" ], "certifications": [ "a2-english-for-developers", diff --git a/curriculum/structure/superblocks/absolute-and-relative-units.json b/curriculum/structure/superblocks/absolute-and-relative-units.json new file mode 100644 index 00000000000..a393a2e90bb --- /dev/null +++ b/curriculum/structure/superblocks/absolute-and-relative-units.json @@ -0,0 +1,8 @@ +{ + "blocks": [ + "lecture-working-with-relative-and-absolute-units", + "lab-event-flyer-page", + "review-css-relative-and-absolute-units", + "quiz-css-relative-and-absolute-units" + ] +} diff --git a/curriculum/structure/superblocks/attribute-selectors.json b/curriculum/structure/superblocks/attribute-selectors.json new file mode 100644 index 00000000000..a06000d5fd3 --- /dev/null +++ b/curriculum/structure/superblocks/attribute-selectors.json @@ -0,0 +1,8 @@ +{ + "blocks": [ + "lecture-working-with-attribute-selectors", + "workshop-balance-sheet", + "review-css-attribute-selectors", + "quiz-css-attribute-selectors" + ] +} diff --git a/curriculum/structure/superblocks/basic-css.json b/curriculum/structure/superblocks/basic-css.json new file mode 100644 index 00000000000..de5bd8f6aab --- /dev/null +++ b/curriculum/structure/superblocks/basic-css.json @@ -0,0 +1,16 @@ +{ + "blocks": [ + "lecture-what-is-css", + "workshop-cafe-menu", + "lab-business-card", + "lecture-css-specificity-the-cascade-algorithm-and-inheritance", + "review-basic-css", + "quiz-basic-css", + "lecture-styling-lists-and-links", + "lab-stylized-to-do-list", + "lecture-working-with-backgrounds-and-borders", + "lab-blog-post-card", + "review-css-backgrounds-and-borders", + "quiz-css-backgrounds-and-borders" + ] +} diff --git a/curriculum/structure/superblocks/basic-html.json b/curriculum/structure/superblocks/basic-html.json index a9fba358bdf..97b925d204f 100644 --- a/curriculum/structure/superblocks/basic-html.json +++ b/curriculum/structure/superblocks/basic-html.json @@ -1,3 +1,26 @@ { - "blocks": ["cat-photo-app", "recipe-page"] + "blocks": [ + "workshop-curriculum-outline", + "lab-debug-camperbots-profile-page", + "lecture-understanding-html-attributes", + "lab-debug-pet-adoption-page", + "lecture-understanding-the-html-boilerplate", + "workshop-cat-photo-app", + "lab-recipe-page", + "lecture-html-fundamentals", + "workshop-bookstore-page", + "lecture-understanding-how-html-affects-seo", + "lab-travel-agency-page", + "lecture-working-with-audio-and-video-elements", + "workshop-html-video-player", + "lab-html-audio-and-video-player", + "lecture-working-with-images-and-svgs", + "workshop-build-a-heart-icon", + "lecture-working-with-media", + "workshop-build-a-video-display-using-iframe", + "lab-video-compilation-page", + "lecture-working-with-links", + "review-basic-html", + "quiz-basic-html" + ] } diff --git a/curriculum/structure/superblocks/computer-basics.json b/curriculum/structure/superblocks/computer-basics.json new file mode 100644 index 00000000000..a7bab0cb767 --- /dev/null +++ b/curriculum/structure/superblocks/computer-basics.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-understanding-computer-internet-and-tooling-basics", + "lecture-working-with-file-systems", + "lecture-browsing-the-web-effectively", + "review-computer-basics", + "quiz-computer-basics" + ] +} diff --git a/curriculum/structure/superblocks/css-and-accessibility.json b/curriculum/structure/superblocks/css-and-accessibility.json new file mode 100644 index 00000000000..b353d45e7cd --- /dev/null +++ b/curriculum/structure/superblocks/css-and-accessibility.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-best-practices-for-accessibility-and-css", + "workshop-accessibility-quiz", + "lab-tribute-page", + "review-css-accessibility", + "quiz-css-accessibility" + ] +} diff --git a/curriculum/structure/superblocks/css-animations.json b/curriculum/structure/superblocks/css-animations.json new file mode 100644 index 00000000000..5b8b2bcea75 --- /dev/null +++ b/curriculum/structure/superblocks/css-animations.json @@ -0,0 +1,11 @@ +{ + "blocks": [ + "lecture-animations-and-accessibility", + "workshop-ferris-wheel", + "lab-moon-orbit", + "workshop-flappy-penguin", + "lab-personal-portfolio", + "review-css-animations", + "quiz-css-animations" + ] +} diff --git a/curriculum/structure/superblocks/css-box-model.json b/curriculum/structure/superblocks/css-box-model.json new file mode 100644 index 00000000000..003a03f3605 --- /dev/null +++ b/curriculum/structure/superblocks/css-box-model.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-working-with-css-transforms-overflow-and-filters", + "workshop-rothko-painting", + "lab-confidential-email-page", + "review-css-layout-and-effects", + "quiz-css-layout-and-effects" + ] +} diff --git a/curriculum/structure/superblocks/css-colors.json b/curriculum/structure/superblocks/css-colors.json new file mode 100644 index 00000000000..71dab1e8d27 --- /dev/null +++ b/curriculum/structure/superblocks/css-colors.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-working-with-colors-in-css", + "workshop-colored-markers", + "lab-colored-boxes", + "review-css-colors", + "quiz-css-colors" + ] +} diff --git a/curriculum/structure/superblocks/css-flexbox.json b/curriculum/structure/superblocks/css-flexbox.json new file mode 100644 index 00000000000..893a37acf43 --- /dev/null +++ b/curriculum/structure/superblocks/css-flexbox.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-working-with-css-flexbox", + "workshop-flexbox-photo-gallery", + "lab-pricing-plans-layout", + "review-css-flexbox", + "quiz-css-flexbox" + ] +} diff --git a/curriculum/structure/superblocks/css-grid.json b/curriculum/structure/superblocks/css-grid.json new file mode 100644 index 00000000000..c438fee675b --- /dev/null +++ b/curriculum/structure/superblocks/css-grid.json @@ -0,0 +1,10 @@ +{ + "blocks": [ + "lecture-working-with-css-grid", + "workshop-magazine", + "lab-newspaper-layout", + "lecture-debugging-css", + "review-css-grid", + "quiz-css-grid" + ] +} diff --git a/curriculum/structure/superblocks/css-positioning.json b/curriculum/structure/superblocks/css-positioning.json new file mode 100644 index 00000000000..f58d9c28c89 --- /dev/null +++ b/curriculum/structure/superblocks/css-positioning.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-understanding-how-to-work-with-floats-and-positioning-in-css", + "workshop-cat-painting", + "lab-house-painting", + "review-css-positioning", + "quiz-css-positioning" + ] +} diff --git a/curriculum/structure/superblocks/css-typography.json b/curriculum/structure/superblocks/css-typography.json new file mode 100644 index 00000000000..9d0553c28e2 --- /dev/null +++ b/curriculum/structure/superblocks/css-typography.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-working-with-css-fonts", + "workshop-nutritional-label", + "lab-newspaper-article", + "review-css-typography", + "quiz-css-typography" + ] +} diff --git a/curriculum/structure/superblocks/css-variables.json b/curriculum/structure/superblocks/css-variables.json new file mode 100644 index 00000000000..28b897dfa17 --- /dev/null +++ b/curriculum/structure/superblocks/css-variables.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-working-with-css-variables", + "workshop-city-skyline", + "lab-availability-table", + "review-css-variables", + "quiz-css-variables" + ] +} diff --git a/curriculum/structure/superblocks/design-for-developers.json b/curriculum/structure/superblocks/design-for-developers.json new file mode 100644 index 00000000000..9f00d2f0fb4 --- /dev/null +++ b/curriculum/structure/superblocks/design-for-developers.json @@ -0,0 +1,9 @@ +{ + "blocks": [ + "lecture-user-interface-design-fundamentals", + "lecture-user-centered-design", + "lecture-common-design-tools", + "review-design-fundamentals", + "quiz-design-fundamentals" + ] +} diff --git a/curriculum/structure/superblocks/full-stack-open.json b/curriculum/structure/superblocks/full-stack-open.json index 145f372985f..a85114629b1 100644 --- a/curriculum/structure/superblocks/full-stack-open.json +++ b/curriculum/structure/superblocks/full-stack-open.json @@ -5,7 +5,7 @@ "modules": [ { "dashedName": "basic-html", - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -14,7 +14,7 @@ "modules": [ { "dashedName": "basic-html", - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -25,7 +25,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -36,7 +36,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -47,7 +47,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -58,7 +58,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -69,7 +69,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -80,7 +80,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -91,7 +91,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -102,7 +102,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -113,7 +113,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -124,7 +124,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -135,7 +135,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] }, @@ -146,7 +146,7 @@ { "dashedName": "basic-html", "comingSoon": true, - "blocks": ["cat-blog-page"] + "blocks": ["workshop-blog-page"] } ] } diff --git a/curriculum/structure/superblocks/html-and-accessibility.json b/curriculum/structure/superblocks/html-and-accessibility.json new file mode 100644 index 00000000000..011c2eeb280 --- /dev/null +++ b/curriculum/structure/superblocks/html-and-accessibility.json @@ -0,0 +1,17 @@ +{ + "blocks": [ + "lecture-importance-of-accessibility-and-good-html-structure", + "workshop-debug-coding-journey-blog-page", + "lecture-accessible-tables-forms", + "workshop-tech-conference-schedule", + "lab-debug-donation-form", + "lecture-introduction-to-aria", + "workshop-accessible-audio-controller", + "lecture-accessible-media-elements", + "lab-checkout-page", + "lab-movie-review-page", + "lab-multimedia-player", + "review-html-accessibility", + "quiz-html-accessibility" + ] +} diff --git a/curriculum/structure/superblocks/html-forms-and-tables.json b/curriculum/structure/superblocks/html-forms-and-tables.json new file mode 100644 index 00000000000..75eb16dfed7 --- /dev/null +++ b/curriculum/structure/superblocks/html-forms-and-tables.json @@ -0,0 +1,12 @@ +{ + "blocks": [ + "lecture-working-with-forms", + "workshop-hotel-feedback-form", + "lecture-working-with-tables", + "workshop-final-exams-table", + "lab-book-catalog-table", + "lecture-working-with-html-tools", + "review-html-tables-and-forms", + "quiz-html-tables-and-forms" + ] +} diff --git a/curriculum/structure/superblocks/lab-book-inventory-app.json b/curriculum/structure/superblocks/lab-book-inventory-app.json new file mode 100644 index 00000000000..3c4f61572c6 --- /dev/null +++ b/curriculum/structure/superblocks/lab-book-inventory-app.json @@ -0,0 +1,3 @@ +{ + "blocks": ["lab-book-inventory-app"] +} diff --git a/curriculum/structure/superblocks/lab-page-of-playing-cards.json b/curriculum/structure/superblocks/lab-page-of-playing-cards.json new file mode 100644 index 00000000000..b1512d8db03 --- /dev/null +++ b/curriculum/structure/superblocks/lab-page-of-playing-cards.json @@ -0,0 +1,3 @@ +{ + "blocks": ["lab-page-of-playing-cards"] +} diff --git a/curriculum/structure/superblocks/lab-product-landing-page.json b/curriculum/structure/superblocks/lab-product-landing-page.json new file mode 100644 index 00000000000..d0059eb7668 --- /dev/null +++ b/curriculum/structure/superblocks/lab-product-landing-page.json @@ -0,0 +1,3 @@ +{ + "blocks": ["lab-product-landing-page"] +} diff --git a/curriculum/structure/superblocks/lab-survey-form.json b/curriculum/structure/superblocks/lab-survey-form.json new file mode 100644 index 00000000000..26dd4a84325 --- /dev/null +++ b/curriculum/structure/superblocks/lab-survey-form.json @@ -0,0 +1,3 @@ +{ + "blocks": ["lab-survey-form"] +} diff --git a/curriculum/structure/superblocks/lab-technical-documentation-page.json b/curriculum/structure/superblocks/lab-technical-documentation-page.json new file mode 100644 index 00000000000..a006015d050 --- /dev/null +++ b/curriculum/structure/superblocks/lab-technical-documentation-page.json @@ -0,0 +1,3 @@ +{ + "blocks": ["lab-technical-documentation-page"] +} diff --git a/curriculum/structure/superblocks/learn-python-for-beginners.json b/curriculum/structure/superblocks/learn-python-for-beginners.json new file mode 100644 index 00000000000..bdb717eae1b --- /dev/null +++ b/curriculum/structure/superblocks/learn-python-for-beginners.json @@ -0,0 +1,12 @@ +{ + "blocks": [ + "learn-python-setup-first-steps", + "learn-python-core-primitives", + "learn-python-small-projects-basics", + "learn-python-data-structures", + "learn-python-control-flow-functions", + "learn-python-projects-loops", + "learn-python-practical-errors-files", + "learn-python-oop" + ] +} diff --git a/curriculum/structure/superblocks/pseudo-classes-and-elements.json b/curriculum/structure/superblocks/pseudo-classes-and-elements.json new file mode 100644 index 00000000000..3d62341b2f4 --- /dev/null +++ b/curriculum/structure/superblocks/pseudo-classes-and-elements.json @@ -0,0 +1,10 @@ +{ + "blocks": [ + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css", + "workshop-greeting-card", + "workshop-parent-teacher-conference-form", + "lab-job-application-form", + "review-css-pseudo-classes", + "quiz-css-pseudo-classes" + ] +} diff --git a/curriculum/structure/superblocks/responsive-design.json b/curriculum/structure/superblocks/responsive-design.json new file mode 100644 index 00000000000..bc6457820b1 --- /dev/null +++ b/curriculum/structure/superblocks/responsive-design.json @@ -0,0 +1,8 @@ +{ + "blocks": [ + "lecture-best-practices-for-responsive-web-design", + "workshop-piano", + "review-responsive-web-design", + "quiz-responsive-web-design" + ] +} diff --git a/curriculum/structure/superblocks/semantic-html.json b/curriculum/structure/superblocks/semantic-html.json index cbcffd1f7e2..068340f6689 100644 --- a/curriculum/structure/superblocks/semantic-html.json +++ b/curriculum/structure/superblocks/semantic-html.json @@ -1,3 +1,14 @@ { - "blocks": ["cat-blog-page", "event-hub"] + "blocks": [ + "lecture-importance-of-semantic-html", + "lecture-understanding-nuanced-semantic-elements", + "workshop-major-browsers-list", + "lecture-working-with-text-and-time-semantic-elements", + "workshop-quincys-job-tips", + "lecture-working-with-specialized-semantic-elements", + "workshop-blog-page", + "lab-event-hub", + "review-semantic-html", + "quiz-semantic-html" + ] } diff --git a/curriculum/structure/superblocks/styling-forms.json b/curriculum/structure/superblocks/styling-forms.json new file mode 100644 index 00000000000..a2ef0305dc6 --- /dev/null +++ b/curriculum/structure/superblocks/styling-forms.json @@ -0,0 +1,11 @@ +{ + "blocks": [ + "lecture-best-practices-for-styling-forms", + "workshop-registration-form", + "lab-contact-form", + "workshop-game-settings-panel", + "lab-feature-selection", + "review-styling-forms", + "quiz-styling-forms" + ] +} diff --git a/packages/shared/src/config/catalog.test.ts b/packages/shared/src/config/catalog.test.ts index 012e72a93ca..96c210b72f8 100644 --- a/packages/shared/src/config/catalog.test.ts +++ b/packages/shared/src/config/catalog.test.ts @@ -1,9 +1,11 @@ import { describe, it, expect } from 'vitest'; -import { catalogSuperBlocks } from './curriculum'; import { catalog } from './catalog'; +import { superBlockStages, SuperBlockStage } from './curriculum'; describe('catalog', () => { it('should have exactly one entry for each superblock in SuperBlockStage.Catalog', () => { + const catalogSuperBlocks = superBlockStages[SuperBlockStage.Catalog]; + expect(catalog.map(course => course.superBlock.toString()).sort()).toEqual( catalogSuperBlocks.map(sb => sb.toString()).sort() ); diff --git a/packages/shared/src/config/catalog.ts b/packages/shared/src/config/catalog.ts index 0caf294f18c..f9b96be9fca 100644 --- a/packages/shared/src/config/catalog.ts +++ b/packages/shared/src/config/catalog.ts @@ -6,21 +6,188 @@ enum Levels { Advanced = 'advanced' } +enum Topic { + Html = 'html', + CSS = 'css', + Js = 'js', + React = 'react', + Python = 'python', + DataAnalysis = 'data-analysis', + MachineLearning = 'machine-learning', + D3 = 'd3', + Api = 'api', + InformationSecurity = 'information-security', + ComputerFundamentals = 'computer-fundamentals' +} + interface Catalog { superBlock: SuperBlocks; level: Levels; hours: number; + topic: Topic; } export const catalog: Catalog[] = [ { - superBlock: SuperBlocks.BasicHtml, + superBlock: SuperBlocks.HtmlFormsAndTables, level: Levels.Beginner, - hours: 2 + hours: 2, + topic: Topic.Html }, { superBlock: SuperBlocks.SemanticHtml, level: Levels.Beginner, - hours: 2 + hours: 2, + topic: Topic.Html + }, + { + superBlock: SuperBlocks.BasicHtml, + level: Levels.Beginner, + hours: 3, + topic: Topic.Html + }, + { + superBlock: SuperBlocks.LearnPythonForBeginners, + level: Levels.Beginner, + hours: 5, + topic: Topic.Python + }, + { + superBlock: SuperBlocks.LabSurveyForm, + level: Levels.Beginner, + hours: 2, + topic: Topic.Html + }, + { + superBlock: SuperBlocks.HtmlAndAccessibility, + level: Levels.Beginner, + hours: 2, + topic: Topic.Html + }, + { + superBlock: SuperBlocks.ComputerBasics, + level: Levels.Beginner, + hours: 2, + topic: Topic.ComputerFundamentals + }, + { + superBlock: SuperBlocks.BasicCss, + level: Levels.Beginner, + hours: 3, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.DesignForDevelopers, + level: Levels.Beginner, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.AbsoluteAndRelativeUnits, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.PseudoClassesAndElements, + level: Levels.Intermediate, + hours: 1, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssColors, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.StylingForms, + level: Levels.Intermediate, + hours: 1, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssBoxModel, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssFlexbox, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.LabPageOfPlayingCards, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssTypography, + level: Levels.Intermediate, + hours: 1, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssAndAccessibility, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssPositioning, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.AttributeSelectors, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.LabBookInventoryApp, + level: Levels.Beginner, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.ResponsiveDesign, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.LabTechnicalDocumentationPage, + level: Levels.Advanced, + hours: 1, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssVariables, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssGrid, + level: Levels.Intermediate, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.LabProductLandingPage, + level: Levels.Beginner, + hours: 2, + topic: Topic.CSS + }, + { + superBlock: SuperBlocks.CssAnimations, + level: Levels.Advanced, + hours: 2, + topic: Topic.CSS } ]; diff --git a/packages/shared/src/config/certification-settings.ts b/packages/shared/src/config/certification-settings.ts index a45211d1cb9..ae6bab197a0 100644 --- a/packages/shared/src/config/certification-settings.ts +++ b/packages/shared/src/config/certification-settings.ts @@ -341,7 +341,32 @@ export const superBlockToCertMap: { [SuperBlocks.BasicHtml]: null, [SuperBlocks.SemanticHtml]: null, [SuperBlocks.DevPlayground]: null, - [SuperBlocks.FullStackOpen]: null + [SuperBlocks.FullStackOpen]: null, + [SuperBlocks.HtmlFormsAndTables]: null, + [SuperBlocks.LabSurveyForm]: null, + [SuperBlocks.HtmlAndAccessibility]: null, + [SuperBlocks.ComputerBasics]: null, + [SuperBlocks.BasicCss]: null, + [SuperBlocks.DesignForDevelopers]: null, + [SuperBlocks.AbsoluteAndRelativeUnits]: null, + [SuperBlocks.PseudoClassesAndElements]: null, + [SuperBlocks.CssColors]: null, + [SuperBlocks.StylingForms]: null, + [SuperBlocks.CssBoxModel]: null, + [SuperBlocks.CssFlexbox]: null, + [SuperBlocks.LabPageOfPlayingCards]: null, + [SuperBlocks.CssTypography]: null, + [SuperBlocks.CssAndAccessibility]: null, + [SuperBlocks.CssPositioning]: null, + [SuperBlocks.AttributeSelectors]: null, + [SuperBlocks.LabBookInventoryApp]: null, + [SuperBlocks.ResponsiveDesign]: null, + [SuperBlocks.LabTechnicalDocumentationPage]: null, + [SuperBlocks.CssVariables]: null, + [SuperBlocks.CssGrid]: null, + [SuperBlocks.LabProductLandingPage]: null, + [SuperBlocks.CssAnimations]: null, + [SuperBlocks.LearnPythonForBeginners]: null }; export const certificationRequirements: Partial< diff --git a/packages/shared/src/config/curriculum.ts b/packages/shared/src/config/curriculum.ts index 1df3a2b7fd2..2b45a0ac1fc 100644 --- a/packages/shared/src/config/curriculum.ts +++ b/packages/shared/src/config/curriculum.ts @@ -40,7 +40,32 @@ export enum SuperBlocks { PythonV9 = 'python-v9', RelationalDbV9 = 'relational-databases-v9', BackEndDevApisV9 = 'back-end-development-and-apis-v9', - FullStackDeveloperV9 = 'full-stack-developer-v9' + FullStackDeveloperV9 = 'full-stack-developer-v9', + HtmlFormsAndTables = 'html-forms-and-tables', + LabSurveyForm = 'lab-survey-form', + HtmlAndAccessibility = 'html-and-accessibility', + ComputerBasics = 'computer-basics', + BasicCss = 'basic-css', + DesignForDevelopers = 'design-for-developers', + AbsoluteAndRelativeUnits = 'absolute-and-relative-units', + PseudoClassesAndElements = 'pseudo-classes-and-elements', + CssColors = 'css-colors', + StylingForms = 'styling-forms', + CssBoxModel = 'css-box-model', + CssFlexbox = 'css-flexbox', + LabPageOfPlayingCards = 'lab-page-of-playing-cards', + CssTypography = 'css-typography', + CssAndAccessibility = 'css-and-accessibility', + CssPositioning = 'css-positioning', + AttributeSelectors = 'attribute-selectors', + LabBookInventoryApp = 'lab-book-inventory-app', + ResponsiveDesign = 'responsive-design', + LabTechnicalDocumentationPage = 'lab-technical-documentation-page', + CssVariables = 'css-variables', + CssGrid = 'css-grid', + LabProductLandingPage = 'lab-product-landing-page', + CssAnimations = 'css-animations', + LearnPythonForBeginners = 'learn-python-for-beginners' } export const languageSuperBlocks = [ @@ -164,15 +189,41 @@ export const superBlockStages: StageMap = { ], // Catalog is treated like upcoming for now // Add catalog superBlocks to catalog.ts when adding new superBlocks - [SuperBlockStage.Catalog]: [SuperBlocks.BasicHtml, SuperBlocks.SemanticHtml] + [SuperBlockStage.Catalog]: [ + SuperBlocks.HtmlFormsAndTables, + SuperBlocks.BasicHtml, + SuperBlocks.SemanticHtml, + SuperBlocks.LabSurveyForm, + SuperBlocks.HtmlAndAccessibility, + SuperBlocks.ComputerBasics, + SuperBlocks.BasicCss, + SuperBlocks.DesignForDevelopers, + SuperBlocks.AbsoluteAndRelativeUnits, + SuperBlocks.PseudoClassesAndElements, + SuperBlocks.CssColors, + SuperBlocks.StylingForms, + SuperBlocks.CssBoxModel, + SuperBlocks.CssFlexbox, + SuperBlocks.LabPageOfPlayingCards, + SuperBlocks.CssTypography, + SuperBlocks.CssAndAccessibility, + SuperBlocks.CssPositioning, + SuperBlocks.AttributeSelectors, + SuperBlocks.LabBookInventoryApp, + SuperBlocks.ResponsiveDesign, + SuperBlocks.LabTechnicalDocumentationPage, + SuperBlocks.CssVariables, + SuperBlocks.CssGrid, + SuperBlocks.LabProductLandingPage, + SuperBlocks.CssAnimations, + SuperBlocks.LearnPythonForBeginners + ] }; Object.freeze(superBlockStages); export const archivedSuperBlocks = superBlockStages[SuperBlockStage.Legacy]; -export const catalogSuperBlocks = superBlockStages[SuperBlockStage.Catalog]; - type NotAuditedSuperBlocks = { [key in Languages]: SuperBlocks[]; };