gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: update intro pages and learn map (#40745)

Browse Source
This commit is contained in:
Kristofer Koishigawa
2021-01-26 02:55:07 +09:00
committed by Mrugesh Mohapatra
parent 94e6219c39
commit 9ec8aa3db4
32 changed files with 701 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
client/i18n/intro-schema.js
View File

@ -10,13 +10,6 @@ const introSchema = {
"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 web form.", "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 web form.",
"Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid." "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg',
'image-alt': 'Three people designing a responsive website layout together',
icon:
'https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png',
'icon-alt':
'A computer monitor with the desktop view and a smartphone with the mobile view of the same website.',
blocks: { blocks: {
'basic-html-and-html5': { 'basic-html-and-html5': {
title: 'Basic HTML and HTML5', title: 'Basic HTML and HTML5',
@ -95,12 +88,6 @@ const introSchema = {
"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.", "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.",
"Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)." "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg',
'image-alt': 'A person working on a laptop',
icon:
'https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1',
'icon-alt': 'JavaScript shield logo',
blocks: { blocks: {
'basic-javascript': { 'basic-javascript': {
title: 'Basic JavaScript', title: 'Basic JavaScript',
@ -195,12 +182,6 @@ const introSchema = {
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.", "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
"Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux." "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg',
'image-alt': 'A person sitting atop the react logo',
icon:
'https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png',
'icon-alt': 'React logo',
blocks: { blocks: {
bootstrap: { bootstrap: {
title: 'Bootstrap', title: 'Bootstrap',
@ -263,13 +244,6 @@ const introSchema = {
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.", "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
"You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)." "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg',
'image-alt':
'Three people placing charts and graphs onto a browser interface',
icon:
'https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667',
'icon-alt': 'D3 logo',
blocks: { blocks: {
'data-visualization-with-d3': { 'data-visualization-with-d3': {
title: 'Data Visualization with D3', title: 'Data Visualization with D3',
@ -308,12 +282,6 @@ const introSchema = {
'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.', '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.',
"In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library." "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg',
'image-alt': 'A person standing next to a database icon larger than her',
icon:
'https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png',
'icon-alt': 'A server in front of a cloud.',
blocks: { blocks: {
'managing-packages-with-npm': { 'managing-packages-with-npm': {
title: 'Managing Packages with NPM', title: 'Managing Packages with NPM',
@ -355,12 +323,6 @@ const introSchema = {
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.", "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
"Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients." "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg',
'image-alt': 'Two people interacting with a website',
icon:
'https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png',
'icon-alt': 'A clipboard with a bulleted list.',
blocks: { blocks: {
'quality-assurance-and-testing-with-chai': { 'quality-assurance-and-testing-with-chai': {
title: 'Quality Assurance and Testing with Chai', title: 'Quality Assurance and Testing with Chai',
@ -393,12 +355,6 @@ const introSchema = {
'Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.', 'Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.',
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization." "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg',
'image-alt': 'Two people sitting in front of a computer',
icon:
'https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png',
'icon-alt': 'Python logo',
blocks: { blocks: {
'python-for-everybody': { 'python-for-everybody': {
title: 'Python for Everybody', title: 'Python for Everybody',
@ -421,12 +377,6 @@ const introSchema = {
'Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.', 'Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.',
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data." "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg',
'image-alt': 'A person looking at various charts',
icon:
'https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png',
'icon-alt': 'A line graph',
blocks: { blocks: {
'data-analysis-with-python-course': { 'data-analysis-with-python-course': {
title: 'Data Analysis with Python', title: 'Data Analysis with Python',
@ -458,12 +408,6 @@ const introSchema = {
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.", "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
"You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security." "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg',
'image-alt': 'A person standing in front of a browser with a padlock',
icon:
'https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png',
'icon-alt': 'Green shield logo',
blocks: { blocks: {
'information-security-with-helmetjs': { 'information-security-with-helmetjs': {
title: 'Information Security with HelmetJS', title: 'Information Security with HelmetJS',
@ -495,11 +439,6 @@ const introSchema = {
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.", "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
"You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work." "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg',
'image-alt': 'A person holding a cell phone standing next to a robot',
icon: 'https://www.kubeflow.org/docs/images/logos/TensorFlow.png',
'icon-alt': 'TensorFlow logo',
blocks: { blocks: {
tensorflow: { tensorflow: {
title: 'Tensorflow', title: 'Tensorflow',
@ -529,13 +468,6 @@ const introSchema = {
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.", "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.' 'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.'
], ],
image:
'https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg',
'image-alt':
'A person sitting at a computer with a data structure in the background',
icon:
'https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png',
'icon-alt': 'Algorithm, creative shape icon',
blocks: { blocks: {
algorithms: { algorithms: {
title: 'Algorithms', title: 'Algorithms',
@ -578,9 +510,9 @@ const introSchema = {
certification: '{{cert}} Certification', certification: '{{cert}} Certification',
'browse-other': 'browse-other':
'Browse our other free certifications\n(we recommend doing these in order)', 'Browse our other free certifications\n(we recommend doing these in order)',
courses: 'courses', courses: 'Courses',
'section-courses': '{{section}} courses' expand: 'Expand',
collapse: 'Collapse'
} }
}; };
exports.introSchema = introSchema; exports.introSchema = introSchema;

49
client/i18n/locales/chinese/intro.json
View File

@ -6,10 +6,6 @@
"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 web form.", "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 web form.",
"Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid." "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg",
"image-alt": "Three people designing a responsive website layout together",
"icon": "https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png",
"icon-alt": "A computer monitor with the desktop view and a smartphone with the mobile view of the same website.",
"blocks": { "blocks": {
"basic-html-and-html5": { "basic-html-and-html5": {
"title": "Basic HTML and HTML5", "title": "Basic HTML and HTML5",
@ -88,10 +84,6 @@
"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.", "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.",
"Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)." "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg",
"image-alt": "A person working on a laptop",
"icon": "https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1",
"icon-alt": "JavaScript shield logo",
"blocks": { "blocks": {
"basic-javascript": { "basic-javascript": {
"title": "Basic JavaScript", "title": "Basic JavaScript",
@ -186,10 +178,6 @@
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.", "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
"Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux." "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg",
"image-alt": "A person sitting atop the react logo",
"icon": "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png",
"icon-alt": "React logo",
"blocks": { "blocks": {
"bootstrap": { "bootstrap": {
"title": "Bootstrap", "title": "Bootstrap",
@ -252,10 +240,6 @@
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.", "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
"You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)." "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg",
"image-alt": "Three people placing charts and graphs onto a browser interface",
"icon": "https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667",
"icon-alt": "D3 logo",
"blocks": { "blocks": {
"data-visualization-with-d3": { "data-visualization-with-d3": {
"title": "Data Visualization with D3", "title": "Data Visualization with D3",
@ -294,10 +278,6 @@
"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.", "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.",
"In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library." "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg",
"image-alt": "A person standing next to a database icon larger than her",
"icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png",
"icon-alt": "A server in front of a cloud.",
"blocks": { "blocks": {
"managing-packages-with-npm": { "managing-packages-with-npm": {
"title": "Managing Packages with NPM", "title": "Managing Packages with NPM",
@ -339,10 +319,6 @@
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.", "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
"Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients." "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg",
"image-alt": "Two people interacting with a website",
"icon": "https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png",
"icon-alt": "A clipboard with a bulleted list.",
"blocks": { "blocks": {
"quality-assurance-and-testing-with-chai": { "quality-assurance-and-testing-with-chai": {
"title": "Quality Assurance and Testing with Chai", "title": "Quality Assurance and Testing with Chai",
@ -375,10 +351,6 @@
"Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.", "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization." "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg",
"image-alt": "Two people sitting in front of a computer",
"icon": "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png",
"icon-alt": "Python logo",
"blocks": { "blocks": {
"python-for-everybody": { "python-for-everybody": {
"title": "Python for Everybody", "title": "Python for Everybody",
@ -401,10 +373,6 @@
"Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.", "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data." "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg",
"image-alt": "A person looking at various charts",
"icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png",
"icon-alt": "A line graph",
"blocks": { "blocks": {
"data-analysis-with-python-course": { "data-analysis-with-python-course": {
"title": "Data Analysis with Python", "title": "Data Analysis with Python",
@ -436,10 +404,6 @@
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.", "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
"You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security." "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg",
"image-alt": "A person standing in front of a browser with a padlock",
"icon": "https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png",
"icon-alt": "Green shield logo",
"blocks": { "blocks": {
"information-security-with-helmetjs": { "information-security-with-helmetjs": {
"title": "Information Security with HelmetJS", "title": "Information Security with HelmetJS",
@ -471,10 +435,6 @@
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.", "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
"You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work." "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg",
"image-alt": "A person holding a cell phone standing next to a robot",
"icon": "https://www.kubeflow.org/docs/images/logos/TensorFlow.png",
"icon-alt": "TensorFlow logo",
"blocks": { "blocks": {
"tensorflow": { "tensorflow": {
"title": "Tensorflow", "title": "Tensorflow",
@ -504,10 +464,6 @@
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.", "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
"This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio." "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg",
"image-alt": "A person sitting at a computer with a data structure in the background",
"icon": "https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png",
"icon-alt": "Algorithm, creative shape icon",
"blocks": { "blocks": {
"algorithms": { "algorithms": {
"title": "Algorithms", "title": "Algorithms",
@ -549,7 +505,8 @@
"misc-text": { "misc-text": {
"certification": "{{cert}} Certification", "certification": "{{cert}} Certification",
"browse-other": "Browse our other free certifications\n(we recommend doing these in order)", "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
"courses": "courses", "courses": "Courses",
"section-courses": "{{section}} courses" "expand": "Expand",
"collapse": "Collapse"
} }
} }

13
client/i18n/locales/chinese/translations.json
View File

@ -404,7 +404,18 @@
"initial": "初始", "initial": "初始",
"info": "介绍信息", "info": "介绍信息",
"spacer": "间隔", "spacer": "间隔",
"toggle": "切换选中标记" "toggle": "切换选中标记",
"responsive-design": "Laptop and mobile phone icon",
"javascript": "JavaScript icon",
"react": "React icon",
"d3": "D3 icon",
"api": "A stack of servers",
"clipboard": "A clipboard with a checkmark",
"python": "Python icon",
"analytics": "A bar chart and line graph",
"shield": "A shield with a checkmark",
"tensorflow": "Tensorflow icon",
"algorithm": "Branching nodes"
}, },
"aria": { "aria": {
"fcc-logo": "freeCodeCamp Logo", "fcc-logo": "freeCodeCamp Logo",

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

@ -6,10 +6,6 @@
"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 web form.", "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 web form.",
"Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid." "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg",
"image-alt": "Three people designing a responsive website layout together",
"icon": "https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png",
"icon-alt": "A computer monitor with the desktop view and a smartphone with the mobile view of the same website.",
"blocks": { "blocks": {
"basic-html-and-html5": { "basic-html-and-html5": {
"title": "Basic HTML and HTML5", "title": "Basic HTML and HTML5",
@ -88,10 +84,6 @@
"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.", "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.",
"Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)." "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg",
"image-alt": "A person working on a laptop",
"icon": "https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1",
"icon-alt": "JavaScript shield logo",
"blocks": { "blocks": {
"basic-javascript": { "basic-javascript": {
"title": "Basic JavaScript", "title": "Basic JavaScript",
@ -186,10 +178,6 @@
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.", "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
"Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux." "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg",
"image-alt": "A person sitting atop the react logo",
"icon": "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png",
"icon-alt": "React logo",
"blocks": { "blocks": {
"bootstrap": { "bootstrap": {
"title": "Bootstrap", "title": "Bootstrap",
@ -252,10 +240,6 @@
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.", "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
"You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)." "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg",
"image-alt": "Three people placing charts and graphs onto a browser interface",
"icon": "https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667",
"icon-alt": "D3 logo",
"blocks": { "blocks": {
"data-visualization-with-d3": { "data-visualization-with-d3": {
"title": "Data Visualization with D3", "title": "Data Visualization with D3",
@ -294,10 +278,6 @@
"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.", "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.",
"In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library." "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg",
"image-alt": "A person standing next to a database icon larger than her",
"icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png",
"icon-alt": "A server in front of a cloud.",
"blocks": { "blocks": {
"managing-packages-with-npm": { "managing-packages-with-npm": {
"title": "Managing Packages with NPM", "title": "Managing Packages with NPM",
@ -339,10 +319,6 @@
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.", "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
"Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients." "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg",
"image-alt": "Two people interacting with a website",
"icon": "https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png",
"icon-alt": "A clipboard with a bulleted list.",
"blocks": { "blocks": {
"quality-assurance-and-testing-with-chai": { "quality-assurance-and-testing-with-chai": {
"title": "Quality Assurance and Testing with Chai", "title": "Quality Assurance and Testing with Chai",
@ -375,10 +351,6 @@
"Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.", "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization." "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg",
"image-alt": "Two people sitting in front of a computer",
"icon": "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png",
"icon-alt": "Python logo",
"blocks": { "blocks": {
"python-for-everybody": { "python-for-everybody": {
"title": "Python for Everybody", "title": "Python for Everybody",
@ -401,10 +373,6 @@
"Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.", "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data." "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg",
"image-alt": "A person looking at various charts",
"icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png",
"icon-alt": "A line graph",
"blocks": { "blocks": {
"data-analysis-with-python-course": { "data-analysis-with-python-course": {
"title": "Data Analysis with Python", "title": "Data Analysis with Python",
@ -436,10 +404,6 @@
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.", "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
"You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security." "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg",
"image-alt": "A person standing in front of a browser with a padlock",
"icon": "https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png",
"icon-alt": "Green shield logo",
"blocks": { "blocks": {
"information-security-with-helmetjs": { "information-security-with-helmetjs": {
"title": "Information Security with HelmetJS", "title": "Information Security with HelmetJS",
@ -471,10 +435,6 @@
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.", "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
"You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work." "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg",
"image-alt": "A person holding a cell phone standing next to a robot",
"icon": "https://www.kubeflow.org/docs/images/logos/TensorFlow.png",
"icon-alt": "TensorFlow logo",
"blocks": { "blocks": {
"tensorflow": { "tensorflow": {
"title": "Tensorflow", "title": "Tensorflow",
@ -504,10 +464,6 @@
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.", "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
"This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio." "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg",
"image-alt": "A person sitting at a computer with a data structure in the background",
"icon": "https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png",
"icon-alt": "Algorithm, creative shape icon",
"blocks": { "blocks": {
"algorithms": { "algorithms": {
"title": "Algorithms", "title": "Algorithms",
@ -550,6 +506,7 @@
"certification": "{{cert}} Certification", "certification": "{{cert}} Certification",
"browse-other": "Browse our other free certifications\n(we recommend doing these in order)", "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
"courses": "Courses", "courses": "Courses",
"section-courses": "{{section}} Courses" "expand": "Expand",
"collapse": "Collapse"
} }
} }

13
client/i18n/locales/english/translations.json
View File

@ -406,7 +406,18 @@
"initial": "Initial", "initial": "Initial",
"info": "Intro Information", "info": "Intro Information",
"spacer": "Spacer", "spacer": "Spacer",
"toggle": "Toggle Checkmark" "toggle": "Toggle Checkmark",
"responsive-design": "Laptop and mobile phone icon",
"javascript": "JavaScript icon",
"react": "React icon",
"d3": "D3 icon",
"api": "A stack of servers",
"clipboard": "A clipboard with a checkmark",
"python": "Python icon",
"analytics": "A bar chart and line graph",
"shield": "A shield with a checkmark",
"tensorflow": "Tensorflow icon",
"algorithm": "Branching nodes"
}, },
"aria": { "aria": {
"fcc-logo": "freeCodeCamp Logo", "fcc-logo": "freeCodeCamp Logo",

49
client/i18n/locales/espanol/intro.json
View File

@ -6,10 +6,6 @@
"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 web form.", "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 web form.",
"Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid." "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/building_websites_i78t.svg",
"image-alt": "Three people designing a responsive website layout together",
"icon": "https://cdn3.iconfinder.com/data/icons/seo-web-5-1/128/Vigor_responsive-web-design-adaptive-64.png",
"icon-alt": "A computer monitor with the desktop view and a smartphone with the mobile view of the same website.",
"blocks": { "blocks": {
"basic-html-and-html5": { "basic-html-and-html5": {
"title": "Basic HTML and HTML5", "title": "Basic HTML and HTML5",
@ -88,10 +84,6 @@
"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.", "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.",
"Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)." "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/dev_focus_b9xo.svg",
"image-alt": "A person working on a laptop",
"icon": "https://i2.wp.com/info.widespace.com/wp-content/uploads/2016/03/javascript-shield-logo.png?ssl=1",
"icon-alt": "JavaScript shield logo",
"blocks": { "blocks": {
"basic-javascript": { "basic-javascript": {
"title": "Basic JavaScript", "title": "Basic JavaScript",
@ -186,10 +178,6 @@
"In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.", "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
"Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux." "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/react_y7wq.svg",
"image-alt": "A person sitting atop the react logo",
"icon": "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-64.png",
"icon-alt": "React logo",
"blocks": { "blocks": {
"bootstrap": { "bootstrap": {
"title": "Bootstrap", "title": "Bootstrap",
@ -252,10 +240,6 @@
"In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.", "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
"You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)." "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Data_re_80ws.svg",
"image-alt": "Three people placing charts and graphs onto a browser interface",
"icon": "https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667",
"icon-alt": "D3 logo",
"blocks": { "blocks": {
"data-visualization-with-d3": { "data-visualization-with-d3": {
"title": "Data Visualization with D3", "title": "Data Visualization with D3",
@ -294,10 +278,6 @@
"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.", "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.",
"In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library." "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/server_status_5pbv.svg",
"image-alt": "A person standing next to a database icon larger than her",
"icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Cloud-Server-Database-Hosting-64.png",
"icon-alt": "A server in front of a cloud.",
"blocks": { "blocks": {
"managing-packages-with-npm": { "managing-packages-with-npm": {
"title": "Managing Packages with NPM", "title": "Managing Packages with NPM",
@ -339,10 +319,6 @@
"In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.", "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
"Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients." "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/usability_testing_2xs4.svg",
"image-alt": "Two people interacting with a website",
"icon": "https://cdn1.iconfinder.com/data/icons/smallicons-misc/32/clipboard-64.png",
"icon-alt": "A clipboard with a bulleted list.",
"blocks": { "blocks": {
"quality-assurance-and-testing-with-chai": { "quality-assurance-and-testing-with-chai": {
"title": "Quality Assurance and Testing with Chai", "title": "Quality Assurance and Testing with Chai",
@ -375,10 +351,6 @@
"Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.", "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
"In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization." "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/pair_programming_njlp.svg",
"image-alt": "Two people sitting in front of a computer",
"icon": "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/267_Python_logo-64.png",
"icon-alt": "Python logo",
"blocks": { "blocks": {
"python-for-everybody": { "python-for-everybody": {
"title": "Python for Everybody", "title": "Python for Everybody",
@ -401,10 +373,6 @@
"Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.", "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
"In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data." "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/design_data_khdb.svg",
"image-alt": "A person looking at various charts",
"icon": "https://cdn0.iconfinder.com/data/icons/seo-web-4-1/128/Vigor_Analytics-Graph-Statistics-64.png",
"icon-alt": "A line graph",
"blocks": { "blocks": {
"data-analysis-with-python-course": { "data-analysis-with-python-course": {
"title": "Data Analysis with Python", "title": "Data Analysis with Python",
@ -436,10 +404,6 @@
"With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.", "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
"You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security." "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/security_o890.svg",
"image-alt": "A person standing in front of a browser with a padlock",
"icon": "https://cdn1.iconfinder.com/data/icons/unigrid-phantom-security-vol-1/60/013_005_shield_protect_protection_security_secure_guard_guardian_defense_firewall_5-64.png",
"icon-alt": "Green shield logo",
"blocks": { "blocks": {
"information-security-with-helmetjs": { "information-security-with-helmetjs": {
"title": "Information Security with HelmetJS", "title": "Information Security with HelmetJS",
@ -471,10 +435,6 @@
"In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.", "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
"You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work." "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Artificial_intelligence_re_enpp.svg",
"image-alt": "A person holding a cell phone standing next to a robot",
"icon": "https://www.kubeflow.org/docs/images/logos/TensorFlow.png",
"icon-alt": "TensorFlow logo",
"blocks": { "blocks": {
"tensorflow": { "tensorflow": {
"title": "Tensorflow", "title": "Tensorflow",
@ -504,10 +464,6 @@
"If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.", "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
"This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio." "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
], ],
"image": "https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/software_engineer_lvl5.svg",
"image-alt": "A person sitting at a computer with a data structure in the background",
"icon": "https://cdn1.iconfinder.com/data/icons/data-science-flat-1/64/neural-network-machine-learning-algorithm-64.png",
"icon-alt": "Algorithm, creative shape icon",
"blocks": { "blocks": {
"algorithms": { "algorithms": {
"title": "Algorithms", "title": "Algorithms",
@ -549,7 +505,8 @@
"misc-text": { "misc-text": {
"certification": "{{cert}} Certification", "certification": "{{cert}} Certification",
"browse-other": "Browse our other free certifications\n(we recommend doing these in order)", "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
"courses": "courses", "courses": "Courses",
"section-courses": "{{section}} courses" "expand": "Expand",
"collapse": "Collapse"
} }
} }

13
client/i18n/locales/espanol/translations.json
View File

@ -406,7 +406,18 @@
"initial": "Inicial", "initial": "Inicial",
"info": "Información de introducción", "info": "Información de introducción",
"spacer": "Espaciador", "spacer": "Espaciador",
"toggle": "Alternar marca de verificación" "toggle": "Alternar marca de verificación",
"responsive-design": "Laptop and mobile phone icon",
"javascript": "JavaScript icon",
"react": "React icon",
"d3": "D3 icon",
"api": "A stack of servers",
"clipboard": "A clipboard with a checkmark",
"python": "Python icon",
"analytics": "A bar chart and line graph",
"shield": "A shield with a checkmark",
"tensorflow": "Tensorflow icon",
"algorithm": "Branching nodes"
}, },
"aria": { "aria": {
"fcc-logo": "freeCodeCamp Logo", "fcc-logo": "freeCodeCamp Logo",

15
client/i18n/translations-schema.js
View File

@ -415,7 +415,7 @@ const translationsSchema = {
'bigger-donation': 'bigger-donation':
'Want to make a bigger one-time donation, mail us a check, or give in other ways?', 'Want to make a bigger one-time donation, mail us a check, or give in other ways?',
'other-ways': 'other-ways':
"Here are many <0>other ways we could support our non-profit's mission</0>.", "Here are many <0>other ways you can support our non-profit's mission</0>.",
'other-ways-url': 'other-ways-url':
'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp', 'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp',
'failed-pay': 'failed-pay':
@ -477,7 +477,18 @@ const translationsSchema = {
initial: 'Initial', initial: 'Initial',
info: 'Intro Information', info: 'Intro Information',
spacer: 'Spacer', spacer: 'Spacer',
toggle: 'Toggle Checkmark' toggle: 'Toggle Checkmark',
'responsive-design': 'Laptop and mobile phone icon',
javascript: 'JavaScript icon',
react: 'React icon',
d3: 'D3 icon',
api: 'A stack of servers',
clipboard: 'A clipboard with a checkmark',
python: 'Python icon',
analytics: 'A bar chart and line graph',
shield: 'A shield with a checkmark',
tensorflow: 'Tensorflow icon',
algorithm: 'Branching nodes'
}, },
aria: { aria: {
'fcc-logo': 'freeCodeCamp Logo', 'fcc-logo': 'freeCodeCamp Logo',

19
client/src/assets/icons/APIIcon.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function APIIcon(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.api')}</span>
<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 208v96a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 304v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z' />
</svg>
</Fragment>
);
}
APIIcon.displayName = 'APIIcon';
export default APIIcon;

19
client/src/assets/icons/Algorithm.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function Algorithm(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.algorithm')}</span>
<svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M568 368c-19.1 0-36.3 7.6-49.2 19.7L440.6 343c4.5-12.2 7.4-25.2 7.4-39 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-32.2-69c15-13.2 24.6-32.3 24.6-53.8 0-39.8-32.2-72-72-72s-72 32.2-72 72 32.2 72 72 72c.9 0 1.8-.2 2.7-.3l33.5 71.7C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 30.7 0 58.6-12.4 78.8-32.5l82.2 47c-.4 3.1-1 6.3-1 9.5 0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72zM232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm104 272c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm-54.4-261.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM152 320h48v-32h-48v32zm-88-80c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64z' />
</svg>
</Fragment>
);
}
Algorithm.displayName = 'Algorithm';
export default Algorithm;

19
client/src/assets/icons/Analytics.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function Analytics(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.analytics')}</span>
<svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M510.62 92.63C516.03 94.74 521.85 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 2.43.37 4.76.71 7.09l-95.34 76.27c-5.4-2.11-11.23-3.37-17.38-3.37s-11.97 1.26-17.38 3.37L255.29 55.1c.35-2.33.71-4.67.71-7.1 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 4.27.74 8.34 1.78 12.28l-101.5 101.5C56.34 160.74 52.27 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-4.27-.74-8.34-1.78-12.28l101.5-101.5C199.66 95.26 203.73 96 208 96c6.15 0 11.97-1.26 17.38-3.37l95.34 76.27c-.35 2.33-.71 4.67-.71 7.1 0 26.51 21.49 48 48 48s48-21.49 48-48c0-2.43-.37-4.76-.71-7.09l95.32-76.28zM400 320h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm160-128h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-320 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zM80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16z' />
</svg>
</Fragment>
);
}
Analytics.displayName = 'Analytics';
export default Analytics;

19
client/src/assets/icons/Clipboard.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function Clipboard(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.clipboard')}</span>
<svg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M126.2 286.4l64.2-63.6c2.1-2.1 2.1-5.5 0-7.6l-12.6-12.7c-2.1-2.1-5.5-2.1-7.6 0l-47.6 47.2-20.6-20.9c-2.1-2.1-5.5-2.1-7.6 0l-12.7 12.6c-2.1 2.1-2.1 5.5 0 7.6l37.1 37.4c1.9 2.1 5.3 2.1 7.4 0zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336zM112 328c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm168-88h-63.3c-1.3 1.8-2.1 3.9-3.7 5.5L186.2 272H280c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8z' />
</svg>
</Fragment>
);
}
Clipboard.displayName = 'Clipboard';
export default Clipboard;

23
client/src/assets/icons/D3Icon.js Normal file
View File

@ -0,0 +1,23 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function D3Icon(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.d3')}</span>
<svg
viewBox='-10 -10 116 111'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<path d='M0 0h7.75a45.5 45.5 0 110 91H0V71h7.75a25.5 25.5 0 100-51H0zm36.251 0h32a27.75 27.75 0 0121.331 45.5A27.75 27.75 0 0168.251 91h-32a53.69 53.69 0 0018.746-20H68.25a7.75 7.75 0 100-15.5H60.5a53.69 53.69 0 000-20h7.75a7.75 7.75 0 100-15.5H54.997A53.69 53.69 0 0036.251 0z' />
</svg>
</Fragment>
);
}
D3Icon.displayName = 'D3';
export default D3Icon;

19
client/src/assets/icons/JavaScriptIcon.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function JavaScriptIcon(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.javascript')}</span>
<svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z' />
</svg>
</Fragment>
);
}
JavaScriptIcon.displayName = 'JavaScriptIcon';
export default JavaScriptIcon;

19
client/src/assets/icons/PythonIcon.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function PythonIcon(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.python')}</span>
<svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z' />
</svg>
</Fragment>
);
}
PythonIcon.displayName = 'PythonIcon';
export default PythonIcon;

19
client/src/assets/icons/ReactIcon.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function ReactIcon(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.react')}</span>
<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z' />
</svg>
</Fragment>
);
}
ReactIcon.displayName = 'ReactIcon';
export default ReactIcon;

19
client/src/assets/icons/ResponsiveDesign.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function ResponsiveDesign(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.responsive-design')}</span>
<svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z' />
</svg>
</Fragment>
);
}
ResponsiveDesign.displayName = 'ResponsiveDesign';
export default ResponsiveDesign;

19
client/src/assets/icons/Shield.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function Shield(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.shield')}</span>
<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M466.5 83.7l-192-80a48.15 48.15 0 00-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zm-47.2 114.2l-184 184c-6.2 6.2-16.4 6.2-22.6 0l-104-104c-6.2-6.2-6.2-16.4 0-22.6l22.6-22.6c6.2-6.2 16.4-6.2 22.6 0l70.1 70.1 150.1-150.1c6.2-6.2 16.4-6.2 22.6 0l22.6 22.6c6.3 6.3 6.3 16.4 0 22.6z' />
</svg>
</Fragment>
);
}
Shield.displayName = 'Shield';
export default Shield;

19
client/src/assets/icons/TensorflowIcon.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
function TensorflowIcon(props) {
const { t } = useTranslation();
return (
<Fragment>
<span className='sr-only'>{t('icons.tensorflow')}</span>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
<path d='M1.292 5.856L11.54 0v24l-4.095-2.378V7.603l-6.168 3.564.015-5.31zm21.43 5.311l-.014-5.31L12.46 0v24l4.095-2.378V14.87l3.092 1.788-.018-4.618-3.074-1.756V7.603l6.168 3.564z' />
</svg>
</Fragment>
);
}
TensorflowIcon.displayName = 'TensorflowIcon';
export default TensorflowIcon;

34
client/src/assets/icons/index.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import ResponsiveDesign from './ResponsiveDesign';
import JavaScriptIcon from './JavaScriptIcon';
import ReactIcon from './ReactIcon';
import D3Icon from './D3Icon';
import APIIcon from './APIIcon';
import Clipboard from './Clipboard';
import PythonIcon from './PythonIcon';
import Analytics from './Analytics';
import Shield from './Shield';
import TensorflowIcon from './TensorflowIcon';
import Algorithm from './Algorithm';
const generateIconComponent = (superBlock, className) => {
const iconMap = {
'Responsive Web Design': ResponsiveDesign,
'JavaScript Algorithms and Data Structures': JavaScriptIcon,
'Front End Libraries': ReactIcon,
'Data Visualization': D3Icon,
'APIs and Microservices': APIIcon,
'Quality Assurance': Clipboard,
'Scientific Computing with Python': PythonIcon,
'Data Analysis with Python': Analytics,
'Information Security': Shield,
'Machine Learning with Python': TensorflowIcon,
'Coding Interview Prep': Algorithm
};
// fallback in case super block doesn't exist and for tests
const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
return <Icon className={className} />;
};
export { generateIconComponent };

12
client/src/components/Intro/components/IntroDescription.js
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Link, Spacer } from '../../helpers'; import { Link, Spacer } from '../../helpers';
import { Col } from '@freecodecamp/react-bootstrap';
import { forumLocation } from '../../../../config/env.json'; import { forumLocation } from '../../../../config/env.json';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
@ -10,14 +9,7 @@ function IntroDescription() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Col <div className='intro-description'>
className='intro-description'
md={8}
mdOffset={2}
sm={10}
smOffset={1}
xs={12}
>
<strong>{t('learn.read-this.heading')}</strong> <strong>{t('learn.read-this.heading')}</strong>
<Spacer /> <Spacer />
<p>{t('learn.read-this.p1')}</p> <p>{t('learn.read-this.p1')}</p>
@ -40,7 +32,7 @@ function IntroDescription() {
</Trans> </Trans>
</p> </p>
<p>{t('learn.read-this.p12')}</p> <p>{t('learn.read-this.p12')}</p>
</Col> </div>
); );
} }

85
client/src/components/Intro/index.js
View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link, Spacer, Loader, FullWidthRow } from '../helpers'; import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
import { Row, Col } from '@freecodecamp/react-bootstrap';
import { randomQuote } from '../../utils/get-words'; import { randomQuote } from '../../utils/get-words';
import CurrentChallengeLink from '../helpers/CurrentChallengeLink'; import CurrentChallengeLink from '../helpers/CurrentChallengeLink';
import IntroDescription from './components/IntroDescription'; import IntroDescription from './components/IntroDescription';
@ -41,17 +40,13 @@ function Intro({
const { quote, author } = randomQuote(); const { quote, author } = randomQuote();
return ( return (
<> <>
<Row> <Spacer />
<Col sm={10} smOffset={1} xs={12}> <h1 className='text-center '>
<Spacer /> {name
<h1 className='text-center '> ? `${t('learn.welcome-1', { name: name })}`
{name : `${t('learn.welcome-2')}`}
? `${t('learn.welcome-1', { name: name })}` </h1>
: `${t('learn.welcome-2')}`} <Spacer />
</h1>
<Spacer />
</Col>
</Row>
<FullWidthRow> <FullWidthRow>
<Link className='btn btn-lg btn-primary btn-block' to='/settings'> <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
{t('buttons.update-settings')} {t('buttons.update-settings')}
@ -65,49 +60,39 @@ function Intro({
)} )}
</FullWidthRow> </FullWidthRow>
<Spacer /> <Spacer />
<Row className='text-center quote-partial'> <div className='text-center quote-partial'>
<Col sm={10} smOffset={1} xs={12}> <blockquote className='blockquote'>
<blockquote className='blockquote'> <span>
<span> <q>{quote}</q>
<q>{quote}</q> <footer className='quote-author blockquote-footer'>
<footer className='quote-author blockquote-footer'> <cite>{author}</cite>
<cite>{author}</cite> </footer>
</footer> </span>
</span> </blockquote>
</blockquote> </div>
</Col> {completedChallengeCount < 15 ? (
</Row> <div className='intro-description'>
<Row> <Spacer />
{completedChallengeCount < 15 ? ( <p>
<Col sm={10} smOffset={1} xs={12}> <Trans i18nKey='learn.start-at-beginning'>
<Spacer /> <Link to={slug} />
<h4> </Trans>
<Trans i18nKey='learn.start-at-beginning'> </p>
<Link to={slug} /> </div>
</Trans> ) : (
</h4> ''
</Col> )}
) : (
''
)}
</Row>
</> </>
); );
} else { } else {
return ( return (
<> <>
<Row> <Spacer />
<Col sm={8} smOffset={2} xs={12}> <h1>{t('learn.heading')}</h1>
<Spacer /> <Spacer />
<h1>{t('learn.heading')}</h1> <IntroDescription />
<Spacer size={1} /> <Spacer />
</Col> <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
<IntroDescription />
<Col sm={8} smOffset={2} xs={12}>
<Spacer />
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
</Col>
</Row>
<Spacer /> <Spacer />
</> </>
); );

24
client/src/components/Intro/intro.css
View File

@ -24,25 +24,23 @@
border: none; border: none;
} }
.intro-description strong,
.intro-description p {
font-family: 'Lato', sans-serif;
font-size: 1.17rem;
}
@media (max-width: 500px) { @media (max-width: 500px) {
.quote-partial .blockquote { .quote-partial .blockquote {
font-size: 1.2rem; font-size: 1.2rem;
border: none; border: none;
} }
.intro-description strong,
.intro-description p {
font-size: 1rem;
}
} }
.quote-author { .quote-author {
font-style: normal; font-style: normal;
} }
.intro-description strong,
.intro-description p {
font-family: 'Lato', sans-serif;
font-size: 1rem;
}
@media (min-width: 500px) {
.intro-description strong,
.intro-description p {
font-size: 1.22rem;
}
}

187
client/src/components/Map/__snapshots__/Map.test.js.snap
View File

@ -17,9 +17,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -50,9 +61,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -83,9 +105,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -116,9 +149,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -149,9 +193,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -182,9 +237,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -215,9 +281,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -248,9 +325,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -281,9 +369,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -314,9 +413,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -347,9 +457,20 @@ exports[`<Map /> snapshot: Map 1`] = `
<div <div
style="display: flex; justify-content: space-between; align-items: center;" style="display: flex; justify-content: space-between; align-items: center;"
> >
<div <span
class="LazyLoad" class="sr-only"
/> >
icons.responsive-design
</span>
<svg
class="map-icon"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z"
/>
</svg>
</div> </div>
<svg <svg
aria-hidden="true" aria-hidden="true"

56
client/src/components/Map/index.js
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { Row, Col } from '@freecodecamp/react-bootstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { graphql, useStaticQuery } from 'gatsby'; import { graphql, useStaticQuery } from 'gatsby';
import i18next from 'i18next'; import i18next from 'i18next';
import { generateIconComponent } from '../../assets/icons';
import { ImageLoader, Link } from '../helpers'; import { Link } from '../helpers';
import LinkButton from '../../assets/icons/LinkButton'; import LinkButton from '../../assets/icons/LinkButton';
import { dasherize } from '../../../../utils/slugs'; import { dasherize } from '../../../../utils/slugs';
import './map.css'; import './map.css';
@ -23,12 +23,6 @@ function createSuperBlockTitle(str) {
: `${superBlockTitle} ${i18next.t('learn.cert-map-estimates.certs')}`; : `${superBlockTitle} ${i18next.t('learn.cert-map-estimates.certs')}`;
} }
const iconStyle = {
width: '55px',
height: '55px',
marginRight: '20px'
};
const linkSpacingStyle = { const linkSpacingStyle = {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
@ -46,12 +40,7 @@ function renderLandingMap(nodes) {
to={`/learn/${dasherize(node.superBlock)}/`} to={`/learn/${dasherize(node.superBlock)}/`}
> >
<div style={linkSpacingStyle}> <div style={linkSpacingStyle}>
<ImageLoader {generateIconComponent(node.superBlock, 'map-icon')}
alt='building a website'
offsetVertical={500}
src={i18next.t(`intro:${dasherize(node.superBlock)}.icon`)}
style={iconStyle}
/>
{i18next.t(`intro:${dasherize(node.superBlock)}.title`)} {i18next.t(`intro:${dasherize(node.superBlock)}.title`)}
</div> </div>
<LinkButton /> <LinkButton />
@ -65,30 +54,21 @@ function renderLandingMap(nodes) {
function renderLearnMap(nodes, currentSuperBlock = '') { function renderLearnMap(nodes, currentSuperBlock = '') {
nodes = nodes.filter(node => node.superBlock !== currentSuperBlock); nodes = nodes.filter(node => node.superBlock !== currentSuperBlock);
return ( return (
<Row> <ul data-test-label='learn-curriculum-map'>
<Col sm={10} smOffset={1} xs={12}> {nodes.map((node, i) => (
<ul data-test-label='learn-curriculum-map'> <li key={i}>
{nodes.map((node, i) => ( <Link
<li key={i}> className='btn link-btn btn-lg'
<Link to={`/learn/${dasherize(node.superBlock)}/`}
className='btn link-btn btn-lg' >
to={`/learn/${dasherize(node.superBlock)}/`} <div style={linkSpacingStyle}>
> {generateIconComponent(node.superBlock, 'map-icon')}
<div style={linkSpacingStyle}> {createSuperBlockTitle(node.superBlock)}
<ImageLoader </div>
alt='building a website' </Link>
offsetVertical={500} </li>
src={i18next.t(`intro:${dasherize(node.superBlock)}.icon`)} ))}
style={iconStyle} </ul>
/>
{createSuperBlockTitle(node.superBlock)}
</div>
</Link>
</li>
))}
</ul>
</Col>
</Row>
); );
} }

32
client/src/components/layouts/global.css
View File

@ -297,6 +297,23 @@ fieldset[disabled] .btn-primary.focus {
margin-left: 5px; margin-left: 5px;
} }
.map-icon,
.cert-header-icon {
flex-shrink: 0;
fill: var(--primary-color);
}
.map-icon {
width: 35px;
margin-right: 20px;
}
.cert-header-icon {
display: block;
width: 80px;
margin: auto;
}
.link-btn:hover svg { .link-btn:hover svg {
fill: var(--quaternary-background); fill: var(--quaternary-background);
} }
@ -305,6 +322,21 @@ fieldset[disabled] .btn-primary.focus {
.link-btn { .link-btn {
font-size: 1.1rem; font-size: 1.1rem;
} }
.map-icon {
width: 45px;
}
.cert-header-icon {
width: 100px;
}
}
@media (min-width: 1000px) {
.map-icon {
width: 50px;
}
.cert-header-icon {
width: 120px;
}
} }
.button-group .btn:not(:last-child) { .button-group .btn:not(:last-child) {

26
client/src/pages/learn.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Grid } from '@freecodecamp/react-bootstrap'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { graphql } from 'gatsby'; import { graphql } from 'gatsby';
@ -63,16 +63,20 @@ export const LearnPage = ({
<LearnLayout> <LearnLayout>
<Helmet title={t('meta.title')} /> <Helmet title={t('meta.title')} />
<Grid> <Grid>
<Intro <Row>
complete={complete} <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
completedChallengeCount={completedChallengeCount} <Intro
isSignedIn={isSignedIn} complete={complete}
name={name} completedChallengeCount={completedChallengeCount}
pending={pending} isSignedIn={isSignedIn}
slug={slug} name={name}
/> pending={pending}
<Map /> slug={slug}
<Spacer size={2} /> />
<Map />
<Spacer size={2} />
</Col>
</Row>
</Grid> </Grid>
</LearnLayout> </LearnLayout>
); );

109
client/src/templates/Introduction/SuperBlockIntro.js
View File

@ -1,4 +1,4 @@
import React, { Fragment, Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { graphql } from 'gatsby'; import { graphql } from 'gatsby';
@ -7,7 +7,7 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { Row, Col } from '@freecodecamp/react-bootstrap'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import Login from '../../components/Header/components/Login'; import Login from '../../components/Header/components/Login';
import Map from '../../components/Map'; import Map from '../../components/Map';
@ -15,7 +15,7 @@ import CertChallenge from './components/CertChallenge';
import SuperBlockIntro from './components/SuperBlockIntro'; import SuperBlockIntro from './components/SuperBlockIntro';
import { dasherize } from '../../../../utils/slugs'; import { dasherize } from '../../../../utils/slugs';
import Block from './components/Block'; import Block from './components/Block';
import { FullWidthRow, Spacer } from '../../components/helpers'; import { Spacer } from '../../components/helpers';
import { import {
currentChallengeIdSelector, currentChallengeIdSelector,
userFetchStateSelector, userFetchStateSelector,
@ -160,54 +160,63 @@ export class SuperBlockIntroductionPage extends Component {
<Helmet> <Helmet>
<title>{i18nSuperBlock} | freeCodeCamp.org</title> <title>{i18nSuperBlock} | freeCodeCamp.org</title>
</Helmet> </Helmet>
<FullWidthRow <Grid>
className='overflow-fix' <Row
ref={blockToScrollTo === 'top' ? this.elementRef : null} className='super-block-intro-page'
> ref={blockToScrollTo === 'top' ? this.elementRef : null}
<Spacer size={2} /> >
<SuperBlockIntro superBlock={superBlock} /> <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer size={2} /> <Spacer size={2} />
<h2 className='text-center'>{t(`intro:misc-text.courses`)}</h2> <SuperBlockIntro superBlock={superBlock} />
<Spacer /> <Spacer size={2} />
<div className='block-ui'> <h2 className='text-center big-subheading'>
{blockDashedNames.map(blockDashedName => ( {t(`intro:misc-text.courses`)}
<div </h2>
key={blockDashedName} <Spacer />
ref={ <div className='block-ui'>
blockDashedName === blockToScrollTo ? this.elementRef : null {blockDashedNames.map(blockDashedName => (
} <div
key={blockDashedName}
ref={
blockDashedName === blockToScrollTo
? this.elementRef
: null
}
>
<Block
blockDashedName={blockDashedName}
challenges={nodesForSuperBlock.filter(
node => node.block === blockDashedName
)}
superBlockDashedName={superBlockDashedName}
/>
</div>
))}
{superBlock !== 'Coding Interview Prep' && (
<div>
<CertChallenge superBlock={superBlock} />
</div>
)}
</div>
{!isSignedIn && (
<div>
<Spacer size={2} />
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
</div>
)}
<Spacer size={2} />
<h3
className='text-center big-block-title'
style={{ whiteSpace: 'pre-line' }}
> >
<Block {t(`intro:misc-text.browse-other`)}
blockDashedName={blockDashedName} </h3>
challenges={nodesForSuperBlock.filter( <Spacer />
node => node.block === blockDashedName <Map currentSuperBlock={superBlock} />
)} <Spacer size={2} />
superBlockDashedName={superBlockDashedName} </Col>
/> </Row>
</div> </Grid>
))}
{superBlock !== 'Coding Interview Prep' && (
<div>
<CertChallenge superBlock={superBlock} />
<Spacer size={2} />
</div>
)}
</div>
{!isSignedIn && (
<Row>
<Col sm={10} smOffset={1} xs={12}>
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
<Spacer />
</Col>
</Row>
)}
<h2 className='text-center' style={{ whiteSpace: 'pre-line' }}>
{t(`intro:misc-text.browse-other`)}
</h2>
<Spacer />
<Map currentSuperBlock={superBlock} />
<Spacer size={2} />
</FullWidthRow>
</> </>
); );
} }

19
client/src/templates/Introduction/components/Block.js
View File

@ -123,10 +123,15 @@ export class Block extends Component {
); );
const blockTitle = blockIntroObj ? blockIntroObj.title : null; const blockTitle = blockIntroObj ? blockIntroObj.title : null;
const blockIntroArr = blockIntroObj ? blockIntroObj.intro : []; const blockIntroArr = blockIntroObj ? blockIntroObj.intro : [];
const {
expand: expandText,
collapse: collapseText,
courses: coursesText
} = t('intro:misc-text');
return isProjectBlock ? ( return isProjectBlock ? (
<div className='block'> <div className='block'>
<h3>{blockTitle}</h3> <h3 className='big-block-title'>{blockTitle}</h3>
{this.renderBlockIntros(blockIntroArr)} {this.renderBlockIntros(blockIntroArr)}
<Challenges <Challenges
challengesWithCompleted={challengesWithCompleted} challengesWithCompleted={challengesWithCompleted}
@ -135,7 +140,7 @@ export class Block extends Component {
</div> </div>
) : ( ) : (
<div className={`block ${isExpanded ? 'open' : ''}`}> <div className={`block ${isExpanded ? 'open' : ''}`}>
<h3>{blockTitle}</h3> <h3 className='big-block-title'>{blockTitle}</h3>
{this.renderBlockIntros(blockIntroArr)} {this.renderBlockIntros(blockIntroArr)}
<button <button
aria-expanded={isExpanded} aria-expanded={isExpanded}
@ -143,10 +148,12 @@ export class Block extends Component {
onClick={this.handleBlockClick} onClick={this.handleBlockClick}
> >
<Caret /> <Caret />
<h4> <h4 className='course-title'>
{t(`intro:misc-text.section-courses`, { section: blockTitle })} {`${
isExpanded ? collapseText : expandText
} ${coursesText.toLowerCase()}`}
</h4> </h4>
<div className='map-title-completed'> <div className='map-title-completed course-title'>
{this.renderCheckMark( {this.renderCheckMark(
completedCount === challengesWithCompleted.length completedCount === challengesWithCompleted.length
)} )}
@ -159,7 +166,7 @@ export class Block extends Component {
isProjectBlock={isProjectBlock} isProjectBlock={isProjectBlock}
/> />
)} )}
<Spacer size={2} /> {blockDashedName !== 'project-euler' ? <Spacer size={2} /> : null}
</div> </div>
); );
} }

2
client/src/templates/Introduction/components/Challenges.js
View File

@ -65,7 +65,7 @@ export class Challenges extends Component {
{[...challengesWithCompleted].map(challenge => ( {[...challengesWithCompleted].map(challenge => (
<li <li
className={`map-challenge-title ${ className={`map-challenge-title ${
isProjectBlock ? 'map-project-wrap' : '' isProjectBlock ? 'map-project-wrap' : 'map-challenge-wrap'
}`} }`}
id={challenge.dashedName} id={challenge.dashedName}
key={'map-challenge' + challenge.fields.slug} key={'map-challenge' + challenge.fields.slug}

19
client/src/templates/Introduction/components/SuperBlockIntro.js
View File

@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { dasherize } from '../../../../../utils/slugs'; import { dasherize } from '../../../../../utils/slugs';
import { Spacer } from '../../../components/helpers'; import { Spacer } from '../../../components/helpers';
import { generateIconComponent } from '../../../assets/icons';
const propTypes = { const propTypes = {
superBlock: PropTypes.string superBlock: PropTypes.string
@ -17,28 +18,14 @@ function SuperBlockIntro(props) {
const superBlockIntroObj = t(`intro:${superBlockDashedName}`); const superBlockIntroObj = t(`intro:${superBlockDashedName}`);
const { const {
title: i18nSuperBlock, title: i18nSuperBlock,
image: superBlockImage,
intro: superBlockIntroText intro: superBlockIntroText
} = superBlockIntroObj; } = superBlockIntroObj;
return ( return (
<> <>
<h1 className='text-center'>{i18nSuperBlock}</h1> <h1 className='text-center big-heading'>{i18nSuperBlock}</h1>
<Spacer /> <Spacer />
<div style={{ margin: 'auto', maxWidth: '500px' }}> {generateIconComponent(superBlock, 'cert-header-icon')}
<img
alt='building a website'
className='superBlock-image'
src={superBlockImage}
style={{
backgroundColor: '#f5f6f7',
marginBottom: '1rem',
padding: '15px',
width: '500px',
height: '367px'
}}
/>
</div>
<Spacer /> <Spacer />
{superBlockIntroText.map((str, i) => ( {superBlockIntroText.map((str, i) => (
<p key={i}>{str}</p> <p key={i}>{str}</p>

51
client/src/templates/Introduction/intro.css
View File

@ -1,3 +1,28 @@
.super-block-intro-page p {
font-family: 'Lato', sans-serif;
font-size: 1.17rem;
}
.big-subheading {
font-size: 2rem;
overflow-wrap: break-word;
}
.big-block-title {
font-size: 1.5rem;
overflow-wrap: break-word;
}
.course-title {
font-size: 1.13rem;
overflow-wrap: break-word;
}
.block-description pre {
display: inline;
padding: 0;
}
.superBlock-image { .superBlock-image {
max-width: 100%; max-width: 100%;
height: auto !important; height: auto !important;
@ -34,8 +59,12 @@ button.map-title {
background-color: var(--tertiary-background); background-color: var(--tertiary-background);
} }
.map-challenge-wrap > a,
.map-project-wrap > a { .map-project-wrap > a {
display: flex; display: flex;
}
.map-project-wrap > a {
justify-content: space-between; justify-content: space-between;
} }
@ -68,6 +97,7 @@ button.map-title {
} }
.map-cert-title > h3 { .map-cert-title > h3 {
font-size: 1.17rem;
margin: 0 0 0 15px; margin: 0 0 0 15px;
} }
@ -116,6 +146,7 @@ button.map-title {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
font-size: 1.13rem;
} }
.map-challenge-title a { .map-challenge-title a {
@ -131,6 +162,26 @@ button.map-title {
margin-bottom: 0; margin-bottom: 0;
} }
@media screen and (max-width: 500px) {
.super-block-intro-page p {
font-size: 1rem;
}
.big-subheading {
font-size: 1.35rem;
}
.big-block-title {
font-size: 1.17rem;
}
.course-title,
.map-cert-title,
.map-challenge-title {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.intro-layout-container { .intro-layout-container {
padding: 0 10px; padding: 0 10px;