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 的核心宗旨. 这个 Feel 倍儿爽! 有么有?

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

我目前是在职前端开发, 如果你现在也想学习前端开发技术, 在入门学习前端的过程当中有遇见任何关于学习方法, 学习路线, 学习效率等方面的问题, 你都可以申请加入我的前端学习交流裙: 前面: 603 中间: 985 最后: 993. 里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册, 前端面试题, 前端开发工具, PDF 文档书籍教程, 需要的话都可以自行来获取下载.

关于学习 Web 前端一些建议和方法

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

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

每个人的成长与基础不一样, 结合自己的实际情况, 在执行. 还是重复一下, 前端的核心是 JS,CSS 不难, 但需要来积累.

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

来源: http://www.jianshu.com/p/289eaf7fba31