项目简介
In this unit, you’ll learn how to get setup with text editors: take your pick, either Visual Studio Code or Atom are both powerful and industry standard choices.
You’ll also learn to use Chrome Devtools to inspect HTML and CSS in websites, which allows you to make rapid prototypes and test out design tweaks as quickly as possible.
You’ll bring all of this together with the off-platform project, Dasmoto Arts and Crafts, which will get you practicing all of the HTML and CSS that you’ve learned while building a website on your own machine.
使用推荐的Visual Studio Code或Atom软件,在自己的电脑端搭建指定网站Dasmoto Arts and Crafts。
它们都有输入时,主动填充closing tag的便捷功能和语法检查。不过我还是喜欢后者的Atom色彩搭配和布局简洁,任何东西还是都先看颜值呀!
安装指南
接下来是详细的文字和视频介绍,如何安装和使用以上2款软件。
介绍本地端的文件目录结构和基本语法结构
在Atom软件里新建文件保存命名index.html后,打开它,填入基本语法 add the required boilerplate HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
在Atom软件里新建文件保存命名index.css后,打开它,填入需要的语法
{
font-family: Helvetica, Arial, sans-serif;
}
h1 {
color: SeaGreen;
}
p,
li {
font-size: 18px;
}
a {
text-decoration: none;
}
最后在index.html里的代码,下面填入下方的代码来链接index.html和 index.css内容
完成后预览网站
这是一个坑!以为在Atom可以把代码直接推到Github,结果找不到方法。最后才发现可以给chrome安装安装LivePage这个插件。
下载地址:atom.io/packages/at…
然后在Atom打开源代码后,快捷键“ctrl-alt-l”就可以在Chrome中显示。
参考CodeCademy的标准代码
#反思总结
自己的代码没有用
如果用 id 或 class 来标记