web前端入门指南

本文目录：

前端入门指南

第一阶段

第一步：HTML/CSS

  学习静态网页的布局，这个阶段主要在培养兴趣，不要一上来就去图书馆找那些跟砖块一样厚的书籍，它会削弱初学者的学习兴趣，导致半途而废。这个时间段掌握常用的HTML/CSS知识点即可，后面在实践过程碰到不会的，不懂的再回去查阅资料。建议用两个星期以内的时间完成这部分知识的学习。

学习资源
书籍
《 Head First HTML与CSS》 前往
《精通CSS》 前往
视频
HTML/CSS基础课程-慕课网 前往
文档
HTML/CSS入门-MDN 前往
HTML/CSS-w3cschool 前往
练手项目
百度前端技术学院（前十五天） 前往

目标：学习后能高仿难度中等网站的静态布局。如凡客、云音乐商城，以能否模仿出来来衡量自己的学习效果。

第二步: JavaScript基础/jQuery

学习资源
书籍
《JavaScript DOM编程艺术》 前往
《锋利的jQuery》 前往
视频
JavaScript-慕课网 前往
练手项目
百度前端技术学院（十六天到三十六天） 前往

  看完上面的书籍或视频后，就可以尝试封装一些常用的组件。灵活、可维护、可扩展的组件更锻炼写代码的能力。下面这张图片列举的组件，可在做项目的过程中碰到的时候再去封装，时间不分先后，围绕整个学习过程。

目标：学习后能写出网站常见的动态效果。如JS实现京东无延迟菜单效果、jQuery实现自定义滚动条、网页广告特效

第二阶段

第一步：JavaScript进阶

  进阶知识点会比较难以理解，看视频或网上零碎的文档不够系统，要透彻理解会比较难，所以看书是更好的选择。

这里我列出看书的顺序：

  1. 《JavaScript权威指南》||《JavaScript高级程序设计》 二选一
  2. 《JavaScript语言精粹》 让你清楚JavaScript这门语言的精华与糟粕
  3. 《你不知道的JavaScript (上卷) 》
  4. 《JavaScript设计模式与开发实践》（选读）

  这一阶段的学习会让人感觉到枯燥无味，但一定要坚持下来，打好功底，努力理解好JavaScript重要的机制，后面学习各类框架、库、工具会更顺利。

目标：能够以清晰的思路以面向对象或IIFE的方式来组织代码。

第二步：HTML5与CSS3

  CSS3的新特性：包括新增选择器、@Font-face、文字渲染、盒子模型、渐变、阴影和发射、多列布局、flex布局、动画等等。

  HTML5的新API：包括 video、audio、 Canvas，webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高级的 DOM API、Fetch API 等等 。

  这部分特性和api很多，可能没时间一次性去学习，那么你只需要从整体上知道这些新的特性，后边学习或做项目的时候碰到，再返回来深究。

学习资源
书籍
《CSS揭秘》 前往
《响应式Web设计：HTML5和CSS3实战》 前往
练手项目
CSS3实现漂亮ToolTips效果 前往
CSS3+JS 实现超炫的散列画廊特效 前往

目标：学到这里，看到网站上某个效果，要能够知道用什么技术实现的。

第三阶段

  这个阶段需要学习当前非常火热的框架/库，只要选择了其中某个框架的学习，其生态圈附带的很多技术栈也需要我们去接触。这个时候会感觉到一下子接触到很多提高工作效率的黑科技。一图胜千言，这个阶段主要学习如下图展示的知识块，需要独个去突破。框架的话，React/Vue/Angular 三选一去掌握即可，当然不仅仅掌握它们的使用方法，还有了解它们背后的双向数据绑定、单向数据流、MVC/MVVM/Flux 、Web Component 与组件化开发等思想。

  这部分知识更迭很快，等到书籍出版都不知道更迭了几个版本了，所以直接看官方文档最好。

目标：能够完整实现一个webApp。比如饿了么、移动端音乐播放器。

第四阶段

  Node.js让javascript代码能在后端运行，填补了js在后端的空白。所以学习Node也成了前端学习的必经之路。 它能让我们对前后端联合开发有更深入的理解，而且，现在很多公司喜欢用Node.js来做中间层。

学习路径:

  1. 《Node入门》 一本免费的开源书，内容很少，非常适合入门。
  2. 《Node与Express开发》这本书以开发一个小网站为主线，从开发到部署，整个过程详细介绍了在Node.js开发中所需要涉及的一些知识和工具，让你对Node.js开发的过程有一个比较完整的全面的认识，适合练手。
  3. node.js搭建博客

  以上学习路径(3选2)以实战带动学习，边学边做，是一种不错的入门方式。

  学完上面的大概了解了node的开发流程和思路，接下来可以看一下比较深入的书籍，如《深入浅出Node.js》或者官网的API文档。另外，还需要掌握前后端通信所用的HTTP协议，可看《图解HTTP》或者《HTTP权威指南》

目标：能够开发中等难度的服务端程序。比如饿了么服务端开发。

第五阶段

  前端开发属于软件开发的一员，当具备良好的基础知识时，对编程才可能理解的更加透彻。所以，一个优秀的软件开发工程师也应该具备如下技能。

  1. 数据结构与算法

  2. 计算机网络

  3. 操作系统

  4. 计算机系统体系

  5. ......

目标：打地基，可能暂时看不到实质性的收获，但对我们的影响却是潜移默化的。

总结

  上面这个简单的思维导图如果延伸下来会有无数个分支，这里只简单列出这八大部分。为了找到更加满意的工作，在毕业之前这八大部分都要有所涉及，其中服务端Node.js可以先学会用即可。计算机网络和数据结构与算法在笔试和面试过程中经常问到，为了工作，慢慢啃吧。

学习资源

最后

  • 前端技术更迭很快，但每一样新技术都离不开基础的知识。不要带着浮躁的心态去学习，如果碰到什么新的技术都想去学，反而会走得更慢。
  • 选择学什么跟选择不学什么同样重要，大学四年时光有限，越早做出选择与定位生活会越从容。
  • 不学不代表完全不去触碰。面试官参考不仅考察你的知识深度，广度也是要的。这方面可以通过各类社区来了解技术的发展动态。
  • 平时要多做总结，在社区发表文章或写技术博客在求职时能取到很不错的加分噢。
  • 平时做的项目源码需要留下来，或者push到github上，面试的时候挑一两个不错的放在简历上。
  • 技术日新月异，有太多的东西需要你自己来发现与学习。比如HTML5 页游、微信小程序、微信小游戏、前端测试、服务端渲染，混合开发、性能优化、可视化、动画、函数式编程、WebRTC、WebSocket、CSS 4、HTTP/2、ES 7、Babel、TypeScript、Electron、PWA等等…...
  • .....

作者： 14软件工程2班 小林

posted on 2018-06-05 09:19  hzuCode  阅读(356)  评论(0)    收藏  举报

导航