diff --git a/challenges/00-getting-started/getting-started.json b/challenges/00-getting-started/getting-started.json index 906c205145..fdf521f40a 100644 --- a/challenges/00-getting-started/getting-started.json +++ b/challenges/00-getting-started/getting-started.json @@ -6,7 +6,7 @@ "challenges": [ { "id": "560add10cb82ac38a17513be", - "title": "Learn how freeCodeCamp Works", + "title": "Learn How freeCodeCamp Works", "description": [ [ "//i.imgur.com/6ibIavQ.jpg", @@ -1168,7 +1168,7 @@ }, { "id": "560add56cb82ac38a17513c0", - "title": "Configure your Code Portfolio", + "title": "Configure Your Code Portfolio", "description": [ [ "//i.imgur.com/Tw5allJ.gif", diff --git a/challenges/01-responsive-web-design/applied-accessibility.json b/challenges/01-responsive-web-design/applied-accessibility.json index 51546980be..f6c4d1d122 100644 --- a/challenges/01-responsive-web-design/applied-accessibility.json +++ b/challenges/01-responsive-web-design/applied-accessibility.json @@ -37,7 +37,7 @@ }, { "id": "587d774c367417b2b2512a9c", - "title": "Add Alt Text to Images for Visually Impaired Accessibility", + "title": "Add a Text Alternative to Images for Visually Impaired Accessibility", "description": [ "It's likely you've seen an alt attribute on an img tag in other challenges. Alt text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:", "<img src="importantLogo.jpeg" alt="Company logo">", @@ -140,7 +140,7 @@ }, { "id": "587d774e367417b2b2512a9f", - "title": "Jump Straight to the Content Using the Main Element", + "title": "Jump Straight to the Content Using the main Element", "description": [ "HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.", "By default, a browser renders these elements similarly to the humble div. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.", @@ -171,9 +171,9 @@ }, { "id": "587d774e367417b2b2512aa0", - "title": "Wrap Content in the Article Element", + "title": "Wrap Content in the article Element", "description": [ - "Article is another one of the new HTML5 elements that adds semantic meaning to your markup. Article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.", + "article is another one of the new HTML5 elements that adds semantic meaning to your markup. Article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.", "Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?", "Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.", "Note about section and div
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.", @@ -217,11 +217,11 @@ }, { "id": "587d7787367417b2b2512aa1", - "title": "Make Screen Reader Navigation Easier with the Header Landmark", + "title": "Make Screen Reader Navigation Easier with the header Landmark", "description": [ "The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.", - "Header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.", - "Note
Header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.", + "header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.", + "Note
header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.", "
", "Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top div that currently contains the h1 to a header tag instead." ], @@ -266,7 +266,7 @@ }, { "id": "587d7788367417b2b2512aa2", - "title": "Make Screen Reader Navigation Easier with the Nav Landmark", + "title": "Make Screen Reader Navigation Easier with the nav Landmark", "description": [ "The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.", "If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient.", @@ -320,7 +320,7 @@ }, { "id": "587d7788367417b2b2512aa3", - "title": "Make Screen Reader Navigation Easier with the Footer Landmark", + "title": "Make Screen Reader Navigation Easier with the footer Landmark", "description": [ "Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.", "
", @@ -375,7 +375,7 @@ }, { "id": "587d7789367417b2b2512aa4", - "title": "Improve Accessibility of Audio Content with the Audio Element", + "title": "Improve Accessibility of Audio Content with the audio Element", "description": [ "HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to the deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.", "The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, it's presence on the tag turns the setting on.", @@ -415,7 +415,7 @@ }, { "id": "587d778a367417b2b2512aa5", - "title": "Improve Chart Accessibility with the Figure Element", + "title": "Improve Chart Accessibility with the figure Element", "description": [ "HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure.", "For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.", @@ -483,7 +483,7 @@ }, { "id": "587d778a367417b2b2512aa6", - "title": "Improve Form Field Accessibility with the Label Element", + "title": "Improve Form Field Accessibility with the label Element", "description": [ "Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.", "The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.", @@ -539,7 +539,7 @@ }, { "id": "587d778b367417b2b2512aa7", - "title": "Wrap Radio Buttons in a Fieldset Element for Better Accessibility", + "title": "Wrap Radio Buttons in a fieldset Element for Better Accessibility", "description": [ "The next form topic covers accessibility of radio buttons. Each choice is given a label with a for attribute tying to the id of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.", "The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.", @@ -659,7 +659,7 @@ }, { "id": "587d778c367417b2b2512aa9", - "title": "Standardize Times with the HTML5 Datetime Attribute", + "title": "Standardize Times with the HTML5 datetime Attribute", "description": [ "Continuing with the date theme, HTML5 also introduced the time element along with a datetime attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the datetime attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.", "Here's an example:", @@ -1027,7 +1027,7 @@ }, { "id": "587d7790367417b2b2512ab0", - "title": "Use Tabindex to Add keyboard Focus to an Element", + "title": "Use tabindex to Add Keyboard Focus to an Element", "description": [ "The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.", "Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex=\"0\" attribute on them. Here's an example:", @@ -1098,7 +1098,7 @@ }, { "id": "587d7790367417b2b2512ab1", - "title": "Use Tabindex to Specify the Order of Keyboard Focus for Several Elements", + "title": "Use tabindex to Specify the Order of Keyboard Focus for Several Elements", "description": [ "The tabindex attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.", "Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex=\"0\" items.", diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json index c20bdef953..61b1436254 100644 --- a/challenges/01-responsive-web-design/applied-visual-design.json +++ b/challenges/01-responsive-web-design/applied-visual-design.json @@ -25,7 +25,7 @@ }, { "id": "587d7791367417b2b2512ab3", - "title": "Create Visual Balance Using the Text-align Property", + "title": "Create Visual Balance Using the text-align Property", "description": [ "This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.", "Text is often a large part of web content. CSS has several options for how to align it with the text-align property.", @@ -82,7 +82,7 @@ }, { "id": "587d7791367417b2b2512ab4", - "title": "Adjust the Width of an Element Using the Width Property", + "title": "Adjust the Width of an Element Using the width Property", "description": [ "You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:", "
img {
width: 220px;
}
", @@ -137,7 +137,7 @@ }, { "id": "587d7791367417b2b2512ab5", - "title": "Adjust the Height of an Element Using the Height Property", + "title": "Adjust the Height of an Element Using the height Property", "description": [ "You can specify the height of an element using the height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:", "
img {
height: 20px;
}
", @@ -252,7 +252,7 @@ }, { "id": "587d781a367417b2b2512ab7", - "title": "Use the Strong Tag to Make Text Bold", + "title": "Use the strong Tag to Make Text Bold", "description": [ "To make text bold, you can use the strong tag. This is often used to draw attention to text and symbolize that it is important. With the strong tag, the browser applies the CSS of font-weight: bold; to the element.", "
", @@ -553,7 +553,7 @@ }, { "id": "587d781b367417b2b2512abc", - "title": "Adjust the Background-color Property of Text", + "title": "Adjust the background-color Property of Text", "description": [ "Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().", "
rgba stands for:
r = red
g = green
b = blue
a = alpha/level of opacity
", @@ -681,7 +681,7 @@ }, { "id": "587d781b367417b2b2512abe", - "title": "Add a Box-shadow to a Card-like Element", + "title": "Add a box-shadow to a Card-like Element", "description": [ "The box-shadow property applies one or more shadows to an element.", "The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.", @@ -816,7 +816,7 @@ }, { "id": "587d781c367417b2b2512ac0", - "title": "Use the Text-transform Property to Make Text Uppercase", + "title": "Use the text-transform Property to Make Text Uppercase", "description": [ "The text-transform property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.", "The following table shows how the different text-transformvalues change the example text \"Transform me\".", @@ -965,7 +965,7 @@ }, { "id": "587d781c367417b2b2512ac2", - "title": "Set the Font-size for Multiple Heading Elements", + "title": "Set the font-size for Multiple Heading Elements", "description": [ "The font-size property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1 through h6 tags to balance the heading sizes.", "
", @@ -1011,7 +1011,7 @@ }, { "id": "587d781c367417b2b2512ac3", - "title": "Set the Font-weight for Multiple Heading Elements", + "title": "Set the font-weight for Multiple Heading Elements", "description": [ "You set the font-size of each heading tag in the last challenge, here you'll adjust the font-weight.", "The font-weight property sets how thick or thin characters are in a section of text.", @@ -1076,7 +1076,7 @@ }, { "id": "587d781c367417b2b2512ac4", - "title": "Set the Font-size of Paragraph Text", + "title": "Set the font-size of Paragraph Text", "description": [ "The font-size property in CSS is not limited to headings, it can be applied to any element containing text.", "
", @@ -1104,7 +1104,7 @@ }, { "id": "587d781d367417b2b2512ac5", - "title": "Set the Line-height of Paragraphs", + "title": "Set the line-height of Paragraphs", "description": [ "CSS offers the line-height property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.", "
", @@ -1360,7 +1360,7 @@ }, { "id": "587d78a3367417b2b2512ace", - "title": "Push Elements Left or Right with the Float Property", + "title": "Push Elements Left or Right with the float Property", "description": [ "The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires.", "
", @@ -1410,7 +1410,7 @@ }, { "id": "587d78a3367417b2b2512acf", - "title": "Change the Position of Overlapping Elements with the Z-index Property", + "title": "Change the Position of Overlapping Elements with the z-index Property", "description": [ "When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index property of an element move it higher in the stack than those with lower values.", "
", @@ -1453,7 +1453,7 @@ }, { "id": "587d78a3367417b2b2512ad0", - "title": "Center an Element Horizontally Using Margin", + "title": "Center an Element Horizontally Using the margin Property", "description": [ "Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto.", "This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.", @@ -1580,7 +1580,7 @@ }, { "id": "587d78a4367417b2b2512ad3", - "title": "Adjusting the Color of Various Elements to Complementary Colors", + "title": "Adjust the Color of Various Elements to Complementary Colors", "description": [ "The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.", "
", @@ -1862,7 +1862,7 @@ }, { "id": "587d78a5367417b2b2512ad9", - "title": "Use the CSS Transform Scale Property to Change the Size of an Element", + "title": "Use the CSS Transform scale Property to Change the Size of an Element", "description": [ "To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page:", "
p {
transform:scale(2);
}
", @@ -1910,7 +1910,7 @@ }, { "id": "587d78a5367417b2b2512ada", - "title": "Use the CSS Transform Property to Scale an Element on Hover", + "title": "Use the CSS Transform scale Property to Scale an Element on Hover", "description": [ "The transform property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.", "Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:", @@ -1951,7 +1951,7 @@ }, { "id": "587d78a6367417b2b2512adb", - "title": "Use the CSS Transform Property SkewX", + "title": "Use the CSS Transform Property skewX to Skew an Element Along the X-Axis", "description": [ "The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.", "The following code skews the paragraph element by -32 degrees along the X-axis.", @@ -1993,7 +1993,7 @@ }, { "id": "587d78a6367417b2b2512adc", - "title": "Use the CSS Transform Property SkewY", + "title": "Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis", "description": [ "Given that the skewX() function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY() property skews an element along the Y (vertical) axis.", "
", @@ -2139,7 +2139,7 @@ }, { "id": "587d78a7367417b2b2512adf", - "title": "Learn How CSS Keyframes and Animation Properties Work", + "title": "Learn How the CSS @keyframes and animation Properties Work", "description": [ "To animate an element, you need to know about the animation properties and the @keyframes rule. The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:", "animation-name sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.", diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json index 2a8db347ba..c2a1f1678a 100644 --- a/challenges/01-responsive-web-design/basic-css.json +++ b/challenges/01-responsive-web-design/basic-css.json @@ -923,7 +923,7 @@ }, { "id": "bad87fee1348bd9acdf08812", - "title": "Size your Images", + "title": "Size Your Images", "description": [ "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:", @@ -1038,7 +1038,7 @@ }, { "id": "bad87fee1348bd9bedf08813", - "title": "Add Borders Around your Elements", + "title": "Add Borders Around Your Elements", "description": [ "CSS borders have properties like style, color and width", "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:", @@ -1168,7 +1168,7 @@ }, { "id": "bad87fee1348bd9aedf08814", - "title": "Add Rounded Corners with a Border Radius", + "title": "Add Rounded Corners with border-radius", "description": [ "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", "
", @@ -1242,7 +1242,7 @@ "challengeType": 0, "translations": { "de": { - "title": "Füge abgerundete Ecken mit Border Radius hinzu", + "title": "Füge abgerundete Ecken mit border-radius hinzu", "description": [ "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", "
", @@ -1251,7 +1251,7 @@ ] }, "es": { - "title": "Agrega esquinas redondeadas usando Border Radius", + "title": "Agrega esquinas redondeadas usando border-radius", "description": [ "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.", "
", @@ -1260,7 +1260,7 @@ ] }, "pt-br": { - "title": "Insira Bordas Arredondadas com o Border Radius", + "title": "Insira Bordas Arredondadas com o border-radius", "description": [ "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", "
", @@ -1281,7 +1281,7 @@ }, { "id": "bad87fee1348bd9aedf08815", - "title": "Make Circular Images with a Border Radius", + "title": "Make Circular Images with a border-radius", "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", "
", @@ -1355,7 +1355,7 @@ "challengeType": 0, "translations": { "de": { - "title": "Erstelle runde Bilder mit einem Border Radius", + "title": "Erstelle runde Bilder mit einem border-radius", "description": [ "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.", "
", @@ -1363,7 +1363,7 @@ ] }, "es": { - "title": "Crea imágenes circulares usando Border Radius", + "title": "Crea imágenes circulares usando border-radius", "description": [ "Además de pixeles, puedes especificar un border-radius usando porcentajes.", "
", @@ -1371,7 +1371,7 @@ ] }, "pt-br": { - "title": "Deixe as Imagens Circulares com o Border Radius", + "title": "Deixe as Imagens Circulares com o border-radius", "description": [ "Assim como pixels, você também pode usar o border-radius com porcentagens.", "
", @@ -1390,7 +1390,7 @@ }, { "id": "bad87fed1348bd9aede07836", - "title": "Give a Background Color to a Div Element", + "title": "Give a Background Color to a div Element", "description": [ "You can set an element's background color with the background-color property.", "For example, if you wanted an element's background color to be green, you'd put this within your style element:", @@ -1466,7 +1466,7 @@ "challengeType": 0, "translations": { "de": { - "title": "Gib einem Div Element eine Hintergrundfarbe", + "title": "Gib einem div Element eine Hintergrundfarbe", "description": [ "Du kannst die Hintergrundfarbe von einem Element mit dem background-color Attribut setzen", "Wenn du zum Beispiel die Hintergrundfarbe von einem Element green machen willst, schreibe dies in dein style Element:", @@ -1476,7 +1476,7 @@ ] }, "es": { - "title": "Da un color de fondo a un elemento Div", + "title": "Da un color de fondo a un elemento div", "description": [ "Puedes fijar el color de fondo de un elemento con la propiedad background-color.", "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), dentro de tu elemento style pondrías:", @@ -1486,7 +1486,7 @@ ] }, "pt-br": { - "title": "Dê uma Cor de Fundo a um Elemento Div", + "title": "Dê uma Cor de Fundo a um Elemento div", "description": [ "Você pode acrescentar uma cor de fundo de um elemento com a propriedade background-color.", "Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (green), dentro de seu elemento style seria assim:", @@ -1511,7 +1511,7 @@ }, { "id": "bad87eee1348bd9aede07836", - "title": "Set the ID of an Element", + "title": "Set the id of an Element", "description": [ "In addition to classes, each HTML element can also have an id attribute.", "There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.", @@ -1643,7 +1643,7 @@ }, { "id": "bad87dee1348bd9aede07836", - "title": "Use an ID Attribute to Style an Element", + "title": "Use an id Attribute to Style an Element", "description": [ "One cool thing about id attributes is that, like classes, you can style them using CSS.", "However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.", @@ -1776,7 +1776,7 @@ }, { "id": "bad88fee1348bd9aedf08825", - "title": "Adjusting the Padding of an Element", + "title": "Adjust the Padding of an Element", "description": [ "Now let's put our Cat Photo App away for a little while and learn more about styling HTML.", "You may have already noticed this, but all HTML elements are essentially little rectangles.", diff --git a/challenges/01-responsive-web-design/basic-html-and-html5.json b/challenges/01-responsive-web-design/basic-html-and-html5.json index b6e9c30218..f343c18d93 100644 --- a/challenges/01-responsive-web-design/basic-html-and-html5.json +++ b/challenges/01-responsive-web-design/basic-html-and-html5.json @@ -549,7 +549,7 @@ }, { "id": "bad87fee1348bd9aedf08812", - "title": "Add Images to your Website", + "title": "Add Images to Your Website", "description": [ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", "An example of this would be:", @@ -841,7 +841,7 @@ }, { "id": "bad87fee1348bd9aedf08817", - "title": "Make Dead Links using the Hash Symbol", + "title": "Make Dead Links Using the Hash Symbol", "description": [ "Sometimes you want to add a elements to your website before you know where they will link.", "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", @@ -1882,7 +1882,7 @@ }, { "id": "bad87fee1348bd9aede08835", - "title": "Nest Many Elements within a Single Div Element", + "title": "Nest Many Elements within a Single div Element", "description": [ "The div element, also known as a division element, is a general purpose container for other elements.", "The div element is probably the most commonly used HTML element of all.", @@ -1932,7 +1932,7 @@ "challengeType": 0, "translations": { "de": { - "title": "Umschließe viele Elemente mit einem einzigen Div Element", + "title": "Umschließe viele Elemente mit einem einzigen div Element", "description": [ "Das div Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.", "Das div Element ist wahrscheinlich das am häufigsten verwendete HTML Element.", @@ -1943,7 +1943,7 @@ ] }, "es": { - "title": "Anida muchos elementos dentro de una sólo elemento Div", + "title": "Anida muchos elementos dentro de una sólo elemento div", "description": [ "El elemento div, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.", "El elemento div es probablemente el elemento HTML más utilizado.", @@ -1954,7 +1954,7 @@ ] }, "pt-br": { - "title": "Aninhe Muitos Elementos Dentro de um só Elemento Div", + "title": "Aninhe Muitos Elementos Dentro de um só Elemento div", "description": [ "O elemento div, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.", "O elemento div é provavelmente o elemento HTML mais utilizado.", diff --git a/challenges/01-responsive-web-design/css-flexbox.json b/challenges/01-responsive-web-design/css-flexbox.json index 90968065b7..5ebcf1a16d 100644 --- a/challenges/01-responsive-web-design/css-flexbox.json +++ b/challenges/01-responsive-web-design/css-flexbox.json @@ -25,7 +25,7 @@ }, { "id": "587d78ab367417b2b2512af0", - "title": "Using display: flex with Two Boxes", + "title": "Use display: flex to Position Two Boxes", "description": [ "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.", "Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.", @@ -69,7 +69,7 @@ }, { "id": "587d78ab367417b2b2512af1", - "title": "Adding Flex Superpowers to the Tweet Embed", + "title": "Add Flex Superpowers to the Tweet Embed", "description": [ "To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning.", "
", @@ -185,7 +185,7 @@ }, { "id": "587d78ab367417b2b2512af2", - "title": "Using the Flex-direction Property to Make a Row", + "title": "Use the flex-direction Property to Make a Row", "description": [ "Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.", "Other options for flex-direction are row-reverse and column-reverse.", @@ -229,7 +229,7 @@ }, { "id": "587d78ab367417b2b2512af3", - "title": "Applying the Flex-direction Property to Create Rows in the Tweet Embed", + "title": "Apply the flex-direction Property to Create Rows in the Tweet Embed", "description": [ "The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally.", "
", @@ -341,7 +341,7 @@ }, { "id": "587d78ac367417b2b2512af4", - "title": "Using the Flex-direction Property to Make a Column", + "title": "Use the flex-direction Property to Make a Column", "description": [ "The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container.", "
", @@ -383,7 +383,7 @@ }, { "id": "587d78ac367417b2b2512af5", - "title": "Applying the Flex-direction Property to Create a Column in the Tweet Embed", + "title": "Apply the flex-direction Property to Create a Column in the Tweet Embed", "description": [ "The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element would work well stacked as a column.", "
", @@ -491,7 +491,7 @@ }, { "id": "587d78ac367417b2b2512af6", - "title": "Aligning Elements Using the Justify-content Property", + "title": "Align Elements Using the justify-content Property", "description": [ "Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options.", "Here is a useful image showing a row to illustrate the concepts below.", @@ -545,7 +545,7 @@ }, { "id": "587d78ac367417b2b2512af7", - "title": "Using the Justify-content Property in the Tweet Embed", + "title": "Use the justify-content Property in the Tweet Embed", "description": [ "The last challenge showed an example of the justify-content property. For the tweet embed, this property can be applied to align the items in the .profile-name element.", "
", @@ -654,7 +654,7 @@ }, { "id": "587d78ad367417b2b2512af8", - "title": "Aligning Elements Using the Align-items Property", + "title": "Align Elements Using the align-items Property", "description": [ "The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.", "Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.", @@ -709,7 +709,7 @@ }, { "id": "587d78ad367417b2b2512af9", - "title": "Using the Align-items Property in the Tweet Embed", + "title": "Use the align-items Property in the Tweet Embed", "description": [ "The last challenge introduced the align-items property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.", "
", @@ -822,7 +822,7 @@ }, { "id": "587d78ad367417b2b2512afa", - "title": "Using the Flex-wrap Property to Wrap a Row or Column", + "title": "Use the flex-wrap Property to Wrap a Row or Column", "description": [ "CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.", "However, using the flex-wrap property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.", @@ -897,7 +897,7 @@ }, { "id": "587d78ad367417b2b2512afb", - "title": "Using the Flex-shrink Property to Shrink Items", + "title": "Use the flex-shrink Property to Shrink Items", "description": [ "So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.", "The first is the flex-shrink property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.", @@ -944,7 +944,7 @@ }, { "id": "587d78ae367417b2b2512afc", - "title": "Using the Flex-grow Property to Expand Items", + "title": "Use the flex-grow Property to Expand Items", "description": [ "The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.", "Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.", @@ -990,7 +990,7 @@ }, { "id": "587d78ae367417b2b2512afd", - "title": "Using the Flex-basis Property to Set the Initial Size of an Item", + "title": "Use the flex-basis Property to Set the Initial Size of an Item", "description": [ "The previous example included flex-basis to help demonstrate how the flex-grow property works. The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.", "The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.", @@ -1036,7 +1036,7 @@ }, { "id": "587d78ae367417b2b2512afe", - "title": "Using the Flex Shorthand Property", + "title": "Use the flex Shorthand Property", "description": [ "There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.", "For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.", @@ -1083,7 +1083,7 @@ }, { "id": "587d78ae367417b2b2512aff", - "title": "Using the Order Property to Rearrange Items", + "title": "Use the order Property to Rearrange Items", "description": [ "The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.", "
", @@ -1128,7 +1128,7 @@ }, { "id": "587d78af367417b2b2512b00", - "title": "Using the Align-self Property", + "title": "Use the align-self Property", "description": [ "The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.", "align-self accepts the same values as align-items and will override any value set by the align-items property.", diff --git a/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json b/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json index 4476d7c9b5..b3f830c604 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json +++ b/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json @@ -595,7 +595,7 @@ }, { "id": "587d7b7c367417b2b2512b1b", - "title": "Use the Delete Keyword to Remove Object Properties", + "title": "Use the delete Keyword to Remove Object Properties", "description": [ "Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, and, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.", "In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can remove a key-value pair from an object.", diff --git a/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json b/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json index 798878b13d..14923d8bd4 100755 --- a/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json +++ b/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json @@ -6,7 +6,7 @@ "challenges": [ { "id": "bd7123c9c441eddfaeb4bdef", - "title": "Comment your JavaScript Code", + "title": "Comment Your JavaScript Code", "description": [ "Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.", "There are two ways to write comments in JavaScript:", @@ -3710,7 +3710,7 @@ }, { "id": "56533eb9ac21ba0edf2244dd", - "title": "Selecting from many options with Switch Statements", + "title": "Selecting from Many Options with Switch Statements", "description": [ "If you have many options to choose from, use a switch statement. A switch statement tests a value and can have many case statements which define various possible values. Statements are executed from the first matched case value until a break is encountered.", "Here is a pseudocode example:", @@ -3767,7 +3767,7 @@ }, { "id": "56533eb9ac21ba0edf2244de", - "title": "Adding a default option in Switch statements", + "title": "Adding a Default Option in Switch Statements", "description": [ "In a switch statement you may not be able to specify all possible values as case statements. Instead, you can add the default statement which will be executed if no matching case statements are found. Think of it like the final else statement in an if/else chain.", "A default statement should be the last case.", diff --git a/challenges/02-javascript-algorithms-and-data-structures/es6.json b/challenges/02-javascript-algorithms-and-data-structures/es6.json index 577f442c79..2de7d32bf2 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/es6.json +++ b/challenges/02-javascript-algorithms-and-data-structures/es6.json @@ -100,7 +100,7 @@ }, { "id": "587d7b87367417b2b2512b41", - "title": "Use the const Keyword", + "title": "Declare a Read-Only Variable with the const Keyword", "description": [ "let is not the only new way to declare variables. In ES6, you can also declare variables using the const keyword.", "const has all the awesome features that let has, with the added bonus that variables declared using const are read-only. They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned.", @@ -169,7 +169,7 @@ }, { "id": "587d7b87367417b2b2512b43", - "title": "Write Arrow Functions", + "title": "Use Arrow Functions to Write Concise Anonymous Functions", "description": [ "In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.", "To achieve this, we often use the following syntax:", @@ -242,7 +242,7 @@ }, { "id": "587d7b88367417b2b2512b45", - "title": "Write Arrow Functions with Higher Order Functions", + "title": "Write Higher Order Arrow Functions", "description": [ "It's time we see how powerful arrow functions are when processing data.", "Arrow functions work really well with higher order functions, such as map(), filter(), and reduce(), that take other functions as arguments for processing collections of data.", @@ -281,7 +281,7 @@ }, { "id": "587d7b88367417b2b2512b46", - "title": "Write Functions with Default Parameters", + "title": "Set Default Parameters for Your Functions", "description": [ "In order to help us create more flexible functions, ES6 introduces default parameters for functions.", "Check out this code:", @@ -340,7 +340,7 @@ }, { "id": "587d7b89367417b2b2512b48", - "title": "Use the Spread Operator", + "title": "Use the Spread Operator to Evaluate Arrays In-Place", "description": [ "ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.", "The ES5 code below uses apply() to compute the maximum value in an array:", @@ -374,7 +374,7 @@ }, { "id": "587d7b89367417b2b2512b49", - "title": "Use Destructuring Assignment with Objects", + "title": "Use Destructuring Assignment to Assign Variables from Objects", "description": [ "We earlier saw how spread operator can effectively spread, or unpack, the contents of the array.", "We can do something similar with objects as well. Destructuring assignment is special syntax for neatly assigning values taken directly from an object to variables.", @@ -406,7 +406,7 @@ }, { "id": "587d7b89367417b2b2512b4a", - "title": "Use Destructuring Assignment with Nested Objects", + "title": "Use Destructuring Assignment to Assign Variables from Nested Objects", "description": [ "We can similarly destructure nested objects into variables.", "Consider the following code:", @@ -436,7 +436,7 @@ }, { "id": "587d7b89367417b2b2512b4b", - "title": "Use Destructuring Assignment with Arrays", + "title": "Use Destructuring Assignment to Assign Variables from Arrays", "description": [ "ES6 makes destructuring arrays as easy as destructuring objects.", "One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick and choose which elements or you want to assign to variables.", @@ -468,7 +468,7 @@ }, { "id": "587d7b8a367417b2b2512b4c", - "title": "Use Destructuring Assignment with the Rest Operator", + "title": "Use Destructuring Assignment with the Rest Operator to Reassign Array Elements", "description": [ "In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.", "The result is similar to Array.prototype.slice(), as shown below:", @@ -499,7 +499,7 @@ }, { "id": "587d7b8a367417b2b2512b4d", - "title": "Use Destructuring Assignment on Function Parameters", + "title": "Use Destructuring Assignment to Pass an Object as a Function's Parameters", "description": [ "In some cases, you can destructure the object in a function argument itself.", "Consider the code below:", @@ -538,7 +538,7 @@ }, { "id": "587d7b8a367417b2b2512b4e", - "title": "String Interpolation using Backquotes", + "title": "Interpolate a String Using Backquotes", "description": [ "A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.", "Consider the code below", @@ -591,7 +591,7 @@ }, { "id": "587d7b8a367417b2b2512b4f", - "title": "Enhanced Object Literals : Simple Fields", + "title": "Write Concise Object Literal Declarations Using Simple Fields", "description": [ "ES6 adds some nice support for removing boiler-plate from object literals declaration.", "Consider the following:", @@ -631,7 +631,7 @@ }, { "id": "587d7b8b367417b2b2512b50", - "title": "Enhanced Object Literals : Functions", + "title": "Write Concise Declarative Functions with ES6", "description": [ "With ES6, it's possible to remove the keyword function as follows, from object literals:", "
const Container extends Component {
  render: function() {
    return {
      Container
    }
  }
}
", @@ -668,7 +668,7 @@ }, { "id": "587d7b8b367417b2b2512b53", - "title": "class Syntax", + "title": "Use class Syntax to Define a Constructor Function", "description": [ "ES6 provides a new syntax to help create objects, using the keyword class.", "This is to be noted, that the class syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.", @@ -700,7 +700,7 @@ }, { "id": "587d7b8c367417b2b2512b54", - "title": "class getters and setters", + "title": "Use getters and setters to Control Access to an Object", "description": [ "You can obtain values from an object, and set a value of a property within an object.", "These are classically called getters and setters.", @@ -739,7 +739,7 @@ }, { "id": "587d7b8c367417b2b2512b55", - "title": "Import vs. Require: What's the difference?", + "title": "Understand the Differences Between import and require", "description": [ "In the past, the function require() would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources.", "ES6 gives us a very handy tool known as import. With it, we can choose which parts of a module or file to load into a given file, saving time and memory.", @@ -766,7 +766,7 @@ }, { "id": "587d7b8c367417b2b2512b56", - "title": "Export: One of Import's siblings.", + "title": "Use export to Reuse a Code Block", "description": [ "In the previous challenge, you learned about import and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with import, known as export. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like import, export is a non-browser feature.", "The following is what we refer to as a named export. With this, we can import any code we export into another file with the import syntax you learned in the last lesson. Here's an example:", @@ -792,7 +792,7 @@ }, { "id": "587d7b8c367417b2b2512b57", - "title": "Import Everything", + "title": "Use * to Import Everything from a File", "description": [ "Suppose you have a file that you wish to import all of its contents into the current file. This can be done with the import * syntax.", "Here's an example where the contents of a file named \"math_functions\" are imported into a file in the same directory:", @@ -817,7 +817,7 @@ }, { "id": "587d7b8c367417b2b2512b58", - "title": "Export Default", + "title": "Create an Export Fallback with export default", "description": [ "In the export lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files.", "There is another export syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.", @@ -840,7 +840,7 @@ }, { "id": "587d7b8d367417b2b2512b59", - "title": "Importing a Default Export", + "title": "Import a Default Export", "description": [ "In the last challenge, you learned about export default and its uses. It is important to note that, to import a default export, you need to use a different import syntax.", "In the following example, we have a function, add, that is the default export of a file, \"math_functions\". Here is how to import it:", diff --git a/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json b/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json index d3935ee24b..0e16b59394 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json +++ b/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json @@ -361,7 +361,7 @@ }, { "id": "587d7b8f367417b2b2512b61", - "title": "Use Map to Extract Data from an Array", + "title": "Use the map Method to Extract Data from an Array", "description": [ "So far we have learned to use pure functions to avoid side effects in a program. Also, we have seen the value in having a function only depend on its input arguments.", "This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.", @@ -511,7 +511,7 @@ }, { "id": "587d7b8f367417b2b2512b62", - "title": "Implement Map on a Prototype", + "title": "Implement map on a Prototype", "description": [ "As you have seen from applying Array.prototype.map(), or simply map() earlier, the map method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't.", "In other words, map is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.", @@ -549,7 +549,7 @@ }, { "id": "587d7b8f367417b2b2512b63", - "title": "Use Filter to Extract Data from an Array", + "title": "Use the filter Method to Extract Data from an Array", "description": [ "Another useful array function is Array.prototype.filter(), or simply filter(). The filter method returns a new array which is at most as long as the original array, but usually has fewer items.", "Filter doesn't alter the original array, just like map. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.", @@ -693,7 +693,7 @@ }, { "id": "587d7b8f367417b2b2512b64", - "title": "Implement the Filter Function on a Prototype", + "title": "Implement the filter Method on a Prototype", "description": [ "It would teach us a lot about the filter method if we try to implement a version of it that behaves exactly like Array.prototype.filter(). It can use either a for loop or Array.prototype.forEach().", "Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.", @@ -729,7 +729,7 @@ }, { "id": "587d7b90367417b2b2512b65", - "title": "Return Part of an Array Using the Slice Method", + "title": "Return Part of an Array Using the slice Method", "description": [ "The slice method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The slice method does not mutate the original array, but returns a new one.", "Here's an example:", @@ -762,7 +762,7 @@ }, { "id": "9d7123c8c441eeafaeb5bdef", - "title": "Remove Elements from an Array Using Slice Instead of Splice", + "title": "Remove Elements from an Array Using slice Instead of splice", "description": [ "A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the splice method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the splice method mutates the original array it is called on. Here's an example:", "
var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];
cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array
// cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]
", @@ -795,7 +795,7 @@ }, { "id": "587d7da9367417b2b2512b66", - "title": "Combine Two Arrays Using the Concat Method", + "title": "Combine Two Arrays Using the concat Method", "description": [ "Concatenation means to join items end to end. JavaScript offers the concat method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to concat, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:", "
[1, 2, 3].concat([4, 5, 6]);
// Returns a new array [1, 2, 3, 4, 5, 6]
", @@ -827,7 +827,7 @@ }, { "id": "587d7da9367417b2b2512b67", - "title": "Add Elements to the End of an Array Using Concat Instead of Push", + "title": "Add Elements to the End of an Array Using concat Instead of push", "description": [ "Functional programming is all about creating and using non-mutating functions.", "The last challenge introduced the concat method as a way to combine arrays into a new one without mutating the original arrays. Compare concat to the push method. Push adds an item to the end of the same array it is called on, which mutates that array. Here's an example:", @@ -862,7 +862,7 @@ }, { "id": "587d7da9367417b2b2512b68", - "title": "Use the Reduce Method to Analyze Data", + "title": "Use the reduce Method to Analyze Data", "description": [ "Array.prototype.reduce(), or simply reduce(), is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the reduce method.", "This is not the case with the filter and map methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, filter or map could not process that.", @@ -1012,7 +1012,7 @@ }, { "id": "587d7da9367417b2b2512b69", - "title": "Sort an Array Alphabetically using the Sort Method", + "title": "Sort an Array Alphabetically using the sort Method", "description": [ "The sort method sorts the elements of an array according to the callback function.", "For example:", @@ -1074,7 +1074,7 @@ }, { "id": "587d7daa367417b2b2512b6b", - "title": "Split a String into an Array Using the Split Method", + "title": "Split a String into an Array Using the split Method", "description": [ "The split method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression. For example, if the delimiter is a space, you get an array of words, and if the delimiter is an empty string, you get an array of each character in the string.", "Here are two examples that split one string by spaces, then another by digits using a regular expression:", @@ -1108,7 +1108,7 @@ }, { "id": "587d7daa367417b2b2512b6c", - "title": "Combine an Array into a String Using the Join Method", + "title": "Combine an Array into a String Using the join Method", "description": [ "The join method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string.", "Here's an example:", @@ -1187,7 +1187,7 @@ }, { "id": "587d7dab367417b2b2512b6e", - "title": "Use the Every Method to Check that Every Element in an Array Meets a Criteria", + "title": "Use the every Method to Check that Every Element in an Array Meets a Criteria", "description": [ "The every method works with arrays to check if every element passes a particular test. It returns a Boolean value - true if all values meet the criteria, false if not.", "For example, the following code would check if every element in the numbers array is less than 10:", @@ -1218,7 +1218,7 @@ }, { "id": "587d7dab367417b2b2512b6f", - "title": "Use the Some Method to Check that Any Elements in an Array Meet a Criteria", + "title": "Use the some Method to Check that Any Elements in an Array Meet a Criteria", "description": [ "The some method works with arrays to check if any element passes a particular test. It returns a Boolean value - true if any of the values meet the criteria, false if not.", "For example, the following code would check if any element in the numbers array is less than 10:", diff --git a/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json b/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json index 00126a9586..e7df304657 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json +++ b/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json @@ -123,14 +123,14 @@ }, { "id": "587d7dad367417b2b2512b76", - "title": "Make Code More Reusable with This", + "title": "Make Code More Reusable with the this Keyword", "description": [ "The last challenge introduced a method to the duck object. It used duck.name dot notation to access the value for the name property within the return statement:", "sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}", "While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error.", "A way to avoid these issues is with the this keyword:", "
let duck = {
  name: \"Aflac\",
  numLegs: 2,
  sayName: function() {return \"The name of this duck is \" + this.name + \".\";}
};
", - "This is a deep topic, and the above example is only one way to use it. In the current context, this refers to the object that the method is associated with: duck.", + "this is a deep topic, and the above example is only one way to use it. In the current context, this refers to the object that the method is associated with: duck.", "If the object's name is changed to mallard, it is not necessary to find all the references to duck in the code. It makes the code reusable and easier to read.", "
", "Modify the dog.sayLegs method to remove any references to dog. Use the duck example for guidance." diff --git a/challenges/03-front-end-libraries/bootstrap.json b/challenges/03-front-end-libraries/bootstrap.json index 36ebc9fcfa..fa718fc870 100644 --- a/challenges/03-front-end-libraries/bootstrap.json +++ b/challenges/03-front-end-libraries/bootstrap.json @@ -627,7 +627,7 @@ }, { "id": "bad87fee1348cd8acef08813", - "title": "Call out Optional Actions with Button Info", + "title": "Call out Optional Actions with btn-info", "description": [ "Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to call attention to optional actions that the user can take.", "Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's btn-info and btn-block classes to it.", @@ -722,7 +722,7 @@ }, { "id": "bad87fee1348ce8acef08814", - "title": "Warn your Users of a Dangerous Action", + "title": "Warn Your Users of a Dangerous Action with btn-danger", "description": [ "Bootstrap comes with several pre-defined colors for buttons. The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.", "Create a button with the text \"Delete\" and give it the class btn-danger.", @@ -1039,7 +1039,7 @@ }, { "id": "bad87fee1348bd9aedf08845", - "title": "Use Spans for Inline Elements", + "title": "Use a span to Target Inline Elements", "description": [ "You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?", "This image illustrates the difference between inline elements and block-level elements:", @@ -1932,7 +1932,7 @@ }, { "id": "bad87fee1348bd9aec908746", - "title": "House our page within a Bootstrap Container Fluid Div", + "title": "House our page within a Bootstrap container-fluid div", "description": [ "Now let's make sure all the content on your page is mobile-responsive.", "Let's nest your h3 element within a div element with the class container-fluid." @@ -2007,7 +2007,7 @@ }, { "id": "bad87fee1348bd9aec908847", - "title": "Split your Bootstrap Row", + "title": "Split Your Bootstrap Row", "description": [ "Now that we have a Bootstrap Row, let's split it into two columns to house our elements.", "Create two div elements within your row, both with the class col-xs-6." @@ -2090,7 +2090,7 @@ }, { "id": "bad87fee1348bd9aec908849", - "title": "Add Elements within your Bootstrap Wells", + "title": "Add Elements within Your Bootstrap Wells", "description": [ "Now we're several div elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our button elements.", "Nest three button elements within each of your well div elements." @@ -2243,7 +2243,7 @@ }, { "id": "bad87fee1348bd9aec908853", - "title": "Add ID Attributes to Bootstrap Elements", + "title": "Add id Attributes to Bootstrap Elements", "description": [ "Recall that in addition to class attributes, you can give each of your elements an id attribute.", "Each id must be unique to a specific element and used only once per page.", @@ -2364,7 +2364,7 @@ }, { "id": "bad87fee1348bd9aec908855", - "title": "Give Each Element a Unique ID", + "title": "Give Each Element a Unique id", "description": [ "We will also want to be able to use jQuery to target each button by its unique id.", "Give each of your buttons a unique id, starting with target1 and ending with target6.", diff --git a/challenges/03-front-end-libraries/jquery.json b/challenges/03-front-end-libraries/jquery.json index cff8dc9fc8..0f6a414abd 100644 --- a/challenges/03-front-end-libraries/jquery.json +++ b/challenges/03-front-end-libraries/jquery.json @@ -11,7 +11,7 @@ "challenges": [ { "id": "bad87fee1348bd9acdd08826", - "title": "Learn how Script Tags and Document Ready Work", + "title": "Learn How Script Tags and Document Ready Work", "description": [ "Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.", "Before we can start using jQuery, we need to add some things to our HTML.", @@ -281,7 +281,7 @@ }, { "id": "bad87fee1348bd9aeda08826", - "title": "Target Elements by ID Using jQuery", + "title": "Target Elements by id Using jQuery", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css" @@ -337,7 +337,7 @@ "challengeType": 0, "translations": { "de": { - "title": "Elemente anhand der ID mit jQuery auswählen", + "title": "Elemente anhand der id mit jQuery auswählen", "description": [ "Du kannst Elemente auch anhand deren ID-Attributs auswählen.", "Wähle als erstes dein Button Element mit der ID target3, indem du den $(\"#target3\") Selektor nutzt.", @@ -348,7 +348,7 @@ ] }, "es": { - "title": "Elige elementos por ID usando jQuery", + "title": "Elige elementos por id usando jQuery", "description": [ "También puedes elegir un elemento por su atributo id.", "Primero selecciona tu elemento button con el id target3 mediante el uso del selector $(\"#target3\").", @@ -359,7 +359,7 @@ ] }, "fr": { - "title": "Cibler les éléments par ID avec jQuery", + "title": "Cibler les éléments par id avec jQuery", "description": [ "Vous pouvez également cibler les éléments à l'aide de leurs attributs id.", "Premièrement, cibler votre élément button avec l'id target3 en utilisant le sélecteur $(\"#target\").", @@ -373,7 +373,7 @@ }, { "id": "bad87fee1348bd9aeda08726", - "title": "Delete your jQuery Functions", + "title": "Delete Your jQuery Functions", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css" @@ -452,7 +452,7 @@ }, { "id": "bad87fee1348bd9aed908626", - "title": "Target the same element with multiple jQuery Selectors", + "title": "Target the Same Element with Multiple jQuery Selectors", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css" @@ -545,7 +545,7 @@ }, { "id": "bad87fee1348bd9aed918626", - "title": "Remove Classes from an element with jQuery", + "title": "Remove Classes from an Element with jQuery", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css" diff --git a/challenges/03-front-end-libraries/sass.json b/challenges/03-front-end-libraries/sass.json index bb1cc57bc3..ff348a547e 100644 --- a/challenges/03-front-end-libraries/sass.json +++ b/challenges/03-front-end-libraries/sass.json @@ -25,7 +25,7 @@ }, { "id": "587d7dbd367417b2b2512bb4", - "title": "Storing Data with Sass Variables", + "title": "Store Data with Sass Variables", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -82,7 +82,7 @@ }, { "id": "587d7dbd367417b2b2512bb5", - "title": "Nesting CSS with Sass", + "title": "Nest CSS with Sass", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -129,7 +129,7 @@ }, { "id": "587d7dbd367417b2b2512bb6", - "title": "Creating Reusable CSS with Mixins", + "title": "Create Reusable CSS with Mixins", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -182,7 +182,7 @@ }, { "id": "587d7dbe367417b2b2512bb8", - "title": "Using @if and @else.", + "title": "Use @if and @else to Add Logic To Your Styles", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -229,7 +229,7 @@ }, { "id": "587d7dbe367417b2b2512bb9", - "title": "Continuing with @for", + "title": "Use @for to Create a Sass Loop", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -278,7 +278,7 @@ }, { "id": "587d7dbf367417b2b2512bba", - "title": "Expanding with @each", + "title": "Use @each to Map Over Items in a List", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -328,7 +328,7 @@ }, { "id": "587d7dbf367417b2b2512bbb", - "title": "Wrapping up with @while", + "title": "Apply a Style Until a Condition is Met with @while", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -387,7 +387,7 @@ }, { "id": "587d7dbf367417b2b2512bbc", - "title": "Partials", + "title": "Split Your Styles into Smaller Chunks with Partials", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", @@ -422,7 +422,7 @@ }, { "id": "587d7fa5367417b2b2512bbd", - "title": "Extend your CSS styles", + "title": "Extend One Set of CSS Styles to Another Element", "required": [ { "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js", diff --git a/challenges/04-data-visualization/data-visualization-with-d3.json b/challenges/04-data-visualization/data-visualization-with-d3.json index 9c55ddac58..a0fc921e60 100644 --- a/challenges/04-data-visualization/data-visualization-with-d3.json +++ b/challenges/04-data-visualization/data-visualization-with-d3.json @@ -1478,7 +1478,7 @@ }, { "id": "587d7fac367417b2b2512bdc", - "title": "Use the D3 Max and Min Functions", + "title": "Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset", "required": [ { "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js" @@ -1599,7 +1599,7 @@ }, { "id": "587d7fac367417b2b2512bde", - "title": "Use a Pre-defined Scale to Place Elements", + "title": "Use a Pre-Defined Scale to Place Elements", "required": [ { "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js" diff --git a/challenges/04-data-visualization/json-apis-and-ajax.json b/challenges/04-data-visualization/json-apis-and-ajax.json index 0461c69773..8778e92b53 100644 --- a/challenges/04-data-visualization/json-apis-and-ajax.json +++ b/challenges/04-data-visualization/json-apis-and-ajax.json @@ -1,5 +1,5 @@ { - "name": "JSON APIs and Ajax", + "name": "JSON APIs and AJAX", "order": 2, "time": "2 hours", "helpRoom": "Help", @@ -11,12 +11,12 @@ "challenges": [ { "id": "587d7fad367417b2b2512be0", - "title": "Introduction to the JSON APIs and Ajax Challenges", + "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.

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.

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.

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.

This section covers how to transfer and use data using Ajax technologies with a freeCodeCamp API.", + "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.

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.

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.

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.

This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API.", "" ] ], @@ -30,10 +30,10 @@ }, { "id": "587d7fad367417b2b2512be1", - "title": "Trigger Click Events with JavaScript", + "title": "Trigger click Events with JavaScript", "description": [ "This section covers how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.", - "You'll learn how to update HTML with the data we get from these APIs using a technology called Ajax.", + "You'll learn how to update HTML with the data we get from these APIs using a technology called AJAX.", "You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called DOMContentLoaded. Here's the code that does this:", "
document.addEventListener('DOMContentLoaded',function() {

});
", "Next, you can implement a click event handler that goes inside of the DOMContentLoaded function by adding the following code:", @@ -99,7 +99,7 @@ }, { "id": "587d7fad367417b2b2512be2", - "title": "Change Text with Click Events", + "title": "Change Text with click Events", "description": [ "When the click event happens, you can use JavaScript to update an HTML element.", "For example, when a user clicks the \"Get Message\" button, it changes the text of the element with the class message to say \"Here is the message\".", @@ -181,7 +181,7 @@ "Next, the open method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for open is the URL of the API you are requesting data from. The third argument is a Boolean value where true makes it an asynchronous request.", "The send method sends the request. Finally, the onload event handler parses the returned data and applies the JSON.stringify method to convert the JavaScript object into a string. This string is then inserted as the message text.", "
", - "Update the code to create and send a \"GET\" request to the freeCodeCamp Cat Photo API. Then click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the API." + "Update the code to create and send a \"GET\" request to the freeCodeCamp Cat Photo API. Then click the \"Get Message\" button. Your AJAX function will replace the \"The message will go here\" text with the raw JSON output from the API." ], "challengeSeed": [ "