jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-28 14:01:28 -04:00
Code Issues Projects Releases Wiki Activity

chore: reorder catalog items (#66616)

Browse Source
This commit is contained in:
Jessica Wilkins
2026-03-24 16:55:29 -07:00
committed by GitHub
parent 1a884b745a
commit 623e49bf83
18 changed files with 110 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
client/i18n/locales/english/intro.json
View File

@@ -7166,6 +7166,13 @@
"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."
]
},
"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 <code>label</code> element, the different <code>input</code> elements, the <code>required</code> attribute, and more. "
]
},
"review-html-tables-and-forms": {
"title": "HTML Tables and Forms Review",
"intro": [
@@ -8985,24 +8992,6 @@
}
}
},
"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 <code>label</code> element, the different <code>input</code> elements, the <code>required</code> attribute, and more. "
]
}
}
},
"html-and-accessibility": {
"title": "Learn HTML and Accessibility",
"summary": [
@@ -9510,6 +9499,13 @@
"You'll practice aligning elements using flexbox properties like <code>flex-direction</code>, <code>justify-content</code>, <code>align-self</code>, and more."
]
},
"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 <code>flex-direction</code>, <code>justify-content</code>, <code>align-self</code>, and more."
]
},
"review-css-flexbox": {
"title": "CSS Flexbox Review",
"intro": [
@@ -9523,22 +9519,6 @@
}
}
},
"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 <code>flex-direction</code>, <code>justify-content</code>, <code>align-self</code>, and more."
]
}
}
},
"css-typography": {
"title": "Learn CSS Typography",
"summary": [
@@ -9677,6 +9657,13 @@
"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."
]
},
"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 <code>[attribute]</code>, <code>[attribute=value]</code>, <code>[attribute~=value]</code>, and more."
]
},
"review-css-attribute-selectors": {
"title": "CSS Attribute Selectors Review",
"intro": [
@@ -9692,20 +9679,6 @@
}
}
},
"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 <code>[attribute]</code>, <code>[attribute=value]</code>, <code>[attribute~=value]</code>, and more."
]
}
}
},
"responsive-design": {
"title": "Learn Responsive Design",
"summary": [
@@ -9726,6 +9699,13 @@
"In this workshop, you'll use CSS and responsive design to code a piano. You'll also practice media queries and pseudo selectors."
]
},
"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."
]
},
"review-responsive-web-design": {
"title": "Responsive Web Design Review",
"intro": [
@@ -9741,24 +9721,6 @@
}
}
},
"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": "Learn CSS Variables",
"summary": ["Use CSS variables to build reusable, theme-friendly styles."],
@@ -9827,6 +9789,12 @@
"In this lesson, you'll learn how to debug CSS using your browser's developer tools and CSS validators."
]
},
"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."
]
},
"review-css-grid": {
"title": "CSS Grid Review",
"intro": [
@@ -9840,23 +9808,6 @@
}
}
},
"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": "Learn CSS Animations",
"summary": ["Create engaging UI motion with accessible CSS animations."],

5
client/src/assets/superblock-icon.tsx
View File

@@ -57,7 +57,6 @@ const iconMap = {
[SuperBlocks.FullStackOpen]: Code,
[SuperBlocks.DevPlayground]: Code,
[SuperBlocks.HtmlFormsAndTables]: ResponsiveDesign,
[SuperBlocks.LabSurveyForm]: Code,
[SuperBlocks.HtmlAndAccessibility]: ResponsiveDesign,
[SuperBlocks.ComputerBasics]: Code,
[SuperBlocks.BasicCss]: Code,
@@ -68,17 +67,13 @@ const iconMap = {
[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.IntroductionToAlgorithmsAndDataStructures]: Code,