网页开发的核心是HTML和CSS，这些是UI设计师、前端开发工程师、后端开发工程师（Java、Python、Node、PHP等）等必学的基础，严格来说HTML和CSS不是编程语言，但却基本已经是程序员必备的技术技能，从事互联网其他行业如设计、运营营销也需要掌握。
HTML和CSS之所以如此基础却又如此重要，源于浏览器和操作系统一样有着核心的地位，甚至浏览器就是一个操作系统。以往前端开发只是网页开发，而现在前端开发已经渗透到移动端App、小程序、网页、PC桌面端软件、VR等，有用户界面的地方就会有浏览器，有浏览器的地方就少不了HTML和CSS。
网页编辑工具
代码编辑器：Visual Studio Code
就像我们写Word文档一样，我们会用到Office的Word软件，做PPT会用到Power Point，这些都属于文档，代码也属于文档，而写代码文档的软件我们称之为编辑器。
Visual Studio Code(简称VS Code)是微软公司推出的一款免费跨平台(Windows、Mac、Linux多种操作系统都支持)，支持几乎所有主流开发语言的代码高亮（以后学其他的语言开发都非常推荐这个编辑器哦），而且运行流畅，插件丰富（等大家深入学习编程之后就知道插件丰富有多么重要啦）
当然还有其他的代码编辑器，比如Sublime Text、Atom、Webstorm等等，都挺不错，而VS Code应该是最适合新手的啦。
可能网上的一些教材以及一些教学书籍会推荐大家使用Dreamweaver，不过我们在这里特别指出不要使用这款软件，它有太多太多的弊端，对编程习惯来说有着比较大的阻碍（设计师可以例外）。
编辑器的汉化与插件：可能你会发现你安装的VS Code的界面是英文的，参照视频指南，将VS Code汉化。掌握如何给VS Code安装插件。
Chrome浏览器
Chrome浏览器是Google谷歌公司开发的浏览器，所以有时候也叫做Google 谷歌浏览器。
Chrome浏览器：Chrome浏览器下载
浏览器的开发者工具DevTools
浏览器除了可以浏览做出的网页的效果，还能调试网页，而Chrome浏览器是非常强大的网页调试工具。下载安装完Chrome浏览器之后，打开一个网页，鼠标右键可以看到”审查元素”(MacBook 为”检查”)，我们就可以打开Chrome的DevTools。
Chrome浏览器自带强大的开发者工具，是前端开发工程师必备的前端调试工具，而且对最新的一些技术规范支持的也是最好的。IE浏览器以及以IE为内核的浏览器（如360浏览器等）对新的技术规范不是很兼容,所以我们非常不推荐大家使用非Chrome浏览器。
Chrome开发者工具是极为重要的工具，当大家在网页编程中遇到问题时，一定要记得常用Chrome开发者工具查看，使用Chrome开发者工具要成为一种习惯。
以下是Chrome开发者工具的一些标签页功能，大家可以先粗略的了解一下，尤其是Element标签我们会经常用到哦。
| Device Mode | 你可以用来检查网页是否是响应式的，是否兼容其他不同分辨率的手机 |
|---|---|
| Element 标签页 | 用于查看和编辑当前页面中的 HTML 和 CSS 元素； |
| Network 标签页 | 用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等 |
| Source 标签页 | 用于查看和调试当前页面所加载的脚本的源文件 |
| TimeLine 标签页 | 用于查看脚本的执行时间、页面元素渲染时间等信息 |
| Profiles 标签页 | 用于查看 CPU 执行时间与内存占用等信息 |
| Resource 标签页 | 用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等 |
| Audits 标签页 | 用于优化前端页面，加速网页加载速度等。 |
| Console 标签页 | 用于显示脚本中所输出的调试信息，或运行测试脚本等。 |
开发者工具基础：安装成功Chrome浏览器之后，使用Chrome打开一个网页，然后知道如何打开开发者工具；点击Chrome浏览器的工具栏的各个标签，粗略了解每个标签页的作用。
好玩的开发者工具
体验什么是响应式网站
用Chrome浏览器打开苹果官网 ，然后调整Chrome浏览器的宽度，观察页面到底出现了哪些变化。这种可以根据终端屏幕的宽度来变化页面样式的网站，我们可以称之为响应式网站。
用浏览器打开一下微信支付的页面，这个页面并不是响应式的，看看与响应式有何不同。
现在是移动互联网时代，大家浏览网页已经不只是用电脑打开，还会用平板和手机，非响应式的网站用小屏幕的终端打开完全没法愉快的浏览，大家可以通过这两个网站的对比了解一下响应式的优点。
用开发者工具模拟手机环境
用电脑打开58同城的网站，然后调整浏览器的宽度，发现58同城的网站并不是响应式的，我们现在再鼠标右键打开开发者工具，点击开发者工具的菜单栏的第二个图标（也就是看起来像是手机和平板的图标）就可以开启Device Mode，然后刷新一下页面，看一下58同城的网站有什么变化。
Chrome开发者工具可以模拟十多种常见的手机和平板的页面环境，前端开发人员就能很快了解开发的网页是否适配于不同型号的手机了。
使用开发者工具来修改页面的元素
打开iPhone Xs的购买页面，iPhone Xs的价格太贵，请用开发者工具修改价格。首先在网页上，找到iPhone的价格，然后在价格上点击右键打开开发者工具，这时候可以看到该价格在开发者工具的Elements对应的代码，然后再在该代码处，点击Edit As HTML，就可以修改价格啦，把修改的效果发到交流群里。
我们也可以点击开发者工具的菜单栏的第一个图标可以选择网页的页面元素。
使用Chrome开发者工具可以修改网页的很多地方，比如删除某一部分，比如修改网页的颜色，调整字体的大小等等。
使用开发者工具查看网页加载的速度
我们打开Bing官网，然后再打开开发者工具，点击Chrome开发者工具菜单栏的NetWork，然后再来刷新一下网页，就可以看到这个网页加载了哪些素材，以及花费了多长时间。
当我们浏览一个网站时，我们觉得它很慢（这是一个定性的感觉），但是不知道它究竟有多慢（打开这个网站到底花了多长时间）以及到底是加载哪个元素慢了，就可以通过开发者工具来查看。
使用开发者工具保存网页的元素
Bing官网的背景壁纸挺好看的，但是我们好像没法使用右键另存为来保存它的壁纸，别急，在上一步的NetWork里面的元素列表里面就可以找到该图片，把它下载下来。
有些网页的图片、Mp3、视频文件，没法下载，那我们就可以采用这种方式哦。不过这种方式只对没有加密的文件才有效哦，尤其是视频。
快速制作一个网页
制作网页最快的方式当然是直接Copy啦，就像学画画最好的方式是临摹一样，Copy优秀的网页代码并对它进行分析研究，你就会学到很多书本上都学不到的知识，而Chrome浏览器的开发者工具则是Copy以及研究别人网站的最佳利器。
上一步的任务我们了解到Chrome开发者工具的Elements标签页可以让你查看到网页的代码，而NetWork标签页可以让你查看网页加载了哪些资源，而且你可以保存这些资源，这些都是我们Copy一个网页的基础。
在电脑上新建一个项目文件夹
一个网站会有很多个文件资源，为了方便管理我们就要把所有的这些文件资源有序的放到一个独立的文件夹里面，文件夹的名称要是英文的哦，比如我们可以先在电脑上新建一个“hackwork-webpage”文件夹。
用编辑器打开项目文件夹
在第一步我们下载了强大的代码编辑器Visual Studio Code，打开这个软件，点击编辑器菜单栏的文件，在下拉菜单里面再点击打开文件夹，打开上一步建好的文件夹比如“hackwork-webpage”。
然后我们再用编辑器在文件夹下面新建以下文件夹和文件：
- 新建文件，文件名为“index.html”；
- 新建一个文件夹，文件夹名为”css”，并在css文件夹下面新建文件，文件名为“style.css”;
- 新建一个文件夹，文件夹名为”js”，在js文件夹下面新建文件，文件名为“index.js”；
- 新建一个文件夹，文件夹名为”img”；
- 新建一个文件夹，文件夹名为”components”，
名称清晰，结构统一的文件夹名，不仅方便你的管理，而且和其他人交流的时候也不会存在障碍，所以起好名字也是一件很重要的事情哦。以后我们说新建一个网页项目的时候，大家可以按照上面所说的内容先建项目文件夹以及写好它的大致结构。后面我们会持续用到这部分的知识。
使用开发者工具Copy一个网页
请用chrome浏览器打开微信支付的页面 ，并右键打开Chrome浏览器的开发者工具，在Elements标签页的代码的第二行<html>上右键，选择Edit as html，复制里面所有代码到上一步建好的index.html里面，然后保存。
温馨提示，代码写完之后记得保存，文件没有保存时在VS Code的文件标签页会有一个灰色的小圆点。
然后我们再在电脑上找到这个index.html的位置，并选择使用浏览器打开它，看看效果~~这样我们就成功复制了一个网页啦~~(大家可以看一下我们用浏览器打开这个文件时，浏览器显示的这个网页的地址是什么)，而实现这个网页的代码就是我们复制的这些代码啦
这些拷贝下来的代码我们还可以对它任意的修改，把它改成我们想要的内容，里面的文字、图片、链接等等都可以的哦。可能大家在修改的过程中会遇到很多问题，善于发现问题，并能够解决问题，能大大提高你的技术水平哦
使用Chrome开发者工具去抄袭一下一些页面结构简单的网页，把网页内容复制粘贴到一个html文件里，你发现了哪些问题？使用Chrome开发者工具Console，看你拷贝的网页报了哪些错。发出来与大家一起交流。
Github与Github Pages
相信不少人都听说过“开源”，在程序员的世界里，有非常多优秀的人愿意把自己辛苦辛苦写的代码开放给所有的人使用，我们写代码就可以站在前人的肩膀上，这样就大大降低了写代码的难度。而这些开源代码大多数都放在一个叫Github的网站上。
Github几乎是所有程序员都要求会使用的网站，它是世界上最大的开源代码共享平台，在这里你可以下载到世界上最优秀的程序员们开源出来的软件以及版本的更新信息，它就像是少林寺的藏经阁一样，揽尽江湖之上的至高武学。
- 一个操作系统可以开源(比如Liunx);
- 一个软件也可以开源(比如我们推荐的VS Code编辑器);
- 一个建站系统可以开源(比如世界上最流行的建站系统Wordpress);
- 网页的UI框架（比如这几天会学到的Bootstrap）或前端框架（比如前端开发工程师最流行的三大框架Vue、React、Angularjs）;
- 人工智能学习系统TensorFlow;
可以说Github上面的资料是非常的丰富，我们可以像关注知乎或微博里面的大V一样，来关注Github上的优秀的项目，这对我们学习技术非常有帮助~~
注册一个Github账号
第一步：Set up a personal account注册一个个人账户填写英文用户名Username、邮箱Email Address、账户密码Password，填完后点击注册账号Create an account
第二步：Choose your plan 选择你的计划,在这里我们可以直接选择继续Continue
第三步：Tailor your experience 量体裁衣，填写你的经验,在这里我们可以直接提交Sumit
这样你的Github账号就注册好了。
在Github上我们不仅可以浏览到大量优秀的代码，而且你也可以把自己的代码上传到Github上面，分享给其他的人。现在程序员招聘都会要求附加上你的Github地址，来检查你的代码水平。Github还有很多有趣而实用的功能，等着你来探索学习~~
在电脑上写的网页项目怎样才能让其他人用浏览器打开呢？但你又不想花钱买服务器、虚拟机、域名，那你可以使用Github Pages。通过Github可以让你的网页项目一键生成一个静态小网站。Github与Github Pages使用教程
下载Github桌面工具
打开Github桌面工具的下载页面，然后点击下载Github桌面端工具Download GitHub Desktop，并安装。
Github的桌面工具好像不大支持Windows XP等比较老旧的操作系统，如果可以更新一下操作系统，如果系统没法更新，那只能不用桌面工具，需要大家学习一下Git命令行的相关知识了。
新建代码仓库并复制文件夹到代码仓库里面
打开Github桌面端工具，然后用Github的账号登陆该软件。然后新建一个代码仓库new repositories，名称为自定义英文名，路径为本地电脑的硬盘。这样你的代码仓库就建好了。 找到该代码仓库在电脑里面的位置，然后将前几步写好的项目文件夹复制到该路径。
上传代码仓库到Github
当你复制完文件到代码仓库里面之后，Github的桌面工具会有显示，在Commit and Sync master部分备注提交的理由，比如Summary和Description里面输入更新了哪些文件，比如Summary里面输入”上传主体文件”，Description里面输入”新增index.html文件、css、js、img文件夹”，然后点击Commit and Sync master提交和同步代码，会弹出一个对话框，你可以在描述Description里添加该代码仓库的中英文介绍，比如”HackWork网页开发任务完成情况”，然后点击Publish，你的代码仓库就上传到了Github上面了。
在Github上面找到你上传的代码仓库
打开Github官网，在首页右下角你的项目Your repositories可以看到你新上传的代码仓库，你也可以点击右上角你的头像那里下拉选择你的资料Your Profile，在你的个人资料页面也可以找到该代码仓库，然后点击进入该代码仓库。
将你的项目添加到Github Pages
在该代码仓库的页面，找到Settings设置，进入设置页面，找到GitHub Pages下面的Source，将None，修改成为master branch，然后保存Save，提交后会出现一段说明， Your site is published at…，后面的链接就是你的代码仓库的链接，打开它即可访问了。
如果你之前没有了解过Github或Github Pages，除了下载Github Desktop之外，还推荐下载Sourcetree，它和Github Desktop本质是相同的，大家可以自行百度这两个软件的使用教程，对Git以及Github有所了解了之后，之后我们会有专门的课程要求大家会使用Git命令行。
找一个你觉得设计得很好看的网站比如微信Mac官方网页，复制下来，然后把你复制的网页上传到Github Pages上分享给大家，研究一下你复制的网页与原网页有什么不同