Fix/copy improvements (#16859)
* fix(seed): Simplify copy of lessons and remove need for image * rework copy for account creation and login emails * fix: Fixup email template and lock-file
This commit is contained in:
Quincy Larson
committed by
Stuart Taylor
Stuart Taylor
parent
5d93e6d0c3
commit
34dea0ab9c
@ -9,21 +9,9 @@
|
||||
"title": "Learn How freeCodeCamp Works",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/ZMOCvg9.jpg",
|
||||
"A picture of six freeCodeCamp campers sitting around a table coding together.",
|
||||
"Welcome. You're now part of a supportive coding community. You can code online or in-person with people in thousands of cities around the world.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/EUyHs60.jpg",
|
||||
"A picture of the technologies you'll learn: HTML5, CSS, JavaScript, Databases, Git & GitHub, Node.js, React.js, D3.js.",
|
||||
"You'll learn to code by completing coding challenges and building projects. You'll also earn verified certificates along the way.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/LRnNMU5.png",
|
||||
"An image of our open source projects on GitHub.",
|
||||
"Then you'll get experience by contributing to open source projects used by nonprofits. This will help prepare you for a coding job. Let's get started!",
|
||||
"",
|
||||
"",
|
||||
"Welcome to freeCodeCamp! <br><br>Check out the lesson map on the left. We have thousands of coding lessons to help you improve your skills. <br><br>You can earn verified certificates by completing certificate's 5 required projects.<br><br>And yes - all of this is 100% free, thanks to the thousands of campers who donate to our nonprofit.",
|
||||
""
|
||||
]
|
||||
],
|
||||
@ -32,58 +20,13 @@
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7
|
||||
},
|
||||
{
|
||||
"id": "587d774b367417c4c2512a9b",
|
||||
"title": "Introduction to the Basic HTML and HTML5 Challenges",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"HTML, or HyperText Markup Language, is a markup language to describe the structure of a web page. It uses a special syntax of elements to organize and give information about your content to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it's a heading, a paragraph, or a list.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"The HyperText part of HTML comes from the early days of the web. Pages usually contained static documents that connected to other documents with hypertext links. As web pages and web applications grow more complex, the W3 Consortium updates HTML. The latest version, or specification, is HTML5.<br><br>This section introduces how to use HTML elements to give structure and meaning to your web content.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Introdução aos desafios básicos de HTML e HTML5",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"HTML, do inglês HyperText Markup Language (Linguagem de Marcação de Hipertexto), é uma linguagem de marcação usada para descrever a estrutura de uma página da web. Ela usa uma sintaxe especial de elementos para organizar seu conteúdo e dar ao seu navegador informações sobre ele. Esses elementos geralmente possuem tags (marcadores) de abertura e fechamento que delimitam uma parte do conteúdo e dão significado a ela. Por exemplo, para delimitar texto, existem diferentes opções de tags que mostram se esse texto é um título, um parágrafo ou uma lista.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"A parte de \"hipertexto\" do HTML vem dos primórdios da web. As páginas geralmente eram documentos estáticos que se conectavam a outros documentos por meio de links de hipertexto. Conforme as páginas e aplicações web ficam mais complexas, o consórcio W3 atualiza o HTML. A última versão, ou especificação, é o HTML5.<br><br>Essa seção apresenta como usar os elementos do HTML para dar estrutura e significado ao seu conteúdo na web.",
|
||||
""
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7123c8c441eddfaeb5bdef",
|
||||
"title": "Say Hello to HTML Elements",
|
||||
"description": [
|
||||
"Welcome to freeCodeCamp's coding challenges. These will walk you through web development step-by-step.",
|
||||
"We recommend you do these in order, but feel free to skip around by clicking the map in the menu above.",
|
||||
"Also, if you want to save your progress, you should join our community by creating an account. In just a few minutes, you can join our chat room, forum, and even a local study group in your city.",
|
||||
"First, you'll start by building a simple web page using HTML. You can edit <code>code</code> in your <code>text editor</code>, which is embedded into this web page.",
|
||||
"Do you see the code in your text editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
|
||||
"Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.",
|
||||
"First, you'll start by building a simple web page using HTML. You can edit <code>code</code> in your <code>code editor</code>, which is embedded into this web page.",
|
||||
"Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
|
||||
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.",
|
||||
"Opening tags look like this:",
|
||||
"<code><h1></code>",
|
||||
@ -94,13 +37,13 @@
|
||||
"<hr>",
|
||||
"To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\"."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello</h1>"
|
||||
],
|
||||
"challengeSeed": ["<h1>Hello</h1>"],
|
||||
"tests": [
|
||||
{
|
||||
"text": "Your <code>h1</code> element should have the text \"Hello World\".",
|
||||
"testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
|
||||
"text":
|
||||
"Your <code>h1</code> element should have the text \"Hello World\".",
|
||||
"testString":
|
||||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
|
||||
}
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -109,7 +52,7 @@
|
||||
"de": {
|
||||
"description": [
|
||||
"Willkommen bei deiner ersten Programmier-Challenge von freeCodeCamp!",
|
||||
"Mithilfe des eingebauten <code>text editors</code> kannst du den <code>code</code> bearbeiten.",
|
||||
"Mithilfe des eingebauten <code>code editors</code> kannst du den <code>code</code> bearbeiten.",
|
||||
"Siehst du den Code <code><h1>Hallo</h1></code> im Editor? Das ist ein HTML <code>element</code>",
|
||||
"Die meisten HTML Elemente haben einen <code>opening tag</code> und einen <code>closing tag</code>.",
|
||||
"Öffnende Tags sehen so aus:",
|
||||
@ -181,16 +124,13 @@
|
||||
"id": "bad87fee1348bd9aedf0887a",
|
||||
"title": "Headline with the h2 Element",
|
||||
"description": [
|
||||
"Over the next two sections, we'll build an HTML5 app that will look something like this:",
|
||||
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
|
||||
"Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.",
|
||||
"The <code>h2</code> element you will be adding in this step will add a level two heading to the web page.",
|
||||
"This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different levels of subheadings.",
|
||||
"<hr>",
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>"
|
||||
],
|
||||
"challengeSeed": ["<h1>Hello World</h1>"],
|
||||
"tests": [
|
||||
"assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
|
||||
"assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
|
||||
@ -255,10 +195,7 @@
|
||||
"<hr>",
|
||||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
"<h2>CatPhotoApp</h2>"
|
||||
],
|
||||
"challengeSeed": ["<h1>Hello World</h1>", "<h2>CatPhotoApp</h2>"],
|
||||
"tests": [
|
||||
"assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
|
||||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
|
||||
@ -702,23 +639,17 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/add-images-to-your-website"
|
||||
"guideUrl":
|
||||
"https://guide.freecodecamp.org/certificates/add-images-to-your-website"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08816",
|
||||
"title": "Link to External Pages with Anchor Elements",
|
||||
"description": [
|
||||
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
|
||||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\">Click to enlarge </a>",
|
||||
"The above diagram of an <code>a</code> element demonstrated that you can use an anchor element almost anywhere, even inside another element. In this case, the link will appear in the middle of the paragraph.",
|
||||
"Here's an example:",
|
||||
"<blockquote><p><br> Here's a <br> <a href=\"http://freecodecamp.org\"> <br> link to freecodecamp.org<br> </a><br> for you to follow.<br></p></blockquote>",
|
||||
"Let's break down the example:",
|
||||
"Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>",
|
||||
"Next is the <code>anchor</code> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>",
|
||||
"<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code><a href=\"http://freecodecamp.org\"> ... </a></code>",
|
||||
"The text, <strong>\"link to freecodecamp.org\"</strong> will be displayed as a link which a user can click. It is located between the opening and closing tags, and is called <code>anchor text</code>.<br> <code><a href=\" ... \">link to freecodecamp.org</a></code>",
|
||||
"The final output of the example will look like this:<br><p>Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a></p>",
|
||||
"You can use <code>anchor</code> elements to link to content outside of your web page.",
|
||||
"<code>anchor</code> elements need a destination web address called an <code>href</code> attribute. They also need anchor text. Here's an example:",
|
||||
"<code><a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a></code>",
|
||||
"Then your browser will display the text <strong>\"this links to freecodecamp.org\"</strong> as a link you can click. And that link will take you to the web address <strong>https://www.freecodecamp.org</strong>.",
|
||||
"<hr>",
|
||||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
],
|
||||
@ -800,7 +731,7 @@
|
||||
"To create an internal link, you assign a link's <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.",
|
||||
"Below is an example of an internal anchor link and its target element:",
|
||||
"<blockquote><a href=\"#contacts-header\">Contacts</a><br>...<br><h2 id=\"contacts-header\">Contacts</h2></blockquote>",
|
||||
"When users click the <u>Contacts</u> link, they'll be taken to the section of the webpage with the <b>Contacts</b> header element.",
|
||||
"When users click the Contacts link, they'll be taken to the section of the webpage with the <b>Contacts</b> header element.",
|
||||
"<hr>",
|
||||
"Change your external link to an internal link by changing the <code>href</code> attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".",
|
||||
"Remove the <code>target=\"_blank\"</code> attribute from the anchor tag since this causes the linked document to open in a new window tab.",
|
||||
@ -835,7 +766,8 @@
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Crie links para seções internas de uma página com elementos âncora",
|
||||
"title":
|
||||
"Crie links para seções internas de uma página com elementos âncora",
|
||||
"description": [
|
||||
"Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
|
||||
"O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
|
||||
@ -856,9 +788,7 @@
|
||||
"id": "bad87fee1348bd9aede08817",
|
||||
"title": "Nest an Anchor Element within a Paragraph",
|
||||
"description": [
|
||||
"Below is the diagram showing that you can nest an <code>a</code> element inside a <code>p</code> element:",
|
||||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\">Click to enlarge </a>",
|
||||
"Here's an example:",
|
||||
"You can nest links within other text elements.",
|
||||
"<blockquote><p><br> Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.<br></p></blockquote>",
|
||||
"Let's break down the example:",
|
||||
"Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>",
|
||||
@ -949,16 +879,10 @@
|
||||
"title": "Join a freeCodeCamp Study Group in Your City",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/WBVydfk.jpg",
|
||||
"A picture of some of our campers meeting in a local cafe.",
|
||||
"You can code together with other campers in your city by joining a local freeCodeCamp study group.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/IqBnnuFr.jpg",
|
||||
"A picture of our study group directory.",
|
||||
"Click the button below to open our study group directory. <br><br>Find your local study group and click it. This will take you to their Facebook group. <br><br>Click the <bold>Join group</bold> button. Once someone from the group approves your join request, and you'll get a notification within Facebook, and can go back and introduce yourself.",
|
||||
"https://www.freecodecamp.org/study-group-directory/"
|
||||
"",
|
||||
"",
|
||||
"You can code together with other campers in your city by joining a local freeCodeCamp study group. <br><br> Click the button below to open our study group directory. <br><br>Find your local study group and click it. This will take you to their Facebook group. <br><br>Click the <bold>Join group</bold> button. <br><br>You'll get a notification from Facebook once the group has accepted you. Then you can go back and introduce yourself. <br><br>If you don't have a Facebook account or don't want to code with other campers in your city, you can skip this step.",
|
||||
"https://study-group-directory.freecodecamp.org/"
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
@ -1016,9 +940,9 @@
|
||||
"title": "Become a Supporter",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/CxcBk9C.png",
|
||||
"Help us pay for servers and other costs. Set up a monthly donation you can afford.",
|
||||
"freeCodeCamp is a small nonprofit that helps busy people learn to code for free. Help us pay for servers and other costs. Set up a monthly donation you can afford.",
|
||||
"",
|
||||
"",
|
||||
"freeCodeCamp is a small nonprofit with a big mission: to help you improve your coding skills and expand your career. Help us pay for servers and other costs. Set up a monthly donation you can afford.",
|
||||
"https://donate.freecodecamp.org"
|
||||
]
|
||||
],
|
||||
@ -1517,7 +1441,8 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
|
||||
"guideUrl":
|
||||
"https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aede08830",
|
||||
@ -1685,7 +1610,8 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
|
||||
"guideUrl":
|
||||
"https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedc08830",
|
||||
@ -1762,7 +1688,8 @@
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
"title": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
|
||||
"title":
|
||||
"Используйте HTML5, чтобы сделать заполнение поля обязательным",
|
||||
"description": [
|
||||
"Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
|
||||
"Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code><input type=\"text\" required></code>",
|
||||
@ -2041,7 +1968,8 @@
|
||||
]
|
||||
},
|
||||
"es": {
|
||||
"title": "Marca botones de radio y casillas de verificación por omisión",
|
||||
"title":
|
||||
"Marca botones de radio y casillas de verificación por omisión",
|
||||
"description": [
|
||||
"Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
|
||||
"Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
|
||||
@ -2051,7 +1979,8 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Faça botões de opção e caixas de seleção estarem marcados por padrão",
|
||||
"title":
|
||||
"Faça botões de opção e caixas de seleção estarem marcados por padrão",
|
||||
"description": [
|
||||
"Você pode fazer uma caixa de seleção ou botão de opção estar marcado por padrão usando o atributo <code>checked</code>.",
|
||||
"Para fazer isso, apenas insira a palavra \"checked\" em um elemento <code>input</code>. Por exemplo:",
|
||||
@ -2183,11 +2112,7 @@
|
||||
"<hr>",
|
||||
"Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
"",
|
||||
""
|
||||
],
|
||||
"challengeSeed": ["", "", ""],
|
||||
"tests": [
|
||||
"assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'message: Your code should include a <code><!DOCTYPE html></code> tag.');",
|
||||
"assert($('html').length == 1, 'message: There should be one <code>html</code> element.');",
|
||||
|
||||
@ -147,17 +147,17 @@
|
||||
" </div>",
|
||||
"</header>",
|
||||
"<div id=\"inner\">",
|
||||
" <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
|
||||
" <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
|
||||
" <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
|
||||
" <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
|
||||
" <hr>",
|
||||
"</div>",
|
||||
"<footer>",
|
||||
" <div class=\"stats\">",
|
||||
" <div class=\"retweets\">",
|
||||
" <strong>56,203</strong> RETWEETS",
|
||||
" <div class=\"Retweets\">",
|
||||
" <strong>107</strong> Retweets",
|
||||
" </div>",
|
||||
" <div class=\"likes\">",
|
||||
" <strong>84,703</strong> LIKES",
|
||||
" <strong>431</strong> Likes",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"cta\">",
|
||||
@ -308,17 +308,17 @@
|
||||
" </div>",
|
||||
"</header>",
|
||||
"<div id=\"inner\">",
|
||||
" <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
|
||||
" <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
|
||||
" <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
|
||||
" <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
|
||||
" <hr>",
|
||||
"</div>",
|
||||
"<footer>",
|
||||
" <div class=\"stats\">",
|
||||
" <div class=\"retweets\">",
|
||||
" <strong>56,203</strong> RETWEETS",
|
||||
" <div class=\"Retweets\">",
|
||||
" <strong>107</strong> Retweets",
|
||||
" </div>",
|
||||
" <div class=\"likes\">",
|
||||
" <strong>84,703</strong> LIKES",
|
||||
" <strong>431</strong> Likes",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"cta\">",
|
||||
@ -459,17 +459,17 @@
|
||||
" </div>",
|
||||
"</header>",
|
||||
"<div id=\"inner\">",
|
||||
" <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
|
||||
" <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
|
||||
" <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
|
||||
" <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
|
||||
" <hr>",
|
||||
"</div>",
|
||||
"<footer>",
|
||||
" <div class=\"stats\">",
|
||||
" <div class=\"retweets\">",
|
||||
" <strong>56,203</strong> RETWEETS",
|
||||
" <div class=\"Retweets\">",
|
||||
" <strong>107</strong> Retweets",
|
||||
" </div>",
|
||||
" <div class=\"likes\">",
|
||||
" <strong>84,703</strong> LIKES",
|
||||
" <strong>431</strong> Likes",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"cta\">",
|
||||
@ -617,17 +617,17 @@
|
||||
" </div>",
|
||||
"</header>",
|
||||
"<div id=\"inner\">",
|
||||
" <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
|
||||
" <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
|
||||
" <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
|
||||
" <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
|
||||
" <hr>",
|
||||
"</div>",
|
||||
"<footer>",
|
||||
" <div class=\"stats\">",
|
||||
" <div class=\"retweets\">",
|
||||
" <strong>56,203</strong> RETWEETS",
|
||||
" <div class=\"Retweets\">",
|
||||
" <strong>107</strong> Retweets",
|
||||
" </div>",
|
||||
" <div class=\"likes\">",
|
||||
" <strong>84,703</strong> LIKES",
|
||||
" <strong>431</strong> Likes",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"cta\">",
|
||||
@ -777,17 +777,17 @@
|
||||
" </div>",
|
||||
"</header>",
|
||||
"<div id=\"inner\">",
|
||||
" <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
|
||||
" <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
|
||||
" <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>",
|
||||
" <span class=\"date\">1:32 PM - 12 Jan 2018</span>",
|
||||
" <hr>",
|
||||
"</div>",
|
||||
"<footer>",
|
||||
" <div class=\"stats\">",
|
||||
" <div class=\"retweets\">",
|
||||
" <strong>56,203</strong> RETWEETS",
|
||||
" <div class=\"Retweets\">",
|
||||
" <strong>107</strong> Retweets",
|
||||
" </div>",
|
||||
" <div class=\"likes\">",
|
||||
" <strong>84,703</strong> LIKES",
|
||||
" <strong>431</strong> Likes",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"cta\">",
|
||||
|
||||
@ -9,46 +9,28 @@
|
||||
"title": "Get Set for our Responsive Web Design Projects",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/OAD6SJz.png",
|
||||
"An image of a Simon game, one our front end projects.",
|
||||
"",
|
||||
"",
|
||||
"Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/WBetuBa.jpg",
|
||||
"A programmer punching through his laptop screen in frustration.",
|
||||
"",
|
||||
"",
|
||||
"These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/p2TpOQd.jpg",
|
||||
"A cute dog jumping over a hurdle and winking and pointing his paw at you.",
|
||||
"",
|
||||
"",
|
||||
"When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/G1saeDt.gif",
|
||||
"A gif showing how to create a Codepen account.",
|
||||
"For our front end project challenges, we'll use a popular browser-based code editor called CodePen. Click the \"Open link in new tab\" button below to open CodePen's signup page. Fill out the form and click \"Sign up\". <br><div class=\"small\">Note: If you already have a CodePen account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.</div>",
|
||||
"",
|
||||
"",
|
||||
"You can build these project challenges on your local computer or on a web-based code editor like <a href='https://www.codepen.io'>CodePen.io</a>. As long as your projects are publicly accessible online, you can submit their web addresses so you can claim your verified Responsive Web Design certificate.",
|
||||
"https://codepen.io/accounts/signup/user/free"
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/U4y9RJ1.gif",
|
||||
"A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
|
||||
"In the HTML box, create an <code>h1</code> element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/xHoCEt2.gif",
|
||||
"A gif showing the process of adding Bootstrap to your pen.",
|
||||
"Click the gear in the upper left hand corner of the CSS box, then copy this link <code>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</code> inside the text box. Now give your <code>h1</code> element the class of <code>text-primary</code> to change its color and prove that Bootstrap is now available. Note that by using the dropdown menu and selecting \"Bootstrap\", the Alpha v.4 will be added instead.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/m0pWik2.gif",
|
||||
"A gif showing the process of turning off auto update preview",
|
||||
"When using CodePen and Ajax, it is a good idea to turn off automatic preview updating so API calls are not made too often. Too many API calls can sometimes lead to temporary blockages, and may require waiting periods before they can be used again. <br> <div class=\"small\"> To disable automatic preview updating click the \"Settings\" button at the top of the page, then click the \"Behavior\" tab. At the bottom of the page, un-check \"AUTO UPDATE PREVIEW\". Now press \"Run\" at the top of the page to update the preview, and click \"Save\".</div>",
|
||||
""
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
@ -227,9 +209,7 @@
|
||||
"Remember to use the <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> method if you get stuck."
|
||||
],
|
||||
"releasedOn": "January 15, 2017",
|
||||
"challengeSeed": [
|
||||
"A7Pn5zw"
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "zipline",
|
||||
"isRequired": true,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "Responsive Web Design Principles",
|
||||
"order": 4,
|
||||
"time": "5 hours",
|
||||
"time": "1 hour",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
|
||||
@ -6,30 +6,30 @@
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bd7158d2c442eddfbeb5bd1f",
|
||||
"title": "Get Set for our Algorithm Challenges",
|
||||
"title": "Get Set for our Algorithm Lessons",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/sJkp30a.png",
|
||||
"An image of a algorithm challenge showing directions, tests, and the code editor.",
|
||||
"Our algorithm challenges will teach you how to think like a programmer.",
|
||||
"",
|
||||
"",
|
||||
"freeCodeCamp's algorithm challenges will teach you how to think like a programmer.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/d8LuRNh.png",
|
||||
"A mother bird kicks a baby bird out of her nest.",
|
||||
"Our previous challenges introduced you to programming concepts. But for these algorithm challenges, you'll now need to apply what you learned to solve open-ended problems.",
|
||||
"",
|
||||
"",
|
||||
"The previous lessons introduced you to programming concepts. But for these algorithm lessons, you'll now need to apply what you learned to solve open-ended problems.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/WBetuBa.jpg",
|
||||
"A programmer punching through his laptop screen in frustration.",
|
||||
"Our algorithm challenges are hard. Some of them may take you several hours to solve. You will get frustrated. But don't quit.",
|
||||
"",
|
||||
"",
|
||||
"These algorithm lessons are hard. Some of them may take you several hours to solve. You may get frustrated. But don't quit.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/p2TpOQd.jpg",
|
||||
"A cute dog jumping over a hurdle and winking and pointing his paw at you.",
|
||||
"When you get stuck, just use the Read-Search-Ask methodology.<br>Don't worry - you've got this.",
|
||||
"",
|
||||
"",
|
||||
"When you get stuck, just use the Read-Search-Ask methodology.<br>Don't worry - you've got this!",
|
||||
""
|
||||
]
|
||||
],
|
||||
@ -776,7 +776,7 @@
|
||||
"title": "Detector de Mentiras",
|
||||
"description": [
|
||||
"Remueve todos los valores falsy de un arreglo dado",
|
||||
"En javascript, los valores falsy son los siguientes: <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, y <code>NaN</code>.",
|
||||
"En JavaScript, los valores falsy son los siguientes: <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, y <code>NaN</code>.",
|
||||
"Recuerda utilizar <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||
]
|
||||
},
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"In Javascript, arrays are written as comma-separated lists and are enclosed in brackets <code>[element1, element2, element3]</code>. They can be any length, and store any type of data supported by JavaScript.<br><br>Arrays can sometimes be simple and serve very basic functionalities, but they can also be complex and very powerful - all of which depends on how the programmer chooses to utilize them<br><br>From this point forward, whenever we refer to the term <dfn>array</dfn>, it will be strictly within the context of JavaScript.",
|
||||
"In JavaScript, arrays are written as comma-separated lists and are enclosed in brackets <code>[element1, element2, element3]</code>. They can be any length, and store any type of data supported by JavaScript.<br><br>Arrays can sometimes be simple and serve very basic functionalities, but they can also be complex and very powerful - all of which depends on how the programmer chooses to utilize them<br><br>From this point forward, whenever we refer to the term <dfn>array</dfn>, it will be strictly within the context of JavaScript.",
|
||||
""
|
||||
],
|
||||
[
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
"title": "Introduction to JavaScript",
|
||||
"description": [
|
||||
[
|
||||
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png",
|
||||
"A yellow square with the letters, JS, in the bottom right to represent the JS logo",
|
||||
"JavaScript (JS) is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously. This section will cover basic programming concepts in JavaScript, which range from variables and arithemtic to objects and loops."
|
||||
"",
|
||||
"",
|
||||
"JavaScript is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously. This section will cover basic programming concepts in JavaScript, which range from variables and arithemtic to objects and loops."
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
@ -63,7 +63,7 @@
|
||||
"fr": {
|
||||
"title": "Commentez votre code JavaScript",
|
||||
"description": [
|
||||
"Les commentaires sont des lignes de code que Javascript va intentionnellement ignorer. Les commentaires sont un bon moyen de laisser des notes à votre intention ou pour d'autres personnes qui devront comprendre ce que fait votre code.",
|
||||
"Les commentaires sont des lignes de code que JavaScript va intentionnellement ignorer. Les commentaires sont un bon moyen de laisser des notes à votre intention ou pour d'autres personnes qui devront comprendre ce que fait votre code.",
|
||||
"Il y a deux façons d'écrire des commentaires en JavaScript.",
|
||||
"Utiliser <code>//</code> indiquera à JavaScript d'ignorer le reste du texte sur cette même ligne:",
|
||||
"<code>// Voici un commentaire sur une ligne.</code>",
|
||||
@ -125,7 +125,7 @@
|
||||
"fr": {
|
||||
"title": "Déclarer des variables en JavaScript",
|
||||
"description": [
|
||||
"En informatique, une <dfn>donnée</dfn> comporte tout ce qui peut avoir du sens pour l'ordinateur. Javascript dispose de sept <code>types de données</code> différents qui sont <code>undefined</code>, <code>null</code>, <code>boolean</code>, <code>string</code>, <code>symbol</code>, <code>number</code> et <code>object</code>.",
|
||||
"En informatique, une <dfn>donnée</dfn> comporte tout ce qui peut avoir du sens pour l'ordinateur. JavaScript dispose de sept <code>types de données</code> différents qui sont <code>undefined</code>, <code>null</code>, <code>boolean</code>, <code>string</code>, <code>symbol</code>, <code>number</code> et <code>object</code>.",
|
||||
"Par exemple, les ordinateurs font la différence entre les nombres tel que <code>12</code> et les <code>strings</code>, tels que <code>\"12\"</code>, <code>\"dog\"</code>, ou <code>\"123 cats\"</code>, qui sont des collections de caractères. Les ordinateurs peuvent faire des opérations mathématiques sur un nombre, mais pas sur une chaîne de caractères.",
|
||||
"Les <dfn>variables</dfn> permettent aux ordinateurs de stocker et manipuler les données de façon dynamique. Ils font cela en utilisant un <blockquote>label</blockquote> qui réfère à la donnée plutôt que d'utiliser la donnée elle-même. Les sept types de données peuvent être stockés dans une variable.",
|
||||
"Les <code>variables</code> sont similaires aux x et y que vous utilisez en mathématiques, ce qui veut dire que ce sont des noms simples qui représentent les données que l'on veut utiliser. Les <code>variables</code> de l'ordinateur diffèrent de celles des mathématiques car elles peuvent stocker différentes valeurs à différents moments.",
|
||||
@ -298,7 +298,7 @@
|
||||
"In JavaScript all variables and function names are case sensitive. This means that capitalization matters.",
|
||||
"<code>MYVAR</code> is not the same as <code>MyVar</code> nor <code>myvar</code>. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you <em>do not</em> use this language feature.",
|
||||
"<h4>Best Practice</h4>",
|
||||
"Write variable names in Javascript in <dfn>camelCase</dfn>. In <dfn>camelCase</dfn>, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.",
|
||||
"Write variable names in JavaScript in <dfn>camelCase</dfn>. In <dfn>camelCase</dfn>, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.",
|
||||
"<strong>Examples:</strong>",
|
||||
"<blockquote>var someVariable;<br>var anotherVariableName;<br>var thisVariableNameIsSoLong;</blockquote>",
|
||||
"<hr>",
|
||||
@ -336,7 +336,7 @@
|
||||
"En JavaScript todas las variables y nombres de funciones distinguen entre mayúsculas y minúsculas. Esto significa que la capitalización importa.",
|
||||
"<code>MIVAR</code> no es lo mismo que <code>MiVar</code> o <code>mivar</code>. Esto hace posible tener múltiples variables distintas con el mismo nombre pero de diferente manera. Es fuertemente recomendado por el bien de la claridad, que tu <em>no</em> uses esta característica del lenguaje.",
|
||||
"<h4>Mejor Práctica</h4>",
|
||||
"Escribe nombres de variables en Javascript en <dfn>capitalizaciónCamello (camelCase)</dfn>. En <dfn>capitalizaciónCamello</dfn>, los nombres de variables con múltiples palabras tienen la primera palabra en minúsculas y la primera letra de cada palabra subsecuente es capitalizada.",
|
||||
"Escribe nombres de variables en JavaScript en <dfn>capitalizaciónCamello (camelCase)</dfn>. En <dfn>capitalizaciónCamello</dfn>, los nombres de variables con múltiples palabras tienen la primera palabra en minúsculas y la primera letra de cada palabra subsecuente es capitalizada.",
|
||||
"<strong>Ejemplos:</strong>",
|
||||
"<blockquote>var algunaVariable;<br>var otraVariable;<br>var esteNombreDeVariableEsMuyLargo;</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
@ -4837,7 +4837,7 @@
|
||||
"es": {
|
||||
"title": "Manipula objetos complicados",
|
||||
"description": [
|
||||
"Los objetos Javascript son flexibles porque permiten <dfn>Estructuras de Datos</dfn> con combinaciones arbitrarias de <dfn>cadenas</dfn>, <dfn>números</dfn>, <dfn>booleanos</dfn>, <dfn>vectores</dfn>, <dfn>funciones</dfn>, y <dfn>objetos</dfn>.",
|
||||
"Los objetos JavaScript son flexibles porque permiten <dfn>Estructuras de Datos</dfn> con combinaciones arbitrarias de <dfn>cadenas</dfn>, <dfn>números</dfn>, <dfn>booleanos</dfn>, <dfn>vectores</dfn>, <dfn>funciones</dfn>, y <dfn>objetos</dfn>.",
|
||||
"Aquí está un ejemplo de un objeto complicado:",
|
||||
"<blockquote>var nuestraMusica = [<br> {<br> \"artista\": \"Daft Punk\",<br> \"titulo\": \"Homework\",<br> \"año_publicacion\": 1997,<br> \"formatos\": [ <br> \"CD\", <br> \"Cassette\", <br> \"LP\" ],<br> \"oro\": true<br> }<br>];</blockquote>",
|
||||
"Este es un vector de objetos con diversos <dfn>metadatos</dfn> acerca de un álbum musical. Además tiene anidado un vector <code>formatos</code>. En el vector de nivel superior, pueden añadirse otros registros del álbum.",
|
||||
@ -5489,7 +5489,7 @@
|
||||
" \"firstName\": \"Kristian\",",
|
||||
" \"lastName\": \"Vos\",",
|
||||
" \"number\": \"unknown\",",
|
||||
" \"likes\": [\"Javascript\", \"Gaming\", \"Foxes\"]",
|
||||
" \"likes\": [\"JavaScript\", \"Gaming\", \"Foxes\"]",
|
||||
" }",
|
||||
"];",
|
||||
"",
|
||||
@ -5504,7 +5504,7 @@
|
||||
"lookUpProfile(\"Akira\", \"likes\");"
|
||||
],
|
||||
"solutions": [
|
||||
"var contacts = [\n {\n \"firstName\": \"Akira\",\n \"lastName\": \"Laine\",\n \"number\": \"0543236543\",\n \"likes\": [\"Pizza\", \"Coding\", \"Brownie Points\"]\n },\n {\n \"firstName\": \"Harry\",\n \"lastName\": \"Potter\",\n \"number\": \"0994372684\",\n \"likes\": [\"Hogwarts\", \"Magic\", \"Hagrid\"]\n },\n {\n \"firstName\": \"Sherlock\",\n \"lastName\": \"Holmes\",\n \"number\": \"0487345643\",\n \"likes\": [\"Intriguing Cases\", \"Violin\"]\n },\n {\n \"firstName\": \"Kristian\",\n \"lastName\": \"Vos\",\n \"number\": \"unknown\",\n \"likes\": [\"Javascript\", \"Gaming\", \"Foxes\"]\n },\n];\n\n\n//Write your function in between these comments\nfunction lookUpProfile(name, prop){\n for(var i in contacts){\n if(contacts[i].firstName === name) {\n return contacts[i][prop] || \"No such property\";\n }\n }\n return \"No such contact\";\n}\n//Write your function in between these comments\n\nlookUpProfile(\"Akira\", \"likes\");"
|
||||
"var contacts = [\n {\n \"firstName\": \"Akira\",\n \"lastName\": \"Laine\",\n \"number\": \"0543236543\",\n \"likes\": [\"Pizza\", \"Coding\", \"Brownie Points\"]\n },\n {\n \"firstName\": \"Harry\",\n \"lastName\": \"Potter\",\n \"number\": \"0994372684\",\n \"likes\": [\"Hogwarts\", \"Magic\", \"Hagrid\"]\n },\n {\n \"firstName\": \"Sherlock\",\n \"lastName\": \"Holmes\",\n \"number\": \"0487345643\",\n \"likes\": [\"Intriguing Cases\", \"Violin\"]\n },\n {\n \"firstName\": \"Kristian\",\n \"lastName\": \"Vos\",\n \"number\": \"unknown\",\n \"likes\": [\"JavaScript\", \"Gaming\", \"Foxes\"]\n },\n];\n\n\n//Write your function in between these comments\nfunction lookUpProfile(name, prop){\n for(var i in contacts){\n if(contacts[i].firstName === name) {\n return contacts[i][prop] || \"No such property\";\n }\n }\n return \"No such contact\";\n}\n//Write your function in between these comments\n\nlookUpProfile(\"Akira\", \"likes\");"
|
||||
],
|
||||
"tests": [
|
||||
"assert(lookUpProfile('Kristian','lastName') === \"Vos\", 'message: <code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>');",
|
||||
|
||||
@ -8,26 +8,26 @@
|
||||
"title": "Claim Your JavaScript Algorithms and Data Structures Certificate",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/EzMrezJ.jpg",
|
||||
"An image of our JavaScript Algorithms and Data Structures Certificate",
|
||||
"",
|
||||
"",
|
||||
"This challenge will give you your verified JavaScript Algorithms and Data Structures Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/uLPsUko.jpg",
|
||||
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||
"",
|
||||
"",
|
||||
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/rx2gKfB.jpg",
|
||||
"An image of the text \"JavaScript Algorithms and Data Structures requirements\"",
|
||||
"",
|
||||
"",
|
||||
"Let's confirm that you have completed all of our JavaScript Algorithms and Data Structures projects. Click the button below to verify this.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/Q5Za9U6.jpg",
|
||||
"An image of the word \"Congratulations\"",
|
||||
"",
|
||||
"",
|
||||
"Congratulations! We've added your JavaScript Algorithms and Data Structures Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||
""
|
||||
]
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
"title": "Introduction to the Debugging Challenges",
|
||||
"description": [
|
||||
[
|
||||
"http://imgs.xkcd.com/comics/debugging.png",
|
||||
"XKCD web comic walking through the convoluted process of debugging. The programmer moves from a browser problem, to a keyboard driver issue, receives a cryptic system utility error message, and ends by finding the sword of Martin the Warrior.",
|
||||
"",
|
||||
"",
|
||||
"Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it.",
|
||||
""
|
||||
],
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
"title": "Introduction to the Functional Programming Challenges",
|
||||
"description": [
|
||||
[
|
||||
"http://imgs.xkcd.com/comics/functional.png",
|
||||
"XKCD web comic with one person asking why the other likes functional programming so much, and the second responding that tail recursion is its own reward.",
|
||||
"",
|
||||
"",
|
||||
"Functional programming is an approach to software development based around the evaluation of functions. Like mathematics, functions in programming map input to output to produce a result. You can combine basic functions in many ways to build more and more complex programs.<br><br>Functional programming follows a few core principles:<br><br><ul><li>Functions are independent from the state of the program or global variables. They only depend on the arguments passed into them to make a calculation</li><br><li>Functions try to limit any changes to the state of the program and avoid changes to the global objects holding data</li><br><li>Functions have minimal side effects in the program</li></ul><br><br>The functional programming software development approach breaks a program into small, testable parts. This section covers basic functional programming principles in JavaScript.",
|
||||
""
|
||||
] ],
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
"title": "Introduction to the Regular Expression Challenges",
|
||||
"description": [
|
||||
[
|
||||
"https://camo.githubusercontent.com/85ac1a6783961ce77add6b2e8630dbf6521d33b2/687474703a2f2f696d67732e786b63642e636f6d2f636f6d6963732f726567756c61725f65787072657373696f6e732e706e67",
|
||||
"XKCD web comic showing how regular expressions can save the day",
|
||||
"",
|
||||
"",
|
||||
"Regular expressions are special strings that represent a search pattern. Also known as \"regex\" or \"regexp\", they help programmers match, search, and replace text. Regular expressions can appear cryptic because a few characters have special meaning. The goal is to combine the symbols and text into a pattern that matches what you want, but only what you want. This section will cover the characters, a few shortcuts, and the common uses for writing regular expressions.",
|
||||
""
|
||||
]
|
||||
|
||||
@ -819,10 +819,9 @@
|
||||
"id": "bad88fee1348ce8acef08815",
|
||||
"title": "Use the Bootstrap Grid to Put Elements Side By Side",
|
||||
"description": [
|
||||
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
||||
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
||||
"<a href=\"https://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Click to view in the Bootstrap documentation\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
||||
"Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
||||
"Bootstrap has different column width attributes that it uses depending on how wide the user's screen is. For example, phones have narrow screens, and laptops have wider screens.",
|
||||
"Take for example Bootstrap's <code>col-md-*</code> class. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
||||
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></code> element.",
|
||||
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
|
||||
@ -1041,9 +1040,10 @@
|
||||
"title": "Use a span to Target Inline Elements",
|
||||
"description": [
|
||||
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
|
||||
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
|
||||
"<a href=\"https://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
|
||||
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
|
||||
"<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>normal button</button>",
|
||||
"<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>btn-block button</button>",
|
||||
"That illustrates the difference between an \"inline\" element and a \"block\" element.",
|
||||
"By using the inline <code>span</code> element, you can put several elements on the same line, and even style different parts of the same line differently.",
|
||||
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
|
||||
"Here's how you would do this with the \"Top 3 things cats hate\" element:",
|
||||
"<code><p>Top 3 things cats <span class=\"text-danger\">hate:</span></p></code>"
|
||||
@ -1146,9 +1146,9 @@
|
||||
"description": [
|
||||
"We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.",
|
||||
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
||||
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
||||
"<a href=\"https://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
||||
"Take for example Bootstrap's <code>col-md-*</code> class. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
||||
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></code> element.",
|
||||
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Nest your first image and your <code>h2</code> element within a single <code><div class=\"row\"></code> element. Nest your <code>h2</code> element within a <code><div class=\"col-xs-8\"></code> and your image in a <code><div class=\"col-xs-4\"></code> so that they are on the same line.",
|
||||
"Notice how the image is now just the right size to fit along the text?"
|
||||
@ -2189,7 +2189,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"guideUrl":"https://guide.freecodecamp.org/certificates/apply-the-default-bootstrap-button-style"
|
||||
"guideUrl": "https://guide.freecodecamp.org/certificates/apply-the-default-bootstrap-button-style"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908852",
|
||||
@ -2541,4 +2541,4 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -14,15 +14,15 @@
|
||||
"title": "Introduction to jQuery",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/hzACiml.png",
|
||||
"The logo of jQuery that has three blue sound waves that increase in size with the text \"jQuery write less, do more.\" written on it.",
|
||||
"",
|
||||
"",
|
||||
"jQuery is one of the many libraries for JavaScript. It is designed to simplify scripting done on the client side.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"https://i.imgur.com/OHtxVL0.png",
|
||||
"A screenshot of the general syntax. A dollar sign followed by the selector with a dot and an action.",
|
||||
"jQuery's most recognizable characteristic is the dollar sign syntax. With it, you can easily manipulate elements, create animations and handle input events.",
|
||||
"",
|
||||
"",
|
||||
"jQuery's most recognizable characteristic is its dollar sign (<code>$</code>) syntax. With it, you can easily manipulate elements, create animations and handle input events.",
|
||||
""
|
||||
]
|
||||
],
|
||||
@ -108,7 +108,7 @@
|
||||
"fr": {
|
||||
"title": "Apprendre comment fonctionnent les balises Script et Document Ready",
|
||||
"description": [
|
||||
"Nous sommes maintenant prêt à apprendre jQuery, l'outil Javascript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
|
||||
"Nous sommes maintenant prêt à apprendre jQuery, l'outil JavaScript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
|
||||
"Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
|
||||
"Premièrement, ajoutez un élément <code>script</code> en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
|
||||
"Votre navigateur exécutera JavaScript à l'intérieur de l'élement <code>script</code>, y compris jQuery.",
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
],
|
||||
"description": [
|
||||
"One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.",
|
||||
"In Javascript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
|
||||
"In JavaScript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
|
||||
"Here are a couple examples:",
|
||||
"<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br> font-family: $main-fonts;<br> color: $headings-color;<br>}</blockquote>",
|
||||
"One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
"title": "Introduction to the Data Visualization with D3 Challenges",
|
||||
"description": [
|
||||
[
|
||||
"http://imgs.xkcd.com/comics/movie_narrative_charts.png",
|
||||
"XKCD web comic showing very detailed charts of movie character interactions for Lord of the Rings, Star Wars (original trilogy), Jurassic Park, 12 Angry Men, and Primer. The charts show grouped lines, representing when characters appear together, over time.",
|
||||
"",
|
||||
"",
|
||||
"D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG).<br><br>D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization.<br><br>D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library.",
|
||||
""
|
||||
]
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
"title": "Introduction to the JSON APIs and AJAX Challenges",
|
||||
"description": [
|
||||
[
|
||||
"http://imgs.xkcd.com/comics/api.png",
|
||||
"XKCD web comic with a user sitting at a computer reading the instructions for an API Guide for a site. The text below notes \"If you do things right, it can take people awhile to realize that your 'API documentation' is just instructions for how to look at your website.\"",
|
||||
"",
|
||||
"",
|
||||
"Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use AJAX technologies when working with APIs.<br><br>The term AJAX originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.<br><br>User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.<br><br>The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.<br><br>This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API.",
|
||||
""
|
||||
]
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
"title": "Create an online database using mLab",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/Ux1CD2f.png",
|
||||
"mLab logo.",
|
||||
"",
|
||||
"",
|
||||
"For the following challenges, we are going to start using MongoDB to store our data. To simplify the configuration, we are going to use mLab.<br><br>mLab is a MongoDB Database-as-a-Service platform, which basically means that they configure and host the database for you, making it so the only responsibility you have is to populate your database with what matters: data!<br>In the following steps, we are going to show you how to: <ul><li>Create an mLab account.</li><li>Create a free online database.</li><li>Create a new admin user on the database, so you can access it.</li><li>Get the mLab URI, which you will use in your application to connect to your database.</li></ul>Let's start by going to mLab by clicking the button below.",
|
||||
"https://mlab.com/"
|
||||
],
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
"id": "5a1879ed19a2ae635c8afa76",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/AZEhZSU.png",
|
||||
"A screenshot from Mail for Good.",
|
||||
"",
|
||||
"",
|
||||
"Mail for Good is an open source email campaign management tool for nonprofits.",
|
||||
"https://github.com/freeCodeCamp/mail-for-good"
|
||||
]
|
||||
@ -26,8 +26,8 @@
|
||||
"id": "5a1879f119a2ae635c8afa7b",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/uBpLxyq.jpg",
|
||||
"A screenshot from Pantry for Good.",
|
||||
"",
|
||||
"",
|
||||
"Pantry for Good is an open source food bank logistics and inventory management tool.",
|
||||
"https://github.com/freeCodeCamp/pantry-for-good"
|
||||
]
|
||||
@ -43,8 +43,8 @@
|
||||
"id": "5a1879f019a2ae635c8afa7a",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/mKg8plZ.png",
|
||||
"A screenshot from Meeting for Good.",
|
||||
"",
|
||||
"",
|
||||
"Meeting for Good is an open source meeting coordination app for nonprofit teams.",
|
||||
"https://github.com/freeCodeCamp/meeting-for-good"
|
||||
]
|
||||
@ -60,8 +60,8 @@
|
||||
"id": "5a1879ef19a2ae635c8afa79",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/2rrSXLx.png",
|
||||
"A screenshot from League for Good.",
|
||||
"",
|
||||
"",
|
||||
"League for Good is an open source sports league management tool.",
|
||||
"https://github.com/freeCodeCamp/league-for-good"
|
||||
]
|
||||
@ -77,8 +77,8 @@
|
||||
"id": "5a1879ef19a2ae635c8afa78",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/41K9HQ4.png",
|
||||
"A screenshot from Conference for Good.",
|
||||
"",
|
||||
"",
|
||||
"Conference for Good is an open source conference management tool.",
|
||||
"https://github.com/freeCodeCamp/conference-for-good"
|
||||
]
|
||||
@ -94,8 +94,8 @@
|
||||
"id": "5a1879ee19a2ae635c8afa77",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/2wVU4M9.png",
|
||||
"A screenshot from the freeCodeCamp core platform.",
|
||||
"",
|
||||
"",
|
||||
"The freeCodeCamp core platform is the learning resource you are using right now at this exact moment ;)",
|
||||
"https://github.com/freecodecamp/freecodecamp"
|
||||
]
|
||||
@ -111,8 +111,8 @@
|
||||
"id": "5a187d4019a2ae635c8afa7c",
|
||||
"description": [
|
||||
[
|
||||
"https://i.imgur.com/ijMWOAe.png",
|
||||
"A screenshot from the freeCodeCamp Guide.",
|
||||
"",
|
||||
"",
|
||||
"The freeCodeCamp Guide is a collection of easy-to-understand guides to programming tools.",
|
||||
"https://github.com/freeCodeCamp/guides"
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user