两年自学前端路径总结

从大二开始自学前端到现在快两年了

这是我这两年的学习路径和一些总结

入门准备学前端的可以借鉴下

如果以下内容都懒得看 就直接保存下这个网址吧

https://docschina.org/#dataapi

1 . 慕课网

前端的入门视频免费的挺多的 我觉得随便搜个看就行了 感觉入门视频其实大差不差

这是我最开始入门时看的视频

我建议刚开始去看视频比看书好

1是看书理解起来会更费劲些 2要是看书比较枯燥 可能看几眼就不想看了 容易放弃

2 菜鸟教程

第一步看完视频之后对这些知识之后马上来看这个我觉得对巩固和加深特别有帮助

因为前端其实需要记的东西比较多而且杂乱 像html、css、jquery的方法很多很多

其实看完视频基本都能理解是什么意思了 但是一去打代码可能就不知道咋打了

这时看这个文档 对记忆很有帮助

建议快速都过一遍

我看的是HTML、HTML5、CSS、CSS3、Bootstrap3、Font Awesome、JavaScript、HTML DOM、jQuery

虽说像jquery现在很多公司都不用了 但是还是学下吧 基础内容

学完这些其实就差不多对前端有一个大概的概念了

但是自己写东西时确还经常不知道怎么动手

我自己的观点吧 是布局上的问题

我认为专门把全部布局学一遍是很重要的

第一种是:float + margin +padding +各种东西的技巧性布局

这种主要是要把盒子模型掌握清楚 还有float的特性 负magin什么的搞清楚

第二种:position 定位布局

需要把relative absolute二者的关系搞清楚 还有需要知道fixed会造成什么影响 什么时候不该用它

我是觉得这个定位的方式布局最简单了 不知道怎么移动就用定位就好了（水平有限情况下）

第三种 flex布局

这里我直接贴一个知乎文章 这个大哥总结的太棒了 我就是直接看这个学的

https://zhuanlan.zhihu.com/p/56046851

至于学完这些拿什么练手

当然是三行两列布局了 能用多少种方法写就用多少种

然后还可以看下圣杯布局 双飞翼布局之间的不同

感觉如果面试的有布局的话 这个练熟了就完全没问题了

（代码网上都很好找 要是找不到 私信我也行）

这些都了解后 其实就可以开始做项目了

甚至是去一些小公司做一些后台管理系统了什么的开发

这时你可能觉得自己只是能写一些简单的网页 为什么就说能去工作中开发了那

因为这时其实你缺的只是对一些开发框架的了解

而这些东西 都比较简单 用几天快速过下 直接使用开发就行

比如我是大二暑假跟着老师出去实习 当时开发的就是一个后台管理系统

我是用一周时间学了下layui然后开发的

这里我随便说几个开发很实用的东西（适合刚学完上面这些内容的）

1 layui 开发后台管理平台用的

https://www.layui.com/

2 Font Awesome 字体图标库

http://fontawesome.dashgame.com/

3 bootstrap

https://www.bootcss.com/

4 jq22 jquery插件库（啥功能不会了 直接搜个复制粘贴就行）

http://www.jq22.com/

对于上面的东西的 我觉得应该有一个清楚的认知 上面那些其实并不适用于现在的开发

说白了 就是几年前前端开发所用的东西

近几年前端开始火 就是因为技术迅速更新 前端能做的事情越来越多 要学的也更多 了

所以这里 我们需要做的1 巩固好基础 2是为学习框架做好准备

1 我推荐 <JavaScript高级程序设计><CSS世界>这两本书

这里我推荐阮一峰es6入门

http://es6.ruanyifeng.com/

阮一峰git入门

http://www.ruanyifeng.com/blog/2018/10/git-internals.html

还有一位知友的回答

https://www.zhihu.com/question/20070065/answer/79557687

这个主要是个工具 就跟学linux天天在那背命令敲命令一样

天天用自然就会了

webpack

https://www.webpackjs.com/

这个想学好比较难 但是如果只是为了学习框架

会用就行 多动手试试

像这仨东西想要学 就动手操作 跟着视频跟着博客 一步一步操作

多用用自然就会了

6 react全家桶

入门和第一次实战我是看的这两个视频

需要可以私聊我

react 主要是 redux比较难理解

Redux介绍

https://segmentfault.com/a/1190000003503338?_ea=323420

阮一峰Redux 入门教程：（已看，但是是比较老的版本了）

Redux 入门教程（一）：基本用法：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

Redux 入门教程（二）：基本用法：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

Redux 入门教程（三）：基本用法：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

Redux中的connect讲的比较细致

http://blog.csdn.net/q1056843325/article/details/54880804

redux，主要解决什么问题

https://zhuanlan.zhihu.com/p/57409008

4 张动图解释为什么（什么时候）使用 Redux

https://zhuanlan.zhihu.com/p/31360204

最后这四个动图一定要看下 解释的太清楚了

好吧 其实我不会vue

我是刚刚来上海实习 工作需要使用才看了看开发的

我这里开发用的是 uni-app

https://uniapp.dcloud.io/

主要是开发微信小程序

这个上手非常快 我从没开发过小程序 也没用过vue

但是从知道这个到工作使用只用了三天

直接看官网的如何学习就行了

还有就是公司花钱买了个学习视频 我花了整一天把视频过了一遍

是腾讯课堂里的这个视频资源

最后吧 其实应该还有更多别的内容 一时间想不起来 慢慢更新好了

我百度云里有一些学习视频 有些我看了有些没看 有需要了可以找我

总结不易 如有帮助 给个赞就好