<Course
release_date="2014-10-01"
icon="ic_launcher_web"
title="Web Development"
full_title="web development"
explore_section="Explore real-world sample websites.\n'探索现实世界的示例网站'"
code_section="Build a professional website'\n建立一个专业网站'"
code_template="Start with this empty project template to create your own web site.\n'首先这空项目模板来创建自己的网站。'">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
</Files>
<Sample
id="Bootstrap Components"
title="Bootstrap Components"
description="Explore a gallery of Bootstrap components.\n'探索画廊的引导组件'"
release_date="2014-10-01">
<CodeFile name="index.html" />
</Sample>
<Sample
id="Bootstrap Jumbotron"
title="Bootstrap Jumbotron"
description="Explore how to build a web page around a jumbotron with a navbar and some basic grid columns.'\n探讨如何构建一个网页在一个巨型特隆与一个导航栏和一些基本的网格列.'"
release_date="2014-10-01" >
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Sample>
<Sample
id="Bootstrap Carousel"
title="Bootstrap Carousel"
description="Explore how to build a web page with a carousel and a navbar.\n'探讨如何构建一个网页和一个旋转木马和导航'"
release_date="2014-10-01">
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Sample>
<Sample
id="Bootstrap Blog"
title="Bootstrap Blog"
description="Explore how to build a two-column blog page with custom navigation, header, and type.\n'探讨如何建立一个两列博客页面和自定义导航,头,和类型。'"
release_date="2014-10-01">
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Sample>
<Sample
id="Bootstrap Dashboard"
title="Bootstrap Dashboard"
description="Explore how to build a basic admin dashboard page with fixed sidebar and navbar.\n'探讨如何构建一个基本的管理仪表板页面和固定侧边栏和导航栏。'"
release_date="2014-10-01" >
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Sample>
<Lesson
section="Start from here to learn web development! In these interactive lessons you will step-by-step learn to build websites with HTML, CSS and JavaScript.\n'从这里开始学习web开发!在这些互动课程你将学习逐步建立网站的HTML,CSS和JavaScript '"
title="Hello World"
example="<h1>Hello World</h1>"
description="In this lesson you'll learn to build your first website.\n'在这节课您将了解建立你的第一个网站。'">
<Exercise
task="Press Run to view the website below.\n'在这节课您将了解建立你的第一个网站。'"
level="1" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>Hello$code_hint$ World</h1>
<p>This is my first website</br>这是我第一次网站</p>
</body>
</html>
]]>
</SourceCode>
<Run success="Great, you've just build your first website! You can see it below. Let's continue.\n太好了,你就建立你的第一个网站。你可以看到它下面。让我们继续繁衍'" />
</Exercise>
<Exercise
task="Now modify the HTML code at the blue arrow in the web page below to show '_Hi World_'. Then run.\n'现在修改HTML代码的蓝色箭头的网页下面显示的'_Hi World_'。然后运行。'"
level="5" >
<CodeHint />
<ExpectedCode
fail="Just change the text '_Hello World_' to '_Hi World_'.\n'就改变文本的'_Hello World_’的'_Hi World_'">
<![CDATA[<h1>Hi World]]>
</ExpectedCode>
<Run success="Awesome! You have changed the website to show '_Hi World_'.\n'太棒了!你已经改变了网站显示的'_Hi World_'" />
</Exercise>
<Exercise
task="Congratulations, you've finished the first web development lesson! Now play with the code a bit on your own. Change the text which is shown and run it as often as you like. Then continue with the next lesson.\n'祝贺你,你已经完成了第一个web开发教训。现在玩代码有点在自己的。改变文本的显示和运行它经常是你喜欢。然后继续下一个教训。'">
</Exercise>
</Lesson>
<Lesson
title="Website Structure"
example="<html> <head>"
description="In this lesson you'll learn about the basic structure of a website using HTML, CSS and JavaScript.\n'在这节课你会了解基本结构的一个网站使用HTML,CSS和JavaScript。'">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
<CodeFile name="scripts.js" />
</Files>
<Exercise
task="Press Run to view the website below.\n'新闻跑去查看网站下面。'"
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>$code_hint$
<head>
<link href="css/styles.css$code_hint_1$" rel="stylesheet">
</head>
<body>
<h1>My Website$code_hint_3$</h1>
<p id="time">Time</p>
<script src="js/scripts.js$code_hint_2$"></script>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
$space$
body$code_hint$
{
font-size: 1em;$code_hint_1$
}
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
(function () {$code_hint$
var timeEl = document.getElementById("time");
timeEl.innerHTML = new Date();$code_hint_1$
})();
]]>
</SourceCode>
<Run success="Great! Below you can see how a web browser displays the website. Let's see how it works.\n'太棒了!下面你可以看到一个web浏览器显示网站。让我们看看如何works.'"/>
</Exercise>
<Exercise
task="This is the main web page of this website. The HTML code in this file describes the visual elements of the web page. HTML is a markup language for describing web documents. Press on the blue arrow, then continue.\n'这是主要的web页面的这个网站。HTML代码在这个文件描述了视觉元素的网页。HTML是一个标记语言用于描述web文件。媒体的蓝色箭头,然后继续下去。'"
code_file="index.html"
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="The HTML code uses a !_link_! tag to specify the CSS file !_styles.css_! for the visual styles of the page.\n'HTML代码使用! _link_ !标签指定CSS文件! _styles.css_ !的视觉风格的页面'"
code_file="index.html"
level="1" >
<CodeHint_1 />
</Exercise>