diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md index 8c08dd0703..7d3d4dcb9a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md @@ -7,6 +7,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb' ## Description
+ You can nest links within other text elements. ```html @@ -19,13 +20,14 @@ Let's break down the example: Normal text is wrapped in the p element:
<p> Here's a ... for you to follow. </p> Next is the anchor element <a> (which requires a closing tag </a>):
<a> ... </a> target is an anchor tag attribute that specifies where to open the link and the value "_blank" specifies to open the link in a new tab -href is an anchor tag attribute that contains the URL address of the link:
<a href="http://freecodecamp.org"> ... </a> +href is an anchor tag attribute that contains the URL address of the link:
` ... ` The text, "link to freecodecamp.org", within the a element called anchor text, will display a link to click:
<a href=" ... ">link to freecodecamp.org</a> The final output of the example will look like this:

Here's a link to freecodecamp.org for you to follow.

## Instructions
+ Now nest the existing a element within a new p element (just after the existing main element). The new paragraph should have text that says "View more cat photos", where "cat photos" is a link, and the rest of the text is plain text.
@@ -86,9 +88,9 @@ tests:

CatPhotoApp

View more cat photos

- + A cute orange cat lying on its back. - +

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md index a8415f8e59..e92005ebf2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md @@ -6,6 +6,7 @@ challengeType: 1 ## Description
+ Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a for...in statement. For our users object, this could look like: ```js @@ -19,12 +20,14 @@ Jeff Sarah Ryan ``` + In this statement, we defined a variable user, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console. NOTE: Objects do not maintain an ordering to stored keys like arrays do; thus a key's position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.
## Instructions
+ We've defined a function countOnline which accepts one argument (a users object). Use a for...in statement within this function to loop through the users object passed into the function and return the number of users whose online property is set to true. An example of a users object which could be passed to countOnline is shown below. Each user will have an online property with either a true or false value. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.english.md index 773e12af06..f3259bc708 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.english.md @@ -6,6 +6,7 @@ challengeType: 1 ## Description
+ In previous lessons, you learned that an object can inherit its behavior (methods) from another object by cloning its prototype object: ```js @@ -38,14 +39,17 @@ Bird.prototype.eat = function() { ``` If you have an instance let duck = new Bird(); and you call duck.eat(), this is how JavaScript looks for the method on duck’s prototype chain: + 1. duck => Is eat() defined here? No. 2. Bird => Is eat() defined here? => Yes. Execute it and stop searching. 3. Animal => eat() is also defined, but JavaScript stopped searching before reaching this level. 4. Object => JavaScript stopped searching before reaching this level. +
## Instructions
+ Override the fly() method for Penguin so that it returns "Alas, this is a flightless bird."
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md index 78b090d829..1ebf41c6dc 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md @@ -6,7 +6,9 @@ isRequired: false --- ## Description +
+ React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: componentWillMount() componentDidMount() @@ -14,12 +16,13 @@ React components have several special methods that provide opportunities to perf componentDidUpdate() componentWillUnmount() The next several lessons will cover some of the basic use cases for these lifecycle methods. - -##### Note: The ``` componentWillMount ``` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) + +Note: The `componentWillMount` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
## Instructions
+ The componentWillMount() method is called before the render() method when a component is being mounted to the DOM. Log something to the console within componentWillMount() - you may want to have your browser console open to see the output.
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md index 732d2ffde1..09c769e7bd 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md @@ -6,6 +6,7 @@ challengeType: 0 ## Description
+ The last challenge showed how the @for directive uses a starting and ending value to loop a certain number of times. Sass also offers the @each directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map. @@ -46,6 +47,7 @@ Both of the above code examples are converted into the following CSS: ## Instructions
+ Write an @each directive that goes through a list: blue, black, red and assigns each variable to a .color-bg class, where the "color" part changes for each item. Each class should set the background-color the respective color.
@@ -99,6 +101,7 @@ tests: The solution requires using the $color variable twice: once for the class name and once for setting the background color. You can use either the list or map data type. ### List Data type + ```html