零基础的他当年是这样学习web前台的！

优秀的Web前台开发工程师要在知识体系上既要有广度和深度!应该具有快速学习能力。前台开发工程师不仅要掌握基本的Web前台开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。下面让我们一起来看一看！

零基础学Web前台要学哪些内容?该怎样学?

新手学习前台的话，肯定要想想为什么要学习它，是出于一种什么心态，而后定位好自己，多向大牛请教，多教少量没有自己水平高的人，那样往往能让自己成长的快，切勿急躁。在这里肯定要对自己做分析，而后找出一种适合的学习方法。

Web前台的学习误区

网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。

入门快、奏效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单即可以快速方便地制作网页。

那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗?但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。

因而在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成少量更高级的应用了。其起因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。

Web前台的学习路线图

在这里将Web前台的学习分为以下几个阶段：

第一阶段–HTML的学习

超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给客户。因而，我们必需掌握HTML的基本结构和常用标记及属性。

HTML 的学习是一个记忆和了解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的!

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行少量样式的美化。

第二阶段–css的学习

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页体现与内容分离的一种样式设计语言。相对于传统HTML的体现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的准确控制。通过此阶段的学习，我们即可以顺利完成“一幢楼房”的建设。

“楼房”建设完成之后，我们可以交给客户使用，但是假如想让客户取得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“奢华”少量。

第三阶段–javascript的学习

JavaScript是一种在用户端广泛使用的脚步语言，在JavaScript当中为我们提供了少量内置函数、对象和DOM操作，借助这些内容我们可以来实现少量用户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅!有么有?

此时，也许你还沉迷在JavaScript给你带来的惊喜之中，但你的项目经理却忽然对你大吼道

“这个效果在××浏览器下不兼容，重新搞……”

“不兼容?”瞬间石化了有木有?

“我擦，坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”

JavaScript的兼容性和复杂性有时候确实让我们头疼，还好有“大神”帮我们做了封装。

第四阶段–jquery的学习

jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现少量丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分表现了其 write less,do more的核心主旨。

§ 第五阶段–bootstrap的学习“奢华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐!能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪?可以实现吗?答案是一定的。这种思想在Web前台开发中也是适合的，于是乎就出现了各种前台框架，在这里推荐给大家的是Bootstrap。Bootstrap是Twitter推出的一个开源的用于前台开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，而后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽!

关于学习Web前台少量建议和方法

在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析，不能够从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下，逐渐细化”的思想，先用几个盒子将页面从整体上划分，而后逐渐在盒子中继续嵌套盒子。

“君子生非异也，善假于物也”，在学习的过程中还要多浏览少量优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。

每个人的成长与基础不一样，结合自己的实际情况，在执行。还是重复一下，前台的核心是js，css不难，但需要来积累。

前台就是后端实现和视觉体现的桥梁，是贯穿在整个产品开发过程的纽带，起到承上启下的作用，一个好的前台工程师他能够很好了解产品经理对客户体验的要求，也能够很好地了解后端工程师对数据逻辑，或者者程序逻辑进行分离的要求，并将这些要求转化成前端的开发工作。前台就是网站的门面，它的价值远大于其余的用户端开发。

入门学习web前台的过程当中有遇见任何关于学习，行业方面的问题，可以复制有道云链接到浏览器打开系统的理解学习：http://note.youdao.com/noteshare?id=6783004b67a28122498f277ca9e000f4，缺乏相关的基础教程也可以直接来免费领取，整理了一套最新的web前台基础教程，学习web前台的这个过程当中我也收集了很多web前台学习手册，面试题，开发工具，PDF文档书籍教程，可以直接分享给你们