diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json index d293bdab25..33ebb602fb 100644 --- a/challenges/01-responsive-web-design/basic-css.json +++ b/challenges/01-responsive-web-design/basic-css.json @@ -1049,8 +1049,8 @@ "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", "
", - "Create a class called thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo.", - "Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:", + "Create a class called thick-green-border. This class should add a 10px, solid, green border around a HTML element. Apply the class to your cat photo.", + "Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:", "<img class=\"class1 class2\">" ], "challengeSeed": [ @@ -1178,8 +1178,8 @@ "description": [ "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", "
", - "You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.", - "Note: this waypoint allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or .smaller-image class." + "One of the units you can use to specify the radius of a border is with pixels. Give your cat photo a border-radius of 10px.", + "Note: this challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class." ], "challengeSeed": [ "", @@ -1290,9 +1290,11 @@ "id": "bad87fee1348bd9aedf08815", "title": "Make Circular Images with a border-radius", "description": [ - "In addition to pixels, you can also specify a border-radius using a percentage.", + "In addition to pixels, you can also specify the border-radius using a percentage.", "
", - "Give your cat photo a border-radius of 50%." + "Give your cat photo a border-radius of 50%.", + "
", + "As you can tell from the end result, this is an easy way to create circular images." ], "challengeSeed": [ "", 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 11354456f6..ce0f20b3cd 100644 --- a/challenges/01-responsive-web-design/basic-html-and-html5.json +++ b/challenges/01-responsive-web-design/basic-html-and-html5.json @@ -708,9 +708,9 @@ "id": "bad87fee1348bd9aedf08816", "title": "Link to External Pages with Anchor Elements", "description": [ - "a elements, also known as anchor elements, are used to link to content outside of the current page.", - "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", + "a elements, also known as anchor elements, are used to link to content inside, as well as outside of the current page. For this lesson, we are going to focus on using the a element for external links.", "\"aClick to enlarge ", + "The above diagram of an a 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:", "
<p>
Here's a
<a href=\"http://freecodecamp.org\">
link to freecodecamp.org
</a>
for you to follow.
</p>
", "Let's break down the example:", @@ -856,7 +856,7 @@ "id": "bad87fee1348bd9aede08817", "title": "Nest an Anchor Element within a Paragraph", "description": [ - "Again, here's a diagram of an a element for your reference:", + "Below is the diagram showing that you can nest an a element inside a p element:", "\"aClick to enlarge ", "Here's an example:", "
<p>
Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.
</p>
", @@ -867,7 +867,7 @@ "The text, \"link to freecodecamp.org\", within the anchor 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.

", "
", - "Now nest your existing a element within a new p element (just after the existing main element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text." + "Now nest your 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." ], "challengeSeed": [ "

CatPhotoApp

", @@ -1032,7 +1032,7 @@ "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.", + "This is also handy when you're changing the behavior of a link using JavaScript, which we'll learn about later.", "
", "The current value of the href attribute is a link that points to \"http://freecatphotoapp.com\". Replace the href attribute value with a #, also known as a hash symbol, to create a dead link.", "For example: href=\"#\""