fix: language update suggestions for basic-css and basic-html (#16729)

Author: Schalk Neethling

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:",
         "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
         "<hr>",
-        "Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> 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 <code>class</code> attribute. For example:",
+        "Create a class called <code>thick-green-border</code>. 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 <code>class</code> attribute, by separating each class name with a space. For example:",
         "<code>&lt;img class=\"class1 class2\"&gt;</code>"
       ],
       "challengeSeed": [
@@ -1178,8 +1178,8 @@
       "description": [
         "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
         "<hr>",
-        "You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.",
-        "Note: this waypoint allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or <code>.smaller-image</code> class."
+        "One of the units you can use to specify the radius of a border is with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.",
+        "Note: this challenge allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or the <code>.smaller-image</code> class."
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@@ -1290,9 +1290,11 @@
       "id": "bad87fee1348bd9aedf08815",
       "title": "Make Circular Images with a border-radius",
       "description": [
-        "In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
+        "In addition to pixels, you can also specify the <code>border-radius</code> using a percentage.",
         "<hr>",
-        "Give your cat photo a <code>border-radius</code> of <code>50%</code>."
+        "Give your cat photo a <code>border-radius</code> of <code>50%</code>.",
+        "<hr>",
+        "As you can tell from the end result, this is an easy way to create circular images."
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",

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": [
-        "<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
-        "Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
+        "<code>a</code> elements, also known as <code>anchor</code> 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 <code>a</code> element for external links.",
         "<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\">Click to enlarge </a>",
+        "The above diagram of an <code>a</code> element demonstrated that you can use an anchor element almost anywhere, even inside another element. In this case, the link will appear in the middle of the paragraph.",
         "Here's an example:",
         "<blockquote>&#60;p&#62;<br>  Here's a <br>  &#60;a href=\"http://freecodecamp.org\"&#62; <br>    link to freecodecamp.org<br>  &#60;/a&#62;<br>  for you to follow.<br>&#60;/p&#62;</blockquote>",
         "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 <code>a</code> element for your reference:",
+        "Below is the diagram showing that you can nest an <code>a</code> element inside a <code>p</code> element:",
         "<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\">Click to enlarge </a>",
         "Here's an example:",
         "<blockquote>&#60;p&#62;<br> Here's a &#60;a href=\"http://freecodecamp.org\"&#62; link to freecodecamp.org&#60;/a&#62; for you to follow.<br>&#60;/p&#62;</blockquote>",
@@ -867,7 +867,7 @@
         "The text, <strong>\"link to freecodecamp.org\"</strong>, within the anchor element called <code>anchor text</code>, will display a link to click:<br>  <code>&#60;a href=\" ... \"&#62;link to freecodecamp.org&#60;/a&#62;</code>",
         "The final output of the example will look like this:<br><p>Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.</p>",
         "<hr>",
-        "Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>main</code> 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 <code>a</code> element within a new <code>p</code> element (just after the existing <code>main</code> 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": [
         "<h2>CatPhotoApp</h2>",
@@ -1032,7 +1032,7 @@
       "title": "Make Dead Links Using the Hash Symbol",
       "description": [
         "Sometimes you want to add <code>a</code> 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 <code>jQuery</code>, which we'll learn about later.",
+        "This is also handy when you're changing the behavior of a link using <code>JavaScript</code>, which we'll learn about later.",
         "<hr>",
         "The current value of the <code>href</code> attribute is a link that points to \"http://freecatphotoapp.com\". Replace the <code>href</code> attribute value with a <code>#</code>, also known as a hash symbol, to create a dead link.",
         "For example: <code>href=\"#\"</code>"