/gi));
+```
+
+`h1`元素的字体颜色应为橘色。
+
+```js
+assert($('h1').css('color') === 'rgb(255, 165, 0)');
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
index a45c00d008..905cde713b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
@@ -1,81 +1,56 @@
---
id: bad87fee1348bd9aedf06756
+title: 内联样式的优先级高于 ID 选择器
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJDRha'
forumTopicId: 18252
-title: 内联样式的优先级高于 ID 选择器
---
-## Description
-
-我们刚刚证明了，id 选择器无论在style标签哪里声明，都会覆盖 class 声明的样式，
+# --description--
+
+我们刚刚证明了，id 选择器无论在`style`标签哪里声明，都会覆盖 class 声明的样式，
+
其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？
-
-## Instructions
-
-使用行内样式尝试让h1的字体颜色变白。像下面这样使用：
-<h1 style="color: green">
-h1元素需继续保留blue-text和pink-textclass。
-
+# --instructions--
-## Tests
-
+使用行内样式尝试让`h1`的字体颜色变白。像下面这样使用：
-```yml
-tests:
- - text: 'h1元素应该包含pink-text class。'
- testString: assert($("h1").hasClass("pink-text"));
- - text: 'h1元素应该包含blue-text class。'
- testString: assert($("h1").hasClass("blue-text"));
- - text: 'h1元素应该包含一个名为orange-text的id。'
- testString: assert($("h1").attr("id") === "orange-text");
- - text: 'h1元素应该含有行内样式。'
- testString: assert(document.querySelector('h1[style]'));
- - text: 'h1元素的字体颜色应该为白色。'
- testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
+``
+`h1`元素需继续保留`blue-text`和`pink-text`class。
+
+# --hints--
+
+`h1`元素应该包含`pink-text` class。
+
+```js
+assert($('h1').hasClass('pink-text'));
```
-
+`h1`元素应该包含`blue-text` class。
-## Challenge Seed
-
-
-
-
-```html
-
-
Hello World!
+```js
+assert($('h1').hasClass('blue-text'));
```
-
+`h1`元素应该包含一个名为`orange-text`的id。
-
-
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('h1').attr('id') === 'orange-text');
```
-
-
\ No newline at end of file
+`h1`元素应该含有行内样式。
+
+```js
+assert(document.querySelector('h1[style]'));
+```
+
+`h1`元素的字体颜色应该为白色。
+
+```js
+assert($('h1').css('color') === 'rgb(255, 255, 255)');
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
index 8507e97ca2..544462f77a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
@@ -1,76 +1,56 @@
---
id: bad87fee1348bd9aedf04756
+title: Class 选择器的优先级高于继承样式
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJDQug'
forumTopicId: 18253
-title: Class 选择器的优先级高于继承样式
---
-## Description
-
-"pink-text" class 覆盖了body元素的 CSS 声明。
-我们刚刚证明了我们的 class 会覆盖body的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的pink-textclass？
-
+# --description--
+
+"pink-text" class 覆盖了`body`元素的 CSS 声明。
+
+我们刚刚证明了我们的 class 会覆盖`body`的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的`pink-text`class？
+
+# --instructions--
+
+创建一个字体颜色为`blue`的`blue-text`CSS class，并确保它在`pink-text`下方声明。
+
+在含有`pink-text`class 的`h1`元素里面，再添加一个`blue-text`class，这时候，我们将能看到到底是谁获胜。
-## Instructions
-
-创建一个字体颜色为blue的blue-textCSS class，并确保它在pink-text下方声明。
-在含有pink-textclass 的h1元素里面，再添加一个blue-textclass，这时候，我们将能看到到底是谁获胜。
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
-class="class1 class2"
-注意： HTML 元素里应用的 class 的先后顺序无关紧要。
-但是，在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。因为.blue-text在.pink-text的后面声明，所以.blue-text会覆盖.pink-text的样式。
-
-## Tests
-
+`class="class1 class2"`
-```yml
-tests:
- - text: 'h1元素应该包含pink-text class。'
- testString: assert($("h1").hasClass("pink-text"));
- - text: 'h1元素应该包含blue-text class。'
- testString: assert($("h1").hasClass("blue-text"));
- - text: 'blue-text和pink-text需同时应用于h1元素上。'
- testString: assert($(".pink-text").hasClass("blue-text"));
- - text: 'h1元素的颜色应为蓝色。'
- testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
+**注意：** HTML 元素里应用的 class 的先后顺序无关紧要。
+但是，在`
-Hello World!
+```js
+assert($('h1').hasClass('blue-text'));
```
-
+`blue-text`和`pink-text`需同时应用于`h1`元素上。
-
-
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('.pink-text').hasClass('blue-text'));
```
-
-
\ No newline at end of file
+`h1`元素的颜色应为蓝色。
+
+```js
+assert($('h1').css('color') === 'rgb(0, 0, 255)');
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
index 3104811868..0a2cc6725c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
@@ -1,68 +1,44 @@
---
id: bad87fee1348bd9aedf08756
+title: 样式中的优先级
challengeType: 0
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
forumTopicId: 18258
-title: 样式中的优先级
---
-## Description
-
+# --description--
+
有时候， HTML 元素的样式会跟其他样式发生冲突。
-就像，h1元素也不能同时设置green和pink两种样式。
-让我们尝试创建一个字体颜色为pink的 class，并应于用其中一个元素中。猜一猜，它会覆盖body元素设置的color: green;CSS 属性吗？
-
-## Instructions
-
-创建一个能将元素的字体颜色改为pink的CSS class，并起名为pink-text。
-给h1元素添加pink-textclass。
-
+就像，`h1`元素也不能同时设置`green`和`pink`两种样式。
-## Tests
-
+让我们尝试创建一个字体颜色为`pink`的 class，并应于用其中一个元素中。猜一猜，它会覆盖`body`元素设置的`color: green;`CSS 属性吗？
-```yml
-tests:
- - text: 'h1元素应该含有pink-text class。'
- testString: assert($("h1").hasClass("pink-text"));
- - text: '<style>标签应该含有一个可以改变字体颜色的pink-text class。'
- testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
- - text: 'h1元素的字体颜色应该为pink（粉色）。'
- testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
+# --instructions--
-```
+创建一个能将元素的字体颜色改为`pink`的CSS class，并起名为`pink-text`。
-
+给`h1`元素添加`pink-text`class。
-## Challenge Seed
-
+# --hints--
-
-
-```html
-
-
Hello World!
-```
-
-
-
-
-
-
-
-## Solution
-
+`h1`元素应该含有`pink-text` class。
```js
-// solution required
+assert($('h1').hasClass('pink-text'));
```
-
-
\ No newline at end of file
+`
-
-CatPhotoApp
-
-点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```html
-// solution required
-```
-
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
index cb925f15ee..6e1f538be1 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
@@ -1,119 +1,34 @@
---
id: bad87eee1348bd9aede07836
+title: 设置元素的 id
challengeType: 0
videoUrl: 'https://scrimba.com/c/cN6MEc2'
forumTopicId: 18279
-title: 设置元素的 id
---
-## Description
-
-除了class属性，每一个 HTML 元素也都有id属性。
-使用id有几个好处：你可以通过id选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过id来选择元素和操作元素。
-id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性。
-设置h2元素的 id 为cat-photo-app的方法如下：
-<h2 id="cat-photo-app">
-
+# --description--
-## Instructions
-
-设置form元素的 id 为cat-photo-form。
-
+除了class属性，每一个 HTML 元素也都有`id`属性。
-## Tests
-
+使用`id`有几个好处：你可以通过`id`选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过`id`来选择元素和操作元素。
-```yml
-tests:
- - text: 'form元素的 id 应为cat-photo-form。'
- testString: assert($("form").attr("id") === "cat-photo-form");
+`id`属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的`id`属性。
+设置`h2`元素的 id 为`cat-photo-app`的方法如下：
+
+``
+
+# --instructions--
+
+设置`form`元素的 id 为`cat-photo-form`。
+
+# --hints--
+
+`form`元素的 id 应为`cat-photo-form`。
+
+```js
+assert($('form').attr('id') === 'cat-photo-form');
```
-
+# --solutions--
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-```
-
-
-
-## Solution
-
-
-```html
-// solution required
-```
-
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md
index 9a3a261d6c..56628f2d81 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md
@@ -1,15 +1,16 @@
---
id: bad87fee1348bd9acdf08812
+title: 调整图片的大小
challengeType: 0
videoUrl: 'https://scrimba.com/c/cM9MmCP'
forumTopicId: 18282
-title: 调整图片的大小
---
-## Description
-
-CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。
-假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
+# --description--
+
+CSS 的`width`属性可以控制元素的宽度。图片的`width`宽度类似于字体的`px`（像素)值。
+
+假如，你想创建一个叫`larger-image`的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
```html
```
-
+# --instructions--
-## Instructions
-
-创建一个smaller-image的 CSS class，设置图片的宽度为 100px。
-注意：
+创建一个`smaller-image`的 CSS class，设置图片的宽度为 100px。
-## Tests
-
+**注意：**
+由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
-```yml
-tests:
- - text: 'img元素应该含有smaller-image class。'
- testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
- - text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
- testString: assert($("img").width() === 100);
+# --hints--
-```
-
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-```
-
-
-
-## Solution
-
+`img`元素应该含有`smaller-image` class。
```js
-// solution required
+assert(
+ $("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
+ 'smaller-image'
+);
```
-/section>
-
\ No newline at end of file
+图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。
+
+```js
+assert($('img').width() === 100);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
index eaa72ec277..257dafa62b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
@@ -1,16 +1,18 @@
---
id: bad87fee1348bd9aedf08808
+title: 字体如何优雅降级
challengeType: 0
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
forumTopicId: 18304
-title: 字体如何优雅降级
---
-## Description
-
-所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。
+# --description--
+
+所有浏览器都有几种默认字体。这些通用字体包括`monospace`，`serif`和`sans-serif`。
+
当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
-例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：
+
+例如，如果你想将一个元素的字体设置成`Helvetica`，当`Helvetica`不可用时，降级使用`sans-serif`字体，那么可以这样写：
```css
p {
@@ -19,100 +21,49 @@ p {
```
通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。
-
-## Instructions
-
-首先，添加monospace字体到h2元素里，它现在拥有着Lobster和monospace两种字体。
-在上一个挑战里，你已经通过link标签引入谷歌Lobster字体。现在让我们注释掉谷歌Lobster字体的引入（使用我们之前学过的HTML注释），使字体失效。你会发现h2元素降级到了monospace字体。
-注意： Lobster字体，你将看不到这个降级过程，因为浏览器会找到该字体。
-
+# --instructions--
-## Tests
-
+首先，添加`monospace`字体到`h2`元素里，它现在拥有着`Lobster`和`monospace`两种字体。
-```yml
-tests:
- - text: 'h2元素应该含有Lobster字体。'
- testString: assert($("h2").css("font-family").match(/^"?lobster/i));
- - text: '当Lobster字体失效时，h2元素应该降级使用monospace字体。'
- testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
- - text: '通过添加<!--，注释掉谷歌Lobster字体的引入。'
- testString: assert(new RegExp("", "gi").test(code));
+在上一个挑战里，你已经通过`link`标签引入谷歌`Lobster`字体。现在让我们注释掉谷歌`Lobster`字体的引入（使用我们之前学过的`HTML`注释），使字体失效。你会发现`h2`元素降级到了`monospace`字体。
+**注意：**
+如果电脑已经安装了`Lobster`字体，你将看不到这个降级过程，因为浏览器会找到该字体。
+
+# --hints--
+
+`h2`元素应该含有`Lobster`字体。
+
+```js
+assert(
+ $('h2')
+ .css('font-family')
+ .match(/^"?lobster/i)
+);
```
-
+当`Lobster`字体失效时，`h2`元素应该降级使用`monospace`字体。
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert(
+ /\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
+ code
+ )
+);
```
-
-通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将red-textclass 选择器应用在第一个p元素上。
-
+# --description--
-## Instructions
-
+通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将`red-text`class 选择器应用在第一个`p`元素上。
-
+# --hints--
-## Tests
-
-
-```yml
-tests:
- - text: 'h2元素应该是红色的。'
- testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
- - text: 'h2元素应该含有red-text class 选择器。'
- testString: assert($("h2").hasClass("red-text"));
- - text: '第一个p元素应该为红色。'
- testString: assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");
- - text: '第二和第三个p元素不应该为红色。'
- testString: assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));
- - text: '第一个p元素应该包含red-text class 选择器。'
- testString: assert($("p:eq(0)").hasClass("red-text"));
+`h2`元素应该是红色的。
+```js
+assert($('h2').css('color') === 'rgb(255, 0, 0)');
```
-
+`h2`元素应该含有`red-text` class 选择器。
-## Challenge Seed
-
-
-
-
-```html
-
-
-
CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert($('h2').hasClass('red-text'));
```
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
```
-
-
\ No newline at end of file
+第二和第三个`p`元素不应该为红色。
+
+```js
+assert(
+ !($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
+ !($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
+);
+```
+
+第一个`p`元素应该包含`red-text` class 选择器。
+
+```js
+assert($('p:eq(0)').hasClass('red-text'));
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md
index c291a14428..84b130412a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md
@@ -1,21 +1,22 @@
---
id: bad87fee1348bd9aedf08736
+title: 给 HTML 的 Body 元素添加样式
challengeType: 0
videoUrl: 'https://scrimba.com/c/cB77PHW'
forumTopicId: 18313
-title: 给 HTML 的 Body 元素添加样式
---
-## Description
-
-现在让我们来讨论一下 CSS 继承。
-每一个 HTML 页面都含有一个body元素。
-
+# --description--
-## Instructions
-
-我们可以通过设置background-color为black，来证明body元素的存在。
-添加以下的代码到style标签里面：
+现在让我们来讨论一下 CSS 继承。
+
+每一个 HTML 页面都含有一个`body`元素。
+
+# --instructions--
+
+我们可以通过设置`background-color`为`black`，来证明`body`元素的存在。
+
+添加以下的代码到`style`标签里面：
```css
body {
@@ -23,47 +24,29 @@ body {
}
```
-
+# --hints--
-## Tests
-
-
-```yml
-tests:
- - text: 'body元素的background-color应该是黑色的。'
- testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- - text: '确保 CSS 规则格式书写正确，需要开关大括号。'
- testString: assert(code.match(/
+```js
+assert(
+ code.match(/
-margin
-
-
-
padding
- padding
-
+```js
+assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
```
-
+# --solutions--
-
-
-
-
-## Solution
-
-
-```html
-// solution required
-```
-
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
index b7a0c321cf..deb8b3a1b1 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
@@ -1,15 +1,16 @@
---
id: bad87fee1348bd9aecf08806
+title: 使用 class 选择器设置单个元素的样式
challengeType: 0
videoUrl: 'https://scrimba.com/c/c2MvDtV'
forumTopicId: 18337
-title: 使用 class 选择器设置单个元素的样式
---
-## Description
-
-CSS 的class具有可重用性，可应用于各种 HTML 元素。
-一个 CSSclass声明示例，如下所示：
+# --description--
+
+CSS 的`class`具有可重用性，可应用于各种 HTML 元素。
+
+一个 CSS`class`声明示例，如下所示：
```html
```
-可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。
-你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：
-<h2 class="blue-text">CatPhotoApp</h2>
-注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。
-
+可以看到，我们在`
-
-CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert($('h2').hasClass('red-text'));
```
-
+`style`样式声明区域里应该包含一个`red-text` class 选择器，并且它的颜色应为红色。
-
-
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
```
-
-
\ No newline at end of file
+不要在`h2`元素里使用行内样式：`style="color: red"`。
+
+```js
+assert($('h2').attr('style') === undefined);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
index 290c66c0d1..32b79a3b84 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
@@ -1,274 +1,66 @@
---
id: 5a9d727a424fe3d0e10cad12
+title: 使用一个自定义的 CSS 变量
challengeType: 0
videoUrl: 'https://scrimba.com/c/cM989ck'
forumTopicId: 301090
-title: 使用一个自定义的 CSS 变量
---
-## Description
-
+# --description--
+
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
```css
background: var(--penguin-skin);
```
-因为引用了--penguin-skin变量的值，使用了这个样式的元素背景颜色会是灰色。
-注意：如果变量名不匹配，样式不会生效。
-
+因为引用了`--penguin-skin`变量的值，使用了这个样式的元素背景颜色会是灰色。 注意：如果变量名不匹配，样式不会生效。
-## Instructions
-
-penguin-top，penguin-bottom，right-hand和left-handclass 的background属性均使用--penguin-skin变量值。
-
+# --instructions--
-## Tests
-
+`penguin-top`，`penguin-bottom`，`right-hand`和`left-hand`class 的`background`属性均使用`--penguin-skin`变量值。
-```yml
-tests:
- - text: 'penguin-top class 的background属性应使用--penguin-skin变量值。'
- testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
- - text: 'penguin-bottom class 的background属性应使用--penguin-skin变量值。'
- testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
- - text: 'right-hand class 的background属性应使用--penguin-skin变量值。'
- testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
- - text: 'left-hand class 的background属性应使用--penguin-skin变量值。'
- testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
+# --hints--
+`penguin-top` class 的`background`属性应使用`--penguin-skin`变量值。
```js
-// solution required
+assert(
+ code.match(
+ /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
+ )
+);
```
-
-
\ No newline at end of file
+`penguin-bottom` class 的`background`属性应使用`--penguin-skin`变量值。
+
+```js
+assert(
+ code.match(
+ /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
+ )
+);
+```
+
+`right-hand` class 的`background`属性应使用`--penguin-skin`变量值。
+
+```js
+assert(
+ code.match(
+ /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
+ )
+);
+```
+
+`left-hand` class 的`background`属性应使用`--penguin-skin`变量值。
+
+```js
+assert(
+ code.match(
+ /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
+ )
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
index a73a48f5f6..5f25b93cb6 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
@@ -1,287 +1,42 @@
---
id: 5a9d72ad424fe3d0e10cad16
+title: 使用媒体查询更改变量
challengeType: 0
videoUrl: 'https://scrimba.com/c/cWmL8UP'
forumTopicId: 301091
-title: 使用媒体查询更改变量
---
-## Description
-
+# --description--
+
CSS 变量可以简化媒体查询的方式。
+
例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
-
-## Instructions
-
-在media query（媒体查询）声明的:root选择器里，重定义--penguin-size的值为 200px，且重定义--penguin-skin的值为black，然后通过缩放页面来查看是否生效。
-
+# --instructions--
-## Tests
-
+在`media query（媒体查询）`声明的`:root`选择器里，重定义`--penguin-size`的值为 200px，且重定义`--penguin-skin`的值为`black`，然后通过缩放页面来查看是否生效。
-```yml
-tests:
- - text: ':root中的--penguin-size值应为200px。'
- testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));
- - text: ':root中的--penguin-skin值应为black。'
- testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
+# --hints--
+`:root`中的`--penguin-size`值应为`200px`。
```js
-// solution required
+assert(
+ code.match(
+ /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
+ )
+);
```
-
-
\ No newline at end of file
+`:root`中的`--penguin-skin`值应为`black`。
+
+```js
+assert(
+ code.match(
+ /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
+ )
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
index 275efcc1d9..c6705ee0e8 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
@@ -1,92 +1,74 @@
---
id: bad87fee1348bd9aedf08719
+title: 使用缩写的十六进制编码
challengeType: 0
videoUrl: 'https://scrimba.com/c/cRkpKAm'
forumTopicId: 18338
-title: 使用缩写的十六进制编码
---
-## Description
-
+# --description--
+
许多人对超过 1600 万种颜色的可能性感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。
-例如，红色的#FF0000十六进制编码可以缩写成#F00。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
-这样，颜色的可能性减少到了大约 4000 种。且在浏览器里#FF0000和#F00完全是同一种颜色。
-
-## Instructions
-
+例如，红色的`#FF0000`十六进制编码可以缩写成`#F00`。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
+
+这样，颜色的可能性减少到了大约 4000 种。且在浏览器里`#FF0000`和`#F00`完全是同一种颜色。
+
+# --instructions--
+
接下来，使用缩写的十六进制编码给元素设置正确的颜色。
-Color Short Hex Code Cyan #0FFGreen #0F0Red #F00Fuchsia #F0F
-
-## Tests
-
+Color Short Hex Code Cyan #0FFGreen #0F0Red #F00Fuchsia #F0F
-```yml
-tests:
- - text: '文本内容为I am red!的h1元素的字体颜色应该为red。'
- testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- - text: '要使用缩写的red的十六进制编码，而不是#FF0000。'
- testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
- - text: '文本内容为I am green!的h1元素的字体颜色应该为green。'
- testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
- - text: '要使用缩写的green的十六进制编码，而不是#00FF00的十六进制编码。'
- testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
- - text: '文本内容为I am cyan!的h1元素的字体颜色应该为cyan。'
- testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
- - text: '要使用缩写的cyan的十六进制编码，而不是#00FFFF的十六进制编码。'
- testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
- - text: '文本内容为I am fuchsia!的h1元素的字体颜色应该为fuchsia。'
- testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
- - text: '要使用缩写的fuchsia的十六进制编码，而不是#FF00FF的十六进制编码。'
- testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
+# --hints--
+文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
+
+```js
+assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
```
-
+要使用缩写的`red`的`十六进制编码`，而不是`#FF0000`。
-## Challenge Seed
-
-
-
-
-```html
-
-
-
I am red!
-
-I am fuchsia!
-
-I am cyan!
-
-I am green!
+```js
+assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
```
-
+文本内容为`I am green!`的`h1`元素的字体颜色应该为`green`。
-
-
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
```
-
-
\ No newline at end of file
+要使用缩写的`green`的`十六进制编码`，而不是`#00FF00`的十六进制编码。
+
+```js
+assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
+```
+
+文本内容为`I am cyan!`的`h1`元素的字体颜色应该为`cyan`。
+
+```js
+assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
+```
+
+要使用缩写的`cyan`的`十六进制编码`，而不是`#00FFFF`的十六进制编码。
+
+```js
+assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
+```
+
+文本内容为`I am fuchsia!`的`h1`元素的字体颜色应该为`fuchsia`。
+
+```js
+assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
+```
+
+要使用缩写的`fuchsia`的`十六进制编码`，而不是`#FF00FF`的十六进制编码。
+
+```js
+assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
index 8821045139..589e68fbf3 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
@@ -1,16 +1,18 @@
---
id: bad87dee1348bd9aede07836
+title: 使用 id 属性来设定元素的样式
challengeType: 0
videoUrl: 'https://scrimba.com/c/cakyZfL'
forumTopicId: 18339
-title: 使用 id 属性来设定元素的样式
---
-## Description
-
-通过id属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
-可是，id不可以重用，只应用于一个元素上。同时，在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。
-选择id为cat-photo-element的元素，并设置它的背景样式为green，可以在style标签里这样写：
+# --description--
+
+通过`id`属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
+
+可是，`id`不可以重用，只应用于一个元素上。同时，在 CSS 里，`id`的优先级要高于`class`，如果一个元素同时应用了`class`和`id`，并设置样式有冲突，会优先应用`id`的样式。
+
+选择`id`为`cat-photo-element`的元素，并设置它的背景样式为`green`，可以在`style`标签里这样写：
```css
#cat-photo-element {
@@ -18,113 +20,40 @@ title: 使用 id 属性来设定元素的样式
}
```
-注意在style标签里，声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。
-
+注意在`style`标签里，声明 class 的时候必须在名字前插入`.`符号。同样，在声明 id 的时候，也必须在名字前插入`#`符号。
-## Instructions
-
-尝试给含有cat-photo-formid属性的form表单的背景颜色设置为green。
-
+# --instructions--
-## Tests
-
+尝试给含有`cat-photo-form`id属性的`form`表单的背景颜色设置为`green`。
-```yml
-tests:
- - text: '设置form元素的 id 为cat-photo-form。'
- testString: assert($("form").attr("id") === "cat-photo-form");
- - text: 'form元素应该含有background-colorcss 属性并且值为 green。'
- testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
- - text: '确保form元素含有id属性。'
- testString: assert(code.match(//gi) && code.match(//gi).length > 0);
- - text: '不要在form元素上添加其他class属性或者style行内样式。'
- testString: assert(!code.match(//gi) && !code.match(//gi));
+# --hints--
+设置`form`元素的 id 为`cat-photo-form`。
+
+```js
+assert($('form').attr('id') === 'cat-photo-form');
```
-
+`form`元素应该含有`background-color`css 属性并且值为 `green`。
-## Challenge Seed
-
-
-
-
-```html
-
-
-
-
CatPhotoApp
-
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
```
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert(
+ code.match(//gi) &&
+ code.match(//gi).length > 0
+);
```
-
-
\ No newline at end of file
+不要在`form`元素上添加其他`class`属性或者`style`行内样式。
+
+```js
+assert(!code.match(//gi) && !code.match(//gi));
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
index f46305cde2..b83ed846f3 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
@@ -1,16 +1,18 @@
---
id: 58c383d33e2e3259241f3076
+title: 使用属性选择器来设置元素的样式
challengeType: 0
videoUrl: 'https://scrimba.com/c/cnpymfJ'
forumTopicId: 301092
-title: 使用属性选择器来设置元素的样式
---
-## Description
-
-你已经通过设置元素的id和class，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
+# --description--
+
+你已经通过设置元素的`id`和`class`，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
+
让我们再次通过猫咪图片项目来练习 CSS 选择器。
-在这个挑战里，你会使用[attr=value]属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有type为radio的元素的外边距。
+
+在这个挑战里，你会使用`[attr=value]`属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有`type`为`radio`的元素的外边距。
```css
[type='radio'] {
@@ -18,111 +20,53 @@ title: 使用属性选择器来设置元素的样式
}
```
-
+# --instructions--
-## Instructions
-
-使用type属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
-
+使用`type`属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
-## Tests
-
+# --hints--
-```yml
-tests:
- - text: '使用type属性选择器来匹配复选框。'
- testString: assert(code.match(/
-
-CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert(
+ (function () {
+ var count = 0;
+ $("[type='checkbox']").each(function () {
+ if ($(this).css('marginTop') === '10px') {
+ count++;
+ }
+ });
+ return count === 3;
+ })()
+);
```
-
+复选框的下外边距应为 15px。
-
-
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert(
+ (function () {
+ var count = 0;
+ $("[type='checkbox']").each(function () {
+ if ($(this).css('marginBottom') === '15px') {
+ count++;
+ }
+ });
+ return count === 3;
+ })()
+);
```
-
-
\ No newline at end of file
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
index 33e978c72b..a7d6f1bcdf 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
@@ -1,97 +1,61 @@
---
id: bad87fee1348bd9afdf08726
+title: 使用顺时针方向指定元素的外边距
challengeType: 0
videoUrl: 'https://scrimba.com/c/cnpybAd'
forumTopicId: 18345
-title: 使用顺时针方向指定元素的外边距
---
-## Description
-
-让我们再试一次，不过这一次轮到margin了。
-同样，每个方向的外边距值可以在margin属性里面汇总声明，来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式，代码如下：
-margin: 10px 20px 10px 20px;
-这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的margin。
-
+# --description--
-## Instructions
-
-按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为40px，右外边距和下外边距则设置为20px。
-
+让我们再试一次，不过这一次轮到`margin`了。
-## Tests
-
+同样，每个方向的外边距值可以在`margin`属性里面汇总声明，来代替分别声明`margin-top`，`margin-right`，`margin-bottom`和`margin-left`属性的方式，代码如下：
-```yml
-tests:
- - text: blue-box class 的上外边距应为40px。
- testString: assert($(".blue-box").css("margin-top") === "40px");
- - text: blue-box class 的右外边距应为20px。
- testString: assert($(".blue-box").css("margin-right") === "20px");
- - text: blue-box class 的下外边距应为20px。
- testString: assert($(".blue-box").css("margin-bottom") === "20px");
- - text: blue-box class 的左外边距应为40px。
- testString: assert($(".blue-box").css("margin-left") === "40px");
- - text: 你应该沿顺时针方向设置blue-box的外边距。
- testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
+`margin: 10px 20px 10px 20px;`
+这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的`margin`。
+
+# --instructions--
+
+按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为`40px`，右外边距和下外边距则设置为`20px`。
+
+# --hints--
+
+`blue-box` class 的上外边距应为`40px`。
+
+```js
+assert($('.blue-box').css('margin-top') === '40px');
```
-
+`blue-box` class 的右外边距应为`20px`。
-## Challenge Seed
-
-
-
-
-```html
-
-
margin
-
-
-
padding
- padding
-
+```js
+assert($('.blue-box').css('margin-right') === '20px');
```
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('.blue-box').css('margin-bottom') === '20px');
```
-
-
\ No newline at end of file
+`blue-box` class 的左外边距应为`40px`。
+
+```js
+assert($('.blue-box').css('margin-left') === '40px');
+```
+
+你应该沿顺时针方向设置`blue-box`的外边距。
+
+```js
+const removeCssComments = (str) => str.replace(/\/\*[\s\S]+?\*\//g, '');
+assert(
+ /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
+ removeCssComments($('style').text())
+ )
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
index 7e2535b5f4..eca55ab367 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
@@ -1,98 +1,59 @@
---
id: bad87fee1348bd9aedf08826
+title: 使用顺时针方向指定元素的内边距
challengeType: 0
videoUrl: 'https://scrimba.com/c/cB7mBS9'
forumTopicId: 18346
-title: 使用顺时针方向指定元素的内边距
---
-## Description
-
-如果不想每次都要分别声明padding-top，padding-right，padding-bottom和padding-left属性，可以把它们汇总在padding属性里面声明，如下：
-padding: 10px 20px 10px 20px;
-这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。
-
+# --description--
-## Instructions
-
-按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为40px，右内边距和下内边距则设置为20px。
-
+如果不想每次都要分别声明`padding-top`，`padding-right`，`padding-bottom`和`padding-left`属性，可以把它们汇总在`padding`属性里面声明，如下：
-## Tests
-
+`padding: 10px 20px 10px 20px;`
-```yml
-tests:
- - text: 'blue-box class 的上内边距应为40px。'
- testString: assert($(".blue-box").css("padding-top") === "40px");
- - text: 'blue-box class 的右内边距应为20px。'
- testString: assert($(".blue-box").css("padding-right") === "20px");
- - text: 'blue-box class 的下内边距应为20px。'
- testString: assert($(".blue-box").css("padding-bottom") === "20px");
- - text: 'blue-box class 的左内边距应为40px。'
- testString: assert($(".blue-box").css("padding-left") === "40px");
- - text: '你应该按照顺时针排序，汇总声明的方式来设置blue-box的padding值。'
- testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
+这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的`padding`。
+# --instructions--
+
+按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为`40px`，右内边距和下内边距则设置为`20px`。
+
+# --hints--
+
+`blue-box` class 的上内边距应为`40px`。
+
+```js
+assert($('.blue-box').css('padding-top') === '40px');
```
-
+`blue-box` class 的右内边距应为`20px`。
-## Challenge Seed
-
-
-
-
-```html
-
-
margin
-
-
-
padding
- padding
-
+```js
+assert($('.blue-box').css('padding-right') === '20px');
```
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('.blue-box').css('padding-bottom') === '20px');
```
-
-
\ No newline at end of file
+`blue-box` class 的左内边距应为`40px`。
+
+```js
+assert($('.blue-box').css('padding-left') === '40px');
+```
+
+你应该按照顺时针排序，汇总声明的方式来设置`blue-box`的`padding`值。
+
+```js
+const removeCssComments = (str) => str.replace(/\/\*[\s\S]+?\*\//g, '');
+assert(
+ /\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
+ removeCssComments($('style').text())
+ )
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
index 429403b7f7..f68ff98b2d 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
@@ -1,24 +1,27 @@
---
id: bad87fee1348bd9aedf08805
+title: 使用元素选择器来设置元素的样式
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJKMBT2'
forumTopicId: 18349
-title: 使用元素选择器来设置元素的样式
---
-## Description
-
+# --description--
+
在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。
-通过行内样式<h2 style="color: red;">CatPhotoApp</h2>，就可以修改h2元素的颜色为红色。
-当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。
-在代码的顶部，创建一个style声明区域，如下方所示：
+
+通过行内样式`CatPhotoApp `，就可以修改`h2`元素的颜色为红色。
+
+当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，`层叠样式表`往往是一个更好的选择。
+
+在代码的顶部，创建一个`style`声明区域，如下方所示：
```html
```
-在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：
+在`style`样式声明区域内，可以创建一个`元素选择器`，应用于所有的`h2`元素。例如，如果你想所有`h2`元素变成红色，可以添加下方的样式规则：
```html
```
-注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
-
+注意，在每个元素的样式声明区域里，左右花括号（`{` 和 `}`）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
-## Instructions
-
-删除h2元素的行内样式，然后创建style样式声明区域，最后添加 CSS 样式规则使h2元素变为蓝色。
-
+# --instructions--
-## Tests
-
+删除`h2`元素的行内样式，然后创建`style`样式声明区域，最后添加 CSS 样式规则使`h2`元素变为蓝色。
-```yml
-tests:
- - text: 删除h2元素的行内样式。
- testString: assert(!$("h2").attr("style"));
- - text: 创建一个style样式声明区域。
- testString: assert($("style") && $("style").length >= 1);
- - text: h2元素颜色应为蓝色。
- testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
- - text: 确保h2选择器的内容被花括号所围绕，并且样式规则以分号结束。
- testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
- - text: 所有style应该是有效的且有一个结束标签。
- testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(//g) || []).length);
+# --hints--
+删除`h2`元素的行内样式。
+
+```js
+assert(!$('h2').attr('style'));
```
-
+创建一个`style`样式声明区域。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
- 点击查看更多猫图 .
-
-
-
猫咪最喜欢的三件东西：
-
-
猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert($('style') && $('style').length >= 1);
```
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('h2').css('color') === 'rgb(0, 0, 255)');
```
-
-
\ No newline at end of file
+确保`h2`选择器的内容被花括号所围绕，并且样式规则以分号结束。
+
+```js
+assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
+```
+
+所有`style`应该是有效的且有一个结束标签。
+
+```js
+assert(
+ code.match(/<\/style>/g) &&
+ code.match(/<\/style>/g).length ===
+ (
+ code.match(
+ //g
+ ) || []
+ ).length
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
index 49888d146b..4238250f3b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
@@ -1,259 +1,46 @@
---
id: 5a9d725e424fe3d0e10cad10
+title: 使用 CSS 变量一次更改多个元素
challengeType: 0
videoUrl: 'https://scrimba.com/c/c6bDECm'
forumTopicId: 301093
-title: 使用 CSS 变量一次更改多个元素
---
-## Description
-
+# --description--
+
CSS 变量 是一种仅更改一个值，来一次性更改多个 CSS 样式属性的强大方法。
+
按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。
-
-## Instructions
-
-在penguinclass 里，将black改为gray，gray改为white，yellow改为orange。
-
+# --instructions--
-## Tests
-
+在`penguin`class 里，将`black`改为`gray`，`gray`改为`white`，`yellow`改为`orange`。
-```yml
-tests:
- - text: 'penguin class 声明的--penguin-skin变量的值应为gray。'
- testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
- - text: 'penguin class 声明的--penguin-belly变量的值应为white。'
- testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
- - text: 'penguin class 声明的--penguin-beak变量的值应为orange。'
- testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
-
-```
-
-
-
-## Challenge Seed
-
-
-## Solution
-
+# --hints--
+`penguin` class 声明的`--penguin-skin`变量的值应为`gray`。
```js
-// solution required
+assert(
+ code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
+);
```
-
-
\ No newline at end of file
+`penguin` class 声明的`--penguin-belly`变量的值应为`white`。
+
+```js
+assert(
+ code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
+);
+```
+
+`penguin` class 声明的`--penguin-beak`变量的值应为`orange`。
+
+```js
+assert(
+ code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
index 250793c177..6076ed265f 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
@@ -1,16 +1,18 @@
---
id: bad87fee1348bd9aedf08726
+title: 使用十六进制编码获得指定颜色
challengeType: 0
videoUrl: 'https://scrimba.com/c/c8W9mHM'
forumTopicId: 18350
-title: 使用十六进制编码获得指定颜色
---
-## Description
-
-你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫做十六进制编码，简称hex。
-我们日常使用最多的计数方法，基于十进制，使用 0 到 9 数字来表示。而十六进制编码（hex）基于 16 位数字，它含有 16 种不同字符。十六进制与十进制一样，0-9 表示着 0 到 9 的值，不同的是，A，B，C，D，E，F 表示着十六进制 10 到 15 的值。总的来说，0 到 F 在十六进制里代表着数字，提供了 16 种可能性。你可以在这里 找到更多的相关信息。
-在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，#000000代表着黑色，同时也是最小的值。你可以在这里 找到更多的相关信息。
+# --description--
+
+你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫做十六进制编码，简称`hex`。
+
+我们日常使用最多的计数方法，基于十进制，使用 0 到 9 数字来表示。而`十六进制编码`（`hex`）基于 16 位数字，它含有 16 种不同字符。十六进制与十进制一样，0-9 表示着 0 到 9 的值，不同的是，A，B，C，D，E，F 表示着十六进制 10 到 15 的值。总的来说，0 到 F 在`十六进制`里代表着数字，提供了 16 种可能性。你可以在[这里](https://zh.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6)找到更多的相关信息。
+
+在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，`#000000`代表着黑色，同时也是最小的值。你可以在[这里](https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F)找到更多的相关信息。
```css
body {
@@ -18,52 +20,27 @@ body {
}
```
-
+# --instructions--
-## Instructions
-
-使用#000000的十六进制编码来替换body元素的黑色背景。
-
+使用`#000000`的十六进制编码来替换`body`元素的黑色背景。
-## Tests
-
+# --hints--
-```yml
-tests:
- - text: 'body元素的背景颜色应该是黑色。'
- testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- - text: '使用十六进制编码来替换black的写法。'
- testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
+`body`元素的背景颜色应该是黑色。
+```js
+assert($('body').css('background-color') === 'rgb(0, 0, 0)');
```
-
+使用`十六进制编码`来替换`black`的写法。
-## Challenge Seed
-
-
-
-
-```html
-
+```js
+assert(
+ code.match(
+ /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
+ )
+);
```
-
+# --solutions--
-
-
-
-
-## Solution
-
-
-```html
-// solution required
-```
-
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
index 6480c89667..e7c92d70a2 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
@@ -1,94 +1,78 @@
---
id: bad87fee1348bd9aedf08721
+title: 使用十六进制编码混合颜色
challengeType: 0
videoUrl: 'https://scrimba.com/c/cK89PhP'
forumTopicId: 18359
-title: 使用十六进制编码混合颜色
---
-## Description
-
-回顾一下，hex使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
+# --description--
+
+回顾一下，`hex`使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
+
通过三原色，我们可以创建 1600 万种不同颜色！
-例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为#FFA500。
-0是十六进制里面最小的数字，表示着没有颜色。
-F是十六进制里面最大的数字，表示着最高的亮度。
-
-## Instructions
-
-把style标签里面的颜色值用正确的十六进制编码替换。
-Color Hex Code Dodger Blue #1E90FFGreen #00FF00Orange #FFA500Red #FF0000
-
+例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为`#FFA500`。
-## Tests
-
+`0`是十六进制里面最小的数字，表示着没有颜色。
-```yml
-tests:
- - text: '文本内容为I am red!的h1元素的字体颜色应该为red。'
- testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- - text: '使用十六进制编码替换red关键词。'
- testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
- - text: '文本内容为I am green!的h1元素的字体颜色应该为green。'
- testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
- - text: '使用十六进制编码替换green关键词。'
- testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
- - text: '文本内容为I am dodger blue!的h1元素的字体颜色应该为dodger blue。'
- testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
- - text: '使用十六进制编码替换dodgerblue关键词。'
- testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
- - text: '文本内容为I am orange!的h1元素的字体颜色应该为orange。'
- testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
- - text: '使用十六进制编码替换orange关键词。'
- testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
+`F`是十六进制里面最大的数字，表示着最高的亮度。
+# --instructions--
+
+把`style`标签里面的颜色值用正确的十六进制编码替换。
+
+Color Hex Code Dodger Blue #1E90FFGreen #00FF00Orange #FFA500Red #FF0000
+
+# --hints--
+
+文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
+
+```js
+assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
```
-
+使用`十六进制编码`替换`red`关键词。
-## Challenge Seed
-
-
-
-
-```html
-
-
-
I am red!
-
-I am green!
-
-I am dodger blue!
-
-I am orange!
+```js
+assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
```
-
+文本内容为`I am green!`的`h1`元素的字体颜色应该为`green`。
-
-
-
-
-## Solution
-
-
-```html
-// solution required
+```js
+assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
```
-
-
\ No newline at end of file
+使用`十六进制编码`替换`green`关键词。
+
+```js
+assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
+```
+
+文本内容为`I am dodger blue!`的`h1`元素的字体颜色应该为`dodger blue`。
+
+```js
+assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
+```
+
+使用`十六进制编码`替换`dodgerblue`关键词。
+
+```js
+assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
+```
+
+文本内容为`I am orange!`的`h1`元素的字体颜色应该为`orange`。
+
+```js
+assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
+```
+
+使用`十六进制编码`替换`orange`关键词。
+
+```js
+assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
index 4d28bf0d21..bea1524e78 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
@@ -1,90 +1,86 @@
---
id: bad82fee1348bd9aedf08721
+title: 使用 RGB 混合颜色
challengeType: 0
videoUrl: 'https://scrimba.com/c/cm24JU6'
forumTopicId: 18368
-title: 使用 RGB 混合颜色
---
-## Description
-
+# --description--
+
就像使用十六进制编码一样，你可以通过不同值的组合，来混合得到不同的 RGB 颜色。
-
-## Instructions
-
-将style标签里面中的十六进制编码替换为正确的 RGB 值。
-Color RGB Blue rgb(0, 0, 255)Red rgb(255, 0, 0)Orchid rgb(218, 112, 214)Sienna rgb(160, 82, 45)
-
+# --instructions--
-## Tests
-
+将`style`标签里面中的十六进制编码替换为正确的 RGB 值。
-```yml
-tests:
- - text: '文本内容为I am red!的h1元素的字体颜色应该为red。'
- testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- - text: 'red颜色应使用RGB值。'
- testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
- - text: '文本内容为I am orchid!的h1元素的字体颜色应该为orchid。'
- testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
- - text: 'orchid颜色应使用RGB值。'
- testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
- - text: '文本内容为I am blue!的h1元素的字体颜色应该为blue。'
- testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
- - text: 'blue颜色应使用RGB值。'
- testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
- - text: '文本内容为I am sienna!的h1元素的字体颜色应该为sienna。'
- testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
- - text: 'sienna颜色应使用RGB值。'
- testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
+Color RGB Blue rgb(0, 0, 255)Red rgb(255, 0, 0)Orchid rgb(218, 112, 214)Sienna rgb(160, 82, 45)
-```
+# --hints--
-
-
-## Challenge Seed
-
-
-
-
-```html
-
-
-
I am red!
-
-I am orchid!
-
-I am sienna!
-
-I am blue!
-```
-
-
-
-
-
-
-
-## Solution
-
+文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
```js
-// solution required
+assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
```
-
-
\ No newline at end of file
+`red`颜色应使用`RGB`值。
+
+```js
+assert(
+ code.match(
+ /\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
+ )
+);
+```
+
+文本内容为`I am orchid!`的`h1`元素的字体颜色应该为`orchid`。
+
+```js
+assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
+```
+
+`orchid`颜色应使用`RGB`值。
+
+```js
+assert(
+ code.match(
+ /\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
+ )
+);
+```
+
+文本内容为`I am blue!`的`h1`元素的字体颜色应该为`blue`。
+
+```js
+assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
+```
+
+`blue`颜色应使用`RGB`值。
+
+```js
+assert(
+ code.match(
+ /\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
+ )
+);
+```
+
+文本内容为`I am sienna!`的`h1`元素的字体颜色应该为`sienna`。
+
+```js
+assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
+```
+
+`sienna`颜色应使用`RGB`值。
+
+```js
+assert(
+ code.match(
+ /\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
+ )
+);
+```
+
+# --solutions--
+
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
index 8465ab2064..e1fef1ed7d 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
@@ -1,20 +1,27 @@
---
id: bad87fee1348bd9aede08718
+title: 使用 RGB 值为元素上色
challengeType: 0
videoUrl: 'https://scrimba.com/c/cRkp2fr'
forumTopicId: 18369
-title: 使用 RGB 值为元素上色
---
-## Description
-
+# --description--
+
另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。
+
黑色的 RGB 值声明如下：
-rgb(0, 0, 0)
+
+`rgb(0, 0, 0)`
+
白色的 RGB 值声明如下：
-rgb(255, 255, 255)
+
+`rgb(255, 255, 255)`
+
RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。
+
在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。
+
下面是通过使用 RGB 值设置背景颜色为橘色的例子：
```css
@@ -23,52 +30,23 @@ body {
}
```
-
+# --instructions--
-## Instructions
-
-让我们用rgb(0, 0, 0)的 RGB 值替换body元素背景颜色的十六进制编码。
-
+让我们用`rgb(0, 0, 0)`的 RGB 值替换`body`元素背景颜色的十六进制编码。
-## Tests
-
+# --hints--
-```yml
-tests:
- - text: 'body元素的背景颜色应该是黑色的。'
- testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- - text: 'body元素的背景颜色的黑色值应该为RGB值。'
- testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
+`body`元素的背景颜色应该是黑色的。
+```js
+assert($('body').css('background-color') === 'rgb(0, 0, 0)');
```
-
+`body`元素的背景颜色的黑色值应该为`RGB`值。
-## Challenge Seed
-
-
-
-
-```html
-
+```js
+assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
```
-
+# --solutions--
-
-
-
-
-## Solution
-
-
-```html
-// solution required
-```
-
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
index c47322a6a5..f7cb8528cf 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
@@ -1,75 +1,56 @@
---
id: bad87fee1348bd9aedd08830
+title: 给表单添加提交按钮
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
forumTopicId: 16627
-title: 给表单添加提交按钮
---
-## Description
-
-让我们来给表单添加一个submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的 URL 上。
+# --description--
+
+让我们来给表单添加一个`submit`提交按钮，当点击提交按钮时，表单中的数据将会被发送到`action`属性指定的 URL 上。
+
例如：
-<button type="submit">this button submits the form</button>
-
-## Instructions
-
-在表单的底部创建一个button按钮，按钮的type属性值为submit，文本为提交。
-
+`this button submits the form `
-## Tests
-
+# --instructions--
-```yml
-tests:
- - text: '表单内部应该有一个按钮。'
- testString: assert($("form").children("button").length > 0);
- - text: '按钮的type属性值应该为submit。'
- testString: assert($("button").attr("type") === "submit");
- - text: '提交按钮的文本应该为提交。'
- testString: assert($("button").text().match(/^\s*submit\s*$/gi));
- - text: '确保按钮有结束标记。'
- testString: assert(code.match(/<\/button>/g) && code.match(//g).length === code.match(/ 0);
```
-
+按钮的`type`属性值应该为`submit`。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
- 点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 祛跳蚤
- 打雷
- 同类
-
-
-
+```js
+assert($('button').attr('type') === 'submit');
```
-
+提交按钮的文本应该为`提交`。
+
+```js
+assert(
+ $('button')
+ .text()
+ .match(/^\s*submit\s*$/gi)
+);
+```
+
+确保按钮有结束标记。
+
+```js
+assert(
+ code.match(/<\/button>/g) &&
+ code.match(//g).length === code.match(/
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
index 659c45ad86..056eccf340 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -1,71 +1,66 @@
---
id: bad87fee1348bd9aedf08812
+title: 给网站添加图片
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
forumTopicId: 16640
-title: 给网站添加图片
---
-## Description
-
-用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。
+# --description--
+
+用`img`元素来为你的网站添加图片，其中`src`属性指向一个图片的地址。
+
例如：
-<img src="https://www.your-image-source.com/your-image.jpg">
-注意：img元素是没有结束标记的。
-所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
-注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
-理想情况下，alt属性不应该包含特殊字符，除非必要。
-让我们给上面例子的img添加alt属性。
-<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">
-
-## Instructions
-
+`main元素里面，给p前面插入一个img元素
-现在设置src属性指向这个地址：
-https://bit.ly/fcc-relaxing-cat
-最后不要忘记给图片添加一个alt文本。
-
-## Tests
-
+在`main`元素里面，给`p`前面插入一个`img`元素
-```yml
-tests:
- - text: 网页应该有一张图片。
- testString: assert($("img").length);
- - text: img 应该有一个src属性，指向猫咪图片。
- testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
- - text: img 元素的alt属性值不应为空。
- testString: assert($("img").attr("alt") && $("img").attr("alt").length && /)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
+现在设置`src`属性指向这个地址：
+`https://bit.ly/fcc-relaxing-cat`
+
+最后不要忘记给图片添加一个`alt`文本。
+
+# --hints--
+
+网页应该有一张图片。
+
+```js
+assert($('img').length);
```
-
+`img` 应该有一个`src`属性，指向猫咪图片。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-
-
- 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
- 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会囤老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
-
+```js
+assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
```
-
)\S+\1\S*\/?>/.test(code.replace(/\s/g, ''))
+);
+```
+# --solutions--
-
-
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
index ba181c84cc..428a093bdb 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
@@ -1,75 +1,54 @@
---
id: bad87fee1348bd9aedf08830
+title: 给输入框添加占位符文本
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
forumTopicId: 16647
-title: 给输入框添加占位符文本
---
-## Description
-
-Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
+# --description--
+
+`Placeholder`占位符是用户在`input`输入框中输入任何东西前的预定义文本。
+
你可以像这样创建一个占位符：
-<input type="text" placeholder="this is placeholder text">
-
-## Instructions
-
-把input输入框的placeholder占位符文本设置为 “猫咪图片地址”。
-
+`
+# --instructions--
-```yml
-tests:
- - text: 给现有的input输入框添加一个placeholder属性。
- testString: assert($("input[placeholder]").length > 0);
- - text: 设置placeholder属性的值为 ”猫咪图片地址“。
- testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi));
- - text: 完整的input元素应有一个结束标签
- testString: assert(!code.match(/.*<\/input>/gi));
- - text: input输入框的语法必须正确。
- testString: assert($("input[type=text]").length > 0);
+把`input`输入框的`placeholder`占位符文本设置为 “猫咪图片地址”。
+
+# --hints--
+
+给现有的`input`输入框添加一个`placeholder`属性。
+
+```js
+assert($('input[placeholder]').length > 0);
```
-
+设置`placeholder`属性的值为 ”猫咪图片地址“。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert(
+ $('input') &&
+ $('input').attr('placeholder') &&
+ $('input')
+ .attr('placeholder')
+ .match(/猫咪图片地址/gi)
+);
```
-
.*<\/input>/gi));
+```
+`input`输入框的语法必须正确。
-
+```js
+assert($('input[type=text]').length > 0);
+```
+
+# --solutions--
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
index aa07970c3c..4a9779aa94 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
@@ -1,79 +1,34 @@
---
id: bad87fee1348bd9aedd08835
+title: 给单选按钮和复选框添加默认选中项
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
forumTopicId: 301094
-title: 给单选按钮和复选框添加默认选中项
---
-## Description
-
-如果想设置某个单选按钮或多选按钮默认被选中，只需给input元素添加 "checked" 属性。 例如:
-<input type="radio" name="test-name" checked>
-
+# --description--
-## Instructions
-
-把第一个radio button和第一个checkbox都设置为默认选中。
-
+如果想设置某个单选按钮或多选按钮默认被选中，只需给`input`元素添加 "checked" 属性。 例如:
-## Tests
-
+表单的第一个多选按钮应该被默认选中。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-
+```js
+assert($('input[type="checkbox"]').prop('checked'));
```
-
-
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
index 4cf1dec6ef..c1a045f59f 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
@@ -1,64 +1,56 @@
---
id: bad87fee1348bd9aedf08804
+title: 给 HTML 添加注释
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
forumTopicId: 16782
-title: 给 HTML 添加注释
---
-## Description
-
-记住：注释的开始标记是<!--，结束标记是-->。
-现在你需要在h2元素前终止注释。
-
+# --description--
-## Instructions
-
-任务：注释掉h1元素和p元素，保留h2元素。
-
+记住：注释的开始标记是``。
-## Tests
-
+现在你需要在`h2`元素前终止注释。
-```yml
-tests:
- - text: '注释掉h1元素，这样它就从网页上消失了。'
- testString: assert(($("h1").length === 0));
- - text: 'h2元素保持原样，这样网页上还能看到它。'
- testString: assert(($("h2").length > 0));
- - text: '注释掉p元素，这样它就从网页上消失了。'
- testString: assert(($("p").length === 0));
- - text: '确保每一个注释都以-->结尾。'
- testString: assert(code.match(/[^fc]-->/g).length > 1);
- - text: '不要更改h1元素、h2 元素、p元素的顺序。'
- testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="" && code.match(/<([a-z0-9]){1,2}>/g)[2]===" ") );
+# --instructions--
+任务：注释掉`h1`元素和`p`元素，保留`h2`元素。
+
+# --hints--
+
+注释掉`h1`元素，这样它就从网页上消失了。
+
+```js
+assert($('h1').length === 0);
```
-
+`h2`元素保持原样，这样网页上还能看到它。
-## Challenge Seed
-
-
-
-
-```html
-
+```js
+assert($('h2').length > 0);
```
-
+注释掉`p`元素，这样它就从网页上消失了。
+```js
+assert($('p').length === 0);
+```
+确保每一个注释都以`-->`结尾。
-
+```js
+assert(code.match(/[^fc]-->/g).length > 1);
+```
+
+不要更改`h1`元素、`h2` 元素、`p`元素的顺序。
+
+```js
+assert(
+ code.match(/<([a-z0-9]){1,2}>/g)[0] === '' &&
+ code.match(/<([a-z0-9]){1,2}>/g)[1] === '' &&
+ code.match(/<([a-z0-9]){1,2}>/g)[2] === ' '
+);
+```
+
+# --solutions--
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
index e337e3d67b..db1fab0ee0 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
@@ -1,16 +1,18 @@
---
id: bad87fee1348bd9aedf08827
+title: 创建一个无序列表
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
forumTopicId: 16814
-title: 创建一个无序列表
---
-## Description
-
-HTML 有一个特定的元素用于创建无序列表unordered lists（缩写 ul）。
-无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。
-例如:
+# --description--
+
+HTML 有一个特定的元素用于创建无序列表`unordered lists（缩写 ul）`。
+
+无序列表以``结尾。
+
+例如:
```html
@@ -20,56 +22,50 @@ HTML 有一个特定的元素用于创建无序列表unordered lists（缩
```
将会创建一个包含牛奶和奶酪的无序列表。
-
-## Instructions
-
-删除页面底部的两个p元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
-
+# --instructions--
-## Tests
-
+删除页面底部的两个`p`元素，然后在底部创建一个无序列表，其中包含你认为猫咪最喜欢的三件东西。
-```yml
-tests:
- - text: 创建一个ul无序列表。
- testString: assert($("ul").length > 0);
- - text: 你应该在ul无序列表中添加三个li条目。
- testString: assert($("ul li").length > 2);
- - text: 确保ul无序列表有结束标记。
- testString: assert(code.match(/<\/ul>/gi) && code.match(//gi).length === code.match(/li条目都有结束标记。
- testString: assert(code.match(/<\/li>/gi) && code.match(/]/gi) && code.match(/<\/li>/gi).length === code.match(/]/gi).length);
- - text: 每个li元素都应该有一个空字符串或者空格。
- testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0);
+# --hints--
+创建一个`ul`无序列表。
+
+```js
+assert($('ul').length > 0);
```
-
+你应该在`ul`无序列表中添加三个`li`条目。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-
- 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。
- 养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
-
+```js
+assert($('ul li').length > 2);
```
-
/gi).length === code.match(/
+```js
+assert(
+ code.match(/<\/li>/gi) &&
+ code.match(/]/gi) &&
+ code.match(/<\/li>/gi).length === code.match(/]/gi).length
+);
+```
+
+每个`li`元素都应该有一个空字符串或者空格。
+
+```js
+assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
+```
+
+# --solutions--
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
index 8a635a421f..12857e2c51 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
@@ -1,74 +1,52 @@
---
id: bad87fee1348bd9aede08830
+title: 创建一个表单
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa'
forumTopicId: 16817
-title: 创建一个表单
---
-## Description
-
-如果想使用 HTML 向服务器提交数据，可以给form添加action属性。
+# --description--
+
+如果想使用 HTML 向服务器提交数据，可以给`form`添加`action`属性。
+
例如:
-<form action="/url-where-you-want-to-submit-form-data"></form>
-
-## Instructions
-
-在input输入框外层创建一个form表单，然后设置表单的action属性为"https://freecatphotoapp.com/submit-cat-photo"。
-
+``
-## Tests
-
+# --instructions--
-```yml
-tests:
- - text: '在input输入框外层创建一个form表单。'
- testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0);
- - text: '确保表单的action属性为"https://freecatphotoapp.com/submit-cat-photo"。'
- testString: assert($("form").attr("action") === "https://freecatphotoapp.com/submit-cat-photo");
- - text: '确保表单有开始标记和结束标记。'
- testString: assert(code.match(/<\/form>/g) && code.match(/
+确保表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
+```js
+assert(
+ $('form').attr('action') === 'https://freecatphotoapp.com/submit-cat-photo'
+);
```
-
-
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
index c8f01a6e09..f2a8e295e1 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
@@ -1,89 +1,68 @@
---
id: bad87fee1348bd9aedf08835
+title: 创建一组复选框
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
forumTopicId: 16821
-title: 创建一组复选框
---
-## Description
-
-checkboxes（复选框）就好比多项选择题，正确答案有多个。
-复选框是input选择框的另一种类型。
-每一个复选框都应该嵌套在它自己的label（标签）元素中。
-所有关联的复选框应该拥有相同的name属性。
-最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。例如：
+# --description--
+
+`checkboxes`（复选框）就好比多项选择题，正确答案有多个。
+
+复选框是`input`选择框的另一种类型。
+
+每一个复选框都应该嵌套在它自己的`label`（标签）元素中。
+
+所有关联的复选框应该拥有相同的`name`属性。
+
+最佳实践是在`label`元素上设置`for`属性，让其值与复选框的`id`属性值相等，这样就在`label`元素和它的子元素复选框之间创建了一种链接关系。例如：
+
下面是一个复选框的例子：
-<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
-
-## Instructions
-
-给表单添加三个复选框，每个复选框都被嵌套进label元素中，并且它的name属性均为personality，它们的内容可以随意指定。
-
+`
+# --instructions--
-```yml
-tests:
- - text: '表单应该有三个复选框。'
- testString: assert($('input[type="checkbox"]').length > 2);
- - text: '每个复选框都应该被嵌套进label元素中。'
- testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
- - text: '确保label元素有结束标记。'
- testString: assert(code.match(/<\/label>/g) && code.match(//g).length === code.match(/name属性均为personality。'
- testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2);
- - text: '每个复选框都应该在 form 标签内。'
- testString: assert($('label').parent().get(0).tagName.match('FORM'));
+给表单添加三个复选框，每个复选框都被嵌套进`label`元素中，并且它的`name`属性均为`personality`，它们的内容可以随意指定。
+# --hints--
+
+表单应该有三个复选框。
+
+```js
+assert($('input[type="checkbox"]').length > 2);
```
-
+每个复选框都应该被嵌套进`label`元素中。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-
+```js
+assert($('label > input[type="checkbox"]:only-child').length > 2);
```
+确保`label`元素有结束标记。
+```js
+assert(
+ code.match(/<\/label>/g) &&
+ code.match(/
/g).length === code.match(/
+设置复选框的`name`属性均为`personality`。
+```js
+assert(
+ $('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
+);
+```
+每个复选框都应该在 `form` 标签内。
-
+```js
+assert($('label').parent().get(0).tagName.match('FORM'));
+```
+
+# --solutions--
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
index 71e421ec96..ed2a3de901 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
@@ -1,17 +1,21 @@
---
id: bad87fee1348bd9aedf08834
+title: 创建一组单选按钮
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
forumTopicId: 16822
-title: 创建一组单选按钮
---
-## Description
-
-radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。
-单选按钮是input选择框的一种类型。
-每一个单选按钮都应该嵌套在它自己的label（标签）元素中。
-所有关联的单选按钮应该拥有相同的name属性。
+# --description--
+
+`radio buttons`（单选按钮）就好比单项选择题，正确答案只有一个。
+
+单选按钮是`input`选择框的一种类型。
+
+每一个单选按钮都应该嵌套在它自己的`label`（标签）元素中。
+
+所有关联的单选按钮应该拥有相同的`name`属性。
+
下面是一个单选按钮的例子：
```html
@@ -20,7 +24,7 @@ title: 创建一组单选按钮
```
-最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。例如：
+最佳实践是在`label`元素上设置for属性，让其值与单选按钮的`id`属性值相等，这样就在`label`元素和它的子元素单选按钮之间创建了一种链接关系。例如：
```html
@@ -28,75 +32,65 @@ title: 创建一组单选按钮
```
-
+# --instructions--
-## Instructions
-
-给表单添加两个单选按钮，一个叫indoor，另一个叫outdoor，单选按钮的 name 为 indoor-outdoor。
-
+给表单添加两个单选按钮，一个叫`indoor`，另一个叫`outdoor`，单选按钮的 `name` 为 `indoor-outdoor`。
-## Tests
-
+# --hints--
-```yml
-tests:
- - text: '页面上应该有两个单选按钮元素。'
- testString: assert($('input[type="radio"]').length > 1);
- - text: '设置单选按钮的name属性为indoor-outdoor。'
- testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
- - text: '每一个单选按钮都应该嵌套进它自己的label元素中。'
- testString: assert($('label > input[type="radio"]:only-child').length > 1);
- - text: '每一个label元素都有结束标记。'
- testString: assert((code.match(/<\/label>/g) && code.match(//g).length === code.match(/label元素的文本为indoor。'
- testString: assert($("label").text().match(/indoor/gi));
- - text: '其中一个label元素的文本为outdoor。'
- testString: assert($("label").text().match(/outdoor/gi));
- - text: '所有的单选按钮都应该包含在form表单中。'
- testString: assert($("label").parent().get(0).tagName.match('FORM'));
+页面上应该有两个单选按钮元素。
+```js
+assert($('input[type="radio"]').length > 1);
```
-
+设置单选按钮的`name`属性为`indoor-outdoor`。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-
+```js
+assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
```
-
+```js
+assert(
+ code.match(/<\/label>/g) &&
+ code.match(//g).length === code.match(/
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
index 977ea2a4ff..522a77cfd8 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
@@ -1,73 +1,34 @@
---
id: bad87fee1348bd9aedf08829
+title: 创建一个输入框
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
forumTopicId: 16823
-title: 创建一个输入框
---
-## Description
-
-现在让我们来创建一个form表单。
-input输入框可以让你轻松获得用户的输入。
+# --description--
+
+现在让我们来创建一个`form`表单。
+
+`input`输入框可以让你轻松获得用户的输入。
+
你可以像这样创建一个文本输入框：
-<input type="text">
-注意：input输入框是没有结束标记的。
-
-## Instructions
-
-在列表下面创建一个type属性为text的input输入框。
-
+`
+注意：`input`输入框是没有结束标记的。
-```yml
-tests:
- - text: '网页中有一个type属性为text的input输入框。'
- testString: assert($("input[type=text]").length > 0);
+# --instructions--
+在列表下面创建一个`type`属性为`text`的`input`输入框。
+
+# --hints--
+
+网页中有一个`type`属性为`text`的`input`输入框。
+
+```js
+assert($('input[type=text]').length > 0);
```
-
+# --solutions--
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
- Click here to view more cat photos .
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
- 跳蚤
- 打雷
- 同类
-
-
-
-
-```
-
-
-
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
index a366f3c3ee..a32539c6d7 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
@@ -1,15 +1,16 @@
---
id: bad87fee1348bd9aedf08828
+title: 创建一个有序列表
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
forumTopicId: 16824
-title: 创建一个有序列表
---
-## Description
-
-HTML 有一个特定的元素用于创建有序列表ordered lists（缩写 ol）。
-有序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾。
+# --description--
+
+HTML 有一个特定的元素用于创建有序列表`ordered lists（缩写 ol）`。
+
+有序列表以``开始，中间包含一个或多个``元素，最后以` `结尾。
例如:
@@ -21,75 +22,88 @@ HTML 有一个特定的元素用于创建有序列表ordered lists（缩
```
将会创建一个包含加菲猫和哆啦A梦的有序列表。
-
-## Instructions
-
+# --instructions--
+
创建一个有序列表，内容是猫咪最讨厌的三件东西，内容可以任意指定。
-
-## Tests
-
+# --hints--
-```yml
-tests:
- - text: '页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。'
- testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()));
- - text: '页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。'
- testString: assert((/Things cats love:/i).test($("ul").prev().text()));
- - text: '页面应该只有一个ul元素。'
- testString: assert.equal($("ul").length, 1);
- - text: '页面应该只有一个ol元素。'
- testString: assert.equal($("ol").length, 1);
- - text: 'ul无序列表应该包含3个li条目。'
- testString: assert.equal($("ul li").length, 3);
- - text: 'ol有序列表应该包含3个li元素。'
- testString: assert.equal($("ol li").length, 3);
- - text: '确保ul无序列表有结束标记。'
- testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(//g).length);
- - text: '确保ol有序列表有结束标记。'
- testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(//g).length);
- - text: '确保每个li条目都有结束标记。'
- testString: assert(code.match(/<\/li>/g) && code.match(//g) && code.match(/<\/li>/g).length === code.match(/ /g).length);
- - text: '无序列表里的 li 元素不应该为空。'
- testString: $('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
- - text: '有序列表里的 li 元素不应该为空。'
- testString: $('ol li').each((i, val) => assert(!!val.textContent.replace(/\s/g, '')));
+页面应该有一个无序列表，内容是猫咪最喜欢的三件东西。
+```js
+assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
```
-
+页面应该有一个有序列表，内容是猫咪最讨厌的三件东西。
-## Challenge Seed
-
-
-
-
-```html
-
CatPhotoApp
-
-点击查看更多猫咪图片 。
-
- 猫咪最喜欢的三件东西：
-
- 猫咪最讨厌的三件东西：
-
-
+```js
+assert(/Things cats love:/i.test($('ul').prev().text()));
```
-
+```js
+assert.equal($('ol').length, 1);
+```
+
+`ul`无序列表应该包含3个`li`条目。
+
+```js
+assert.equal($('ul li').length, 3);
+```
+
+`ol`有序列表应该包含3个`li`元素。
+
+```js
+assert.equal($('ol li').length, 3);
+```
+
+确保`ul`无序列表有结束标记。
+
+```js
+assert(
+ code.match(/<\/ul>/g) &&
+ code.match(/<\/ul>/g).length === code.match(//g).length
+);
+```
+
+确保`ol`有序列表有结束标记。
+
+```js
+assert(
+ code.match(/<\/ol>/g) &&
+ code.match(/<\/ol>/g).length === code.match(//g).length
+);
+```
+
+确保每个`li`条目都有结束标记。
+
+```js
+assert(
+ code.match(/<\/li>/g) &&
+ code.match(//g) &&
+ code.match(/<\/li>/g).length === code.match(/ /g).length
+);
+```
+
+无序列表里的 `li` 元素不应该为空。
+
+```js
+$('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
+```
+
+有序列表里的 `li` 元素不应该为空。
+
+```js
+$('ol li').each((i, val) => assert(!!val.textContent.replace(/\s/g, '')));
+```
+
+# --solutions--
-## Solution
-
-
\ No newline at end of file
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
index 3770282553..41740a5b49 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
@@ -1,18 +1,23 @@
---
id: 587d78aa367417b2b2512aed
+title: 声明 HTML 的文档类型
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
forumTopicId: 301095
-title: 声明 HTML 的文档类型
---
-## Description
-
+# --description--
+
到目前为止，我们学习了一些特定的 HTML 标签，还有一些标签是用来组成网页的总体结构，并且它们在每个 HTML 文档中都能看到。
+
在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。
-你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。
-!和大写的DOCTYPE是很重要的，特别是对于老的浏览器。但html大写小写都可以。
-所有的 HTML 代码都必须位于html标签中。其中<html>位于<!DOCTYPE html>的后面，</html>位于网页的结尾。
+
+你可以通过``来告诉浏览器你使用的是 HTML 的哪个版本，"`...`" 部分就是版本的数字信息。``对应的就是 HTML5。
+
+`!`和大写的`DOCTYPE`是很重要的，特别是对于老的浏览器。但`html`大写小写都可以。
+
+所有的 HTML 代码都必须位于`html`标签中。其中``位于``的后面，``位于网页的结尾。
+
这是网页结构一个例子：
```html
@@ -22,45 +27,29 @@ title: 声明 HTML 的文档类型
`
-
-```
-
-
- 
`
+
背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。
-注意：