|
9 | 9 | "title": "Build a Tribute Page", |
10 | 10 | "description": [ |
11 | 11 | "<strong>目标:</strong>使用 <a href='https://codepen.io' target='_blank'>CodePen.io</a> 搭建一个与这个功能上相似的 app:<a href='https://codepen.io/freeCodeCamp/full/zNqgVx' target='_blank'>https://codepen.io/freeCodeCamp/full/zNqgVx</a>。", |
12 | | - "在满足以下 <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>用户故事</a> 并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。", |
| 12 | + "在满足以下<a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>用户故事</a>并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。", |
13 | 13 | "你可以使用 HTML、JavaScript 以及 CSS 来完成项目,由于目前我们只学到了 CSS,因此建议你只使用 CSS 完成这个项目,顺便还可以巩固一下之前学到的内容。你也可以使用 Bootstrap 或者是 SASS。在当前的项目中,不推荐使用其他技术如 jQurey、React、Angular 或者是 Vue,因为一旦出现问题,风险自担。但在别的项目中我们仍有机会去使用不同的技术栈比如 React,我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题,编码愉快!", |
14 | | - "<strong>用户故事 #1:</strong>我的致敬页应有对应 <code>id=\"main\"</code> 的元素, 其中包含其他的所有元素", |
15 | | - "<strong>用户故事 #2:</strong>我应该看到一个具有相应 <code>id=\"title\"</code> 的元素,其中包含描述致敬页主题的字符串 (即文本),如 \"Dr. Norman Borlaug\"。", |
16 | | - "<strong>用户故事 #3:</strong>我应该看到一个带有对应 <code>id=\"img-div\"</code> 的 <code>div</code> 元素。", |
17 | | - "<strong>用户故事 #4:</strong>在 <code>img-div</code> 元素内,我应该看见有对应 <code>id=\"image\"</code> 的 <code>img</code> 元素", |
18 | | - "<strong>用户故事 #5:</strong>在 <code>img-div</code> 元素内,我应该看见一个具有相应 <code>id=\"img-caption\"</code> 的元素,其中包含对 <code>img-div</code> 中图像的描述。", |
19 | | - "<strong>用户故事 #6:</strong>我应该看见具有对应 <code>id=\"tribute-info\"</code> 的元素,其中包含描述致敬页主题的文本内容", |
20 | | - "<strong>用户故事 #7:</strong>我应该看见具有对应 <code>id=\"tribute-link\"</code> 的元素,它链接到一个包含有关致敬页主题额外信息的外部网页,提示: 你必须为元素提供 <code>target</code> 属性,并设置为 <code>_blank</code> 以便在新选项卡中打开连接 (例 <code>target=\"_blank\"</code>)。", |
21 | | - "<strong>用户故事 #8:</strong><code>img</code> 元素应相对于其父元素的宽度响应地调整大小,但不超过其原始大小。", |
22 | | - "<strong>用户故事 #9:</strong><code>img</code> 在其父元素内居中。", |
| 14 | + "<strong>用户故事 1:</strong>我的致敬页应有对应<code>id=\"main\"</code>的元素,其中包含其他的所有元素。", |
| 15 | + "<strong>用户故事 2:</strong>我应该看到一个具有相应<code>id=\"title\"</code>的元素,其中包含描述致敬页主题的字符串(即文本),如 \"Dr. Norman Borlaug\"。", |
| 16 | + "<strong>用户故事 3:</strong>我应该看到一个带有对应<code>id=\"img-div\"</code>的<code>div</code>元素。", |
| 17 | + "<strong>用户故事 4:</strong>在<code>img-div</code>元素内,我应该看见有对应<code>id=\"image\"</code>的<code>img</code>元素。", |
| 18 | + "<strong>用户故事 5:</strong>在<code>img-div</code>元素内,我应该看见一个具有相应<code>id=\"img-caption\"</code>的元素,其中包含对<code>img-div</code>中图像的描述。", |
| 19 | + "<strong>用户故事 6:</strong>我应该看见具有对应<code>id=\"tribute-info\"</code>的元素,其中包含描述致敬页主题的文本内容", |
| 20 | + "<strong>用户故事 7:</strong>我应该看见具有对应<code>id=\"tribute-link\"</code>的元素,它链接到一个包含有关致敬页主题额外信息的外部网页,提示:你必须为元素提供<code>target</code>属性,并设置为<code>_blank</code>以便在新选项卡中打开连接(例<code>target=\"_blank\"</code>)。", |
| 21 | + "<strong>用户故事 8:</strong><code>img</code>元素应相对于其父元素的宽度响应地调整大小,但不超过其原始大小。", |
| 22 | + "<strong>用户故事 9:</strong><code>img</code>在其父元素内居中。", |
23 | 23 | "你可以通过 fork 此 CodePen 来构建项目,或者你可以使用此 CDN 链接在你喜欢的任何环境中运行测试:<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。", |
24 | | - "完成项目并通过所有测试后, 输入你的项目在 CodePen 上的链接", |
| 24 | + "完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。", |
25 | 25 | "要是卡住的话,记得使用 <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>。" |
26 | 26 | ], |
27 | 27 | "releasedOn": "January 1, 2016", |
|
33 | 33 | "id": "587d78af367417b2b2512b03", |
34 | 34 | "title": "Build a Survey Form", |
35 | 35 | "description": [ |
36 | | - "<strong>目标:</strong>使用<a href='https://codepen.io' target='_blank'>CodePen.io</a搭建一个与这个功能上相似的 app:<a href='https://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>https://codepen.io/freeCodeCamp/full/VPaoNP</a>。", |
37 | | - "在满足以下 <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> 并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。", |
| 36 | + "<strong>目标:</strong>使用 <a href='https://codepen.io' target='_blank'>CodePen.io</a> 搭建一个与这个功能上相似的 app:<a href='https://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>https://codepen.io/freeCodeCamp/full/VPaoNP</a>。", |
| 37 | + "在满足以下<a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>用户故事</a>并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。", |
38 | 38 | "你可以使用 HTML、JavaScript 以及 CSS 来完成项目,由于目前我们只学到了 CSS,因此建议你只使用 CSS 完成这个项目,顺便还可以巩固一下之前学到的内容。你也可以使用 Bootstrap 或者是 SASS。在当前的项目中,不推荐使用其他技术如 jQurey、React、Angular 或者是 Vue,因为一旦出现问题,风险自担。但在别的项目中我们仍有机会去使用不同的技术栈比如 React,我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题,编码愉快!", |
39 | | - "<strong>用户故事 #1:</strong>我能看见一个 H1 大小 <code>id=\"title\"</code> 的标题。", |
40 | | - "<strong>用户故事 #1:</strong>我能看见一个 P 大小 <code>id=\"description\"</code> 的简述文字。", |
41 | | - "<strong>用户故事 #3:</strong>我能看见一个 <code>id=\"survey-form\"</code> 的 <code>form</code>。", |
42 | | - "<strong>用户故事 #4:</strong>在 form 元素内, 我需要在 <code>id=\"name\"</code> 的字段中输入我的名字。", |
43 | | - "<strong>用户故事 #5:</strong>在 form 元素内, 我需要在 <code>id=\"email\"</code> 的字段中输入邮箱。", |
44 | | - "<strong>用户故事 #6:</strong>如果我输入了格式不正确的邮箱,我将会看见验证错误信息。", |
45 | | - "<strong>用户故事 #7:</strong在表单内,我可以在 <code>id=\"number\"</code> 的字段中输入数字。", |
46 | | - "<strong>用户故事 #8:</strong>如果我在数字输入框内输入非数字,我将会看见验证错误信息。", |
47 | | - "<strong>用户故事 #9:</strong>如果我输入的数字超出了范围(使用 <code>min</code> 和 <code>max</code> 属性定义),我将会看见验证错误信息。", |
48 | | - "<strong>用户故事 #10:</strong>对于表单中的名称,邮箱和数字输入框应该使用对应 id 为:<code>id=\"name-label\"</code>, <code>id=\"email-label\"</code>, 和 <code>id=\"number-label\"</code> 的描述标签", |
49 | | - "<strong>用户故事 #11:</strong>在表单中的名称,邮箱和数字输入框中,我能看到各自的描述文字作为占位符。", |
50 | | - "<strong>用户故事 #12:</strong>在表单元素内,我可以在 <code>id=\"dropdown\"</code> 的下拉列表中选择一个选项。", |
51 | | - "<strong>用户故事 #13:</strong>在表单元素内,我可以从一组或多组单选按钮中选择一个字段。每组使用 <code>name</ code> 属性进行分组。", |
52 | | - "<strong>用户故事 #14:</strong>在表单元素内,我可以从一系列复选框中选择几个字段,每个复选框都必须具有 value 属性。", |
53 | | - "<strong>用户故事 #15:</strong>在表单元素内,我能看见在最后有个 <code>textarea</code> 用于附加注释。", |
54 | | - "<strong>用户故事 #16:</strong>在表单元素内,我能看见一个 <code>id=\"submit\"</code> 的按钮,用于提交我所有的输入。", |
55 | | - "你可以通过 fork 此 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>this CodePen pen</a> 来构建项目,或者你可以使用此 CDN 链接在你喜欢的任何环境中运行测试:<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。", |
56 | | - "完成项目并通过所有测试后, 输入你的项目在 CodePen 上的链接。", |
| 39 | + "<strong>用户故事 1:</strong>我能看见一个 H1 大小<code>id=\"title\"</code>的标题。", |
| 40 | + "<strong>用户故事 2:</strong>我能看见一个 P 大小<code>id=\"description\"</code>的简述文字。", |
| 41 | + "<strong>用户故事 3:</strong>我能看见一个<code>id=\"survey-form\"</code>的<code>form</code>。", |
| 42 | + "<strong>用户故事 4:</strong>在 form 元素内,我需要在<code>id=\"name\"</code>的字段中输入我的名字。", |
| 43 | + "<strong>用户故事 5:</strong>在 form 元素内,我需要在<code>id=\"email\"</code>的字段中输入邮箱。", |
| 44 | + "<strong>用户故事 6:</strong>如果我输入了格式不正确的邮箱,我将会看见验证错误信息。", |
| 45 | + "<strong>用户故事 7:</strong>在表单内,我可以在<code>id=\"number\"</code>的字段中输入数字。", |
| 46 | + "<strong>用户故事 8:</strong>如果我在数字输入框内输入非数字,我将会看见验证错误信息。", |
| 47 | + "<strong>用户故事 9:</strong>如果我输入的数字超出了范围(使用<code>min</code>和<code>max</code>属性定义),我将会看见验证错误信息。", |
| 48 | + "<strong>用户故事 10:</strong>对于表单中的名称,邮箱和数字输入框应该使用对应 id 为:<code>id=\"name-label\"</code>、<code>id=\"email-label\"</code>和<code>id=\"number-label\"</code>的描述标签。", |
| 49 | + "<strong>用户故事 11:</strong>在表单中的名称,邮箱和数字输入框中,我能看到各自的描述文字作为占位符。", |
| 50 | + "<strong>用户故事 12:</strong>在表单元素内,我可以在<code>id=\"dropdown\"</code>的下拉列表中选择一个选项。", |
| 51 | + "<strong>用户故事 13:</strong>在表单元素内,我可以从一组或多组单选按钮中选择一个字段。每组使用<code>name</code>属性进行分组。", |
| 52 | + "<strong>用户故事 14:</strong>在表单元素内,我可以从一系列复选框中选择几个字段,每个复选框都必须具有 value 属性。", |
| 53 | + "<strong>用户故事 15:</strong>在表单元素内,我能看见在最后有个<code>textarea</code>用于附加注释。", |
| 54 | + "<strong>用户故事 16:</strong>在表单元素内,我能看见一个<code>id=\"submit\"</code>的按钮,用于提交我所有的输入。", |
| 55 | + "你可以通过 fork 此 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建项目,或者你可以使用此 CDN 链接在你喜欢的任何环境中运行测试:<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。", |
| 56 | + "完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。", |
57 | 57 | "要是卡住的话,记得使用 <a href='https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>。" |
58 | 58 | ], |
59 | 59 | "releasedOn": "January 15, 2017", |
|
0 commit comments