web前端开发学习指南（笔者亲身记实）

矫情吗；* 2022-04-24 06:42 205阅读 0赞

> web前端开发入门要求低，但技术栈却很广。网站，小程序，APP都是 web前端 要学习的内容。内容多的让人迷茫，新手往往找不到自己的方向。  
> 本篇文章是小编自己的2年学习过程记实，也许可以成为你的学习参考。

## 一、入门（学完之后将是一个可以走上岗位的前端） ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:159px;">内容</td> 
 <td style="width:86px;">时长</td> 
 <td style="width:604px;">说明</td> 
 </tr> 
 <tr> 
 <td style="width:159px;">HTML + CSS</td> 
 <td style="width:86px;">2个月</td> 
 <td style="width:604px;"> 
 <ol> 
 <li>常用的HTML标记（表单尤为重要）</li> 
 <li>CSS盒子模型 和&nbsp;布局技巧</li> 
 </ol>阶段重点：浮动式分栏布局 </td> 
 </tr> 
 <tr> 
 <td style="width:159px;">javascript</td> 
 <td style="width:86px;">1个月</td> 
 <td style="width:604px;"> 
 <ol> 
 <li>JS语法，基本语句，数据类型</li> 
 <li>DOM和BOM两大核心对象</li> 
 <li>浏览器调试（元素，网络，控制台）</li> 
 </ol>练习实例：悬浮式广告，轮播图，边栏吸附式面板 补充说明：学习了js才算前端入门 </td> 
 </tr> 
 <tr> 
 <td style="width:159px;">jQuery</td> 
 <td style="width:86px;">3个月</td> 
 <td style="width:604px;"> 
 <ol> 
 <li>元素查询，效果，属性，CSS</li> 
 </ol>练习实例：将js时的demo源码重写成jq代码，QQ和淘宝网站的注册和登录（正确的使用HTML标记和兼容事件处理） </td> 
 </tr> 
 <tr> 
 <td style="width:159px;">Bootstrap</td> 
 <td style="width:86px;">1个月</td> 
 <td style="width:604px;">学习和使用Bootstrap框架的响应式布局，这个框架是一款非常适合学习者使用的框架</td> 
 </tr> 
 </tbody> 
</table>

## 二、进阶（这是一个漫长的过程，学完之后将是一个不错的前端） ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:159px;">内容</td> 
 <td style="width:87px;">时长</td> 
 <td style="width:603px;">说明</td> 
 </tr> 
 <tr> 
 <td style="width:159px;">CSS&nbsp;进阶</td> 
 <td style="width:87px;">2个月</td> 
 <td style="width:603px;"> 
 <ol> 
 <li>Bootstrap是CSS学习路上最好的老师，学习每一个Bootstrap框架组件的样式（能手写响应式框架视为合格）</li> 
 <li>选择器，动画</li> 
 <li>伪元素和伪类（灵活运用，减少DOM节点数量，这将是你与非专业前端人员写出来的HTML代码有着明显区别的地方）</li> 
 <li>深刻理解元素类型（内联元素，行块元素，块元素）的特性，好多后端人员学习了CSS基础后布局上还是会有各种对齐的问题，原因正是不理解浏览器对各类元素类型的渲染效果。</li> 
 </ol>阶段重点：元素类型，不完全理解这点知识，那么优美的布局结构将与你无缘，写好布局是写好JS的前提，HTML结构不好，那么你的JS不可能写好。 </td> 
 </tr> 
 <tr> 
 <td style="width:159px;">javascript&nbsp;进阶</td> 
 <td style="width:87px;">5个月</td> 
 <td style="width:603px;"> 
 <ol> 
 <li>方法封装（提高代码重用，这是写好js必须掌握的）</li> 
 <li>重学数据类型（Array,Object,JSON，不会JSON的前端不是一个合格的前端）</li> 
 <li>面向对象编程（工厂/构造/原型开发模式），深刻理解this、同步、异步</li> 
 <li>浏览器事件模型</li> 
 </ol>练习实例：将之前的代码按&nbsp;面向对象&nbsp;方式全部重写（怕累就不要做前端）。 特别提醒：进入该阶段的学习，一定要抛弃看视频学习的方式，学会阅读文档是必须的。视频教给你的只有功能的实现，没有质量的提升。如果不会阅读文档，那么你的前端之路基本在此终结。 推荐书籍：《JavaScript高级程序设计》 </td> 
 </tr> 
 <tr> 
 <td style="width:159px;">jQuery 进阶</td> 
 <td style="width:87px;">3个月</td> 
 <td style="width:603px;"> 
 <ol> 
 <li>熟练使用jQuery（选择器，链式语法，对象访问，CSS，筛选，事件，测试，遍历）</li> 
 <li>理解JQ对象与原生JS对象的区别</li> 
 <li>jQuery插件编写（插件的编写不仅是功能的实现，更是对自己代码健壮性的考验）</li> 
 </ol>补充说明：将JS进阶的知识灵活运用在jQ的进阶中 </td> 
 </tr> 
 <tr> 
 <td style="width:159px;">CSS&nbsp;移动端开发</td> 
 <td style="width:87px;">1个月</td> 
 <td style="width:603px;"> 
 <ol> 
 <li>rem与vw（一定要深刻理解rem的作用，在许多框架中有许多文档写着，1rem=20px&nbsp; 这都不是rem的正确用法）</li> 
 <li>flex布局（完全掌握flex的各项属性，各种不负责任的前端经常会写 flex:1，各类浏览器默认值会不一样，小心在这方面吃大亏）</li> 
 <li>touch事件，浏览器默认行为（浏览器默认手势功能）</li> 
 </ol>特别提醒：不要进入rem的误区，rem应该是一个变量，而不是一个常量 </td> 
 </tr> 
 </tbody> 
</table>

经过一年半左右的时间对前两个阶段的学习和巩固之后，你将是一个不错的前端工程师，不管自己到了那一个阶段，也不能停止CSS的学习，jQuery虽然现在的使用率可能不会那么高，但这是前端学习路上的重要一环（如果连JQ都写不好的前端，MVVM框架也不可能写好）

## 三、扩展（扩大技能范围，适应更多的工作要求，加薪必备） ##

<table> 
 <tbody> 
 <tr> 
 <td style="width:161px;">内容</td> 
 <td style="width:88px;">时长</td> 
 <td style="width:600px;">说明</td> 
 </tr> 
 <tr> 
 <td style="width:161px;">ECMAScript 6</td> 
 <td style="width:88px;">1个月</td> 
 <td style="width:600px;"> 
 <ol> 
 <li>学习ES6（这对后期学习框架很有帮助）</li> 
 </ol>补充说明：到了这一阶段，相信你已经有能力区分什么是重点学习内容 </td> 
 </tr> 
 <tr> 
 <td style="width:161px;">Vue / React / Angular</td> 
 <td style="width:88px;">3个月</td> 
 <td style="width:600px;">选择自己喜欢的一种学习即可（推荐Vue），在这一阶段中，你将会深刻的体会到当时学习JS进阶时内容的重要性，要是在这一阶段有重大障碍的朋友，不妨从JS进阶阶段重新来过。</td> 
 </tr> 
 <tr> 
 <td style="width:161px;">小程序</td> 
 <td style="width:88px;">15天</td> 
 <td style="width:600px;">主要学习微信小程序，15天的安排，一周文档一周练习足矣。</td> 
 </tr> 
 <tr> 
 <td style="width:161px;">Hybrid App</td> 
 <td style="width:88px;">1个月</td> 
 <td style="width:600px;"> 推荐APICloud与uni-app，其它的没去了解过，都一个尿性。 </td> 
 </tr> 
 </tbody> 
</table>

**小编的话：**

*  不管你现在处于前端学习的那一个阶段，学习C语言是很有帮助的，JS是一门弱类型的语言，学习C语言能很好的培养写代码的规范。如果你是一个初学者，C语言对培养程序思维也很有帮助，尽管学起来很枯燥还没有成就感。
 *  在学习前端的路上，不要依赖UI框架，一个合格的前端工程师是不需要这些的。框架是给你在工作上提高效率的工具，不是你逃避不思进取的借口。学习框架之前应该先充分学习框架应该要具备的能力要求，而不是为了学框架而学框架。
 *  学习基础的 PhotoShop 应用，特别是现在设备的兼容问题，切图前一定要清楚后面布局的实现问题（基本的PS使用和基本的命令，和设计师沟通起来会更加容易，而不是一口大白话），万一那天设计请假了，切图还不是要自己亲自操刀。
 *  学习计算机网络：学习网络对每一个开发者来说都是有必要的，学习基本的网络协议。
 *  学习软件测试：在工作中给自己的代码进行简单的测试是有必要的，学习软件测试的基本术语能提高说话的B格（上级教你如何测试你都听不懂岂不很尴尬），测试技巧能有效的降低自己的BUG率，写出来的东西老是有BUG，会让上级很不悦。
 *  学习一门后端开发语言：后端开发也是需要涉及的，前端人员推荐PHP或Node.js，了解客户端与服务端之间的业务过程也是有需要的。
 *  培养自己的专业术语，这是工作中提升沟通效率必须的（群里问半天没人懂你的意思，不如一个关键词让帮助你的人瞬间get问题）。有些招聘中要求中明确规定只招聘 信息系专业的学生是有这方面道理的，不然沟通都费劲。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220218/b97f0c21355740ba93226f18d42b5fd3.png