网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗? 但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。 因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。
初级前端要学的东西不算难，可以说只要愿意去学，人人都能学会（我目前就在这个水平）
下面我就简单的说下我自己的学习路线吧（仅供参考）:
初级web前端主要学习：html、css、javascript jquery bootstrap
1、html&css 这部分总的来说很简单，网上资料、视频、书籍等满天飞。。。css中盒子模型、流动、block、样式优先级等等这些自学起来也是很容易，最后再解下浏览器兼容性差不多了
2、javascript 难点，也是重点。要学的东西实在很多，如果没有其他编程语言的基础的话，学起来可能有些吃力，有很多比较抽象的概念，必须要深入理解。比如闭包、原型、面向对象、封装等等。要理解透彻，看书也是必不可少的，找一本优秀的js书从头看到尾，反复研究学习，第一遍可以快速翻阅，大体知道了解概念就行了。第二三遍就需要深入学习了。
3、jquery 这些基础知识掌握了以后，还需要学习jquery，这是一个非常优秀的javascript库，大型开发必备。它简化了javascript的复杂操作，消除了javascript跨平台兼容性问题，提供了大量实用的方法，有良好的文档和帮助手册，是一个很成熟的javascript库。慕课网上有学习视频，我把地址挂上 http://www.imooc.com/search/?words=jquery 可以上去看看。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问查文档就行。
初级大概就这些了吧。。
HTML文档结构
段落标签
文字标签
图片标签
超链接标签
列表标签
表格标签
表单标签
框架标签搜索
CSS语法
CSS选择器 （ID 、类选择器与复合选择器）
CSS样式（背景、文本、字体、链接、列表、表格）
盒子模型（边框、外边距、内边距）
CSS定位 （相对定位、绝对定位、浮动）
JavaScript
基本语法
变量
数据类型
函数
运算符
流程控制
JS对象
String对象
Array对象
Date对象
window对象
Document对象
jQuery 基础语法
层次选择器
基本选择器
选择器---过滤选择器
表单选择器
查找节点
创建节点
DOM操作-------插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
遍历节点
合成事件
事件绑定
事件--事件冒泡
移除事件
show（）、hide（）
动画------fadeln（）、fadeOut（）
slideUp（）、slideDown（）
自定义动画animate（）
动画回调函数
停止动画
表单、表格操作
常用jQuery插件
--------jQuery UI
BootStrap
---起步
-栅格系统
-排版
-表格
-表单
-按钮
--图片
---模态框、弹出框、警告框
---标签页
---下拉菜单
---按钮组、按钮式下拉菜单
---导航、导航条
---分页
-
---BootStrap布局实例
学完这些基本上算是初级了（本人目前也在学,看我的博客这么丑就知道）
就这样吧
原文：http://www.cnblogs.com/xiongyubin/p/7223329.html