From e018e2e61af09b7d020029be6fe19790ecc9163e Mon Sep 17 00:00:00 2001 From: freeCodeCamp's Camper Bot Date: Tue, 14 Oct 2025 20:54:18 +0530 Subject: [PATCH] chore(i18n,client): processed translations (#62749) --- .../locales/chinese-traditional/intro.json | 1039 +++++++++++++++++ client/i18n/locales/chinese/intro.json | 1039 +++++++++++++++++ client/i18n/locales/espanol/intro.json | 1039 +++++++++++++++++ client/i18n/locales/german/intro.json | 1039 +++++++++++++++++ client/i18n/locales/italian/intro.json | 1039 +++++++++++++++++ client/i18n/locales/japanese/intro.json | 1039 +++++++++++++++++ client/i18n/locales/korean/intro.json | 1039 +++++++++++++++++ client/i18n/locales/portuguese/intro.json | 1039 +++++++++++++++++ client/i18n/locales/swahili/intro.json | 1039 +++++++++++++++++ client/i18n/locales/ukrainian/intro.json | 1039 +++++++++++++++++ 10 files changed, 10390 insertions(+) diff --git a/client/i18n/locales/chinese-traditional/intro.json b/client/i18n/locales/chinese-traditional/intro.json index f41138102cf..73171f14b6a 100644 --- a/client/i18n/locales/chinese-traditional/intro.json +++ b/client/i18n/locales/chinese-traditional/intro.json @@ -6085,6 +6085,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6210,6 +6300,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/chinese/intro.json b/client/i18n/locales/chinese/intro.json index 02d9946064e..8a72f090c28 100644 --- a/client/i18n/locales/chinese/intro.json +++ b/client/i18n/locales/chinese/intro.json @@ -6085,6 +6085,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6210,6 +6300,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/espanol/intro.json b/client/i18n/locales/espanol/intro.json index fe26aa97f2e..b1916e7816d 100644 --- a/client/i18n/locales/espanol/intro.json +++ b/client/i18n/locales/espanol/intro.json @@ -6099,6 +6099,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6224,6 +6314,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/german/intro.json b/client/i18n/locales/german/intro.json index 16e3d2e5d6b..0d55891a63f 100644 --- a/client/i18n/locales/german/intro.json +++ b/client/i18n/locales/german/intro.json @@ -6099,6 +6099,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6224,6 +6314,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/italian/intro.json b/client/i18n/locales/italian/intro.json index 2d7315a5618..2f030dc5973 100644 --- a/client/i18n/locales/italian/intro.json +++ b/client/i18n/locales/italian/intro.json @@ -6099,6 +6099,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6224,6 +6314,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/japanese/intro.json b/client/i18n/locales/japanese/intro.json index c1dfbccd1fa..8c0a93f68f7 100644 --- a/client/i18n/locales/japanese/intro.json +++ b/client/i18n/locales/japanese/intro.json @@ -6099,6 +6099,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6224,6 +6314,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/korean/intro.json b/client/i18n/locales/korean/intro.json index f8ab06b0fce..cec57cd0905 100644 --- a/client/i18n/locales/korean/intro.json +++ b/client/i18n/locales/korean/intro.json @@ -6099,6 +6099,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6224,6 +6314,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/portuguese/intro.json b/client/i18n/locales/portuguese/intro.json index faf7e6734c0..879eb7d5d59 100644 --- a/client/i18n/locales/portuguese/intro.json +++ b/client/i18n/locales/portuguese/intro.json @@ -6155,6 +6155,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "Certificação de Espanhol Profissional A1 (Beta)", "note": "Esta certificação está atualmente em desenvolvimento ativo. Embora não haja uma certificação disponível no momento, em breve haverá. Enquanto isso, você pode explorar os cursos que criamos abaixo.", @@ -6280,6 +6370,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "Certificação Profissional de Espanhol A2 (Beta)", "note": "Esta certificação está atualmente em desenvolvimento ativo. Embora não haja uma certificação disponível para esta seção no momento, uma estará disponível em breve. Enquanto isso, sinta-se à vontade para explorar os cursos que criamos abaixo.", diff --git a/client/i18n/locales/swahili/intro.json b/client/i18n/locales/swahili/intro.json index d71c5ac20e3..0e202c76878 100644 --- a/client/i18n/locales/swahili/intro.json +++ b/client/i18n/locales/swahili/intro.json @@ -6099,6 +6099,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6224,6 +6314,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "A2 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", diff --git a/client/i18n/locales/ukrainian/intro.json b/client/i18n/locales/ukrainian/intro.json index 02becc4530f..92bc35a516a 100644 --- a/client/i18n/locales/ukrainian/intro.json +++ b/client/i18n/locales/ukrainian/intro.json @@ -6083,6 +6083,96 @@ } } }, + "front-end-development-libraries-v9": { + "title": "Front End Development Libraries Certification", + "intro": [ + "This course teaches you the libraries that developers use to build webpages: React, TypeScript, and more.", + "To earn your Front End Development Libraries Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Front End Development Libraries Certification exam." + ], + "chapters": { + "front-end-development-libraries": "Front End Development Libraries" + }, + "modules": { + "front-end-development-libraries-certification-exam": "Front End Development Libraries Certification Exam" + }, + "blocks": { + "exam-front-end-development-libraries-certification": { + "title": "Front End Development Libraries Certification Exam", + "intro": [ + "Pass this exam to earn your Front End Development Libraries Certification" + ] + } + } + }, + "python-v9": { + "title": "Python Certification", + "intro": [ + "This course teaches you the fundamentals of Python programming.", + "To earn your Python Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Python Certification exam." + ], + "chapters": { + "python": "Python" + }, + "modules": { + "python-certification-exam": "Python Certification Exam" + }, + "blocks": { + "exam-python-certification": { + "title": "Python Certification Exam", + "intro": ["Pass this exam to earn your Python Certification"] + } + } + }, + "relational-databases-v9": { + "title": "Relational Databases Certification", + "intro": [ + "This course teaches you the fundamentals of relational databases.", + "To earn your Relational Databases Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Relational Databases Certification exam." + ], + "chapters": { + "relational-databases": "Relational Databases" + }, + "modules": { + "relational-databases-certification-exam": "Relational Databases Certification Exam" + }, + "blocks": { + "exam-relational-databases-certification": { + "title": "Relational Databases Certification Exam", + "intro": [ + "Pass this exam to earn your Relational Databases Certification" + ] + } + } + }, + "back-end-development-and-apis-v9": { + "title": "Back End Development and APIs Certification", + "intro": [ + "This course teaches you the fundamentals of back end development and APIs.", + "To earn your Back End Development and APIs Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Back End Development and APIs Certification exam." + ], + "chapters": { + "back-end-development-and-apis": "Back End Development and APIs" + }, + "modules": { + "back-end-development-and-apis-certification-exam": "Back End Development and APIs Certification Exam" + }, + "blocks": { + "exam-back-end-development-and-apis-certification": { + "title": "Back End Development and APIs Certification Exam", + "intro": [ + "Pass this exam to earn your Back End Development and APIs Certification" + ] + } + } + }, "a1-professional-spanish": { "title": "A1 Professional Spanish Certification (Beta)", "note": "This certification is currently in active development. While there isn't a claimable certification available for this section at the moment, one will be available soon. In the meantime, you're welcome to explore the courses we have created below.", @@ -6208,6 +6298,955 @@ } } }, + "responsive-web-design-v9": { + "title": "Responsive Web Design Certification", + "intro": [ + "This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.", + "To earn your Responsive Web Design Certification:", + "- Complete the five required projects to qualify for the certification exam.", + "- Pass the Responsive Web Design Certification exam." + ], + "chapters": { + "html": "HTML", + "css": "CSS", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "modules": { + "basic-html": "Basic HTML", + "semantic-html": "Semantic HTML", + "html-forms-and-tables": "Forms and Tables", + "html-and-accessibility": "Accessibility", + "review-html": "HTML Review", + "computer-basics": "Computer Basics", + "basic-css": "Basic CSS", + "design-for-developers": "Design", + "absolute-and-relative-units": "Absolute and Relative Units", + "pseudo-classes-and-elements": "Pseudo Classes and Elements", + "css-colors": "Colors", + "styling-forms": "Styling Forms", + "css-box-model": "The Box Model", + "css-flexbox": "Flexbox", + "css-typography": "Typography", + "css-and-accessibility": "Accessibility", + "attribute-selectors": "Attribute Selectors", + "css-positioning": "Positioning", + "responsive-design": "Responsive Design", + "css-variables": "Variables", + "css-grid": "Grid", + "css-animations": "Animations", + "review-css": "CSS Review", + "lab-survey-form": "Build a Survey Form", + "lab-page-of-playing-cards": "Build a Page of Playing Cards", + "lab-book-inventory-app": "Build a Book Inventory App", + "lab-technical-documentation-page": "Build a Technical Documentation Page", + "lab-product-landing-page": "Build a Product Landing Page", + "responsive-web-design-certification-exam": "Responsive Web Design Certification Exam" + }, + "blocks": { + "workshop-curriculum-outline": { + "title": "Build a Curriculum Outline", + "intro": [ + "Welcome to freeCodeCamp!", + "This workshop will serve as your introduction to HTML and coding in general. You will learn about headings and paragraph elements." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-working-with-forms": { + "title": "Working with Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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. " + ] + }, + "lecture-working-with-tables": { + "title": "Working with Tables", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-importance-of-accessibility-and-good-html-structure": { + "title": "Importance of Accessibility and Good HTML Structure", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lectures, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lectures, you will learn about working with ARIA roles." + ] + }, + "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." + ] + }, + "review-html": { + "title": "HTML Review", + "intro": [ + "Before you take the HTML prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility." + ] + }, + "qpra": { + "title": "30", + "intro": [] + }, + "lecture-understanding-computer-internet-and-tooling-basics": { + "title": "Understanding Computer, Internet, and Tooling Basics", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-what-is-css": { + "title": "What Is CSS?", + "intro": [ + "The following lectures 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 lectures, you will learn about CSS specificity, the common selectors and their specificities, the cascade algorithm, inheritance, and more." + ] + }, + "review-basic-css": { + "title": "Basic CSS 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": "Basic CSS 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 lectures, 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 lectures, 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." + ] + }, + "lecture-user-interface-design-fundamentals": { + "title": "User Interface Design Fundamentals", + "intro": [ + "In these lectures, 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 lectures, 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 lectures, 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." + ] + }, + "lecture-working-with-relative-and-absolute-units": { + "title": "Working with Relative and Absolute Units", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": { + "title": "Working with Pseudo-Classes and Pseudo-Elements in CSS", + "intro": [ + "In these lectures, 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 lectures, 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." + ] + }, + "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."] + }, + "lecture-working-with-colors-in-css": { + "title": "Working with Colors in CSS", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-styling-forms": { + "title": "Best Practices for Styling Forms", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "lecture-working-with-css-transforms-overflow-and-filters": { + "title": "Working with CSS Transforms, Overflow, and Filters", + "intro": [ + "In these lectures, 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." + ] + }, + "lecture-working-with-css-flexbox": { + "title": "Working with CSS Flexbox", + "intro": [ + "In these lectures, 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-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." + ] + }, + "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."] + }, + "lecture-working-with-css-fonts": { + "title": "Working with CSS Fonts", + "intro": [ + "In these lectures, 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."] + }, + "lecture-best-practices-for-accessibility-and-css": { + "title": "Best Practices for Accessibility and CSS", + "intro": [ + "In these lectures, 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." + ] + }, + "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 lectures, 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."] + }, + "lecture-working-with-attribute-selectors": { + "title": "Working with Attribute Selectors", + "intro": [ + "In these lectures, 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." + ] + }, + "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." + ] + }, + "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." + ] + }, + "lecture-best-practices-for-responsive-web-design": { + "title": "Best Practices for Responsive Web Design", + "intro": [ + "In these lectures, 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." + ] + }, + "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": [ + "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." + ] + }, + "lecture-working-with-css-variables": { + "title": "Working with CSS Variables", + "intro": [ + "In these lectures, 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."] + }, + "lecture-working-with-css-grid": { + "title": "Working with CSS Grid", + "intro": [ + "In these lectures, 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 lecture, 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": [ + "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."] + }, + "lecture-animations-and-accessibility": { + "title": "Animations and Accessibility", + "intro": [ + "In these lectures, 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."] + }, + "review-css": { + "title": "CSS Review", + "intro": [ + "Before you take the CSS prep exam, you first need to review the concepts taught in the previous modules.", + "Open up this page to review concepts around the basics of CSS, responsive web design, animations, accessibility and more." + ] + }, + "exam-responsive-web-design-certification": { + "title": "Responsive Web Design Certification Exam", + "intro": [ + "Pass this exam to earn your Responsive Web Design Certification Exam" + ] + } + } + }, "a2-professional-spanish": { "title": "Сертифікація «Іспанська мова A2 для роботи» (бета)", "note": "Сертифікація знаходиться в стані активної розробки. Наразі для цього розділу немає сертифіката, але він буде доступний найближчим часом. Тим часом ви можете дослідити курси, які ми вже створили.",