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{text}
) + ) : summary && summary.length > 0 ? ( +{summary[0]}
+ ) : null} +{text}
- ))} -everyonelovescutecatsonline!<\/p>/i -); -``` - -Your comment should contain the text `TODO: Add link to cat photos`. - -```js -assert.match(code, //i); -``` - -# --seed-- - -## --seed-contents-- - -```html - -
-Everyone loves cute cats online!
- ---fcc-editable-region-- - - -``` - -# --solutions-- - -```html - - -Everyone loves cute cats online!
- - -``` diff --git a/curriculum/challenges/english/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 - - - - - -Join us for a deep dive into the latest advancements in artificial intelligence and machine learning. Industry leaders will share insights and case studies on how AI is transforming various sectors.
-Date: August 10, 2024
-A hands-on workshop designed for developers looking to enhance their skills in modern web technologies including React, Node.js, and GraphQL. Perfect for both beginners and experienced developers.
-Date: September 5, 2024
-An event focusing on the latest trends and threats in cybersecurity. Experts discussed strategies for protecting data and ensuring privacy in an increasingly digital world.
-Date: June 15, 2024
-
- A comprehensive event covering the future of blockchain technology. Topics included decentralized finance (DeFi), smart contracts, and the impact of blockchain on various industries.
-Date: July 20, 2024
-
- 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.
-
-