今天是「前端小课」第一阶段的第一天，这一阶段的主要目标是可以写一个静态网页并能同时适配电脑端和手机端，为期 20 天，周一到周五每天早晨 8 点在本公众号更新。具体规则可参考 前端小课开课啦「免费加入」。今天的打卡指令「万事开头难」。
新手入门一个新的编程领域往往会卡到环境的准备，不知道该如何才能跑通第一个 Hello World，尤其对于端（iOS、Android）开发来说环境搭建比较难。而对于前端来说，简单了很多，一个编辑器加一个浏览器即可。
前端开发中使用最多的编辑器是 VSCode （https://code.visualstudio.com/），它具有强大的插件系统，界面如下：
创建一个 day1.html 的文件，输入 html5，VSCode 会自动创建一个页面，包含HTML的基本内容，然后我们修改标题并加入一段文字「欢迎来到前端小课」，具体代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>开发环境</title></head><body> <p>欢迎来到前端小课</p></body></html>然后在浏览器（我主推谷歌浏览器）中打开这个文件，可以直接把文件的绝对路径输入到浏览器地址栏，比如我的文件地址是:
/Users/apple/Desktop/王素燕/前端小课/demo/day1.html这里有个小技巧，可以安装 open in browser 插件 ，这样直接右击即可点击 open in borswer。
在谷歌浏览器打开效果如下：
在浏览器中右击会弹出一个对话框，会进入开发者模式，这个非常重要，后续开发中会进行页面的调试。下面几张图是我们开发中常用的几种调试技巧。具体可以实践中体验实际效果。
总结
本节内容主要学习开发环境的准备，需要在实际场景中熟练掌握 VSCode 和谷歌浏览器的调试工具。明天的内容是 HTML 的基本结构。大家加油！记得留言打卡。
推荐阅读：
前端小课
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
