@@ -54,6 +52,8 @@ It may be tempting to use a specific heading element because of its styling, suc
Cat Photos
+Browse adorable cat pictures.
+div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4677,7 +4683,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4801,8 +4806,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6275,6 +6282,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6616,6 +6624,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7074,6 +7083,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7308,6 +7318,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7424,11 +7435,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7457,12 +7474,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7472,7 +7489,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7522,8 +7539,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7573,6 +7590,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/chinese-traditional/translations.json b/client/i18n/locales/chinese-traditional/translations.json
index 2e7da7f7718..b83bd8178a6 100644
--- a/client/i18n/locales/chinese-traditional/translations.json
+++ b/client/i18n/locales/chinese-traditional/translations.json
@@ -685,6 +685,7 @@
"lab": "實驗室",
"review": "複習",
"quiz": "測驗",
+ "cert-project": "Certification Project",
"exam": "考試",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "響應式 Web 設計",
- "responsive-web-design-cert": "響應式 Web 設計認證",
- "javascript-algorithms-and-data-structures": "舊版 JavaScript 算法和數據結構",
- "javascript-algorithms-and-data-structures-cert": "舊版 JavaScript 算法和數據結構認證",
- "javascript-algorithms-and-data-structures-v8": "JavaScript 算法和數據結構",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript 算法和數據結構認證",
- "front-end-development-libraries": "前端開發庫",
- "front-end-development-libraries-cert": "前端開發庫認證",
- "data-visualization": "數據可視化",
- "data-visualization-cert": "數據可視化認證",
- "relational-database-v8": "關係數據庫",
- "relational-database-v8-cert": "關係數據庫認證",
- "back-end-development-and-apis": "後端開發和 APIs",
- "back-end-development-and-apis-cert": "後端開發和 APIs 認證",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "質量保證",
"quality-assurance-v7-cert": "質量保證認證",
"scientific-computing-with-python-v7": "Python 科學計算",
@@ -1353,6 +1354,26 @@
"two-questions": "恭喜你已經走到了這一步。在你開始考試之前,請回答這兩個簡短的調研問題。"
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "探索我們的目錄",
diff --git a/client/i18n/locales/chinese/intro.json b/client/i18n/locales/chinese/intro.json
index 31475de202f..8d7e435c48a 100644
--- a/client/i18n/locales/chinese/intro.json
+++ b/client/i18n/locales/chinese/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "响应式网页设计",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"在响应式网页设计的认证课程中,你将学习用于构建网页的语言: HTML(超文本标记语言)用于创建内容,CSS(级联样式表)用于样式设计。",
"首先,你将通过创建一个展示猫咪图片的应用学习 HTML 和 CSS 的基本知识。 然后,通过创建一只企鹅来学习像 CSS 变量这样的现代技术,并通过创建网页表单学习无障碍的最佳实践。",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "(旧版)JavaScript 算法和数据结构",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"HTML 和 CSS 控制页面的内容和样式,JavaScript 则用于页面交互。在 JavaScript 算法和数据结构认证中,你将学习 JavaScript 的基础知识,包括变量、 数组、 对象、 循环和函数。",
"打好基础之后,你将会通过创建算法来操作字符串、进行阶乘运算甚至计算国际空间站的轨道来应用这些知识。",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"开发者使用 HTML 和 CSS 来控制页面的内容与样式。他们还使用 JavaScript 来让页面可以交互。",
"在这个 JavaScript 算法与数据结构认证中,你将学习如变量、数组、对象、循环、函数、DOM 等 JavaScript 的基础知识。",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "前端开发库",
+ "title": "Front End Development Libraries V8",
"intro": [
"你已经熟悉了 HTML、CSS 和 JavaScript。现在学习行业中一些流行的前端库来提升你的技能吧。",
"在前端开发库认证中,你将学习如何使用 Bootstrap 快速设置网站样式,以及如何在 CSS 样式中添加逻辑,并使用 Sass 对其进行扩展。",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "数据可视化",
+ "title": "Data Visualization V8",
"intro": [
"数据无处不在。但是,如果没有上下文,数据就没有多大意义。",
"在数据可视化认证中,你会用 D3.js 库来创建表格、图表和地图,以展示不同的数据。",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "关系数据库",
+ "title": "Relational Database V8",
"intro": [
"对于这些课程,你将使用真正的开发人员工具和软件,包括 VS Code、PostgreSQL 和 Linux/Unix 命令行来完成交互式教程和构建项目。",
"这些课程从基本的 Bash 命令开始。使用终端,你将学习从导航和操作文件系统、在 Bash 中编写脚本到高级用法的所有内容。",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "后端开发和 APIs",
+ "title": "Back End Development and APIs V8",
"intro": [
"在这之前,你只是在前端使用 JavaScript 来给页面添加交互、解决算法挑战,或构建一个 SPA(单页应用程序)。但 JavaScript 也可以用于后端或者服务器来构建整个 web 应用程序。",
"今天,构建应用软件的广受欢迎的方法之一是微服务,这些微服务是一种小型模块化的应用,能够共同形成一个更大的整体。",
@@ -2073,6 +2073,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4677,7 +4683,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4801,8 +4806,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6275,6 +6282,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6616,6 +6624,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7074,6 +7083,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7308,6 +7318,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7424,11 +7435,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7457,12 +7474,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7472,7 +7489,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7522,8 +7539,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7573,6 +7590,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/chinese/translations.json b/client/i18n/locales/chinese/translations.json
index 4dc68db4c2c..86b0474ce95 100644
--- a/client/i18n/locales/chinese/translations.json
+++ b/client/i18n/locales/chinese/translations.json
@@ -685,6 +685,7 @@
"lab": "实验室",
"review": "复习",
"quiz": "测验",
+ "cert-project": "Certification Project",
"exam": "考试",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "响应式 Web 设计",
- "responsive-web-design-cert": "响应式 Web 设计认证",
- "javascript-algorithms-and-data-structures": "旧版 JavaScript 算法和数据结构",
- "javascript-algorithms-and-data-structures-cert": "旧版 JavaScript 算法和数据结构认证",
- "javascript-algorithms-and-data-structures-v8": "JavaScript 算法和数据结构",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript 算法和数据结构认证",
- "front-end-development-libraries": "前端开发库",
- "front-end-development-libraries-cert": "前端开发库认证",
- "data-visualization": "数据可视化",
- "data-visualization-cert": "数据可视化认证",
- "relational-database-v8": "关系数据库",
- "relational-database-v8-cert": "关系数据库认证",
- "back-end-development-and-apis": "后端开发和 APIs",
- "back-end-development-and-apis-cert": "后端开发和 APIs 认证",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "质量保证",
"quality-assurance-v7-cert": "质量保证认证",
"scientific-computing-with-python-v7": "Python 科学计算",
@@ -1353,6 +1354,26 @@
"two-questions": "恭喜你已经走到了这一步。在你开始考试之前,请回答这两个简短的调研问题。"
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "探索我们的目录",
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index e04ac52112a..424e3b3a624 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -1394,7 +1394,7 @@
}
},
"a2-english-for-developers": {
- "title": "A2 English for Developers (Beta) Certification",
+ "title": "A2 English for Developers Certification",
"intro": [
"In this English for Developers Curriculum, you'll learn the essentials of English communication. This will follow the A2 level of the Common European Framework of Reference (CEFR). And we've focused on vocabulary that is particularly useful for developers.",
"The first half of the curriculum will help you get comfortable with English grammar and usage. It will give you tons of hands-on practice. You'll learn basics like introducing yourself, making small talk, and discussing your work.",
@@ -2372,7 +2372,10 @@
"Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility."
]
},
- "qpra": { "title": "30", "intro": [] },
+ "qpra": {
+ "title": "30",
+ "intro": []
+ },
"lecture-understanding-computer-internet-and-tooling-basics": {
"title": "Understanding Computer, Internet, and Tooling Basics",
"intro": [
@@ -4170,7 +4173,10 @@
"Open up this page to review all of the concepts taught including variables, strings, booleans, functions, objects, arrays, debugging, working with the DOM and more."
]
},
- "kagw": { "title": "258", "intro": [] },
+ "kagw": {
+ "title": "258",
+ "intro": []
+ },
"lecture-introduction-to-javascript-libraries-and-frameworks": {
"title": "Introduction to JavaScript Libraries and Frameworks",
"intro": [
@@ -4443,11 +4449,26 @@
"In this lesson, you will learn about TypeScript configuration files and how to use them."
]
},
- "trvf": { "title": "293", "intro": [] },
- "kwmg": { "title": "294", "intro": [] },
- "nodx": { "title": "295", "intro": [] },
- "erfj": { "title": "296", "intro": [] },
- "muyw": { "title": "297", "intro": [] },
+ "trvf": {
+ "title": "293",
+ "intro": []
+ },
+ "kwmg": {
+ "title": "294",
+ "intro": []
+ },
+ "nodx": {
+ "title": "295",
+ "intro": []
+ },
+ "erfj": {
+ "title": "296",
+ "intro": []
+ },
+ "muyw": {
+ "title": "297",
+ "intro": []
+ },
"review-typescript": {
"title": "Typescript Review",
"intro": [
@@ -4465,8 +4486,14 @@
"Review the Front End Libraries concepts to prepare for the upcoming quiz."
]
},
- "rdzk": { "title": "301", "intro": [] },
- "vtpz": { "title": "302", "intro": [] },
+ "rdzk": {
+ "title": "301",
+ "intro": []
+ },
+ "vtpz": {
+ "title": "302",
+ "intro": []
+ },
"lecture-introduction-to-python": {
"title": "Introduction to Python",
"intro": [
@@ -5198,6 +5225,12 @@
"In this lecture you will learn how to format strings by changing their case using toUpperCase() and toLowerCase() methods, and how to remove whitespace using trim(), trimStart(), and trimEnd() methods."
]
},
+ "workshop-string-formatter": {
+ "title": "Build a String Formatter",
+ "intro": [
+ "In this workshop, you will practice working with various string methods including trim(), toUpperCase() and toLowerCase()."
+ ]
+ },
"lecture-working-with-string-modification-methods": {
"title": "Working with String Modification Methods",
"intro": [
@@ -5227,12 +5260,26 @@
"In these lectures you will learn about the number type, arithmetic operators, and using them with numbers and strings."
]
},
+ "lab-debug-type-coercion-errors": {
+ "title": "Debug Type Coercion Errors in a Buggy App",
+ "intro": [
+ "In this lab, you will be working with a buggy app that contains several type coercion errors.",
+ "Your task is to identify and fix these errors to ensure the app functions correctly."
+ ]
+ },
"lecture-working-with-operator-behavior": {
"title": "Working with Operator Behavior",
"intro": [
"In these lectures you will learn about operator precedence, the increment and decrement operators, and compound assignment operators."
]
},
+ "lab-debug-increment-and-decrement-operator-errors": {
+ "title": "Debug Increment and Decrement Operator Errors in a Buggy App",
+ "intro": [
+ "In this lab, you'll debug an app that has several errors related to the increment and decrement operators.",
+ "Your task is to identify and fix the errors so that the app works as intended."
+ ]
+ },
"lecture-working-with-comparison-and-boolean-operators": {
"title": "Working with Comparison and Boolean Operators",
"intro": [
@@ -6283,6 +6330,8 @@
"modules": {
"react-fundamentals": "React Fundamentals",
"react-state-hooks-and-routing": "React State, Hooks, and Routing",
+ "lab-currency-converter": "Build a Currency Converter",
+ "lab-tic-tac-toe": "Build a Tic-Tac-Toe Game",
"performance": "Performance",
"testing": "Testing",
"css-libraries-and-frameworks": "CSS Libraries and Frameworks",
@@ -6626,11 +6675,16 @@
"python-basics": "Python Basics",
"python-loops-and-sequences": "Loops and Sequences",
"python-dictionaries-and-sets": "Dictionaries and Sets",
+ "lab-user-configuration-manager": "Build a User Configuration Manager",
"python-error-handling": "Error Handling",
"python-classes-and-objects": "Classes and Objects",
+ "lab-budget-app": "Build a Budget App",
"python-object-oriented-programming": "Object-Oriented Programming (OOP)",
+ "lab-polygon-area-calculator": "Build a Polygon Area Calculator",
"python-linear-data-structures": "Linear Data Structures",
+ "lab-hash-table": "Build a Hash Table",
"python-algorithms": "Algorithms",
+ "lab-tower-of-hanoi": "Implement the Tower of Hanoi Algorithm",
"python-graphs-and-trees": "Graphs and Trees",
"python-dynamic-programming": "Dynamic Programming",
"review-python": "Python Review",
@@ -6879,6 +6933,12 @@
"title": "Understanding Abstraction",
"intro": ["Learn about Understanding Abstraction in these lessons."]
},
+ "workshop-discount-calculator": {
+ "title": "Build a Discount Calculator",
+ "intro": [
+ "In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
+ ]
+ },
"lab-player-interface": {
"title": "Build a Player Interface",
"intro": [
@@ -6998,6 +7058,12 @@
"In this lesson, you will learn about fundamental data structures like graphs, trees, and their practical applications in computer science."
]
},
+ "workshop-shortest-path-algorithm": {
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement an algorithm to find the shortest path between two nodes in a graph."
+ ]
+ },
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
"intro": [
@@ -7531,8 +7597,14 @@
"title": "Introducing Yourself Basics",
"intro": ["", ""]
},
- "es-a1-learn-meet-luna": { "title": "Meet Luna", "intro": ["", ""] },
- "es-a1-learn-meet-mateo": { "title": "Meet Mateo", "intro": ["", ""] },
+ "es-a1-learn-meet-luna": {
+ "title": "Meet Luna",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-meet-mateo": {
+ "title": "Meet Mateo",
+ "intro": ["", ""]
+ },
"es-a1-learn-meet-julieta": {
"title": "Meet Julieta",
"intro": ["", ""]
@@ -7686,6 +7758,12 @@
"In these lectures, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -7772,6 +7850,12 @@
"In these lectures, you will learn when you should use certain semantic elements like the em element over the i element, description lists, and more."
]
},
+ "workshop-major-browsers-list": {
+ "title": "Build a List of Major Web Browsers",
+ "intro": [
+ "In this workshop, you will build a description list and work with the dl, dt, and dd elements."
+ ]
+ },
"lecture-working-with-text-and-time-semantic-elements": {
"title": "Working with Text and Time Semantic Elements ",
"intro": [
@@ -7959,7 +8043,10 @@
"Open up this page to review concepts around the basics of HTML elements, semantic HTML, tables, forms and accessibility."
]
},
- "qpra": { "title": "30", "intro": [] },
+ "qpra": {
+ "title": "30",
+ "intro": []
+ },
"lecture-understanding-computer-internet-and-tooling-basics": {
"title": "Understanding Computer, Internet, and Tooling Basics",
"intro": [
@@ -8685,7 +8772,10 @@
"title": "Single Finals",
"intro": ["", ""]
},
- "zh-a1-learn-initials": { "title": "Initials", "intro": ["", ""] },
+ "zh-a1-learn-initials": {
+ "title": "Initials",
+ "intro": ["", ""]
+ },
"zh-a1-learn-compound-finals": {
"title": "Compound Finals",
"intro": ["", ""]
@@ -8736,12 +8826,18 @@
"title": "Introducing Others Basics",
"intro": ["", ""]
},
- "zh-a1-learn-the-team": { "title": "The Team", "intro": ["", ""] },
+ "zh-a1-learn-the-team": {
+ "title": "The Team",
+ "intro": ["", ""]
+ },
"zh-a1-learn-a-new-colleague": {
"title": "A New Colleague",
"intro": ["", ""]
},
- "zh-a1-learn-my-family": { "title": "My Family", "intro": ["", ""] },
+ "zh-a1-learn-my-family": {
+ "title": "My Family",
+ "intro": ["", ""]
+ },
"zh-a1-practice-introducing-others": {
"title": "Introducing Others Practice",
"intro": ["", ""]
@@ -8904,7 +9000,9 @@
"part-12": "Containers",
"part-13": "Using Relational Databases"
},
- "modules": { "basic-html": "Basic HTML" },
+ "modules": {
+ "basic-html": "Basic HTML"
+ },
"module-intros": {
"basic-html": {
"title": "Basic HTML",
@@ -8917,7 +9015,9 @@
"daily-coding-challenge": {
"title": "Daily Coding Challenge",
"blocks": {
- "daily-coding-challenge": { "title": "Daily Coding Challenge" }
+ "daily-coding-challenge": {
+ "title": "Daily Coding Challenge"
+ }
}
},
"misc-text": {
diff --git a/client/i18n/locales/espanol/intro.json b/client/i18n/locales/espanol/intro.json
index f7900b1453d..ac51e11d597 100644
--- a/client/i18n/locales/espanol/intro.json
+++ b/client/i18n/locales/espanol/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Diseño Web Responsivo",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"En esta certificación de Diseño Web Adaptativo, aprenderás los lenguajes que los desarrolladores usan para construir páginas web: HTML (Lenguaje de Marcado de Hipertexto) para el contenido, y CSS (hojas de estilo en cascada) para el diseño.",
"Primero, crearás una aplicación de fotos de gatos para aprender los conceptos básicos de HTML y CSS. Más adelante, aprenderás técnicas modernas como variables CSS, mediante la construcción de un pingüino, y las mejores prácticas para la accesibilidad mediante la construcción de un sitio de cuestionarios.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Algortimos JavaScript y Estructuras de Datos",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"Mientras HTML y CSS controlan el contenido y el estilo de una página, JavaScript se utiliza para hacerlo interactivo. En la certificación Algoritmos de JavaScript y Estructuras de Datos, aprenderás los fundamentos de JavaScript incluyendo variables, arreglos, objetos, bucles y funciones.",
"Una vez que tengas los fundamentos, aplicarás ese conocimiento creando algoritmos para manipular cadenas, factorizar números e incluso calcular la órbita de la Estación Espacial Internacional.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "Algoritmos y estructuras de datos de JavaScript",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Los desarrolladores usan HTML y CSS para controlar el contenido y estilo de una página. También usan JavaScript para hacer interactiva la página.",
"En esta certificación de Algoritmos de JavaScript y Estructura de Datos, aprenderas los fundamentos de JavaScript, como variables, arreglos, objetos, bucles, funciones, DOM y mucho más.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Librerías de desarrollo de la interfaz",
+ "title": "Front End Development Libraries V8",
"intro": [
"Ahora que estás familiarizado con HTML, CSS y JavaScript, mejora tus habilidades aprendiendo algunas de las librerías de interfaz más populares en la industria.",
"En la certificación de bibliotecas de desarrollo front-end, aprenderá cómo diseñar su sitio rápidamente con Bootstrap. También aprenderá cómo agregar lógica a sus estilos CSS y extenderlos con Sass.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Visualización de Datos",
+ "title": "Data Visualization V8",
"intro": [
"Los datos están a nuestro alrededor, pero no significan mucho si no tienen forma o contexto.",
"En la certificación Visualización de Datos, construirás diagramas, gráficos, y mapas para presentar diferentes tipos de datos utilizando la biblioteca D3.js.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Base de datos Relacionales",
+ "title": "Relational Database V8",
"intro": [
"Para estos cursos, usarás herramientas reales de desarrollador y software incluyendo código VS, PostgreSQL, y la línea de comandos Linux / Unix para completar tutoriales interactivos y construir proyectos.",
"Estos cursos empiezan con comandos básicos de Base. Utilizando la terminal, aprenderá todo, desde navegar y manipular un sistema de archivos, programar en Bash, hasta el uso avanzado.",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "Desarrollo Back End y APIs",
+ "title": "Back End Development and APIs V8",
"intro": [
"Hasta este punto, solo has usado JavaScript en la parte de front-end para agregar interactividad a una página, resolver los desafíos de algoritmos o construir un SPA. Pero JavaScript también se puede utilizar en el back-end, o servidor, para construir aplicaciones web completas.",
"Hoy en día, una de las formas populares para construir aplicaciones es a través de microservicios, que son pequeñas aplicaciones modulares que trabajan juntas para formar una aplicación más grande.",
@@ -2087,6 +2087,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4691,7 +4697,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4815,8 +4820,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6289,6 +6296,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6630,6 +6638,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7088,6 +7097,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7322,6 +7332,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7438,11 +7449,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7471,12 +7488,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7486,7 +7503,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7536,8 +7553,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7587,6 +7604,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/espanol/translations.json b/client/i18n/locales/espanol/translations.json
index d5690ea3ed0..41115ee99eb 100644
--- a/client/i18n/locales/espanol/translations.json
+++ b/client/i18n/locales/espanol/translations.json
@@ -685,6 +685,7 @@
"lab": "Lab",
"review": "Review",
"quiz": "Quiz",
+ "cert-project": "Certification Project",
"exam": "Exam",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Responsive Web Design",
- "responsive-web-design-cert": "Responsive Web Design Certification",
- "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures Certification",
- "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript Algorithms and Data Structures Certification",
- "front-end-development-libraries": "Front End Development Libraries",
- "front-end-development-libraries-cert": "Front End Development Libraries Certification",
- "data-visualization": "Data Visualization",
- "data-visualization-cert": "Data Visualization Certification",
- "relational-database-v8": "Relational Database",
- "relational-database-v8-cert": "Relational Database Certification",
- "back-end-development-and-apis": "Back End Development and APIs",
- "back-end-development-and-apis-cert": "Back End Development and APIs Certification",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Quality Assurance",
"quality-assurance-v7-cert": "Quality Assurance Certification",
"scientific-computing-with-python-v7": "Scientific Computing with Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Felicidades por llegar así de lejos. Antes que comiences el examen, por favor responda estas dos preguntas cómo una encuesta."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore our Catalog",
diff --git a/client/i18n/locales/german/intro.json b/client/i18n/locales/german/intro.json
index 819985da533..736963b8c8e 100644
--- a/client/i18n/locales/german/intro.json
+++ b/client/i18n/locales/german/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Responsive Webdesign",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"In dieser Zertifizierung für responsives Webdesign lernst du die Sprachen, die Entwickler/innen zum Erstellen von Webseiten verwenden: HTML (Hypertext Markup Language) für den Inhalt und CSS (Cascading Style Sheets) für das Design.",
"Zunächst baust du eine Katzenfoto-App, um die Grundlagen von HTML und CSS zu erlernen. Später lernst du moderne Techniken wie CSS-Variablen, indem du einen Pinguin baust, und bewährte Praktiken für Barrierefreiheit, indem du eine Quiz-Site erstellst.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Legacy JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"Während HTML und CSS den Inhalt und das Styling einer Seite festlegen, wird JavaScript verwendet, um sie interaktiv zu gestalten. In der Zertifizierung \"JavaScript Algorithmen und Datenstrukturen\" lernst du die Grundlagen von JavaScript inklusive Variablen, Arrays, Objekten, Schleifen und Funktionen kennen.",
"Sobald du die Grundlagen beherrschst, wendest du dieses Wissen an, indem du Algorithmen erstellst, um Strings zu manipulieren, Zahlen zu faktorisieren und sogar die Umlaufbahn der Internationalen Raumstation zu berechnen.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "JavaScript-Algorithmen und Datenstrukturen",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Entwickler verwenden HTML und CSS um den Inhalt und das Styling einer Seite zu kontrollieren. Und sie verwenden JavaScript, um diese Seite interaktiv zu gestalten.",
"In this JavaScript Algorithm and Data Structures Certification, you'll learn the JavaScript fundamentals like variables, arrays, objects, loops, functions, the DOM and more.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Front-End-Entwicklungsbibliotheken",
+ "title": "Front End Development Libraries V8",
"intro": [
"Jetzt, wo du mit HTML, CSS und JavaScript vertraut bist, kannst du deine Fähigkeiten verbessern, indem du einige der beliebtesten Front-End-Bibliotheken der Branche lernst.",
"In der Zertifizierung für Front-End-Entwicklungsbibliotheken lernst du, wie du deine Seite mit Bootstrap schnell gestalten kannst. Du lernst auch, wie du Logik zu deinen CSS-Styles hinzufügen und sie mit Sass erweitern kannst.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Datenvisualisierung",
+ "title": "Data Visualization V8",
"intro": [
"Daten sind überall um uns herum, aber ohne Form und Kontext bedeuten sie nicht viel.",
"In der Datenvisualisierung-Zertifizierung erstellst du Diagramme, Grafiken und Karten, um verschiedene Arten von Daten mit der D3.js Bibliothek zu präsentieren.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Relational Database",
+ "title": "Relational Database V8",
"intro": [
"In diesen Kursen verwendest du echte Entwickler-Tools und Software wie VS Code, PostgreSQL und die Linux/Unix-Kommandozeile, um interaktive Tutorials zu absolvieren und Projekte zu erstellen.",
"Diese Kurse beginnen mit den grundlegenden Bash-Befehlen. Über das Terminal lernst du alles von der Navigation und dem Umgang mit dem Dateisystem über das Skripting in der Bash bis hin zur fortgeschrittenen Nutzung.",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "Back-End Entwicklung und APIs",
+ "title": "Back End Development and APIs V8",
"intro": [
"Bis zu diesem Punkt hast du JavaScript nur im Front-End verwendet, um einer Seite Interaktivität hinzuzufügen, Aufgaben mit Algorithmen zu lösen oder eine SPA zu bauen. Aber JavaScript kann auch im Back-End, also auf dem Server, verwendet werden, um ganze Webanwendungen zu erstellen.",
"Heutzutage ist eine der beliebtesten Arten, Anwendungen zu erstellen, Microservices. Das sind kleine, modulare Anwendungen, die zusammenarbeiten und ein größeres Ganzes bilden.",
@@ -2087,6 +2087,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4691,7 +4697,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4815,8 +4820,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6289,6 +6296,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6630,6 +6638,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7088,6 +7097,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7322,6 +7332,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7438,11 +7449,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7471,12 +7488,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7486,7 +7503,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7536,8 +7553,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7587,6 +7604,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/german/translations.json b/client/i18n/locales/german/translations.json
index 9165ae3dc46..b2f63a7fa9c 100644
--- a/client/i18n/locales/german/translations.json
+++ b/client/i18n/locales/german/translations.json
@@ -685,6 +685,7 @@
"lab": "Lab",
"review": "Review",
"quiz": "Quiz",
+ "cert-project": "Certification Project",
"exam": "Exam",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Responsive Web Design",
- "responsive-web-design-cert": "Responsive Web Design Certification",
- "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures Certification",
- "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript Algorithms and Data Structures Certification",
- "front-end-development-libraries": "Front End Development Libraries",
- "front-end-development-libraries-cert": "Front End Development Libraries Certification",
- "data-visualization": "Data Visualization",
- "data-visualization-cert": "Data Visualization Certification",
- "relational-database-v8": "Relational Database",
- "relational-database-v8-cert": "Relational Database Certification",
- "back-end-development-and-apis": "Back End Development and APIs",
- "back-end-development-and-apis-cert": "Back End Development and APIs Certification",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Quality Assurance",
"quality-assurance-v7-cert": "Quality Assurance Certification",
"scientific-computing-with-python-v7": "Scientific Computing with Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Congratulations on getting this far. Before you can start the exam, please answer these two short survey questions."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore our Catalog",
diff --git a/client/i18n/locales/italian/intro.json b/client/i18n/locales/italian/intro.json
index b18e9dd0706..c4ac763bb76 100644
--- a/client/i18n/locales/italian/intro.json
+++ b/client/i18n/locales/italian/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Web Design Responsivo",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"In questo corso certificato di Web Design Responsivo imparerai i linguaggi che gli sviluppatori utilizzano per creare le pagine web. HTML (Hypertext Markup Language) per i contenuti e CSS (Cascading Style Sheets) per il design.",
"Per prima cosa, costruirai un'app con foto di gatti per imparare le basi di HTML e CSS. Poi apprenderai tecniche più moderne come le variabili in CSS costruendo un pinguino, e le migliori pratiche per l'accessibilità costruendo un quiz.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Legacy JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"Mentre HTML e CSS controllano il contenuto e lo stile della pagina, JavaScript viene utilizzato per renderla interattiva. Nella Certificazione Algoritmi e Strutture Dati in JavaScript, imparerai le basi di JavaScript, tra cui variabili, array, oggetti, loop e funzioni.",
"Una volta che avrai appreso le basi, applicherai queste conoscenze creando algoritmi per manipolare stringhe, fattorizzare numeri, e persino calcolare l'orbita della Stazione Spaziale Internazionale.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Developers use HTML and CSS to control the content and styling of a page. And they use JavaScript to make that page interactive.",
"Nella certificazione JavaScript Algoritmi e Strutture di Dati, imparerai i fondamenti di JavaScript come variabili, array, oggetti, loop, funzioni, il DOM e altro ancora.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Librerie di sviluppo Front End",
+ "title": "Front End Development Libraries V8",
"intro": [
"Ora che hai familiarità con HTML, CSS, e JavaScript, aumenta le tue competenze conoscendo alcune delle più popolari librerie di front-end del settore.",
"Nella Certificazione Librerie di Sviluppo Front End, imparerai come definire rapidamente lo stile del tuo sito con Bootstrap. Imparerai anche come aggiungere la logica ai tuoi stili CSS e ad estenderli con Sass.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Data Visualization",
+ "title": "Data Visualization V8",
"intro": [
"I dati ci circondano, ma non ci dicono molto senza forma o contesto.",
"Nella Certificazione Visualizzazione dei Dati, costruirai diagrammi, grafici e mappe per presentare diversi tipi di dati con la libreria D3.js.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Database Relazionali",
+ "title": "Relational Database V8",
"intro": [
"Per questi corsi, userai veri strumenti e software da sviluppatori inclusi VSCode, PostgreSQL, e la riga di comando Linux / Unix per completare i tutorial interattivi e creare progetti.",
"Questi corsi iniziano con comandi Bash di base. Usando il terminale imparerai tutto da navigare e manipolare il sistema dei file, creare script in bash, tutto quanto fino all'uso avanzato.",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "Sviluppo Back End e API",
+ "title": "Back End Development and APIs V8",
"intro": [
"Fino a questo punto, hai usato solo JavaScript sul front-end per aggiungere interattività a una pagina, risolvere sfide algoritmiche o costruire una Single Page Application. Ma JavaScript può essere utilizzato anche nel backend (cioè lato server), per costruire intere applicazioni web.",
"Oggi, uno dei modi più popolari per costruire applicazioni è attraverso i microservizi, che sono piccole applicazioni modulari che lavorano insieme per formare qualcosa di più grande.",
@@ -2087,6 +2087,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4691,7 +4697,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4815,8 +4820,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6289,6 +6296,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6630,6 +6638,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7088,6 +7097,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7322,6 +7332,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7438,11 +7449,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7471,12 +7488,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7486,7 +7503,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7536,8 +7553,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7587,6 +7604,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/italian/translations.json b/client/i18n/locales/italian/translations.json
index 53b11671bd0..d35820f863e 100644
--- a/client/i18n/locales/italian/translations.json
+++ b/client/i18n/locales/italian/translations.json
@@ -685,6 +685,7 @@
"lab": "Lab",
"review": "Review",
"quiz": "Quiz",
+ "cert-project": "Certification Project",
"exam": "Exam",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Responsive Web Design",
- "responsive-web-design-cert": "Responsive Web Design Certification",
- "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures Certification",
- "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript Algorithms and Data Structures Certification",
- "front-end-development-libraries": "Front End Development Libraries",
- "front-end-development-libraries-cert": "Front End Development Libraries Certification",
- "data-visualization": "Data Visualization",
- "data-visualization-cert": "Data Visualization Certification",
- "relational-database-v8": "Relational Database",
- "relational-database-v8-cert": "Relational Database Certification",
- "back-end-development-and-apis": "Back End Development and APIs",
- "back-end-development-and-apis-cert": "Back End Development and APIs Certification",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Quality Assurance",
"quality-assurance-v7-cert": "Quality Assurance Certification",
"scientific-computing-with-python-v7": "Scientific Computing with Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Congratulazioni per essere arrivato fin qui. Prima di iniziare l'esame, per favore rispondi a queste due brevi domande."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore our Catalog",
diff --git a/client/i18n/locales/japanese/intro.json b/client/i18n/locales/japanese/intro.json
index 5179d30fb77..a2c67938395 100644
--- a/client/i18n/locales/japanese/intro.json
+++ b/client/i18n/locales/japanese/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "レスポンシブウェブデザイン",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"このレスポンシブウェブデザイン認定講座では、開発者がウェブページを実装するために使う言語について学びます。ページの内容には HTML (Hypertext Markup Language)、デザインには CSS (Cascading Style Sheets) を使用します。",
"初めに、HTML と CSS の基礎を学ぶために、猫の写真アプリを作ります。その後、ペンギンの絵を作りながら CSS 変数等のモダンなテクニックを学びます。そしてクイズサイトを作りながらアクセシビリティのベストプラクティスを学びます。",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "(レガシー) JavaScript アルゴリズムとデータ構造",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"HTML と CSS はページの内容とスタイルを制御しますが、JavaScript はそれを対話式にすることを手掛けます。JavaScript アルゴリズムとデータ構造認定講座では、変数、配列、オブジェクト、ループ、そして関数を含む JavaScript の基礎を学習します。",
"いったん基礎を習得すれば、その知識を応用して文字列を扱うためのアルゴリズムを作成したり、数の階乗を計算したり、さらに国際宇宙ステーションの軌道を計算することもできます。",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Developers use HTML and CSS to control the content and styling of a page. And they use JavaScript to make that page interactive.",
"In this JavaScript Algorithm and Data Structures Certification, you'll learn the JavaScript fundamentals like variables, arrays, objects, loops, functions, the DOM and more.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "フロントエンド開発ライブラリ",
+ "title": "Front End Development Libraries V8",
"intro": [
"今やあなたは HTML、CSS、そして JavaScript に精通しているので、業界内で最も一般的なフロントエンドライブラリのいくつかを学習することで技能を向上させましょう。",
"フロントエンド開発ライブラリ認定講座では、Bootstrap でサイトを手軽に整える方法を学習します。Sass を利用して、CSS スタイルに論理的な処理を加えて拡張する方法についても学習します。",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "データ可視化",
+ "title": "Data Visualization V8",
"intro": [
"データは至る所にありますが、形状と文脈なしではあまり意味を表しません。",
"データ可視化認定講座では、D3.js ライブラリを使用して、様々な種類のデータを表すチャート、グラフ、およびマップを構築します。",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "リレーショナルデータベース",
+ "title": "Relational Database V8",
"intro": [
"このコースでは、VS Code、PostgreSQL、そして Linux / Unix コマンドラインを含む本格的な開発者ツールとソフトウェアを使用して、インタラクティブなチュートリアルを完了し、プロジェクトを構築します。",
"これらのコースは基本的な Bash コマンドから始まります。ターミナルを使用して、ファイルシステムの移動や操作から、Bash 内でのスクリプト、幅広い高度な使用法まで、すべてを学習します。",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "バックエンド開発と API",
+ "title": "Back End Development and APIs V8",
"intro": [
"ここまでは、JavaScript をフロントエンドで使用して、ページに対話性を加えたり、アルゴリズムチャレンジを解決したり、SPA を構築したりしてきました。しかし JavaScript は、バックエンド (サーバー) でも使用でき、ウェブアプリケーション全体を構築することができます。",
"現在、アプリケーションを構築する一般的な方法の一つはマイクロサービスを使用する方法です。これは、小さなモジュール式のアプリケーションを組み合わせて、より大きな全体を形成する方法です。",
@@ -2087,6 +2087,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4691,7 +4697,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4815,8 +4820,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6289,6 +6296,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6630,6 +6638,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7088,6 +7097,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7322,6 +7332,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7438,11 +7449,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7471,12 +7488,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7486,7 +7503,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7536,8 +7553,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7587,6 +7604,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/japanese/translations.json b/client/i18n/locales/japanese/translations.json
index 76779f9e813..0e727ef78e7 100644
--- a/client/i18n/locales/japanese/translations.json
+++ b/client/i18n/locales/japanese/translations.json
@@ -685,6 +685,7 @@
"lab": "ラボ",
"review": "復習",
"quiz": "クイズ",
+ "cert-project": "Certification Project",
"exam": "試験",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "レスポンシブウェブデザイン",
- "responsive-web-design-cert": "レスポンシブウェブデザイン認定証",
- "javascript-algorithms-and-data-structures": "旧 JavaScript アルゴリズムとデータ構造",
- "javascript-algorithms-and-data-structures-cert": "旧 JavaScript アルゴリズムとデータ構造認定証",
- "javascript-algorithms-and-data-structures-v8": "JavaScript アルゴリズムとデータ構造",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript アルゴリズムとデータ構造認定証",
- "front-end-development-libraries": "フロントエンド開発ライブラリ",
- "front-end-development-libraries-cert": "フロントエンド開発ライブラリ認定証",
- "data-visualization": "データ可視化",
- "data-visualization-cert": "データ可視化認定証",
- "relational-database-v8": "リレーショナルデータベース",
- "relational-database-v8-cert": "リレーショナルデータベース認定証",
- "back-end-development-and-apis": "バックエンド開発と API",
- "back-end-development-and-apis-cert": "バックエンド開発と API 認定証",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "品質保証",
"quality-assurance-v7-cert": "品質保証認定証",
"scientific-computing-with-python-v7": "Python を用いた科学計算",
@@ -1353,6 +1354,26 @@
"two-questions": "ここまでのコースの完了、おめでとうございます。試験を始める前に、こちらのアンケートにご協力ください。(2 問)"
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore our Catalog",
diff --git a/client/i18n/locales/korean/intro.json b/client/i18n/locales/korean/intro.json
index bab21a7890d..1f083a14220 100644
--- a/client/i18n/locales/korean/intro.json
+++ b/client/i18n/locales/korean/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Responsive Web Design",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
"First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a quiz site.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Legacy JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
"Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Developers use HTML and CSS to control the content and styling of a page. And they use JavaScript to make that page interactive.",
"In this JavaScript Algorithm and Data Structures Certification, you'll learn the JavaScript fundamentals like variables, arrays, objects, loops, functions, the DOM and more.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Front End Development Libraries",
+ "title": "Front End Development Libraries V8",
"intro": [
"Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
"In the Front End Development Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how to add logic to your CSS styles and extend them with Sass.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Data Visualization",
+ "title": "Data Visualization V8",
"intro": [
"Data is all around us, but it doesn't mean much without shape or context.",
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Relational Database",
+ "title": "Relational Database V8",
"intro": [
"For these courses, you will use real developer tools and software including VS Code, PostgreSQL, and the Linux / Unix command line to complete interactive tutorials and build projects.",
"These courses start off with basic Bash commands. Using the terminal, you will learn everything from navigating and manipulating a file system, scripting in Bash, all the way to advanced usage.",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "Back End Development and APIs",
+ "title": "Back End Development and APIs V8",
"intro": [
"Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
"Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@@ -2087,6 +2087,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4691,7 +4697,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4815,8 +4820,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6289,6 +6296,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6630,6 +6638,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7088,6 +7097,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7322,6 +7332,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7438,11 +7449,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7471,12 +7488,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7486,7 +7503,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7536,8 +7553,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7587,6 +7604,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/korean/translations.json b/client/i18n/locales/korean/translations.json
index d0473bb08bc..d02b1e796a1 100644
--- a/client/i18n/locales/korean/translations.json
+++ b/client/i18n/locales/korean/translations.json
@@ -685,6 +685,7 @@
"lab": "Lab",
"review": "Review",
"quiz": "Quiz",
+ "cert-project": "Certification Project",
"exam": "Exam",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Responsive Web Design",
- "responsive-web-design-cert": "Responsive Web Design Certification",
- "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures Certification",
- "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript Algorithms and Data Structures Certification",
- "front-end-development-libraries": "Front End Development Libraries",
- "front-end-development-libraries-cert": "Front End Development Libraries Certification",
- "data-visualization": "Data Visualization",
- "data-visualization-cert": "Data Visualization Certification",
- "relational-database-v8": "Relational Database",
- "relational-database-v8-cert": "Relational Database Certification",
- "back-end-development-and-apis": "Back End Development and APIs",
- "back-end-development-and-apis-cert": "Back End Development and APIs Certification",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Quality Assurance",
"quality-assurance-v7-cert": "Quality Assurance Certification",
"scientific-computing-with-python-v7": "Scientific Computing with Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Congratulations on getting this far. Before you can start the exam, please answer these two short survey questions."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore our Catalog",
diff --git a/client/i18n/locales/portuguese/intro.json b/client/i18n/locales/portuguese/intro.json
index 9e31001e26e..3fca6cebf48 100644
--- a/client/i18n/locales/portuguese/intro.json
+++ b/client/i18n/locales/portuguese/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Design responsivo para a web",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"Nessa certificação de Design responsivo para a web, você aprenderá as linguagens que os desenvolvedores usam para construir sites: HTML (Linguagem de Marcação de Hipertexto) para o conteúdo e CSS (Folha de Estilo em Cascata) para o design.",
"Primeiro, você vai construir um aplicativo de fotos de gato para aprender o básico de HTML e CSS. Mais tarde, você aprenderá técnicas modernas como variáveis CSS construindo um pinguim, e melhores práticas de acessibilidade criando um site de questionário.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Algoritmos e estrutura de dados em JavaScript legado",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"Enquanto o HTML e o CSS controlam o conteúdo e o estilo de uma página, o JavaScript é usado para torná-lo interativo. Na certificação de Algoritmos e Estruturas de Dados em JavaScript, você aprenderá os fundamentos do JavaScript, incluindo variáveis, arrays, objetos, laços e funções.",
"Assim que souber os fundamentos abaixo, você aplicará esse conhecimento, criando algoritmos para manipular strings, fatorar números e até mesmo calcular a órbita da Estação Espacial Internacional.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "Algoritmos em JavaScript e Estruturas de Dados",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Desenvolvedores usam HTML e CSS para controlar os componentes e estilizar a página. Eles também usam o JavaScript para tornar essa página interativa.",
"Neste certificado de Algoritmos e estruturas de dados em JavaScript, você aprenderá os fundamentos de JavaScript como variáveis, arrays, objetos, laços, funções, o DOM e mais.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Bibliotecas de desenvolvimento em front-end",
+ "title": "Front End Development Libraries V8",
"intro": [
"Agora que você está familiarizado com HTML, CSS e JavaScript, melhore suas habilidades aprendendo algumas das bibliotecas front-end mais populares do setor.",
"Na certificação de bibliotecas de desenvolvimento em front-end, você aprenderá a estilizar seu site rapidamente com Bootstrap. Você também aprenderá a adicionar a lógica aos seus estilos CSS e a ampliá-los com Sass.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Visualização de dados",
+ "title": "Data Visualization V8",
"intro": [
"Os dados estão ao nosso redor, mas isso não quer dizer muita coisa se eles não tiverem forma ou contexto.",
"Na certificação de visualização de dados, você criará tabelas, gráficos e mapas para apresentar diferentes tipos de dados com a biblioteca D3.js.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Bancos de dados relacionais",
+ "title": "Relational Database V8",
"intro": [
"Para estes cursos, você usará ferramentas e software reais de desenvolvedor, incluindo o VS Code, PostgreSQL e a linha de comando do Linux/Unix para completar tutoriais interativos e criar projetos.",
"Estes cursos começam com comandos básicos do Bash. Usando o terminal, você aprenderá tudo, de navegar e manipular um sistema de arquivos e fazer scripts no Bash, até usos mais avançados.",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "APIs e desenvolvimento de back-end",
+ "title": "Back End Development and APIs V8",
"intro": [
"Até esse ponto, você usou JavaScript apenas no front-end para adicionar interatividade a uma página, resolver desafios de algoritmos ou construir uma SPA. Mas o JavaScript também pode ser usado no back-end, ou servidor, para construir aplicações web inteiras.",
"Hoje em dia, uma das formas populares de se criar aplicações é através do uso de microsserviços, que são pequenas aplicações modulares que trabalham em conjunto para formar uma aplicação maior inteira.",
@@ -2085,6 +2085,12 @@
"Nestes cursos, você aprenderá sobre fundamentos do HTML, como o elemento div, os atributos id e class, o boilerplate HTML, entidades HTML, e outros conceitos."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Entendendo Como o HTML Afeta o SEO",
"intro": [
@@ -3099,9 +3105,9 @@
]
},
"workshop-string-formatter": {
- "title": "Build a String Formatter",
+ "title": "Criar um formatador de strings",
"intro": [
- "In this workshop, you will practice working with various string methods including the trim(), toUpperCase() and toLowerCase() methods."
+ "Neste workshop, você praticará trabalhar com vários métodos de strings, incluindo os métodos trim(), toUpperCase() e toLowerCase()."
]
},
"lecture-working-with-string-modification-methods": {
@@ -4731,9 +4737,8 @@
"intro": ["Aprenda sobre Compreender Abstração nestas lições."]
},
"workshop-discount-calculator": {
- "title": "Build a Discount Calculator",
+ "title": "Criar uma calculadora de descontos",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4857,8 +4862,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Crie um Algoritmo de Caminho mais Curto",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Crie um Conversor de Lista de Adjacência para Matriz",
@@ -6365,6 +6372,7 @@
},
"front-end-development-libraries-v9": {
"title": "Certificação de Bibliotecas de Desenvolvimento Front-End",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"Este curso ensina as bibliotecas que os desenvolvedores utilizam para criar páginas da web: React, TypeScript, e mais.",
"Para conquistar sua Certificação de Bibliotecas de Desenvolvimento Front-End:",
@@ -6714,6 +6722,7 @@
},
"python-v9": {
"title": "Certificação em Python",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"Este curso ensina os fundamentos da programação em Python.",
"Para conquistar sua Certificação em Python:",
@@ -7176,6 +7185,7 @@
},
"relational-databases-v9": {
"title": "Certificação de Bancos de Dados Relacionais",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"Este curso ensina os fundamentos dos bancos de dados relacionais.",
"Para conquistar sua Certificação de Bancos de Dados Relacionais:",
@@ -7420,6 +7430,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Certificação de Desenvolvimento Back-End e APIs",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"Este curso ensina os fundamentos do Desenvolvimento Back-End e APIs.",
"Para conquistar sua Certificação de Desenvolvimento Back-End e APIs:",
@@ -7536,11 +7547,17 @@
},
"full-stack-developer-v9": {
"title": "Currículo de Desenvolvedor Full Stack Certificado",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "Este curso oferece um caminho abrangente para se tornar um Desenvolvedor Full Stack Certificado, cobrindo todas as tecnologias essenciais necessárias para desenvolver aplicações web modernas e escaláveis do início ao fim.",
- "Por meio de uma combinação de lições interativas, exercícios de codificação e projetos do mundo real, você dominará o desenvolvimento frontend e backend. Você trabalhará com HTML, CSS e JavaScript para criar interfaces de usuário responsivas, explorará React e TypeScript para aplicações web avançadas e aprenderá a gerenciar dados com bancos de dados relacionais - no backend, você usará Git, Npm, Node.js e Python para criar soluções poderosas do lado do servidor.",
- "Ao final deste curso, você terá as habilidades práticas e a experiência para desenvolver aplicações web completas com confiança, preparando-se para uma carreira de sucesso como Desenvolvedor Full Stack.",
- "Esta certificação vai exigir uma quantidade substancial de tempo e esforço para ser concluída. Se você começar agora, poderá estar pronto para iniciar o material restante e o exame final quando o lançarmos nos próximos meses."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Exame de Desenvolvedor Full Stack Certificado"
@@ -7571,12 +7588,12 @@
"intro": ["Introdução de Espaço Reservado"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Bem-vindo ao A1 Espanhol Profissional",
- "es-a1-chapter-letters-and-sounds": "Letras e Sons",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Saudações e Apresentações"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introdução e Visão Geral da Certificação",
- "es-a1-module-alphabet-accents-and-punctuation": "Alfabeto, Acentos e Pontuação",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Saudações e Despedidas",
"es-a1-module-introducing-yourself": "Apresentando-se",
"es-a1-module-first-questions": "Primeiras Perguntas"
@@ -7586,9 +7603,9 @@
"note": "Inverno de 2025",
"intro": ["PLACEHOLDER: Escreva a introdução do módulo aqui."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
- "note": "Inverno de 2025",
- "intro": ["PLACEHOLDER: Escreva a introdução do módulo aqui."]
+ "es-a1-module-alphabet-and-special-characters": {
+ "note": "Coming Winter 2025",
+ "intro": ["PLACEHOLDER: Write the module intro here."]
},
"es-a1-module-greetings-and-farewells": {
"note": "Inverno de 2025",
@@ -7636,8 +7653,8 @@
"title": "Pontuação",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Questionário de Alfabeto, Acentos e Pontuação",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7687,6 +7704,22 @@
"es-a1-quiz-first-questions": {
"title": "Quiz de Primeiras Perguntas",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/portuguese/translations.json b/client/i18n/locales/portuguese/translations.json
index d4c77d4a70c..10646303c4a 100644
--- a/client/i18n/locales/portuguese/translations.json
+++ b/client/i18n/locales/portuguese/translations.json
@@ -685,6 +685,7 @@
"lab": "Laboratório",
"review": "Revisão",
"quiz": "Questionário",
+ "cert-project": "Certification Project",
"exam": "Teste",
"warm-up": "Aquecimento",
"learn": "Aprender",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Design responsivo para a web",
- "responsive-web-design-cert": "Certificação de design responsivo para a web",
- "javascript-algorithms-and-data-structures": "Algoritmos em JavaScript e Estrutura de Dados edição antiga",
- "javascript-algorithms-and-data-structures-cert": "Cerificação Algoritmos em JavaScript e Estrutura de Dados edição antiga",
- "javascript-algorithms-and-data-structures-v8": "Algoritmos em JavaScript e Estruturas de Dados",
- "javascript-algorithms-and-data-structures-v8-cert": "Certificação de algoritmos em JavaScript e estruturas de dados",
- "front-end-development-libraries": "Bibliotecas de desenvolvimento front-end",
- "front-end-development-libraries-cert": "Certificação de bibliotecas de desenvolvimento front-end",
- "data-visualization": "Visualização de dados",
- "data-visualization-cert": "Certificação de visualização de dados",
- "relational-database-v8": "Bancos de dados relacionais",
- "relational-database-v8-cert": "Certificação de bancos de dados relacionais",
- "back-end-development-and-apis": "Desenvolvimento back-end e APIs",
- "back-end-development-and-apis-cert": "Certificação de desenvolvimento back-end e APIs",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Garantia de qualidade",
"quality-assurance-v7-cert": "Certificação de garantia de qualidade",
"scientific-computing-with-python-v7": "Computação científica com Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Parabéns por chegar até aqui. Antes de começar o teste, responda a estas duas breves perguntas de pesquisa."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore nosso catálogo",
diff --git a/client/i18n/locales/swahili/intro.json b/client/i18n/locales/swahili/intro.json
index d51488b3d3c..32317403acc 100644
--- a/client/i18n/locales/swahili/intro.json
+++ b/client/i18n/locales/swahili/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Muundo Wa Wavuti Sikivu",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"Katika Uthibitishaji huu wa Muundo Wa Wavuti Sikivu, utajifunza lugha ambazo watengenezaji wa tovuti hutumia kutengeneza kurasa za wavuti: HTML(Hypertext Markup Language) kwa ajili ya maudhui, na CSS (Cascading Style Sheets) kwa ajili ya muundo.",
"Kwanza, utaunda programu ya picha ya paka ili kujifunza misingi ya HTML na CSS. Baadaye, utajifunza mbinu za kisasa kama vile vihifadhi vya CSS kwa kujenga pengwini, na mbinu bora za ufikivu kwa kuunda tovuti ya maswali.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Legacy JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"Ingawa HTML na CSS hudhibiti maudhui na mtindo wa ukurasa, JavaScript inatumika kuifanya ishirikiane. Katika Uthibitishaji wa Algorithm ya JavaScript na Miundo ya Data, utajifunza misingi ya JavaScript ikijumuisha variables, arrays, objects, loops, na functions.",
"Baada ya kuelewa misingi yake, utatumia maarifa hayo kwa kuunda algoriti ili kudhibiti strings, kurekebisha nambari, na hata kukokotoa mzingo wa Kituo cha Kimataifa cha Anga cha Juu.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "JavaScript Algorithms and Data Structures",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Developers use HTML and CSS to control the content and styling of a page. And they use JavaScript to make that page interactive.",
"In this JavaScript Algorithm and Data Structures Certification, you'll learn the JavaScript fundamentals like variables, arrays, objects, loops, functions, the DOM and more.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Front End Development Libraries",
+ "title": "Front End Development Libraries V8",
"intro": [
"Kwa kuwa sasa unafahamu HTML, CSS na JavaScript, ongeza ujuzi wako kwa kujifunza baadhi ya maktaba maarufu za front end kwenye sekta hiyo.",
"Katika cheti cha Front End Development Libraries, utajifunza jinsi ya kutengeneza tovuti yako haraka na Bootstrap. Pia utajifunza jinsi ya kuongeza mantiki kwenye mitindo yako ya CSS na kuiendeleza kwa Sass.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Data Visualization",
+ "title": "Data Visualization V8",
"intro": [
"Data iko pande zote, lakini haimaanishi mengi bila umbo au muktadha.",
"Katika Cheti cha Data Visualization, utaunda chati, grafu na ramani ili kuwasilisha aina tofauti za data kwenye maktaba ya D3.js.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Relational Database",
+ "title": "Relational Database V8",
"intro": [
"Kwa kozi hizi, utatumia zana na programu halisi za wasanidi programu ikijumuisha VS Code, PostgreSQL, na mstari wa amri wa Linux / Unix ili kukamilisha mafunzo shirikishi na kujenga miradi.",
"Kozi hizi huanza na amri za kimsingi za Bash. Kwa kutumia terminal, utajifunza kila kitu kutoka kwa kusogeza na kudhibiti mfumo wa faili, na uandishi katika Bash, hadi utumiaji wa hali ya juu.",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "Back End Development and APIs",
+ "title": "Back End Development and APIs V8",
"intro": [
"Hadi kufikia hatua hii, umetumia JavaScript iliyo upande wa mbele pekee ili kuongeza mwingiliano kwenye ukurasa, kutatua changamoto za kanuni au kuunda SPA. Lakini JavaScript pia inaweza kutumika upande wa nyuma, au seva, kuunda programu nzima za wavuti.",
"Leo, mojawapo ya njia maarufu za kuunda programu ni kupitia huduma ndogo, ambazo ni ndogo, programu ambazo kwa kawaida hufanya kazi pamoja ili kuunda nzima zaidi.",
@@ -2087,6 +2087,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4691,7 +4697,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4815,8 +4820,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Build a Shortest Path Algorithm",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6289,6 +6296,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6630,6 +6638,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7088,6 +7097,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7322,6 +7332,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7438,11 +7449,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7471,12 +7488,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7486,7 +7503,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7536,8 +7553,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7587,6 +7604,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/swahili/translations.json b/client/i18n/locales/swahili/translations.json
index f053f6b768c..cc5a8ce60a9 100644
--- a/client/i18n/locales/swahili/translations.json
+++ b/client/i18n/locales/swahili/translations.json
@@ -685,6 +685,7 @@
"lab": "Lab",
"review": "Review",
"quiz": "Quiz",
+ "cert-project": "Certification Project",
"exam": "Exam",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Responsive Web Design",
- "responsive-web-design-cert": "Responsive Web Design Certification",
- "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures Certification",
- "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures",
- "javascript-algorithms-and-data-structures-v8-cert": "JavaScript Algorithms and Data Structures Certification",
- "front-end-development-libraries": "Front End Development Libraries",
- "front-end-development-libraries-cert": "Front End Development Libraries Certification",
- "data-visualization": "Data Visualization",
- "data-visualization-cert": "Data Visualization Certification",
- "relational-database-v8": "Relational Database",
- "relational-database-v8-cert": "Relational Database Certification",
- "back-end-development-and-apis": "Back End Development and APIs",
- "back-end-development-and-apis-cert": "Back End Development and APIs Certification",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Quality Assurance",
"quality-assurance-v7-cert": "Quality Assurance Certification",
"scientific-computing-with-python-v7": "Scientific Computing with Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Congratulations on getting this far. Before you can start the exam, please answer these two short survey questions."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Explore our Catalog",
diff --git a/client/i18n/locales/ukrainian/intro.json b/client/i18n/locales/ukrainian/intro.json
index d2ba6bff294..cbf605c6d2f 100644
--- a/client/i18n/locales/ukrainian/intro.json
+++ b/client/i18n/locales/ukrainian/intro.json
@@ -60,7 +60,7 @@
}
},
"2022/responsive-web-design": {
- "title": "Адаптивний вебдизайн",
+ "title": "Legacy Responsive Web Design V8",
"intro": [
"В сертифікації «Адаптивний вебдизайн» ви вивчите мови, які розробники використовують для створення вебсторінок: HTML (мова розмітки гіпертексту) для вмісту та CSS (каскадні таблиці стилів) для дизайну.",
"Спочатку ви створите застосунок із фотографіями котів, аби вивчити основи HTML та CSS. Пізніше ви опануєте сучасні методи, такі як змінні CSS, завдяки створенню пінгвіна, а також створите вікторину, щоб опанувати доступність.",
@@ -217,7 +217,7 @@
}
},
"javascript-algorithms-and-data-structures": {
- "title": "Алгоритми JavaScript та структури даних (застаріла версія)",
+ "title": "Legacy JavaScript Algorithms and Data Structures V7",
"intro": [
"Якщо HTML та CSS відповідають за вміст і стилізацію сторінки, то JavaScript робить її інтерактивною. У сертифікації «Алгоритми JavaScript та структури даних» ви вивчите основи JavaScript, включно зі змінними, масивами, об’єктами, циклами та функціями.",
"Як тільки ви вивчите основи, ви почнете застосовувати ці знання, створюючи алгоритми, щоб уміло маніпулювати рядками, факторизувати числа, і навіть зможете обчислити орбіту міжнародної космічної станції.",
@@ -300,7 +300,7 @@
}
},
"javascript-algorithms-and-data-structures-v8": {
- "title": "Алгоритми та структури даних JavaScript",
+ "title": "Legacy JavaScript Algorithms and Data Structures V8",
"intro": [
"Розробники використовують HTML та CSS, щоб контролювати вміст та стилізувати сторінку, а JavaScript — щоб зробити цю сторінку інтерактивною.",
"У сертифікації «Алгоритми JavaScript та структури даних» ви вивчите основи JavaScript, включно зі змінними, масивами, об’єктами, циклами, функціями, об’єктною моделлю документа та багато іншого.",
@@ -490,7 +490,7 @@
}
},
"front-end-development-libraries": {
- "title": "Бібліотеки Front End",
+ "title": "Front End Development Libraries V8",
"intro": [
"Тепер, коли ви вже знайомі з HTML, CSS та JavaScript, піднімімо ваш рівень навичок, вивчаючи декілька найбільш популярних бібліотек верстки в галузі.",
"У сертифікації «Бібліотеки Front End» ви навчитеся швидко стилізувати свій сайт за допомогою Bootstrap. Також ви навчитеся покращувати свої стилі CSS та розширювати їх за допомогою Sass.",
@@ -553,7 +553,7 @@
}
},
"data-visualization": {
- "title": "Візуалізація даних",
+ "title": "Data Visualization V8",
"intro": [
"Дані повсюди, але це не означає, що більшість з них без форми чи контексту.",
"У сертифікації «Візуалізація даних» ви створите діаграми, графіки та карти, що показують різні типи даних, за допомогою бібліотеки D3.js.",
@@ -588,7 +588,7 @@
}
},
"relational-database": {
- "title": "Реляційна база даних",
+ "title": "Relational Database V8",
"intro": [
"У цих курсах ви використовуватимете реальні інструменти розробника та програмне забезпечення, включно з VS Code, PostgreSQL та командним рядком Linux / Unix для завершення інтерактивних уроків і створення проєктів.",
"Ці курси починаються з основних команд Bash. За допомогою терміналу ви навчитеся усього необхідного (від навігації та маніпуляції файловою системою, написання скрипту в Bash до просунутого використання).",
@@ -696,7 +696,7 @@
}
},
"back-end-development-and-apis": {
- "title": "Розробка Back End та API",
+ "title": "Back End Development and APIs V8",
"intro": [
"До цього моменту ви використовували JavaScript тільки для front end, аби зробити вебсторінку інтерактивнішою, розв’язати завдання з алгоритмами, або створити SPA. Але JavaScript можна використовувати й у back end, або на сервері, для створення цілих вебзастосунків.",
"Сьогодні один із найпопулярніших способів створення застосунків — за допомогою мікрослужб, які є маленькими модульними застосунками та разом формують єдине ціле.",
@@ -2073,6 +2073,12 @@
"In these lessons, you will learn about HTML fundamentals like the div element, the id and class attributes, the HTML boilerplate, HTML entities, and more."
]
},
+ "workshop-bookstore-page": {
+ "title": "Build a Bookstore Page",
+ "intro": [
+ "In this workshop, you will practice working with classes, ids and the div element by building a bookstore page."
+ ]
+ },
"lecture-understanding-how-html-affects-seo": {
"title": "Understanding How HTML Affects SEO",
"intro": [
@@ -4675,7 +4681,6 @@
"workshop-discount-calculator": {
"title": "Build a Discount Calculator",
"intro": [
- "Build a Discount Calculator",
"In this workshop you will build a flexible discount pricing calculator through abstract base classes, allowing multiple discount algorithms to be applied interchangeably without modifying the core logic."
]
},
@@ -4797,8 +4802,10 @@
]
},
"workshop-shortest-path-algorithm": {
- "title": "Створіть алгоритм найкоротшого шляху",
- "intro": [""]
+ "title": "Implement the Shortest Path Algorithm",
+ "intro": [
+ "In this workshop you will implement the shortest path algorithm to find the shortest path between two nodes in a graph."
+ ]
},
"lab-adjacency-list-to-matrix-converter": {
"title": "Build an Adjacency List to Matrix Converter",
@@ -6275,6 +6282,7 @@
},
"front-end-development-libraries-v9": {
"title": "Front End Development Libraries Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"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:",
@@ -6616,6 +6624,7 @@
},
"python-v9": {
"title": "Python Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of Python programming.",
"To earn your Python Certification:",
@@ -7074,6 +7083,7 @@
},
"relational-databases-v9": {
"title": "Relational Databases Certification",
+ "note": "This certification is currently in development and will be available soon. We recommend completing the available courses below to prepare for the certification exam once it is released.",
"intro": [
"This course teaches you the fundamentals of relational databases.",
"To earn your Relational Databases Certification:",
@@ -7308,6 +7318,7 @@
},
"back-end-development-and-apis-v9": {
"title": "Back End Development and APIs Certification",
+ "note": "This certification is currently in development and will be available soon.",
"intro": [
"This course teaches you the fundamentals of back end development and APIs.",
"To earn your Back End Development and APIs Certification:",
@@ -7424,11 +7435,17 @@
},
"full-stack-developer-v9": {
"title": "Certified Full Stack Developer Curriculum",
+ "note": "If you were previously working through our full stack curriculum, don't worry - you're progress is saved. We split it into smaller certifications for you to earn along your journey. This certification is currently in development and will be available soon. Start earning the required certifications so you're ready when it launches.",
"intro": [
- "This course provides a comprehensive pathway to becoming a Certified Full Stack Developer, covering all the essential technologies required to build modern, scalable web applications from start to finish.",
- "Through a blend of interactive lessons, coding exercises, and real-world projects, you will master both frontend and backend development. You'll work with HTML, CSS, and JavaScript to build responsive user interfaces, explore React and TypeScript for advanced web applications, and learn to manage data with relational databases - and on the backend, you'll use Git, Npm, Node.js, and Python to create powerful server-side solutions.",
- "By the end of this course, you'll have the practical skills and experience to confidently develop complete web applications, preparing you for a successful career as a Full Stack Developer.",
- "This certification will take you a substantial amount of time and effort to complete. If you start now, you may be ready to start the remaining material and final exam when we launch it in the coming months."
+ "This certification represents the culmination of your full stack developer journey. It demonstrates your ability to build complete, modern web applications from start to finish.",
+ "To qualify for the exam, you must earn the following certifications:",
+ "- Responsive Web Design Certification",
+ "- JavaScript Certification",
+ "- Front End Development Libraries Certification",
+ "- Python Certification",
+ "- Relational Databases Certification",
+ "- Back End Development and APIs Certification",
+ "Pass the exam to earn your Full Stack Developer Certification."
],
"chapters": {
"certified-full-stack-developer-exam": "Certified Full Stack Developer Exam"
@@ -7457,12 +7474,12 @@
"intro": ["Placeholder intro"],
"chapters": {
"es-a1-chapter-welcome-to-a1-professional-spanish": "Welcome to A1 Professional Spanish",
- "es-a1-chapter-letters-and-sounds": "Letters and Sounds",
+ "es-a1-chapter-the-spanish-alphabet": "The Spanish Alphabet",
"es-a1-chapter-greetings-and-introductions": "Greetings and Introductions"
},
"modules": {
"es-a1-module-introduction-and-certification-overview": "Introduction and Certification Overview",
- "es-a1-module-alphabet-accents-and-punctuation": "Alphabet, Accents, and Punctuation",
+ "es-a1-module-alphabet-and-special-characters": "The Alphabet and Special Characters",
"es-a1-module-greetings-and-farewells": "Greetings and Farewells",
"es-a1-module-introducing-yourself": "Introducing Yourself",
"es-a1-module-first-questions": "First Questions"
@@ -7472,7 +7489,7 @@
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
- "es-a1-module-alphabet-accents-and-punctuation": {
+ "es-a1-module-alphabet-and-special-characters": {
"note": "Coming Winter 2025",
"intro": ["PLACEHOLDER: Write the module intro here."]
},
@@ -7522,8 +7539,8 @@
"title": "Punctuation",
"intro": ["", ""]
},
- "es-a1-quiz-alphabet-accent-and-punctuation-quiz": {
- "title": "Alphabet, Accent and Punctuation Quiz",
+ "es-a1-quiz-the-alphabet": {
+ "title": "The Spanish Alphabet Quiz",
"intro": ["", ""]
},
"es-a1-warm-up-introducing-yourself-basics": {
@@ -7573,6 +7590,22 @@
"es-a1-quiz-first-questions": {
"title": "First Questions Quiz",
"intro": ["", ""]
+ },
+ "es-a1-learn-vowels": {
+ "title": "Vowels",
+ "intro": ["", ""]
+ },
+ "es-a1-learn-consonants-and-special-characters": {
+ "title": "Consonants and Special Characters",
+ "intro": ["", ""]
+ },
+ "es-a1-review-the-alphabet": {
+ "title": "The Spanish Alphabet Review",
+ "intro": ["", ""]
+ },
+ "es-a1-practice-the-alphabet": {
+ "title": "The Spanish Alphabet Practice",
+ "intro": ["", ""]
}
}
},
diff --git a/client/i18n/locales/ukrainian/translations.json b/client/i18n/locales/ukrainian/translations.json
index ca89420477c..176d229a15a 100644
--- a/client/i18n/locales/ukrainian/translations.json
+++ b/client/i18n/locales/ukrainian/translations.json
@@ -685,6 +685,7 @@
"lab": "Лабораторна робота",
"review": "Повторення",
"quiz": "Тест",
+ "cert-project": "Certification Project",
"exam": "Екзамен",
"warm-up": "Warm-up",
"learn": "Learn",
@@ -1194,20 +1195,20 @@
}
},
"title": {
- "responsive-web-design": "Адаптивний вебдизайн",
- "responsive-web-design-cert": "Сертифікація «Адаптивний вебдизайн»",
- "javascript-algorithms-and-data-structures": "Алгоритми та структури даних JavaScript (стара версія)",
- "javascript-algorithms-and-data-structures-cert": "Сертифікація «Алгоритми та структури даних JavaScript» (стара версія)",
- "javascript-algorithms-and-data-structures-v8": "Алгоритми та структури даних JavaScript",
- "javascript-algorithms-and-data-structures-v8-cert": "Сертифікація «Алгоритми та структури даних JavaScript»",
- "front-end-development-libraries": "Бібліотеки Front End",
- "front-end-development-libraries-cert": "Сертифікація «Бібліотеки Front End»",
- "data-visualization": "Візуалізація даних",
- "data-visualization-cert": "Сертифікація «Візуалізація даних»",
- "relational-database-v8": "Реляційна база даних",
- "relational-database-v8-cert": "Сертифікація «Реляційна база даних»",
- "back-end-development-and-apis": "Розробка Back End та API",
- "back-end-development-and-apis-cert": "Сертифікація «Розробка Back End та API»",
+ "responsive-web-design": "Legacy Responsive Web Design V8",
+ "responsive-web-design-cert": "Legacy Responsive Web Design V8 Certification",
+ "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures V7",
+ "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures V7 Certification",
+ "javascript-algorithms-and-data-structures-v8": "Legacy JavaScript Algorithms and Data Structures V8",
+ "javascript-algorithms-and-data-structures-v8-cert": "Legacy JavaScript Algorithms and Data Structures V8 Certification",
+ "front-end-development-libraries": "Front End Development Libraries V8",
+ "front-end-development-libraries-cert": "Front End Development Libraries V8 Certification",
+ "data-visualization": "Data Visualization V8",
+ "data-visualization-cert": "Data Visualization V8 Certification",
+ "relational-database-v8": "Relational Database V8",
+ "relational-database-v8-cert": "Relational Database V8 Certification",
+ "back-end-development-and-apis": "Back End Development and APIs V8",
+ "back-end-development-and-apis-cert": "Back End Development and APIs V8 Certification",
"quality-assurance-v7": "Забезпечення якості",
"quality-assurance-v7-cert": "Сертифікація «Забезпечення якості»",
"scientific-computing-with-python-v7": "Наукові обчислення з Python",
@@ -1353,6 +1354,26 @@
"two-questions": "Вітаємо з досягненням цієї точки. Перш ніж розпочати екзамен, будь ласка, дайте відповідь на два короткі запитання."
}
},
+ "speaking-modal": {
+ "heading": "Speaking Practice",
+ "repeat-sentence": "Repeat aloud this sentence:",
+ "play": "Play",
+ "playing": "Playing...",
+ "record": "Record",
+ "stop": "Stop",
+ "incorrect-words": "Incorrect words: {{words}}.",
+ "misplaced-words": "Misplaced words: {{words}}.",
+ "correct-congratulations": "That's correct! Congratulations!",
+ "very-good": "Very good!",
+ "try-again": "Try again.",
+ "no-audio-available": "No audio file available.",
+ "no-speech-detected": "Recording stopped. No speech detected.",
+ "speech-recognition-not-supported": "Speech recognition not supported in this browser.",
+ "recording-speak-now": "Recording. Speak now.",
+ "recording-stopped-processing": "Recording stopped. Processing...",
+ "microphone-access-error": "Error: Could not access microphone.",
+ "speaking-button": "Practice speaking"
+ },
"curriculum": {
"catalog": {
"title": "Ознайомтесь з нашим каталогом",
diff --git a/client/src/client-only-routes/show-daily-coding-challenge.tsx b/client/src/client-only-routes/show-daily-coding-challenge.tsx
index f9605069375..1ce53a4c521 100644
--- a/client/src/client-only-routes/show-daily-coding-challenge.tsx
+++ b/client/src/client-only-routes/show-daily-coding-challenge.tsx
@@ -91,10 +91,7 @@ function formatChallengeData({
...baseChallengeProps,
helpCategory: 'JavaScript',
challengeType: 28,
- fields: {
- blockName: 'daily-coding-challenge',
- tests: javascript.tests
- },
+ tests: javascript.tests,
challengeFiles: [
{
name: 'script',
@@ -119,10 +116,7 @@ function formatChallengeData({
...baseChallengeProps,
helpCategory: 'Python',
challengeType: 29,
- fields: {
- blockName: 'daily-coding-challenge',
- tests: python.tests
- },
+ tests: python.tests,
challengeFiles: [
{
fileKey: 'mainpy',
diff --git a/client/src/components/formHelpers/form-fields.tsx b/client/src/components/formHelpers/form-fields.tsx
index 9a0b696f495..39cc2167bdc 100644
--- a/client/src/components/formHelpers/form-fields.tsx
+++ b/client/src/components/formHelpers/form-fields.tsx
@@ -25,7 +25,7 @@ export type FormOptions = {
isLocalLinkAllowed?: boolean;
isSourceCodeLinkRequired?: boolean;
required?: string[];
- types?: { [key: string]: string };
+ types?: { [key: string]: React.HTMLInputTypeAttribute };
placeholders?: { [key: string]: string };
};
@@ -46,11 +46,12 @@ function FormFields({ formFields, options }: FormFieldsProps): JSX.Element {
} = options;
const nullOrWarning = (
- value: string,
+ value: string | undefined,
error: unknown,
isURL: boolean,
name: string
) => {
+ if (!value) return null;
let validationError: string | undefined;
if (value && isURL) {
try {
@@ -82,7 +83,7 @@ function FormFields({ formFields, options }: FormFieldsProps): JSX.Element {
validationError ||
validationWarning) as string;
return message ? (
- learning is fun
` on the screen. +Enable the interactive editor and try adding a `<p>learning is fun</p>` below the paragraph element. You should see `learning is fun
` on the screen. :::interactive_editor @@ -40,7 +41,7 @@ Another type of character reference would be the decimal numeric reference. This Here is an example of using the decimal numeric reference for the less than symbol. -Change the code in the editor to see different symbols. You can use `©` for the copyright symbol and `®` for the trademark symbol. +Enable the interactive editor and change the code to see different symbols. You can use `©` for the copyright symbol and `®` for the trademark symbol. :::interactive_editor @@ -54,7 +55,7 @@ The last type of character reference would be the hexadecimal numeric reference. Here is an example of using the hexadecimal numeric reference for the less than symbol. -Change the code in the editor to see different symbols. You can use `€` for the euro symbol and `Ω` for the Greek capital letter Omega symbol. +Enable the interactive editor and change the code to see different symbols. You can use `€` for the euro symbol and `Ω` for the Greek capital letter Omega symbol. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md index 7a8cfe15ee4..418c35a9f44 100644 --- a/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md +++ b/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md @@ -9,7 +9,7 @@ dashedName: what-is-the-role-of-the-script-element-in-html The `script` element is used to embed executable code. Most developers will use this to execute JavaScript code. JavaScript is used to add interactivity to your web pages. Common examples of using JavaScript include interactive games, image sliders, and dynamic forms that validate user input in real-time. -Here is an example of using the `script` element in an HTML document. Remove the `//` from in front of the `alert("Welcome to freeCodeCamp");` and you should see an alert pop up. +Here is an example of using the `script` element in an HTML document. Remove the `//` from in front of the `alert("Welcome to freeCodeCamp");` and you should see an alert pop up. To see the previews, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md index eec7f06ee9b..eb07ea02e73 100644 --- a/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md +++ b/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md @@ -16,35 +16,33 @@ Your `h2` element is your subheading. It should always come after your `h1` and Following the pattern, your `h3` element should always come after an `h2` element. That is, you should never skip directly from `h1` to `h3`. You can, however, have multiple heading elements at the same level. For example, this code is correct: ```html -@@ -54,6 +52,8 @@ It may be tempting to use a specific heading element because of its styling, suc
Another example text.
` to see it centered on the page. +Enable the interactive editor and add `center` tags around the `Another example text.
` to see it centered on the page. :::interactive_editor @@ -46,7 +46,7 @@ Add `center` tags around the `Another example text.
` to see it centered o And next, we have the `big` element. This is another deprecated presentational HTML element that makes the enclosed text one level bigger than its surrounding text. Here we have an example that defines a paragraph with two parts. -Add `big` tags around the `Some other text` and see the changes in the preview window. +Enable the interactive editor and add `big` tags around the `Some other text` and see the changes in the preview window. :::interactive_editor @@ -77,7 +77,7 @@ Examples of semantic HTML elements include: This is an example of a `header` element that contains a navigation section element. -Add a `Products` inside of the `nav` and see the changes in the preview window. +Enable the interactive editor and add a `Products` inside of the `nav` and see the changes in the preview window. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md index 7cc687cee5a..b6e893a2fb7 100644 --- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md +++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md @@ -20,11 +20,11 @@ It is important to remember that `aria-hidden` only hides content from assistive You should never use `aria-hidden` to hide an element that is focusable with the keyboard. The `aria-hidden` attribute only removes the element from the accessibility tree. It does not remove it from the DOM. Thus, it will still be possible for screen reader users to tab to the element, but their screen reader will not announce the element, effectively causing them to focus on "nothing". -Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`. +Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`. We only keep the text exposed to assistive technologies to avoid any confusion that may arise from the redundancy of having both an icon and text for the same purpose. -**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window. +**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window. To see the previews, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md index 4568fe4c92c..6d66d62c07b 100644 --- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md +++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md @@ -13,7 +13,7 @@ The most common use for `aria-describedby` is to associate instructions and erro Let's take a look at a few examples to understand how it works. In this first example, we have a `form` element that accepts a password. -Type a few characters into the password input field and you will see that the password is masked in the preview window. You should also see that the `password-help` text remains red until you provide 8 or more characters into the input. +Enable the interactive editor and type a few characters into the password input field. You will see that the password is masked in the preview window. You should also see that the `password-help` text remains red until you provide 8 or more characters into the input. NOTE: This interactive example is using CSS and JavaScript to dynamically update the color for the `password-help` text. Don't worry about trying to understand the JavaScript code because you will learn JavaScript in future modules. diff --git a/curriculum/challenges/english/blocks/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md b/curriculum/challenges/english/blocks/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md index 2b493c7fda9..dbaa5df8522 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-is-the-purpose-of-e-preventdefault --- -# --description-- +# --interactive-- Let's learn about the purpose of the `preventDefault()` method on events. @@ -13,24 +13,104 @@ Every event that triggers in the DOM has some sort of default behavior. The `cli Let's take a look at an example. Let's define an `input` element for a user to type in: +:::interactive_editor + ```html + ``` +```css +label { + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + font-size: 14px; + color: #333; + margin-bottom: 12px; +} + +input[type="text"] { + padding: 8px 12px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 14px; + margin-top: 4px; + width: 100%; + box-sizing: border-box; + transition: border-color 0.2s, box-shadow 0.2s; +} + +input[type="text"]:focus { + border-color: #0078d4; + box-shadow: 0 0 3px rgba(0, 120, 212, 0.5); + outline: none; +} + +``` + +::: + And if we look at the result, we can type in the input field as expected. But maybe we don't want that. Maybe, instead, we'd like to show the character the user types in a separate element. First, let's define our element for that: +:::interactive_editor + ```html + ``` +```css +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +label { + font-size: 1.2rem; + color: #333; + margin-bottom: 1rem; + display: flex; + flex-direction: column; +} + +input[type="text"] { + padding: 0.5rem; + font-size: 1rem; + border: 2px solid #ccc; + border-radius: 5px; + margin-top: 0.5rem; + outline: none; +} + +input[type="text"]:focus { + border-color: #007BFF; +} + +#output { + margin-top: 1rem; + font-size: 1.1rem; + color: #555; +} + +``` + +::: + And then, we need to hook into the `keydown` event to listen for a character being typed on the keyboard. Note that we do not want the `change` or `input` events here, because we need the keyboard information. -```javascript +```js const input = document.querySelector("input"); input.addEventListener("keydown", (e) => { @@ -40,7 +120,59 @@ input.addEventListener("keydown", (e) => { The `keydown` event fires when you press down on a keyboard key. When this happens, let's display the character in our `p` element. -```javascript +:::interactive_editor + +```html + + + + +``` + +```css +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +label { + font-size: 1.2rem; + color: #333; + margin-bottom: 1rem; + display: flex; + flex-direction: column; +} + +input[type="text"] { + padding: 0.5rem; + font-size: 1rem; + border: 2px solid #ccc; + border-radius: 5px; + margin-top: 0.5rem; + outline: none; +} + +input[type="text"]:focus { + border-color: #007BFF; +} + +#output { + margin-top: 1rem; + font-size: 1.1rem; + color: #555; +} + +``` + +```js const input = document.querySelector("input"); const output = document.getElementById("output"); @@ -49,13 +181,67 @@ input.addEventListener("keydown", (e) => { }); ``` +::: + `e.key` gives you the value of the key pressed, such as `a` for the `a` key or `Enter` for the `Enter` key. With the above code, when you type in the `input`, the character you type will be displayed in the `p` element. This is great, but we don't want to show the characters in the `input` as well. This is where our `preventDefault()` method comes in. The default behavior of a `keydown` is to render the character in the input. Let's avoid that by calling `e.preventDefault()`: -```javascript +:::interactive_editor + +```html + + + + +``` + +```css +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +label { + font-size: 1.2rem; + color: #333; + margin-bottom: 1rem; + display: flex; + flex-direction: column; +} + +input[type="text"] { + padding: 0.5rem; + font-size: 1rem; + border: 2px solid #ccc; + border-radius: 5px; + margin-top: 0.5rem; + outline: none; +} + +input[type="text"]:focus { + border-color: #007BFF; +} + +#output { + margin-top: 1rem; + font-size: 1.1rem; + color: #555; +} + +``` + +```js const input = document.querySelector("input"); const output = document.getElementById("output"); @@ -65,6 +251,8 @@ input.addEventListener("keydown", (e) => { }); ``` +::: + And just like that, you have prevented the default behavior to allow yourself to implement your own custom event handling. Another common example of when to use the `e.preventDefault` method has to deal with form submissions. By default, submitting a form sends data to the server and reloads the page. Using `e.preventDefault()` prevents this from happening. diff --git a/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md b/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md index a4d42065af9..6230244620a 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md @@ -17,7 +17,7 @@ The attribute name is followed by an equal sign (`=`) and a value in quotes. The This first example uses the `href` and `target` attributes. The `href` attribute specifies the URL of a link and the `target` attribute specifies where to open the link. -Change the `href="https://www.freecodecamp.org/news/"` to `href="https://www.freecodecamp.org"`. Now when you click on the link in the interactive editor, you will see the freeCodeCamp homepage in a new browser tab. +Enable the interactive editor and change the `href="https://www.freecodecamp.org/news/"` to `href="https://www.freecodecamp.org"`. Now when you click on the link in the interactive editor, you will see the freeCodeCamp homepage in a new browser tab. :::interactive_editor @@ -31,7 +31,7 @@ Without the `href` attribute, the link would not work because there would be no Other common attributes are the `src`, and `alt`, or alternative, attribute - which is used to specify the source of an image and provide alternative descriptive text for the image, respectively. -Change the `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"` to `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"`. Then change the `alt="Two tabby kittens sleeping together on a couch."` to `alt="Two cats running in the dirt."`. +Enable the interactive editor and change the `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"` to `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"`. Then change the `alt="Two tabby kittens sleeping together on a couch."` to `alt="Two cats running in the dirt."`. :::interactive_editor @@ -45,7 +45,7 @@ Similar to the `href` attribute, the `src` attribute is required because it spec Some attributes are a little unique with their syntax like the `checked` attribute. -Try clicking on the checkbox in the preview window to see it alternate between a checked and unchecked state. +Enable the interactive editor and try clicking on the checkbox in the preview window to see it alternate between a checked and unchecked state. :::interactive_editor @@ -59,7 +59,7 @@ In the following example, we have an `input` element with the `type` attribute s The `checked` attribute is used to specify that the checkbox should be checked by default. The `checked` attribute does not require a value. If it is present, the checkbox will be checked by default. If the attribute is not present, the checkbox will be unchecked. This is known as a boolean attribute. You will learn more about booleans in general when you get to the JavaScript section. -Remove the `checked` attribute from the `input` in the interactive editor, and you will see that the checkbox is no longer checked by default. +Enable the interactive editor and try remove the `checked` attribute from the `input`. You will see that the checkbox is no longer checked by default. :::interactive_editor @@ -71,7 +71,7 @@ Remove the `checked` attribute from the `input` in the interactive editor, and y There are several common boolean attributes you will encounter in HTML, such as `disabled`, `readonly`, and `required`. These attributes are used to specify the state of an element, such as whether it is disabled, read-only, or required. -Here is an example of a text `input` element that is disabled by default. Try clicking on the `input` element in the preview window. Now remove the `disabled` attribute from the `input` element and you will see that the `input` is no longer disabled by default. You should now be able to click on it and type inside the field. +Here is an example of a text `input` element that is disabled by default. Enable the interactive editor and try clicking on the `input` element in the preview window. Now remove the `disabled` attribute from the `input` element and you will see that the `input` is no longer disabled by default. You should now be able to click on it and type inside the field. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md index fd657cd013c..34dfafed213 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md @@ -11,7 +11,7 @@ Description lists are perfect for presenting terms and definitions in an organiz This is an example of a description list in HTML with two terms and their corresponding details. -Uncomment the code to see the new detail item show up in the preview window. +Enable the interactive editor and try uncommenting the code to see the new detail item show up in the preview window. :::interactive_editor @@ -40,7 +40,7 @@ In the browser, you would see each term followed by its corresponding descriptio But description lists are not limited to only terms and definitions. They are much more versatile than that. Here we have a recipe with two ingredients. -Uncomment the code to see the new detail item show up in the preview window. +Enable the interactive editor and try uncommenting the code to see the new detail item show up in the preview window. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md b/curriculum/challenges/english/blocks/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md index e5791d3c1b8..b03d47d3f71 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md @@ -35,7 +35,7 @@ const end = performance.now(); console.log(`Execution time: ${end - start}ms`); ``` -This is more accurate than using `Date.now()` because it measures time in microseconds, avoiding clock drift issues. You can use it to track script execution time, event response delays and animation performance. +This is more accurate than using `Date.now()` because it measures time in milliseconds with microsecond precision, avoiding clock drift issues. You can use it to track script execution time, event response delays, and animation performance. Next, the Performance Timing API. @@ -97,7 +97,7 @@ What is the main advantage of using `performance.now()` over `Date.now()`? ## --answers-- -It's more accurate and measures time in microseconds. +It's more accurate and measures time in milliseconds with microsecond precision. --- diff --git a/curriculum/challenges/english/blocks/lecture-understanding-the-html-boilerplate/670839051794aa19fcef6dc8.md b/curriculum/challenges/english/blocks/lecture-understanding-the-html-boilerplate/670839051794aa19fcef6dc8.md index 3d9f6e7a036..96674a81985 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-the-html-boilerplate/670839051794aa19fcef6dc8.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-the-html-boilerplate/670839051794aa19fcef6dc8.md @@ -7,8 +7,6 @@ dashedName: what-is-utf-8-character-encoding # --description-- -What is UTF-8 character encoding, and why is it needed? - UTF-8, or UCS Transformation Format 8, is a standardized character encoding widely used on the web. Character encoding is the method computers use to store characters as data. Essentially, all text on a web page is a sequence of characters stored as one or more bytes. In computing, a byte is a unit of data consisting of 8 bits, or binary digits. UTF-8 supports every character in the Unicode character set - and this includes characters and symbols from all writing systems, languages, and technical symbols. Here is an example of using the `meta` element with the `charset` attribute to set the character encoding to `UTF-8`: ```html diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md index 62c0a000746..2d4630a9d3a 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md @@ -11,7 +11,7 @@ dashedName: what-are-best-practices-for-designing-a-dark-mode-feature Dark mode is a special feature on web applications where you can change the default light color scheme to a dark color scheme. This helps reduce eye strain and improve readability in low-light conditions. When designing your dark mode features, it is important to understand best practices to ensure that your dark mode feature is effective and user-friendly. -Click on the `Toggle Dark Mode` button in the example below to see how dark mode works. +Enable the interactive editor and click on the `Toggle Dark Mode` button in the example below to see how dark mode works. :::interactive_editor @@ -55,7 +55,7 @@ document.getElementById('theme-toggle').addEventListener('click', () => { ::: -The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode. +The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -133,7 +133,7 @@ document.getElementById('theme-toggle').addEventListener('click', () => { ::: -Another consideration with dark mode is the use of pure black backgrounds with white text. While this high contrast can be effective, it can also be too harsh on the eyes. Instead, consider using a dark gray background with light gray text for a softer contrast. Text will be easier on the eyes and more comfortable to read in dark mode. +Another consideration with dark mode is the use of pure black backgrounds with white text. While this high contrast can be effective, it can also be too harsh on the eyes. Instead, consider using a dark gray background with light gray text for a softer contrast. Text will be easier on the eyes and more comfortable to read in dark mode. To see the previews, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md index bf2b7527be9..b01d156abdd 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-breadcrumbs # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. When it comes to web design, there are many types of navigational aids you can use. Examples include top navigation bars, sidebars, and footers. But if your site is on the more complex side with deeper levels of navigation, you might want to consider using breadcrumbs. @@ -57,7 +57,7 @@ When it comes to designing breadcrumbs, there are a few considerations to keep i ::: -The second consideration is the placement of the breadcrumbs. Breadcrumbs are typically placed at the top of the page, either above or below the main navigation bar. Users shouldn't have to struggle to find the breadcrumbs, so make sure they are visible and easy to locate. +The second consideration is the placement of the breadcrumbs. Breadcrumbs are typically placed at the top of the page, either above or below the main navigation bar. Users shouldn't have to struggle to find the breadcrumbs, so make sure they are visible and easy to locate. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md index f26a31a84f6..a9c727add3c 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-cards # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. Card components are a very common occurrence in e-commerce, social media, and news sites. They are used to help display information in a structured way. When you are designing your cards, it is important to understand best practices so your users can easily understand the information you are trying to convey. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md index 362fc8e08b6..36fc60559dc 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-infinite-scrolls # --interactive-- -**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. Infinite scrolling is a design pattern that loads more content as the user scrolls down the page. Oftentimes, this is used on social media sites like Twitter. For example, if you are logged in and want to see more tweets, you can scroll down and more tweets will load. This is an example of infinite scrolling. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md index 7877a463cc5..0afcd887156 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-modal-dialogs # --interactive-- -**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. What is a modal? It's the type of pop-up that a website might show you on top of their content. HTML has a `dialog` element that you can use to create modals. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md index 7f377ac9167..a330b4c59a2 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-progress-indication-on-forms-registratio # --interactive-- -**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. Progress indication is a way to show users how far they are in a process. It can be used in forms, registration, and setup processes. The goal is to help users understand where they are in the process and how much more they need to do. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md index 3e00e2dcc87..0bd9db8200c 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-shopping-carts # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. There are thousands of e-commerce websites on the internet, and the shopping cart is a crucial part of the e-commerce experience. A good design can make the shopping cart experience more enjoyable and increase sales. A poor design can lead to abandoned carts and lost sales. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md index 1b7052593de..e4f13c08a5a 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md @@ -7,7 +7,7 @@ dashedName: what-is-progressive-disclosure # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. A progressive disclosure is a design pattern used to only show users relevant content based on their current activity and hide the rest. This is done to reduce cognitive load and make the user experience more intuitive. diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md index 0b3a6c138bd..f98be9328c5 100644 --- a/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md +++ b/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md @@ -82,7 +82,7 @@ Let's consider a simple analogy. If you think of a website as a house, HTML woul CSS works by selecting HTML elements and applying styles to them. -Here is an example showing an unstyled `button` element and a styled one. +Here is an example showing an unstyled `button` element and a styled one. To interact with this example, you will need to enable the interactive editor. :::interactive_editor @@ -123,7 +123,7 @@ This means that with CSS, you can make your website look great on any device, wh CSS allows you to adjust layouts, font sizes, and other visual elements based on the screen size of the device viewing the website. -Try adjusting the size of the preview window to see how the layout adapts to the screen size. +Try enabling the interactive editor and adjust the size of the preview window to see how the layout adapts to the screen size. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md index 8833a827dff..e21077b9624 100644 --- a/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md +++ b/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md @@ -33,7 +33,7 @@ The value would be the specific setting applied to that property. For example, i After each property name, you need to place a colon, and after each value, you should have a semicolon. -Now that you know the syntax for a CSS rule, let's take a look at an example. Click on the `styles.css` tab in the interactive editor to see the CSS code. +Now that you know the syntax for a CSS rule, let's take a look at an example. Enable the interactive editor and click on the `styles.css` tab to see the CSS code. :::interactive_editor @@ -61,7 +61,7 @@ The declaration consists of the `color` property with a value set to `blue`. Thi If you want to apply the same set of styles to multiple selectors, you can create a selector list with each selector separated by a comma. -Here is an example of styling multiple selectors: +Here is an example of styling multiple selectors (to interact with the example, enable the interactive editor): :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md b/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md index ac733bf309b..fdf5bc0ad5d 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md @@ -12,7 +12,7 @@ The `video` element supports mp4, ogg, and webm formats. To include audio content on your web page, you can use the `audio` element with the `src` attribute pointing to the location of your audio file. -As you can see in the preview window, nothing shows up on the page. +As you can see in the preview window, nothing shows up on the page. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -24,7 +24,7 @@ As you can see in the preview window, nothing shows up on the page. If you want to see the audio player on the page, then you can add the `audio` element with the `controls` attribute. -Press play in the preview window to hear one of Quincy Larson's songs. To hear a different song, change the `src` value to `"https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3"`. +Press play in the preview window to hear one of Quincy Larson's songs. To hear a different song, change the `src` value to `"https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3"`. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -38,7 +38,7 @@ The `controls` attribute enables users to manage audio playback, including adjus Apart from the `src` and `controls` attributes, there are several other attributes that enhance the functionality of the `audio` element. The `loop` attribute is a boolean attribute that makes the audio replay continuously. -Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down". To see the looping in action, scrub the play head close the end of the song and it will restart again once it is finished. +Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down". To see the looping in action, enable the interactive editor, scrub the play head close the end of the song and it will restart again once it is finished. :::interactive_editor @@ -54,7 +54,7 @@ Here's an example of using the `loop` attribute to play one of Quincy Larson's s Another attribute you can use is the `muted` attribute. When present in the `audio` element, this boolean attribute will start the audio in a muted state. Here's an example of using the `muted` attribute. -To hear the music, click on the volume icon in the audio player. +To hear the music, enable the interactive editor and click on the volume icon in the audio player. :::interactive_editor @@ -83,7 +83,7 @@ The browser will first start with the ogg type, and if it can't play the audio, All the attributes we have learned so far are also supported in the `video` element. Here's an example of using a `video` element with the `loop`, `controls`, and `muted` attributes. -Add the `autoplay` attribute to the opening `video` tag so the video plays automatically. +Add the `autoplay` attribute to the opening `video` tag so the video plays automatically. To interact with the example, you will need to enable the interactive editor. **NOTE**: The `width` attribute is being used here to make the video smaller and fit better in the preview window. You will learn more about the `width` attribute in future lessons. diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md b/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md index ecaea548e37..c9f98ae78c4 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md @@ -59,7 +59,7 @@ div { ::: -But if you add `display: flex` to the `main` container, the `div` elements will be rearranged to fit on the same row and they will shrink if necessary: +But if you add `display: flex` to the `main` container, the `div` elements will be rearranged to fit on the same row and they will shrink if necessary (to see the previews, enable the interactive editor): :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md index 7604aa4b7a7..1daa79dd80e 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md @@ -17,7 +17,7 @@ The `form` element in HTML is used to gather user information, such as names and The `action` attribute specifies where the form data will be sent upon submission. To collect specific information, like names and email addresses, you would use the `input` element. Here is an example of using an `input` element. -Interact with the `input` element in the preview window by typing in your name in the field. +Enable the interactive editor and interact with the `input` element in the preview window by typing in your name in the field. :::interactive_editor @@ -31,7 +31,7 @@ Interact with the `input` element in the preview window by typing in your name i `input` elements are void elements and do not have closing tags. The `type` attribute defines the data type expected from the user. In this case, the data would be plaintext. To add a label for the input, you would use a `label` element. Here is an example of using a `label` element with the text of `Full Name:`. -Click on the text `Full Name:` in the preview window and you will see the input go into focus. +Click on the text `Full Name:` in the preview window and you will see the input go into focus. To interact with the example, you will need to enable the interactive editor. :::interactive_editor @@ -48,7 +48,7 @@ Click on the text `Full Name:` in the preview window and you will see the input By nesting an `input` inside a `label` element, you create an implicit association between the `label` and the `input` field. The term "implicit" refers to something that is understood or inferred without needing to be explicitly stated or defined with additional attributes or elements. To explicitly associate a `label` with an `input`, you can use the `for` attribute. Here is an example of using the `for` attribute for an email address label. -Interact with the `input` element in the preview window by typing in a fake email address like `jane@example.com`. +Interact with the `input` element in the preview window by typing in a fake email address like `jane@example.com`. To interact with the example, you will need to enable the interactive editor. :::interactive_editor @@ -63,7 +63,7 @@ Interact with the `input` element in the preview window by typing in a fake emai When using an explicit association, the values for the `for` attribute and `id` need to be the same. In this case, the values are both set to `email`. The `email` type in the input provides basic validation for correctly formatted email addresses. If you want to show additional hints to the users about the expected input, you can use the `placeholder` attribute. Here is an example using the `placeholder` attribute inside the email input. -Click on the email input and start typing in an email and you will see the placeholder text go away. +Enable the interactive editor, click on the email input and start typing in an email and you will see the placeholder text go away. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md index b98eed0e409..bd93c639fde 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md @@ -21,7 +21,8 @@ Other examples of using the `button` element include submitting a form, showing By default, the button will not do anything when activated. However, you can add some JavaScript code to make the button interactive, such as showing an alert in this case. -Click on the `Show Alert` button to see an alert pop up on the screen. +Click on the `Show Alert` button to see an alert pop up on the screen. To interact with the example, you will need to enable the interactive editor. + **NOTE**: This interactive example is using JavaScript but you don't need to worry about understanding the JavaScript code. You will learn about JavaScript in future modules. @@ -55,7 +56,7 @@ Another possible value for the `type` attribute is the `submit` value. Here is a Inside this `form` element, there is a `label` and `input` element for the user's email address. When the user clicks on the submit button, their data will be sent to the server and will be processed. The third possible value for the `type` attribute is the `reset` value. Here is an example of a `form` element with reset and submit buttons. -Interact with the email input in the preview window by providing a fake email address. Then click on the reset button to see your email disappear from the field. +Enable the interactive editor and interact with the email input in the preview window by providing a fake email address. Then click on the reset button to see your email disappear from the field. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md index cb42e815659..95151636bdd 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md @@ -21,7 +21,7 @@ The first state would be considered the `default` state. The default state of an When the user clicks on a form control or selects it with the keyboard's tab key, then that means it is in the `focused` state. When an input is in the `focused` state, most browsers will show a blue highlighted border around the input. But you can choose to add additional styles in CSS. -Click on any part of the whitespace in the preview window and then press the `tab` key to see the focus state. +Click on any part of the whitespace in the preview window and then press the `tab` key to see the focus state. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -33,7 +33,7 @@ Click on any part of the whitespace in the preview window and then press the `ta Another form state is the `disabled` state. This state shows users that an input cannot be focused or activated. -Try clicking on the email input and you will notice that it will not focus anymore. +Enable the interactive editor and try clicking on the email input and you will notice that it will not focus anymore. :::interactive_editor @@ -47,7 +47,7 @@ Similar to the `focused` state, you can choose to add additional styles for the Another type of form state is the `readonly` state. This is when a form control, like an input, is not editable by the user. Here is an example of setting an email input to read-only. The `value` attribute is used to set the value shown inside the input field. -Try editing the current value of `example@email.com` in the preview window, and you will notice that is not possible. +Enable the interactive editor and try editing the current value of `example@email.com` in the preview window, and you will notice that is not possible. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md b/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md index f4dff1e3fe7..1bbc7a38d82 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md @@ -15,7 +15,7 @@ An SVG is a different kind of image. SVG stands for a scalable vector graphic. A SVGs specifically have the added benefit of storing data in XML. This means you can use them directly in your code as raw HTML with the `svg` element. It also means you can programmatically change the color of the image. -To change the smiley face to red, change the `fill="yellow"` to `fill="red"`. +To change the smiley face to red, enable the interactive editor and change the `fill="yellow"` to `fill="red"`. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md index 28b292322a6..f30dbfc05ef 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md @@ -9,7 +9,7 @@ dashedName: what-are-the-different-target-attribute-types You may have seen the `target` attribute on anchor elements, or links. This important attribute tells the browser where to open the URL for the anchor element. -Click on the link and you will be directed to the freeCodeCamp homepage in a new browser tab. +Enable the interactive editor, click on the link and you will be directed to the freeCodeCamp homepage in a new browser tab. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md index c88e428f68b..3cb34488841 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md @@ -11,7 +11,7 @@ You may have seen a link on a web page become purple after you click it. This is The first is the default state, which is `:link`. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it. -Take a look at the link in the preview window. It should be the default color of blue which represents the default state. If you click on it, then it will turn purple. +Enable the interactive editor and take a look at the link in the preview window. It should be the default color of blue which represents the default state. If you click on it, then it will turn purple. :::interactive_editor @@ -23,7 +23,7 @@ Take a look at the link in the preview window. It should be the default color of The second state is `:visited`, which applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user. This is helpful to let someone know they have already read a portion of your documentation. Or, that the site is one they can trust because they have used it before. -Click on the link in the preview window and you should see that the visited link changes to the color brown. +Click on the link in the preview window and you should see that the visited link changes to the color brown. To see the previews, you will need to enable the interactive editor. **NOTE**: Some CSS has been provided for this interactive example so you can see the changes in the link styles. Don't worry about trying to understand the CSS code because you will learn what it all means in future modules. @@ -49,7 +49,7 @@ a:visited { The third state is `:hover`. This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it. -Hover your mouse over the link and you will see the color change to red. +Enable the interactive editor and try hovering your mouse over the link. You will see the color change to red. :::interactive_editor @@ -73,7 +73,7 @@ a:hover { Then we have `:focus`. This state applies when we focus on a link. -Click on any portion of the whitespace in the preview window and then press `tab` on your keyboard. You should see the link change to green. +Click on any portion of the whitespace in the preview window and then press `tab` on your keyboard. You should see the link change to green. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -97,7 +97,7 @@ a:focus { And finally, we have `:active`. This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases. This state can be helpful for showing a user that the element they clicked on is interactive. -Click on the link and you should see the link turn to black. This happens pretty quickly so you might need to click on it a few times to see the color change. +Enable the interactive editor and click on the link. You should see the link turn to black. This happens pretty quickly so you might need to click on it a few times to see the color change. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md index 3428f7ca045..0f803a691a1 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md @@ -17,7 +17,7 @@ With replaced elements, you can control the position, or layout of an element. B The element itself is replaced with the external object: the image. Your CSS can control things like the positioning of the image, or apply a filter to it, but you cannot actually modify the image itself. A more robust example might be the `iframe` element, which embeds an external site on your web page. -Here is an example of using the `iframe` element for a popular YouTube video on the freeCodeCamp channel. If you want to see different videos in the preview window, change the value of the `src` attribute to a video of your choosing. +Here is an example of using the `iframe` element for a popular YouTube video on the freeCodeCamp channel. If you want to see different videos in the preview window, change the value of the `src` attribute to a video of your choosing. To see the previews, you will need to enable the interactive editor. **NOTE**: Don't worry about the extra attributes mentioned in the interactive example like `referrerpolicy` and `allowfullscreen`. You will learn more about working with `iframe` elements in a future workshop. @@ -31,7 +31,7 @@ Here is an example of using the `iframe` element for a popular YouTube video on Other common examples of using the `iframe` element would be to embed maps onto the page. Here is an example of an embedded map. -Try playing around with the map itself by zooming in/out. +Enable the interactive editor and try playing around with the map itself by zooming in/out. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md index b391f7ebae5..cdea4ed01a6 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md @@ -9,7 +9,7 @@ dashedName: how-do-you-embed-videos-onto-your-page-using-the-iframe-element In a prior lesson, you were first introduced to the `iframe` element. In this lesson, you will learn more about how to work with the `iframe` element. This element stands for inline frame. It's an inline element used to embed other HTML content directly within the HTML page. That HTML content could be a video, map, another HTML element, or even other web pages. -Here's an example of embedding a popular freeCodeCamp course from YouTube. To see a different video, change the `src` value to a video of your choosing. +Here's an example of embedding a popular freeCodeCamp course from YouTube. To see a different video, enable the interactive editor and change the `src` value to a video of your choosing. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md index a5b1dc341e1..8b3425f6a2c 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md @@ -17,7 +17,7 @@ This means that if you set an element's height to `100vh`, it will occupy the fu These units are especially handy when you want to create full-screen layouts or elements that maintain a specific proportion of the screen. -For example, you might want to use them to create a hero section that always fills the entire screen: +For example, you might want to use them to create a hero section that always fills the entire screen (to interact with the example, you will need to enable the interactive editor). :::interactive_editor @@ -60,7 +60,7 @@ This CSS ensures that the hero section will always be exactly the size of the vi `vh` and `vw` units can also be used for typography to create responsive text sizes. -Try adjusting the size of the preview window to see how the text scales with the viewport size: +Enable the interactive editor and try adjusting the size of the preview window to see how the text scales with the viewport size: :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md index 23c2735443f..7d95dc7b9e0 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md @@ -9,7 +9,7 @@ dashedName: how-do-you-display-mathematical-equations-and-chemical-formulas-in-h The superscript element is used to display a piece of text as a superscript. A superscript is a symbol or letter printed above the normal line of text. -Here is an example using the superscript element to illustrate exponents: +Here is an example using the superscript element to illustrate exponents (to see the previews, enable the interactive editor): :::interactive_editor @@ -21,7 +21,7 @@ Here is an example using the superscript element to illustrate exponents: In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the preview window, you will see that the second number 2 is smaller and slightly higher than the first number 2. -Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering: +Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering (to see the previews, enable the interactive editor): :::interactive_editor @@ -39,7 +39,7 @@ It is important to note that the superscript element should only be used for typ To represent chemical equations inside HTML, you would use the subscript element. This element uses a subscript which displays a lowered baseline using smaller text. -Here is an example of using the subscript element to show the chemical representation for carbon dioxide. +Here is an example of using the subscript element to show the chemical representation for carbon dioxide (to see the previews, enable the interactive editor): :::interactive_editor diff --git a/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md index 349859a23db..d506a4bc237 100644 --- a/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md +++ b/curriculum/challenges/english/blocks/review-semantic-html/671a83934b61f64cefe87a61.md @@ -16,165 +16,212 @@ dashedName: review-semantic-html ## Semantic HTML Elements - **Header element**: used to define the header of a document or section. + + ```html +Welcome to our cat gallery.
+Browse adorable cat pictures.
+Hi, I am Jane Doe and I am a web developer.
+
+ - Never give up on your dreams. -
-``` + ```html ++ Never give up on your dreams. +
+ ``` - **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts. -```html -- There is a certain je ne sais quoi in the air. -
-``` + ```html ++ There is a certain je ne sais quoi in the air. +
+ ``` The `lang` attribute inside the open `i` tag is used to specify the language of the content. In this case, the language would be French. The `i` element does not indicate if the text is important or not, it only shows that it's somehow different from the surrounding text. - **Strong Importance (`strong`) element**: marks text that has strong importance. -```html -- Warning: This product may cause allergic reactions. -
-``` + ```html ++ Warning: This product may cause allergic reactions. +
+ ``` - **Bring Attention To (`b`) element**: used to bring attention to text that is not important for the meaning of the content. It's commonly used to highlight keywords in summaries or product names in reviews. -```html -- We tested several products, including the SuperSound 3000 for audio quality, the QuickCharge Pro for fast charging, and the Ecoclean Vacuum for cleaning. The first two performed well, but the Ecoclean Vacuum did not meet expectations. -
-``` + ```html ++ We tested several products, including the SuperSound 3000 for audio quality, the QuickCharge Pro for fast charging, and the Ecoclean Vacuum for cleaning. The first two performed well, but the Ecoclean Vacuum did not meet expectations. +
+ ``` - **Description List (`dl`) element**: used to represent a list of term-description groupings. - **Description Term (`dt`) element**: used to represent the term being defined. - **Description Details (`dd`) element**: used to represent the description of the term. -```html -- "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?" --``` - -- **Citation (`cite`) element**: used to attribute the source of the referenced work visually. Marks up the title of the reference. - -```html -
"Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"-
- -Quincy Larson, How to learn to Code and Get a Developer Job [Full Book]. -
-+ "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?" ++
+ -Quincy Larson, How to learn to Code and Get a Developer Job [Full Book]. +
+
- As Quincy Larson said,
-
- Momentum is everything.
-
-
+ As Quincy Larson said,
+
+ Momentum is everything.
+
+
- HTML is the foundation of the web. -
-``` + ```html ++ HTML is the foundation of the web. +
+ ``` - **Contact Address (`address`) element**: used to represent the contact information. - **(Date) Time (`time`) element**: used to represent a date and/or time. The `datetime` attribute is used to translate dates and times into a machine-readable format. -```html -- The reservations are for the -
-``` + ```html ++ The reservations are for the +
+ ``` - **ISO 8601 Date (`datetime`) attribute**: used to represent dates and times in a machine-readable format. The standard format is `YYYY-MM-DDThh:mm:ss`, with the capital `T` being a separator between the date and time. - **Superscript (`sup`) element**: used to represent superscript text. Common use cases for the `sup` element would include exponents, superior lettering and ordinal numbers. -```html -- 22 (2 squared) is 4. -
-``` + ```html ++ 22 (2 squared) is 4. +
+ ``` - **Subscript (`sub`) element**: used to represent subscript text. Common use cases for the subscript element include chemical formulas, footnotes, and variable subscripts. -```html -- CO2 -
-``` + ```html ++ CO2 +
+ ``` - **Inline Code (`code`) element**: used to represent a fragment of computer code. - **Preformatted Text (`pre`) element**: represents preformatted text -```html -
-
- body {
- color: red;
- }
-
-
-```
+ ```html
+
+
+ body {
+ color: red;
+ }
+
+
+ ```
- **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
-```html
-- You can use the unarticulated annotation element to highlight - inccccort spling issses. -
-``` + ```html ++ You can use the unarticulated annotation element to highlight + inccccort spling issses. +
+ ``` - **Ruby Annotation (`ruby`) element**: used for annotating text with pronunciation or meaning explanations. An example usage is for East Asian typography. - **Ruby fallback parenthesis (`rp`) element**: used as a fallback for browsers lacking support for displaying ruby annotations. - **Ruby text (`rt`) element**: used to indicate text for the ruby annotation. Usually used for pronunciation, or translation details in East Asian typography. -```html - - 明日 - -``` + ```html + + 明日 + + ``` - **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant. -```html -
- Tomorrow's hike will be meeting at noon.
-
- Due to unforeseen weather conditions, the hike has been canceled. -
-``` + ```html +
+ Tomorrow's hike will be meeting at noon.
+
+ Due to unforeseen weather conditions, the hike has been canceled. +
+ ``` # --assignment-- diff --git a/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md b/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md index 53c44b09e21..d2ba01652fd 100644 --- a/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md +++ b/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md @@ -7,12 +7,19 @@ dashedName: step-3 # --description-- -You are getting closer. The next thing to do is to set the `viewBox` attribute of the `svg` element. This will -control how much of the image is visible. The first two numbers set the center of the image. +You are getting closer, now look at this example: -The following two numbers set the size of the image we can see: width followed by height. +```html + +``` + +The `viewBox` attribute controls what part of the image is visible inside the SVG. + +- The first two numbers (`0 0`) set the starting position of the `viewBox` — the top-left corner (x and y). +- The next two numbers (`50 50`) define the `viewBox`'s width and height. -Since here the entirety of the icon should be visible, you should set the `viewBox` attribute to `0 0 24 24`. +Set the `viewBox` attribute to `0 0 24 24`. # --hints-- diff --git a/curriculum/challenges/english/blocks/workshop-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/english/blocks/workshop-cat-photo-app/5ef9b03c81a63668521804ee.md index 20f380375c7..970b4c5f561 100644 --- a/curriculum/challenges/english/blocks/workshop-cat-photo-app/5ef9b03c81a63668521804ee.md +++ b/curriculum/challenges/english/blocks/workshop-cat-photo-app/5ef9b03c81a63668521804ee.md @@ -18,14 +18,14 @@ Add this declaration as the first line of the code. Your code should begin with the declaration ``. You may have omitted the declaration, have a typo, or it is not the first line of code. ```js -assert.match(code, /\<\s*!DOCTYPE\s+html\s*\>/); +assert.match(code, /<\s*!doctype\s+html\s*>/i); ``` Your `` must be located at the top of the document. ```js const noSpaces = code.replace(/\s/g, ''); -assert.match(noSpaces, /^\<\!DOCTYPEhtml\>\ q')?.textContent, 'You can become a developer.'); ``` -You should only add `q` tags around the appropriate part of the sentence without changing the original text. The `p` element should still read: `Learning to code is hard, but as Quincy Larson says, you can become a developer.` +You should only add `q` tags around the appropriate part of the sentence without changing the original text. The `p` element should still read: `Learning to code is hard, but as Quincy Larson says, You can become a developer.` ```js const pElCleanedText = document.querySelector('h1 + p')?.innerText.trim().replaceAll(/ {2,}/g, ' '); diff --git a/curriculum/i18n-curriculum b/curriculum/i18n-curriculum index e9bf4f301a3..56a1d3f3e63 160000 --- a/curriculum/i18n-curriculum +++ b/curriculum/i18n-curriculum @@ -1 +1 @@ -Subproject commit e9bf4f301a301387876b6601f64c76feaa78023a +Subproject commit 56a1d3f3e63a01c2d7af9c9d1f13c932d391c9f4 diff --git a/curriculum/schema/scene-assets.js b/curriculum/schema/scene-assets.js index d9e990e2291..ff9e852e278 100644 --- a/curriculum/schema/scene-assets.js +++ b/curriculum/schema/scene-assets.js @@ -277,7 +277,11 @@ const availableAudios = [ 'ES_A1_vowels.mp3', 'ES_A1_vowels_aiu.mp3', 'ES_A1_vowels_oiu.mp3', - 'ES_A1_vowels_uae.mp3' + 'ES_A1_vowels_uae.mp3', + 'ZH_A1_1.1.mp3', + 'ZH_A1_1.2.mp3', + 'ZH_A1_1.3.mp3', + 'ZH_A1_1.4.mp3' ]; const availableAlignments = ['left', 'center', 'right']; diff --git a/curriculum/structure/blocks/en-a2-certification-exam.json b/curriculum/structure/blocks/en-a2-certification-exam.json index a1c292ecc61..15adf28689f 100644 --- a/curriculum/structure/blocks/en-a2-certification-exam.json +++ b/curriculum/structure/blocks/en-a2-certification-exam.json @@ -1,6 +1,6 @@ { "name": "A2 English for Developers Certification Exam", - "isUpcomingChange": true, + "isUpcomingChange": false, "dashedName": "en-a2-certification-exam", "helpCategory": "English", "challengeOrder": [ diff --git a/curriculum/structure/superblocks/back-end-development-and-apis-v9.json b/curriculum/structure/superblocks/back-end-development-and-apis-v9.json index 7649cfbe018..6efb12ea72c 100644 --- a/curriculum/structure/superblocks/back-end-development-and-apis-v9.json +++ b/curriculum/structure/superblocks/back-end-development-and-apis-v9.json @@ -60,6 +60,7 @@ "comingSoon": true, "modules": [ { + "comingSoon": true, "dashedName": "back-end-development-and-apis-certification-exam", "blocks": ["exam-back-end-development-and-apis-certification"] } diff --git a/curriculum/structure/superblocks/front-end-development-libraries-v9.json b/curriculum/structure/superblocks/front-end-development-libraries-v9.json index c28c9854987..264574f5b97 100644 --- a/curriculum/structure/superblocks/front-end-development-libraries-v9.json +++ b/curriculum/structure/superblocks/front-end-development-libraries-v9.json @@ -107,6 +107,7 @@ "comingSoon": true, "modules": [ { + "comingSoon": true, "dashedName": "front-end-development-libraries-certification-exam", "blocks": ["exam-front-end-development-libraries-certification"] } diff --git a/curriculum/structure/superblocks/javascript-v9.json b/curriculum/structure/superblocks/javascript-v9.json index bef0b136d25..e5a2fb63b8b 100644 --- a/curriculum/structure/superblocks/javascript-v9.json +++ b/curriculum/structure/superblocks/javascript-v9.json @@ -21,6 +21,7 @@ "lecture-working-with-string-search-and-slice-methods", "workshop-string-inspector", "lecture-working-with-string-formatting-methods", + "workshop-string-formatter", "lecture-working-with-string-modification-methods", "workshop-string-transformer", "review-javascript-strings", @@ -31,7 +32,9 @@ "dashedName": "javascript-booleans-and-numbers", "blocks": [ "lecture-working-with-numbers-and-arithmetic-operators", + "lab-debug-type-coercion-errors", "lecture-working-with-operator-behavior", + "lab-debug-increment-and-decrement-operator-errors", "lecture-working-with-comparison-and-boolean-operators", "lecture-working-with-unary-and-bitwise-operators", "lecture-working-with-conditional-logic-and-math-methods", @@ -325,7 +328,6 @@ { "chapterType": "exam", "dashedName": "javascript-certification-exam", - "comingSoon": true, "modules": [ { "dashedName": "javascript-certification-exam", diff --git a/curriculum/structure/superblocks/python-v9.json b/curriculum/structure/superblocks/python-v9.json index e088e27a901..3a201f4bc6e 100644 --- a/curriculum/structure/superblocks/python-v9.json +++ b/curriculum/structure/superblocks/python-v9.json @@ -5,7 +5,6 @@ "modules": [ { "dashedName": "python-basics", - "comingSoon": false, "blocks": [ "lecture-introduction-to-python", "workshop-caesar-cipher", @@ -16,7 +15,6 @@ }, { "dashedName": "python-loops-and-sequences", - "comingSoon": false, "blocks": [ "lecture-working-with-loops-and-sequences", "workshop-pin-extractor", @@ -27,7 +25,6 @@ }, { "dashedName": "python-dictionaries-and-sets", - "comingSoon": false, "blocks": [ "lecture-working-with-dictionaries-and-sets", "lecture-working-with-modules", @@ -43,7 +40,6 @@ }, { "dashedName": "python-error-handling", - "comingSoon": false, "blocks": [ "lecture-understanding-error-handling", "lab-isbn-validator", @@ -53,7 +49,6 @@ }, { "dashedName": "python-classes-and-objects", - "comingSoon": true, "blocks": [ "lecture-classes-and-objects", "workshop-musical-instrument-inventory", @@ -70,7 +65,6 @@ }, { "dashedName": "python-object-oriented-programming", - "comingSoon": true, "blocks": [ "lecture-understanding-object-oriented-programming-and-encapsulation", "workshop-salary-tracker", @@ -78,6 +72,7 @@ "lecture-understanding-inheritance-and-polymorphism", "workshop-media-catalogue", "lecture-understanding-abstraction", + "workshop-discount-calculator", "lab-player-interface", "review-object-oriented-programming", "quiz-object-oriented-programming" @@ -90,7 +85,6 @@ }, { "dashedName": "python-linear-data-structures", - "comingSoon": true, "blocks": [ "lecture-working-with-common-data-structures", "workshop-linked-list-class", @@ -105,7 +99,6 @@ }, { "dashedName": "python-algorithms", - "comingSoon": true, "blocks": [ "lecture-searching-and-sorting-algorithms", "workshop-binary-search", @@ -125,9 +118,9 @@ }, { "dashedName": "python-graphs-and-trees", - "comingSoon": true, "blocks": [ "lecture-understanding-graphs-and-trees", + "workshop-shortest-path-algorithm", "lab-adjacency-list-to-matrix-converter", "workshop-breadth-first-search", "lab-depth-first-search", @@ -138,7 +131,6 @@ }, { "dashedName": "python-dynamic-programming", - "comingSoon": true, "blocks": [ "lecture-understanding-dynamic-programming", "lab-nth-fibonacci-number", @@ -147,7 +139,6 @@ ] }, { - "comingSoon": true, "moduleType": "review", "dashedName": "review-python", "blocks": ["review-python"] @@ -160,6 +151,7 @@ "comingSoon": true, "modules": [ { + "comingSoon": true, "dashedName": "python-certification-exam", "blocks": ["exam-python-certification"] } diff --git a/curriculum/structure/superblocks/relational-databases-v9.json b/curriculum/structure/superblocks/relational-databases-v9.json index ea889bef47b..fb62920ebad 100644 --- a/curriculum/structure/superblocks/relational-databases-v9.json +++ b/curriculum/structure/superblocks/relational-databases-v9.json @@ -96,6 +96,7 @@ "comingSoon": true, "modules": [ { + "comingSoon": true, "dashedName": "relational-databases-certification-exam", "blocks": ["exam-relational-databases-certification"] } diff --git a/curriculum/structure/superblocks/responsive-web-design-v9.json b/curriculum/structure/superblocks/responsive-web-design-v9.json index b16a1d66223..b200392653e 100644 --- a/curriculum/structure/superblocks/responsive-web-design-v9.json +++ b/curriculum/structure/superblocks/responsive-web-design-v9.json @@ -14,6 +14,7 @@ "workshop-cat-photo-app", "lab-recipe-page", "lecture-html-fundamentals", + "workshop-bookstore-page", "lecture-understanding-how-html-affects-seo", "lab-travel-agency-page", "lecture-working-with-audio-and-video-elements", @@ -33,6 +34,7 @@ "blocks": [ "lecture-importance-of-semantic-html", "lecture-understanding-nuanced-semantic-elements", + "workshop-major-browsers-list", "lecture-working-with-text-and-time-semantic-elements", "workshop-quincys-job-tips", "lecture-working-with-specialized-semantic-elements", @@ -295,7 +297,6 @@ { "chapterType": "exam", "dashedName": "responsive-web-design-certification-exam", - "comingSoon": true, "modules": [ { "dashedName": "responsive-web-design-certification-exam", diff --git a/e2e/cert-username-case-navigation.spec.ts b/e2e/cert-username-case-navigation.spec.ts index 7ccb5a2d130..aac7cf7ca3d 100644 --- a/e2e/cert-username-case-navigation.spec.ts +++ b/e2e/cert-username-case-navigation.spec.ts @@ -16,7 +16,7 @@ test.describe('Public profile certifications', () => { await expect( page.getByRole('link', { name: /View.+Certification/ }) - ).toHaveCount(19); + ).toHaveCount(20); }); test('Should show claimed certifications if the username includes uppercase characters', async ({ @@ -48,7 +48,7 @@ test.describe('Public profile certifications', () => { await page.waitForURL('/certifiedboozer'); await expect( page.getByRole('link', { name: /View.+Certification/ }) - ).toHaveCount(19); + ).toHaveCount(20); }); test.afterAll(() => { diff --git a/e2e/map.spec.ts b/e2e/map.spec.ts index 86d50b2be86..8cfb0d9042f 100644 --- a/e2e/map.spec.ts +++ b/e2e/map.spec.ts @@ -12,7 +12,7 @@ const LANDING_PAGE_LINKS = [ }, { slug: 'a2-english-for-developers', - name: 'A2 English for Developers (Beta) Certification' + name: 'A2 English for Developers Certification' }, { slug: 'b1-english-for-developers', diff --git a/e2e/preview.spec.ts b/e2e/preview.spec.ts index 5cdb6eb06d4..9ae36127d6f 100644 --- a/e2e/preview.spec.ts +++ b/e2e/preview.spec.ts @@ -9,7 +9,7 @@ test.beforeEach(async ({ page }) => { }); test.describe('Challenge Preview Component', () => { - test('should render correct output of default code', async ({ + test('should render correct output for default and changed code', async ({ page, isMobile }) => { @@ -18,30 +18,27 @@ test.describe('Challenge Preview Component', () => { .getByRole('tab', { name: translations.learn['editor-tabs'].preview }) .click(); } + + // Check default code output await expect( page .frameLocator('.challenge-preview-frame') - .first() .getByRole('heading', { name: 'CatPhotoApp' }) ).toBeVisible(); - }); - test('should render correct output of changed code', async ({ - page, - isMobile - }) => { + // Change code await focusEditor({ page, isMobile }); - await page.keyboard.insertText('Quiz 1, question 1 with 中文
' + ); + expect(firstQuestion.distractors[0]).toBe( + 'Quiz 1, question 1, distractor 1 with 中文
' + ); + expect(firstQuestion.distractors[1]).toBe( + 'Quiz 1, question 1, distractor 2 with 中文
' + ); + expect(firstQuestion.distractors[2]).toBe( + 'Quiz 1, question 1, distractor 3 with 中文
' + ); + expect(firstQuestion.answer).toBe( + 'Quiz 1, question 1, answer with 中文
' + ); + }); + + it('should render Chinese in quizzes when lang is zh-CN and the text does not contain hanzi (pinyin) format', () => { + const zhFile = { data: { lang: 'zh-CN' } }; + plugin(chineseQuizzesAST, zhFile); + const quizzes = zhFile.data.quizzes; + + const firstQuiz = quizzes[0]; + const secondQuestion = firstQuiz.questions[1]; + const thirdQuestion = firstQuiz.questions[2]; + + // Quiz 1, Question 2 + expect(secondQuestion.text).toBe( + 'Quiz 1, question 2 with 中文
Quiz 1, question 2, distractor 1 with 中文
Quiz 1, question 2, distractor 2 with 中文
Quiz 1, question 2, distractor 3 with 中文
Quiz 1, question 2, answer with 中文
Quiz 1, question 3 with zhōng wén
Quiz 1, question 3, distractor 1 with zhōng wén
Quiz 1, question 3, distractor 2 with zhōng wén
Quiz 1, question 3, distractor 3 with zhōng wén
Quiz 1, question 3, answer with zhōng wén
Instructions containing 汉字.
\nWang Hua uses 请问 to politely start her question.
\nQuestion text containing 汉字.
' + ); + + const answer1 = question.answers[0]; + expect(answer1.answer).toContain( + '你好' + ); + + const answer2 = question.answers[1]; + expect(answer2.answer).toContain( + '请' + ); + expect(answer2.feedback).toBe( + '请 is not correct.
' + ); + + const answer3 = question.answers[2]; + expect(answer3.answer).toContain( + '请问' + ); + + const answer4 = question.answers[3]; + expect(answer4.answer).toContain( + '问' + ); + }); }); diff --git a/tools/challenge-parser/parser/plugins/utils/i18n-stringify.js b/tools/challenge-parser/parser/plugins/utils/i18n-stringify.js new file mode 100644 index 00000000000..0e10a036ff4 --- /dev/null +++ b/tools/challenge-parser/parser/plugins/utils/i18n-stringify.js @@ -0,0 +1,78 @@ +const mdastToHTML = require('./mdast-to-html'); + +/** + * Parses Chinese text in format: hanzi (pinyin) + * @param {string} text - Text in format: hanzi (pinyin) + * @returns {{ hanzi: string, pinyin: string } | null} Parsed hanzi and pinyin, or null if not matching + */ +function parseChinesePattern(text) { + const match = text.match(/^(.+?)\s*\((.+?)\)$/); + + if (!match) { + return null; + } + + return { + hanzi: match[1].trim(), + pinyin: match[2].trim() + }; +} + +/** + * Custom handler for Chinese inline code to render as ruby elements + * @param {object} state - The state object from mdast-util-to-hast + * @param {object} node - The inlineCode node + * @returns {object} Hast element node + */ +function chineseInlineCodeHandler(state, node) { + const parsed = parseChinesePattern(node.value); + + if (parsed) { + return { + type: 'element', + tagName: 'ruby', + properties: {}, + children: [ + { type: 'text', value: parsed.hanzi }, + { + type: 'element', + tagName: 'rp', + properties: {}, + children: [{ type: 'text', value: '(' }] + }, + { + type: 'element', + tagName: 'rt', + properties: {}, + children: [{ type: 'text', value: parsed.pinyin }] + }, + { + type: 'element', + tagName: 'rp', + properties: {}, + children: [{ type: 'text', value: ')' }] + } + ] + }; + } + + return { + type: 'element', + // TODO: change this to span + // https://github.com/freeCodeCamp/language-curricula/issues/22 + tagName: 'code', + properties: {}, + children: [{ type: 'text', value: node.value }] + }; +} + +const rubyOptions = { + handlers: { + inlineCode: chineseInlineCodeHandler + } +}; + +const createMdastToHtml = lang => + lang == 'zh-CN' ? x => mdastToHTML(x, rubyOptions) : mdastToHTML; + +module.exports = { parseChinesePattern, createMdastToHtml }; diff --git a/tools/challenge-parser/parser/plugins/utils/i18n-stringify.test.js b/tools/challenge-parser/parser/plugins/utils/i18n-stringify.test.js new file mode 100644 index 00000000000..64631528c58 --- /dev/null +++ b/tools/challenge-parser/parser/plugins/utils/i18n-stringify.test.js @@ -0,0 +1,129 @@ +import { describe, it, expect } from 'vitest'; +import { createMdastToHtml, parseChinesePattern } from './i18n-stringify'; + +describe('parseChinesePattern', () => { + it('should parse Chinese text with hanzi and pinyin', () => { + const result = parseChinesePattern('你好 (nǐ hǎo)'); + expect(result).toEqual({ + hanzi: '你好', + pinyin: 'nǐ hǎo' + }); + }); + + it('should handle text without spaces before parentheses', () => { + const result = parseChinesePattern('你好(nǐ hǎo)'); + expect(result).toEqual({ + hanzi: '你好', + pinyin: 'nǐ hǎo' + }); + }); + + it('should handle text with multiple spaces', () => { + const result = parseChinesePattern('你好 (nǐ hǎo)'); + expect(result).toEqual({ + hanzi: '你好', + pinyin: 'nǐ hǎo' + }); + }); + + it('should return null for text without parentheses', () => { + const result = parseChinesePattern('你好'); + expect(result).toBeNull(); + }); + + it('should return null for text with only opening parenthesis', () => { + const result = parseChinesePattern('你好 (nǐ hǎo'); + expect(result).toBeNull(); + }); + + it('should return null for empty string', () => { + const result = parseChinesePattern(''); + expect(result).toBeNull(); + }); +}); + +describe('createMdastToHtml', () => { + it('should render Chinese inline code as ruby when lang is zh-CN', () => { + const toHtml = createMdastToHtml('zh-CN'); + const nodes = [ + { + type: 'paragraph', + children: [ + { type: 'text', value: 'This is ' }, + { type: 'inlineCode', value: '请问 (qǐng wèn)' }, + { type: 'text', value: '.' } + ] + } + ]; + const actual = toHtml(nodes); + expect(actual).toBe( + 'This is 请问.
' + ); + }); + + it('should render Chinese inline code as ruby with or without space before parenthesis', () => { + const toHtml = createMdastToHtml('zh-CN'); + const nodesWithSpace = [ + { + type: 'paragraph', + children: [{ type: 'inlineCode', value: '你好 (nǐ hǎo)' }] + } + ]; + const nodesWithoutSpace = [ + { + type: 'paragraph', + children: [{ type: 'inlineCode', value: '你好(nǐ hǎo)' }] + } + ]; + const expected = + '你好
'; + expect(toHtml(nodesWithSpace)).toBe(expected); + expect(toHtml(nodesWithoutSpace)).toBe(expected); + }); + + it('should handle multiple Chinese inline codes in one paragraph', () => { + const toHtml = createMdastToHtml('zh-CN'); + const nodes = [ + { + type: 'paragraph', + children: [ + { type: 'inlineCode', value: '你好 (nǐ hǎo)' }, + { type: 'text', value: ' and ' }, + { type: 'inlineCode', value: '再见 (zài jiàn)' } + ] + } + ]; + const actual = toHtml(nodes); + expect(actual).toBe( + '你好 and 再见
' + ); + }); + + it('should fallback to code element if pattern does not match', () => { + const toHtml = createMdastToHtml('zh-CN'); + const nodes = [ + { + type: 'paragraph', + children: [ + { type: 'inlineCode', value: '你好' }, + { type: 'text', value: ' and ' }, + { type: 'inlineCode', value: 'nǐ hǎo' } + ] + } + ]; + const actual = toHtml(nodes, { lang: 'zh-CN' }); + expect(actual).toBe('你好 and nǐ hǎo
请问 (qǐng wèn)