gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(learn): consolidate comments for responsive web design cert (#38256)

Browse Source 
Related to PR #38040

This PR is an attempt to consolidate/remove as many comments in the challenge seed code in the Responsive Web Design certification challenges, to be able to create a small translation lookup object for translating the English comments to other languages.
This commit is contained in:
Randell Dawson
2020-02-27 07:20:46 -08:00
committed by GitHub
parent 9606e27a0e
commit 41718abf76
37 changed files with 99 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md
View File

@ -60,11 +60,11 @@ tests:
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<!-- Add your code below this line -->
<!-- Only change code below this line -->
<!-- Add your code above this line -->
<!-- Only change code above this line -->
<input type="submit" name="submit" value="Submit">
</form>

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md
View File

@ -71,13 +71,13 @@ tests:
<main>
<section>
<!-- Add your code below this line -->
<!-- Only change code below this line -->
<div>
<!-- Stacked bar chart will go here -->
<br>
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
</div>
<!-- Add your code above this line -->
<!-- Only change code above this line -->
</section>
<section id="stealth">
@ -123,15 +123,11 @@ tests:
</header>
<main>
<section>
<!-- Add your code below this line -->
<figure>
<!-- Stacked bar chart will go here -->
<br>
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<!-- Add your code above this line -->
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>

4
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
View File

@ -85,7 +85,7 @@ tests:
<section>
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training-->
<!-- Stacked bar chart of weekly training -->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
@ -181,7 +181,7 @@ tests:
<section>
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training-->
<!-- Stacked bar chart of weekly training -->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md
View File

@ -48,11 +48,11 @@ tests:
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Add your code below this line -->
<!-- Only change code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
<!-- Add your code above this line -->
<!-- Only change code above this line -->
<section>
<h3>Comments:</h3>
@ -102,12 +102,8 @@ const datetimeAttr = $(timeElement).attr("datetime");
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Add your code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<!-- Add your code above this line -->
<section>
<h3>Comments:</h3>
<article>

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md
View File

@ -71,7 +71,7 @@ tests:
<input type="text" id="email" name="email">
<!-- Add your code below this line -->
<!-- Only change code below this line -->
<div>
<p>What level ninja are you?</p>
<input id="newbie" type="radio" name="levels" value="newbie">
@ -81,7 +81,7 @@ tests:
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</div>
<!-- Add your code above this line -->
<!-- Only change code above this line -->
<input type="submit" name="submit" value="Submit">
@ -125,8 +125,6 @@ tests:
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<!-- Add your code below this line -->
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
@ -136,8 +134,6 @@ tests:
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</fieldset>
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>

4
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
View File

@ -46,9 +46,9 @@ tests:
button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
@keyframes background-color {
100% {

8
curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md
View File

@ -62,9 +62,9 @@ tests:
top: 10%;
left: 25%;
/* change code below */
/* Change code below this line */
background: var(--pengiun-skin);
/* change code above */
/* Change code above this line */
width: 50%;
height: 45%;
@ -75,9 +75,9 @@ tests:
top: 40%;
left: 23.5%;
/* change code below */
/* Change code below this line */
background: var(--pengiun-skin);
/* change code above */
/* Change code above this line */
width: 53%;
height: 45%;

6
curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md
View File

@ -47,11 +47,9 @@ tests:
}
.penguin {
/* Only change code below this line */
/* add code below */
/* add code above */
/* Only change code above this line */
position: relative;
margin: auto;
display: block;

5
curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md
View File

@ -43,10 +43,9 @@ tests:
```html
<style>
.penguin {
/* Only change code below this line */
/* add code below */
/* add code above */
/* Only change code above this line */
position: relative;
margin: auto;
display: block;

5
curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
View File

@ -38,10 +38,9 @@ tests:
```html
<style>
:root {
/* Only change code below this line */
/* add code below */
/* add code above */
/* Only change code above this line */
}
body {

16
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
View File

@ -62,9 +62,9 @@ tests:
top: 10%;
left: 25%;
/* change code below */
/* Change code below this line */
background: black;
/* change code above */
/* Change code above this line */
width: 50%;
height: 45%;
@ -75,9 +75,9 @@ tests:
top: 40%;
left: 23.5%;
/* change code below */
/* Change code below this line */
background: black;
/* change code above */
/* Change code above this line */
width: 53%;
height: 45%;
@ -88,9 +88,9 @@ tests:
top: 0%;
left: -5%;
/* change code below */
/* Change code below this line */
background: black;
/* change code above */
/* Change code above this line */
width: 30%;
height: 60%;
@ -103,9 +103,9 @@ tests:
top: 0%;
left: 75%;
/* change code below */
/* Change code below this line */
background: black;
/* change code above */
/* Change code above this line */
width: 30%;
height: 60%;

6
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.english.md
View File

@ -47,11 +47,9 @@ tests:
@media (max-width: 350px) {
:root {
/* Only change code below this line */
/* add code below */
/* add code above */
/* Only change code above this line */
}
}

4
curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.english.md
View File

@ -42,11 +42,11 @@ tests:
<style>
.penguin {
/* change code below */
/* Only change code below this line */
--penguin-skin: black;
--penguin-belly: gray;
--penguin-beak: yellow;
/* change code above */
/* Only change code above this line */
position: relative;
margin: auto;

4
curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
View File

@ -56,10 +56,10 @@ tests:
width: 100%;
background: LightGray;
display: grid;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md
View File

@ -49,10 +49,10 @@ tests:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>
<div class="container">

4
curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md
View File

@ -47,10 +47,10 @@ tests:
background: LightGray;
display: grid;
grid-template-columns: 100px 100px 100px;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md
View File

@ -50,10 +50,10 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md
View File

@ -50,10 +50,10 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md
View File

@ -42,10 +42,10 @@ tests:
.item2 {
background: LightSalmon;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
.item3{background:PaleTurquoise;}

4
curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md
View File

@ -40,10 +40,10 @@ tests:
.item3 {
background: PaleTurquoise;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
.item4{background:LightPink;}

4
curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
View File

@ -55,10 +55,10 @@ tests:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md
View File

@ -49,10 +49,10 @@ tests:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

8
curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
View File

@ -54,11 +54,11 @@ tests:
width: 100%;
background: LightGray;
display: grid;
/* change the code below this line */
/* Only change code below this line */
grid-template-columns: repeat(3, minmax(60px, 1fr));
/* change the code above this line */
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
@ -114,11 +114,11 @@ tests:
width: 100%;
background: LightGray;
display: grid;
/* change the code below this line */
/* Only change code below this line */
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
/* change the code above this line */
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

4
curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
View File

@ -59,11 +59,11 @@ tests:
width: 100%;
background: Silver;
display: grid;
/* change the code below this line */
/* Only change code below this line */
grid-template-columns: repeat(3, minmax(60px, 1fr));
/* change the code above this line */
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

4
curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md
View File

@ -65,10 +65,10 @@ tests:
.item3 {
background: PaleTurquoise;
grid-area: content;
/* enter your code below this line */
/* Only change code below this line */
/* enter your code above this line */
/* Only change code above this line */
}
.item4 {

4
curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
View File

@ -46,10 +46,10 @@ tests:
font-size: 40px;
width: 100%;
background: LightGray;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
</style>

5
curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
View File

@ -61,13 +61,12 @@ tests:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* change code below this line */
grid-template-areas:
/* Only change code below this line */
"header header header"
"advert content content"
"footer footer footer";
/* change code above this line */
/* Only change code above this line */
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
View File

@ -53,11 +53,11 @@ tests:
width: 100%;
background: LightGray;
display: grid;
/* change the code below this line */
/* Only change code below this line */
grid-template-columns: repeat(3, 1fr);
/* change the code above this line */
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

4
curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
View File

@ -50,10 +50,10 @@ tests:
.item5 {
background: PaleGreen;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
.container {

4
curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
View File

@ -67,11 +67,11 @@ tests:
width: 100%;
background: LightGray;
display: grid;
/* change the code below this line */
/* Only change code below this line */
grid-template-columns: 1fr 1fr 1fr;
/* change the code above this line */
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

4
curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
View File

@ -56,11 +56,11 @@ tests:
width: 100%;
background: LightGray;
display: grid;
/* modify the code below this line */
/* Only change code below this line */
grid-template-columns: auto 50px 10% 2fr 1fr;
/* modify the code above this line */
/* Only change code above this line */
grid-template-rows: 50px 50px;
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
View File

@ -54,10 +54,10 @@ tests:
.item5 {
background: PaleGreen;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
.container {

4
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
View File

@ -61,10 +61,10 @@ tests:
.item5 {
background: PaleGreen;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
.container {

7
curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md
View File

@ -51,10 +51,9 @@ tests:
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
/* add your code below this line */
/* Only change code below this line */
/* add your code above this line */
/* Only change code above this line */
}
.container {
@ -98,9 +97,7 @@ tests:
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
/* add your code below this line */
grid-row: 2 / 4;
/* add your code above this line */
}
.container {

10
curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md
View File

@ -85,14 +85,12 @@ tests:
@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-areas:
/* Only change code below this line */
"advert header"
"advert content"
"advert footer";
/* change the code above this line */
/* Only change code above this line */
}
}
</style>
@ -165,14 +163,10 @@ tests:
@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-areas:
"header header"
"advert content"
"footer footer";
/* change the code above this line */
}
}
</style>

4
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
View File

@ -48,7 +48,9 @@ tests:
font-size: 20px;
}
/* Add media query below */
/* Only change code below this line */
/* Only change code above this line */
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

10
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md
View File

@ -56,9 +56,10 @@ tests:
.bar {
width: 25px;
height: 100px;
/* Add your code below this line */
/* Only change code below this line */
/* Add your code above this line */
/* Only change code above this line */
display: inline-block;
background-color: blue;
}
@ -72,10 +73,7 @@ tests:
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
.style("height", (d) => (d + "px"))
// Add your code above this line
</script>
</body>
```
@ -94,9 +92,7 @@ tests:
.bar {
width: 25px;
height: 100px;
/* Add your code below this line */
margin: 2px;
/* Add your code above this line */
display: inline-block;
background-color: blue;
}