如果还在大学学习，这门课一定叫做前端概论。
主要内容有：
1.我的第一个页面；
2.开发工具的选择与基本使用；
3.了解调试工具；
4.本期课程安排；
5.参考资料。
一、入门案例
第一阶段没什么好说的，先上手，让你感受到编程的魅力，简单的代码demo，敲出来就有成就感（简称：敲有成就感）。第一次就直接用记事本吧，毕竟，用记事本和浏览器就可以让你入前端的坑，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset = "gbk">
<title>我的第一个页面</title>
<style>
img{width:80px}
</style>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落</p>
<h2>一点点</h2>
<ul>
<li>茉香绿茶</li>
<li>抹茶拿铁</li>
<li>
今日特供
<ul>
<li>红茶玛奇朵</li>
<li>四季春拿铁</li>
</ul>
</li>
</ul>
<h3>常见浏览器</h3>
<img src = "img/ie.jpg" alt = "IE">
<img src="img/firefox.jpg" alt = "firefox">
<img src = "img/safari.jpg" alt = "safari">
<img src = "img/chrome.jpg" alt = "chrome">
<script>
document.write('<p>我的第一个页面</p>')
</script>
</body>
</html>
可以跟着敲一遍，尝试修改标签或者内容，可以直观看到浏览器中即时改变的效果。
二、前端工具
虽然看起来感觉不错，但是直接这样敲，效率太低，所以紧接着推荐了常见的高级文本编辑器Webstorm、Sublime、Vscode。网络上各种编辑器琳琅满目，教程也参差不齐，没必要入门的时候深入了解编辑器，重要的是代码，所以用着顺手，看着舒心就可以了。
但是依然会推荐了解下插件和快捷键，为了提高效率：
1.emmet插件，
2.拼写错误检查，
3.查找和修改代码的快捷键。
了解了这些之后，可以再次敲下代码，体验效率的提升。
三、调试工具
调试依然是使用浏览器来调试，打开方式可以用快捷键或者右键审查元素来打开，各浏览器都有自己的调试工具，chrome、firefox、ie和safari等可以按照需要了解一下。
调试工具有很多的面板，一般包括：
1.元素面板（elements）
可以查看 html的元素和内容、css的样式还有盒模型等信息，可以尝试修改看看效果。
2.源码面板（sources）
这个主要是调试代码用的，可以设置断点，学到js之后应该就可以用了，可以调试脚本，查看变量和堆栈。
3.控制台面板（console）
可以配合源码面板使用，查看变量的值，也是需要学js啊。
4.网络面板（network）
可以查看所有的网络请求，也就是浏览器和服务器之间所有的通信，用途的话，先要了解网络基本知识再说。
5.其他面板
性能面板（performance）、内存面板（memory）、安全面板（security）、应用面板（application）
6.移动端调试
另，这里居然还介绍了移动端的调试，现在毕竟是移动端的天下啊。。移动端调试可以用pc浏览器模拟，设置UA（移动端设备）和分辨率等信息就可以了。
还有一种是手机和pc互联，然后在pc上调试手机端的页面，目前是safari和chrome支持，感兴趣的可以自己设置下。
safari：
pc是safari-偏好设置-高级-在菜单栏中显示“开发”菜单
手机是设置-safari-高级-javascript、web检查器
chrome：
pc：输入chrome://inspect-discover USB devices
手机：设置-开发人员选项-usb调试
四、课程安排
主要内容包括：
1.前端基础知识；
2.系统设计架构能力；
3.工程进阶能力。
会按照学-练-测-评的顺序，循序渐进的学习，案例包括网易云课堂，网易云音乐、网易严选和网易漫画，最终的作业可以当做面试的作品。
五、参考资料
建议阅读行业制定的规范标准，还有就是浏览器厂商的规范标准。
参考书建议自己去找，不建议直接看网上推荐的书目，但是这里依然给了一点参考：
如果是零基础，可以看看head first系列，因为案例和知识点结合的较好，不会像工具书枯燥
如果是作为工具书的话，可以看权威指南系列
其他高阶的内容，可以按照需要阅读。
附录：
基础知识差缺补漏
1. 程序设计基础
零基础C语言学习教程
http://study.163.com/course/introduction/636002.htm
2. 算法设计
算法设计与分析之入门篇
http://mooc.study.163.com/course/1000002012?tid=1000003010#/info
3. 数据结构
数据结构
http://mooc.study.163.com/course/1000033001?tid=1000044001#/info
4.面向对象
面向对象软件开发实践之基本技能训练
http://mooc.study.163.com/course/1000003016?tid=1000003016#/info
5.Linux基础
Linux常用命令和管理
http://study.163.com/course/introduction/712012.htm
6.网络协议
计算机网络之网尽其用
http://mooc.study.163.com/course/1000002010?tid=1000003008#/info
计算机网络之基础链路
http://mooc.study.163.com/course/1000003010?tid=1000003011#/info
计算机网络之构造互联网
http://mooc.study.163.com/course/1000002015?tid=1000002011#/info
网友评论