CSS 网格是一个较新的标准，用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。
制作一个致敬页
目标： 在 CodePen.io 上创建一个与这个功能类似的 app：https://codepen.io/freeCodeCamp/full/zNqgVx。
在满足以下 需求 并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。
需求 1： 此 app 中应存在一个 id=”main” 的元素，页面上的所有元素都应置于这个元素中。
需求 2： 此 app 中应存在一个 id=”title” 的元素，其中包含描述致敬页主题的字符串文本，如 “Dr. Norman Borlaug”。
需求 3： 此 app 中应存在一个 id=”img-div” 的 figure 或 div 元素。
需求 4： 在 img-div 元素内，应存在一个 id=”image” 的 img 元素。
需求 5： 在 img-div 元素内，应存在一个相应的 id=”img-caption” 的元素，其中包含对 img-div 中图像的描述文本。
需求 6： 此 app 中应存在一个 id=”tribute-info” 的元素，其中应包含描述致敬页主题的内容文本。
需求 7： 此 app 中应存在一个 id=”tribute-link” 的 a 元素，它应链接到一个包含有关致敬页主题额外信息的外部网页。 提示：你必须为 a 元素提供 target 属性，并将其属性值设置为 _blank（即 target=”_blank”），这样才可以在新选项卡中打开链接。
需求 8： img 元素应相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。
需求 9： img 应在其父元素内居中。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>致敬页</title>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
#img-div{
padding: 10px;
margin: 0;
}
img{
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
body{
background-color: beige;
margin: 0;
}
/*#title{*/
/* text-align: center;*/
/* padding: 20px 0 0 0;*/
/* margin: 10px 0 0 0;*/
/*}*/
h1{
text-align: center;
padding: 20px 0 10px 0;
margin: 20px 0 0 0;
}
#img-caption{
text-align: center;
margin-top: 15px;
}
ul{
max-width: 600px;
margin: 0 auto 20px auto;
}
footer div{
text-align: center;
}
</style>
</head>
<body>
<main id="main">
<header>
<h1 id="title">艾萨克·牛顿</h1>
<figure id="img-div">
<img id="image" src="https://ts1.cn.mm.bing.net/th?id=OIP-C.ib7d1lCwRHAND480o0Z_2gAAAA&w=146&h=159&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2" alt="牛顿图片"/>
<figcaption id="img-caption">
艾萨克·牛顿爵士,是一位英格兰物理学家、数学家、天文学家、自然哲学家和炼金术士。
</figcaption>
</figure>
</header>
<article>
<section id="tribute-info">
<h1>这里是一些他的生平事迹:</h1>
<ul>
<li>
<strong>1643年1月4日</strong>,
艾萨克·牛顿出生于英国英格兰东米德兰林肯郡南凯斯蒂文科尔斯沃斯村畔伍尔索普的伍尔索普庄园。
</li>
</ul>
<ul>
<li>
<strong>1661年6月</strong>，他进入了剑桥大学的三一学院。
</li>
</ul>
<ul>
<li>
<strong>1665年</strong>,他发现了广义二项式定理，并开始发展一套新的数学理论，也就是后来为世人所熟知的微积分学。
</li>
</ul>
<ul>
<li>
<strong>同年</strong>,牛顿获得了学位,而大学为了预防伦敦大瘟疫而关闭了。在此后两年里，牛顿在家中继续研究微积分学、光学和万有引力定律。
</li>
</ul>
<ul>
<li>
<strong>1667年</strong>,牛顿获得奖学金，作为研究生重返剑桥大学三一学院。
</li>
</ul>
<ul>
<li>
<strong>1669年</strong>,牛顿被授予卢卡斯数学教授席位。
</li>
</ul>
<ul>
<li>
<strong>1696年</strong>,牛顿通过当时的财政大臣查尔斯·孟塔古的提携迁到伦敦作皇家铸币厂的监管，一直到去世。
</li>
</ul>
<ul>
<li>
<strong>1703年</strong>,牛顿成为皇家学会会长和法国科学院的会员。
</li>
</ul>
<ul>
<li>
<strong>1727年3月31日</strong>,牛顿在伦敦睡梦中辞世，享寿八十四岁。
</li>
</ul>
</section>
</article>
<footer>
<div>
<span>如果你有时间，你应该在他的维基百科条目上阅读关于这个不可思议的人的</span>
<a id="tribute-link" href="https://zh.wikipedia.org/wiki/%E8%89%BE%E8%90%A8%E5%85%8B%C2%B7%E7%89%9B%E9%A1%BF" target="_blank">更多信息.</a>
</div>
</footer>
</main>
</body>
</html>制作一个调查表格
目标： 在 CodePen.io 上创建一个与这个功能类似的 app：https://codepen.io/freeCodeCamp/full/VPaoNP。
在满足以下 需求 并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。
需求 1： 此 app 中应存在一个 id=”title” 的大小为 H1 的标题。
需求 2： 此 app 中应存在一段 id=”description” 的大小为 P 的短小的描述。
需求 3： 此 app 中应存在一个 id=”survey-form” 的 form 元素。
需求 4： 在表单元素内，应存在 id=”name” 的输入框（必填项），以便用户输入姓名。
需求 5： 在表单元素内，应存在 id=”email” 的输入框（必填项），以便用户输入邮箱。
需求 6： 如果用户输入了格式不正确的邮箱，则应出现来自 HTML5 表单数据校验的错误信息。
需求 7： 在表单内，用户应可以在 id=”number” 的输入框中输入数字。
需求 8： 如果用户在数字输入框内输入非数字内容，则应出现来自 HTML5 表单数据校验的错误信息。
需求 9： 如果用户输入的数字超出了使用 min 和 max 属性定义的范围，则应出现来自 HTML5 表单数据校验的错误信息。
需求 10： 表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的标签。这些标签的 id 应分别为 id=”name-label”、id=”email-label” 和 id=”number-label”。
需求 11： 表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符。
需求 12： 在表单元素内，应存在一个 id=”dropdown” 的下拉列表，用户可以从中选取一个选项。
需求 13： 在表单元素内，应至少存在一组单选按钮，用户可以从中选取一个选项。 每组应使用 name 属性进行分组。
需求 14： 在表单元素内，应存在几个复选框，且每个复选框都应有 value 属性。
需求 15： 在表单元素的最后，应存在一个 textarea 元素，以便用户输入额外的批注。
需求 16： 在表单元素内，应存在一个 id=”submit” 的按钮，以便用户提交表单。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调查表格</title>
<style>
body{
background: url("https://tse4-mm.cn.bing.net/th/id/OIP-C.VhIblAtfCEDml3nFKzhSSAHaFL?w=257&h=180&c=7&r=0&o=5&dpr=1.12&pid=1.7");
background-repeat: no-repeat;
background-size: 100%;
}
form{
color: white;
background: rgb(42,42,72);
margin: auto;
max-width: 650px;
}
#one label{
display: flex;
align-items: center;
font-size: 1.25rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
fieldset{
border: 0;
}
#one input{
display: block;
width: 500px;
height: 2rem;
padding: 0.375rem;
border: 1px solid white;
border-radius: 5px;
}
#head{
text-align: center;
color: white;
}
#title{
margin: 0 0 -5px 0;
}
select{
width: 100%;
height: 30px;
border: 1px solid white;
border-radius: 5px;
}
textarea{
width: 100%;
height: 200px;
}
button{
display: block;
margin: auto;
width: 200px;
height: 50px;
background: aqua;
}
</style>
</head>
<body>
<main>
<div id="head">
<h1 id="title">freeCodeCamp调查问卷</h1>
<p id="description">感谢您花时间帮助我们改进平台</p>
</div>
<form id="survey-form" action="index.html" method="post">
<div id="one">
<fieldset>
<label for="name" id="name-label">姓名:</label>
<input type="text" id="name" name="name" placeholder="姓名" required>
<label for="email" id="email-label">邮箱:</label>
<input type="email" id="email" name="email" placeholder="邮箱" required>
<label for="number" id="number-label">年龄:</label>
<input type="number" id="number" name="number" min="18" max="60" placeholder="年龄" required>
</fieldset>
</div>
<div id="two">
<fieldset>
<legend>哪个选项最能描述您目前的角色?</legend>
<select id="dropdown" required>
<option disabled selected value>选择当前角色</option>
<option value="student">学生</option>
<option value="job">全职工作者</option>
<option value="learner">半工半学</option>
<option value="preferNo">还是不说为好</option>
<option value="other">其他</option>
</select>
</fieldset>
</div>
<div id="three">
<fieldset id="radio">
<legend>你会向家人朋友推荐freeCodeCamp吗?</legend>
<label>
<input type="radio" name="yes">
肯定
</label><br>
<label>
<input type="radio" name="maybe">
也许
</label><br>
<label>
<input type="radio" name="Not-sure">
不确定
</label>
</fieldset>
</div>
<div id="four">
<fieldset id="checkbox">
<legend>您希望看到哪些方面的改进?</legend>
<label>
<input type="checkbox" name="Front-end" value="前端项目">
前端项目
</label><br>
<label>
<input type="checkbox" name="Back-end" value="后端项目">
后端项目
</label><br>
<label>
<input type="checkbox" name="Data-Visualization" value="数据可视化">
数据可视化
</label><br>
<label>
<input type="checkbox" name="Challenges" value="挑战">
挑战
</label><br>
<label>
<input type="checkbox" name="Open-Community" value="开源社区">
开源社区
</label><br>
<label>
<input type="checkbox" name="Gitter" value="git帮助房间">
git帮助房间
</label><br>
<label>
<input type="checkbox" name="City" value="城市聚会">
城市聚会
</label><br>
<label>
<input type="checkbox" name="Wiki" value="维基">
维基
</label><br>
</fieldset>
</div>
<div id="five">
<fieldset>
<legend>您有什么意见或建议吗?</legend>
<textarea id="comments" name="comments" placeholder="在这里留下您的评论"></textarea>
</fieldset>
</div>
<div id="six">
<fieldset>
<button type="submit">提交</button>
</fieldset>
</div>
</form>
</main>
</body>
</html>制作一个产品登录页
目标： 在 CodePen.io 上创建一个与这个功能类似的 app：https://codepen.io/freeCodeCamp/full/RKRbwL。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。
需求 1： 产品登录页应存在 id=”header” 的 header 元素。
需求 2： 在 header 元素内应存在 id=”header-img” 的图像， 这里通常用来放置公司的 logo。
需求 3： 在 #header 元素内，应存在一个 id=”nav-bar” 的 nav 元素。
需求 4： nav 元素中应至少包含三个 class 为 nav-link 且可点击的元素。
需求 5： 当点击 nav 内的 .nav-link 按钮时，应滚动到产品主页上相应的部分。
需求 6： 页面上应存在 id=”video” 的嵌入式视频播放区域。
需求 7： 产品登陆页应存在一个 id=”form” 的 form 元素。
需求 8： 在表单中，应存在一个 id=”email” 的 input 输入框供用户填写邮箱。
需求 9： #email 输入框内应存在描述该区域用途的占位符文字。
需求 10： #email 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。
需求 11： 在表单中，应存在一个 id=”submit” 的 input 提交按钮。
需求 12： 当点击 #submit 元素时，应将邮箱信息提交到一个静态页面（请使用这个模拟的 URL：https://www.freecodecamp.com/email-submit）。
需求 13： navbar 应保持在视口（viewport）的顶部。
需求 14： 在此 app 中，应至少使用一次媒体查询。
需求 15： 在此 app 中，应至少使用一次 CSS 的 flexbox 布局。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品登录</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: fixed;
top: 0;
min-height: 45px;
padding: 0 20px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightsteelblue;
}
.logo{
width: 60vw;
}
.logo > img{
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
}
nav > ul{
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
list-style-type: none;
margin-left: 100px;
}
#hero{
text-align: center;
margin-top: 100px;
}
#email{
height: 32px;
margin-top: 10px;
}
#submit{
height: 33px;
width: 60px;
margin-left: -5px;
background-color: orange;
}
#features{
margin-top: 30px;
}
#features .desc{
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
width: 80vw;
padding: 5px;
margin: 0 0 0 500px;
}
/*视频样式*/
#how-it-works > iframe{
max-width: 560px;
width: 100%;
margin: 100px 0 0 500px;
}
/*定价样式*/
#pricing{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 50px;
}
.product{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 300px;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.level{
background-color: lightsteelblue;
font-size: 25px;
width: 100%;
}
#pricing ol{
list-style-type: none;
margin: 10px 0 0 0;
}
ol li{
margin: 10px 0 0 0;
}
.btn{
margin: 20px 0 15px 0;
width: 80px;
height: 30px;
background-color: rgb(241,196,15);
opacity: 0.8;
border: 1px solid white;
}
h2{
margin: 10px 0 0 0;
}
footer div{
max-width: 65%;
background-color: lightsteelblue;
height: 80px;
margin: 20px 0 0 270px;
text-align: center;
}
/*导航栏链接样式*/
.nav-link{
text-decoration:none;
}
.nav-link:link{
color: black;
}
.nav-link:hover{
color: aquamarine;
}
.nav-link:visited{
color: black;
}
</style>
</head>
<body>
<main>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#hero"><strong>特性</strong></a>
</li>
<li>
<a class="nav-link" href="#video"><strong>它是如何工作的</strong></a>
</li>
<li>
<a class="nav-link" href="#pricing"><strong>定价</strong></a>
</li>
</ul>
</nav>
</header>
<section id="hero">
<h1>您可以使用邮箱来订阅我们的产品以获取最新消息</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<input id="email" type="email" placeholder="在此处输入您的邮箱">
<input type="submit" id="submit" value="订阅">
</form>
</section>
<section id="features">
<div class="grid">
<div class="desc">
<h2>优质的材料</h2>
<p>我们的长号使用本地采购的最闪亮的铜管。这将增加您购买的寿命。</p>
</div>
</div>
<div class="grid">
<div class="desc">
<h2>快速航运</h2>
<p>我们保证一做好长号您就能收到。如果您不满意，我们还提供免费退货。</p>
</div>
</div>
<div class="grid">
<div class="desc">
<h2>质量保证</h2>
<p>对于您的每一次购买，我们将确保没有损坏或故障，我们将检查和测试您的乐器的音高。</p>
</div>
</div>
</section>
<section id="how-it-works">
<iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen="">
</iframe>
</section>
<section id="pricing">
<div class="product" id="tenor">
<div class="level">高音长号</div>
<h2>600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">订购</button>
</div>
<div class="product" id="bass">
<div class="level">高音长号</div>
<h2>900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">订购</button>
</div>
<div class="product" id="value">
<div class="level">高音长号</div>
<h2>1200</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">订购</button>
</div>
</section>
<footer>
<div>
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</main>
</body>
</html>制作一个技术文档页面
目标： 在 CodePen.io 上创建一个与这个功能类似的 app：https://codepen.io/freeCodeCamp/full/NdrKKL。
在满足以下 需求 并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。 我们不推荐你在这个项目中使用其他技术（比如 jQuery、React、Angular 或 Vue）。 在后续的其他项目中，你将有机会使用像是 React 等其他技术栈。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 祝你编码愉快！
需求 1： 此 app 中应存在一个 id=”main-doc” 的 main 元素，它包含页面的主要内容（技术文档）。
需求 2： 在 #main-doc 元素内，应有一些 section 元素，每个元素的 class 都应为 main-section。 应存在至少 5 个这样的元素。
需求 3： 每个 .main-section 内的第一个元素应为 header 元素，其中包含描述该部分主题的内容文本。
需求 4： 类名为 main-section 的每个 section 元素都应有一个与包含在其中的每个 header 的文本相对应的 id， 所有空格都应该被替换为下划线（例如，包含标题 “JavaScript and Java” 的 section 应有一个相应的 id=”JavaScript_and_Java”）。
需求 5： 所有 .main-section 元素内总计应有至少 10 个 p 元素。
需求 6： 所有 .main-section 元素内总计应有至少 5 个 code 元素。
需求 7： 所有 .main-section 元素内总计应有至少 5 个 li 元素。
需求 8： 此 app 中应存在一个 id=”navbar” 的 nav 元素。
需求 9： navbar 元素内应有一个 header 元素，其中包含描述技术文档主题的内容文本。
需求 10： 此外，navbar 元素应包含 class 为 nav-link 的 a 元素， 每个 class 为 main-section 的元素都需要有一个。
需求 11： navbar 中的 header 元素应置于 navbar 中所有 a 元素之前。
需求 12： 所有 class 为 nav-link 的元素都需要包含与 section 中 header 相应的内容文本。例如，对于一个文本为 “Hello world” 的一节或标题，你的 navbar 中也应存在一个内容文本为 “Hello world” 的元素。
需求 13： 当点击 navbar 中一个元素时，页面应滚动到 main-doc 中的相应部分。例如，点击文本为 “Hello world” 的 nav-link 元素的时候，页面应滚动到包含相同内容的 header 和 id 所处的 section 元素。
需求 14： 在常规尺寸的设备上（如笔记本电脑和台式机），id=”navbar” 的元素应显示在屏幕左侧，且始终对用户可见。
需求 15： 在此 app 中，应至少使用一次媒体查询。
代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>技术文档</title>
<style>
#main-doc header{
display: block;
text-align: left;
margin: 0 0 0 305px;
}
section article {
color: #4d4e53;
margin: 15px 0 0 320px;
font-size: 0.96em;
}
code{
display: block;
text-align: left;
line-height: 2.5;
background-color: #f7f7f7;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
#navbar{
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
#navbar header{
color: black;
margin: 10px;
text-align: center;
font-size: 1.2em;
}
#navbar ul {
height: 88%;
padding: 0;
}
#navbar li {
color: #4d4e53;
border: 1px solid;
list-style: none;
position: relative;
width: 100%;
font-size: 16px;
line-height: 3;
}
@media (max-width: 600px) {
nav{
width: 100%;
}
main{
width: 100%;
}
}
.link{
text-decoration: none;
margin-left: 15px;
}
.link:link{
color: black;
}
.link:hover{
color: powderblue;
}
.link:visited{
color: black;
}
</style>
</head>
<body>
<nav id="navbar">
<header><h1>JS Documentation</h1></header>
<ul>
<li><a class="link" href="#Introduction">Introduction</a></li>
<li><a class="link" href="#What_you_should_already_know">What you should already know</a></li>
<li><a class="link" href="#JavaScript_and_Java">JavaScript and Java</a></li>
<li><a class="link" href="#Hello_world">Hello world</a></li>
<li><a class="link" href="#Variables">Variables</a></li>
<li><a class="link" href="#Declaring_variables">Declaring variables</a></li>
<li><a class="link" href="#Variable_scope">Variable scope</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>
<h1>Introduction</h1>
</header>
<article>
<p>JavaScript is a cross-platform, object-oriented scripting language.
It is a small and lightweight language.
Inside a host environment (for example, a web browser),
JavaScript can be connected to the objects of its environment to
provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects,
such as Array, Date, and Math, and a core set of language elements such as operators, control structures,
and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>
<h1>What you should already know</h1>
</header>
<article>
<p>This guide assumes you have the following basic background:</p>
<ul>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>Good working knowledge of HyperText Markup Language (HTML).</li>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
</ul>
</article>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>
<h1>JavaScript and Java</h1>
</header>
<article>
<p>
JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.
</p>
<p>
In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.
</p>
<p>
JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.
</p>
</article>
</section>
<section class="main-section" id="Hello_world">
<header>
<h1>Hello world</h1>
</header>
<article>
<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); }<br>
greetMe("World");</code>
<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p>
</article>
</section>
<section class="main-section" id="Variables">
<header>
<h1>Variables</h1>
</header>
<article>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<p>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).</p>
<p>You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode escape sequences as characters in identifiers. Some examples of legal names are Number_hits, temp99, and _name.</p>
</article>
</section>
<section class="main-section" id="Declaring_variables">
<header>
<h1>Declaring variables</h1>
</header>
<article>
<p>You can declare a variable in three ways:</p>
<p>With the keyword var. For example,</p>
<code>var x = 42.</code>
<p>This syntax can be used to declare both local and global variables.</p>
<p>By simply assigning it a value. For example,</p>
<code>x = 42.</code>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.</p>
<p>With the keyword let. For example,</p>
<code>let y = 13.</code>
<p>This syntax can be used to declare a block scope local variable. See Variable scope below.</p>
</article>
</section>
<section class="main-section" id="Variable_scope">
<header>
<h1>Variable scope</h1>
</header>
<article>
<p>When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.</p>
<p>JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
<p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p>
<code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is not
defined</code>
</article>
</section>
</main>
</body>
</html>制作一个个人作品集展示页
目标： 在 CodePen.io 上创建一个与这个功能类似的 app：https://codepen.io/freeCodeCamp/full/zNBOYG。
在满足以下需求并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。
需求 1： 此 app 中应存在一个 id 为 welcome-section 的欢迎区。
需求 2： 欢迎区内应存在一个包含标题文本的 h1 元素。
需求 3： 此 app 中应存在一个 id 为 projects 的项目展示区。
需求 4： 项目展示区应至少包含一个 class 为 project-tile 的元素来展示项目。
需求 5： 项目展示区应至少包含一个链接到项目的超链接元素。
需求 6： 此 app 中应存在一个 id 为 navbar 的导航栏。
需求 7： 导航栏中应包含一个可以滚动到本页面不同区域的链接。
需求 8： 此 app 中应包含一个 id 为 profile-link 的链接。 点击这个链接时，它应在浏览器的新标签页内打开我的 GitHub 或者 FCC 作品集页面。
需求 9： 在此 app 中，应至少使用一次媒体查询。
需求 10： 欢迎区的高度应该与视口的高度保持一致。
需求 11： 导航栏应始终保持在视口顶部。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人作品集</title>
<style>
:root {
--main-white: #f0f0f0;
--main-red: #be3144;
--main-blue: #45567d;
--main-gray: #303841;
}
* {
margin: 0;
padding: 0;
}
/*导航栏样式*/
#navbar{
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background: var(--main-red);
z-index: 10;
}
.nav-list{
list-style: none;
display: flex;
flex-direction: row;
}
.nav-list a{
display: block;
font-size: 1.8rem;
margin: 15px 40px 0 0;
}
/*链接样式*/
a {
text-decoration: none;
color: var(--main-white);
}
/*欢迎区样式*/
#welcome-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: var(--main-gray);
}
#welcome-section h1{
font-size: 3rem;
color: var(--main-white);
}
#welcome-section p{
font-size: 25px;
color: var(--main-red);
}
/*项目区样式*/
#projects{
text-align: center;
padding: 10rem 2rem;
width: 100%;
background-color: var(--main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 8rem auto;
border-bottom: 0.4rem solid var(--main-white);
border-radius: 10px;
color: var(--main-white);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.project-image {
height: 100%;
width: 100%;
border: 1px solid;
border-bottom: 1px solid black;
}
.projects-grid div{
background-color: black;
margin: -5px 0 0 0;
}
.code {
font-size: 2rem;
width: 100%;
color: var(--main-white);
}
/*联系区样式*/
#contact{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background: var(--main-gray);
}
.contact-header{
color: var(--main-white);
text-align: center;
font-size: 2rem;
}
.contact-link ul{
list-style-type: none;
font-size: 30px;
display: flex;
flex-direction: row;
}
.contact-link li{
margin: 10px 30px 0 20px;
}
</style>
</head>
<body>
<main id="main">
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="#welcome-section">关于我</a>
</li>
<li>
<a href="#projects">作品集</a>
</li>
<li>
<a href="#contact">联系我</a>
</li>
</ul>
</nav>
<section id="welcome-section">
<h1>嘿,我是last embryo</h1>
<p>一个开发者</p>
</section>
<section id="projects">
<h2 class="projects-section-header">这些是我的项目</h2>
<div class="projects-grid">
<a href="https://codepen.io/last-embryo/details/MWrqEKN" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project">
<div>
<p class="project-title">
<span class="code">致敬页</span>
</p>
</div>
</a>
<a href="https://codepen.io/last-embryo/pen/eYyoLEN" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project">
<div>
<p class="project-title">
<span class="code">调查问卷</span>
</p>
</div>
</a>
<a href="https://codepen.io/last-embryo/pen/eYywdRa" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="project">
<div>
<p class="project-title">
<span class="code">产品页</span>
</p>
</div>
</a>
</div>
</section>
<section id="contact">
<div class="contact-header">
<h1>让我们一起工作</h1>
</div>
<div class="contact-link">
<ul>
<li><a href="https://github.com" target="_blank">github</a></li>
<li><a href="https://twitter.com" target="_blank">twitter</a></li>
<li><a href="mailto:example@example.com" target="_blank">send a email</a></li>
</ul>
</div>
</section>
<footer>
</footer>
</main>
</body>
</html>
GitHub Issues