【干货】前端学习路线分享！写了个网站帮助你学习前端！

dev_web:
# 我们把学习分为5个阶段 ## 1. 第一阶段 **html css** 菜鸟教程网学习 html css 别用框架 方法：模仿网站写静态网页 编辑器推荐：vsCode 建议初学者可以关闭代码提示 **js** 数据类型，操作符，变量，函数声明，DOM编程，Ajax等等 **书籍：** JavaScript高级程序设计，api基础介绍的全 DOM编程艺术，案例贯穿，无废话 **总结：** github写静态网站部署 不要学框架，不要学框架，不要学框架 ## 2. 第二个阶段 以node作为辅助工具辅助前端工具使用 npm基本指令 webpack+阮一峰es6教程 在webpack官网上学习到开发 目的是能够以容器的形式访问前端项目，热更新，css预处理

【回复】https://www.bilibili.com/read/cv19678541?spm_id_from=333.788.b_636f6d6d656e74.33
【回复】https://www.bilibili.com/read/cv16492256
HHHHHHubert:
我学前端已经有7个月了，现在工作也有3个月了。Up总结的路线基本上没有问题，[酸了]早发就好了。现在大一学生，比较菜，但是还是想分享一下学习感受帮助刚入门的同学（大佬别看了[呲牙][呲牙]）。 前端学习多且杂，且技术迭代过快，很难能找到对应的好资源来学习。会英文的同学一定多科学上网，墙外学习资料更全，而且作为程序员想追新技术只能通过英文，而且逛两个语言的社区赚的啊。b站是个学习网站！！只要不是偏门技术，一定有资源。 学习前端很容易感到迷茫和无力。比如，读了半天资料发现过时了，有些新的文章套用老文章导致还是老技术，找不到合适的学习资源，做项目不知道做啥，问问题不知道如何表达自己遇到的bug，学的东西很容易忘（也许也是因为我记忆力一般），等等。学html的时候会感觉很简单，越到后来发现就是一个无底洞。好几次想放弃，但还好一直坚持下来了。多看多练，多做项目。会有收获的。 （可以私信我，我们一块学习打卡哈哈哈哈）

【回复】回复 @只有稻草人才没有心 :我学校的确还不错（非国内，计算机世界排名前50）。但是说实话这些工作相关的都是要自学的，学校只教基础知识。
【回复】正在跟着pink老师学习中，
【回复】回复 @只有稻草人才没有心 :身边有同学学长已经去Facebook，Google实习的。计算机领域聪明努力的人挺多的。[无语][无语][酸了][酸了]
dev_web:
## 3. 第三个阶段 学习 vue react angular，推荐vue，门槛低，文档友好 可以用对应的 vue-cli crate-react-app ng-cli 的脚手架来创建工程省去webpack的配置 库的学习，vue，react的周边库 AntDesgin Element **建议：**多读官方文档 多读，多想，多练，自己解决最香，因为于你探索的行为作为片段编译到你脑海中记忆更深刻 ## 3.5 第三点五个阶段 回归初始技能，做知识的深度拓展，回顾知识点，巩固所学知识 **建议：**总结出自己的知识库，并主动输出 ## 4. 第四个阶段 1. 在选择css预处理器的时候，为什么会选择Sass，而不是使用Less？ 2. PostCSS和另外两个又有什么区别？PostCSS是通过js转义样式的工具比如px->rem 3. css的新方案有了解吗？什么是styled componet css modules 4. webpack和rollup的区别 5. snowpack和vite的区别 6. Vue，React，Angular的区别 7. 函数式编程的redux还是用响应式编程的mobx 代码风格：eslint prettier 代码质量：编程体验以及更少的错误，类型校验 TS和flow ts的收益>学习成本 所以推荐~ 测试：单元 集成 E2E jest Enzyme puppeteer APP：PWA，混合式开发RN Weex ，flutter 小程序：trao uni-app SSR：Next（React）Nuxt（Vue） **总结：**提升知识的深度和广度**,**不要停留在技术表面 stay hungry，stay foolish 被乔布斯捧红的一句话意思是"求知若饥,虚心若愚"

名字什么的最难取了啊:
[热词系列_知识增加]帮大佬整理了一下视频里说的内容，我就是个菜鸡 1. h5+css3的使用，基本的标签名及使用 2.javascript 前端控制脚本 3. js DOM编程 4.用一个好用的ide 比如vscode 5.学习js后，开始学习nodejs ，学习 npm操作 6.打包工具webpack 官网 7.学习Sass和Less 8.梳理一下自己学过的知识点。 9.学习框架：JQuery Vue React 10.打包工具：webpack/rollup 11.函数式编程还是响应式编程 12.统一代码跟编码：eslint / prettier 13.js带上代码校验：typescript / flow 14.js 测试框架： Jest / Enzyme / Puppeteer 15.性能:PWA / Service Worker 16.移动端开发：React-native 无差异开发 17.小程序开发：基于React的Taro

【回复】很赞！！看了你的评论我决定看一下视频。
【回复】工作3年了。学习期间都收集了很多前端学习笔记和资料，分享给真正学习的友友们，都是适合零基础 不嫌弃的来哈！！！
【回复】回复 @惠子ds :来啥啊！怎么感觉像拉皮条啊！[tv_笑哭]
恶犬塞班:
下一期视频我们将谈一谈，第八个阶段《转行》

看旁边:
教过团队，我来说一下真实有效的路径 1. 概念：对编程有基础的认识和概念，这一步很抽象，但是可以先看其他视频基础了解一下。也是很重要的一部分，对于男生来说似乎天生就有这种概念。而女生会比较吃力。 了解程序就是input => output这个概念，详细需求实现利用是公认的顺序+分支+循环 2. 基础：HTML（会写div就行）， CSS（文本样式/定位/宽高就行）， js基础（变量/函数/基础DOM操作），大概一些特别基础的内容。 这是信心培养阶段。还需要懂得一个道理『无论以后内容多看不懂，底层就是你现在学会的这些，只不过是封装而已，并没有新的东西』。 千万记住不要全部都看，也不要看老旧的教辅或者网站，这些都不是现在该做的事情。 最好的情况就是有人带，基本2天就能完成。 并且记住的是，这其实就是80%的内容了，也就达到了『会用』的阶段 对于教导者来说，千万不要说『来，这些你先自己看完』，然后丢一堆书或者网站，这些只会让别人越看越懵。因为大部分人都是学生，普通学生的学习模式就是用大量的时间来读熟读烂再领悟。 而全看完，不仅留下90%以上的大问好，然后等到后面发现基本没用上，越学越乱，越学越挫败

【回复】还有一点，在学习JavaScript的过程中一定和第一点结合起来，就是编程的概念。而不是仅仅『面向JavaScript』。一方面其实学习所有编程语言都是一个套路，没必要分开。一方面就没必要局限3. 提升效率：这个阶段主要是为了提升效率而做的处理 上一个阶段，基本就可以写业务了，但是写起来很慢，这个阶段就是一步一步去提高自己开发的效率 - 引用DOM操作插件，封装DOM操作，加快操作效率 - 引用视图框架，最好是Vue3，加快视图和数据的处理效率 - 加入工程化，最好是Gulp，自动化完成一些操作 4. 大量练习 5. 抽象：这个阶段就是最难的部分，需要学习很多抽象的概念，包括算法也好，设计模式也好。当然这部分并不强求，只适合已有萌芽概念的同学，千万不要硬学，没有必要。 因为 - 不影响你实现业务（赚钱） - 慢慢来肯定会有哪一天突然领悟 - 很多程序员十几年工作经验同样都没到这一步，也没有什么影响 6. 输出：这个阶段其实是总结阶段，因为在总结阶段，你才有更大的动力去进一步探索。而输出只是一个方式 当然，这适合对未来对前端『有概念』的同学。而像其他人，特别是被迫就业的，其实培训班教个2个月，花了2w块，然后靠运气找个大一点的公司（机会很多不用担心）。基本混到40岁没什么问题，但了40岁再出来培训班当老师
【回复】为什么女生会比较吃力？？[疑惑]这都要搞性别对立[疑惑]
【回复】如果你具备成长型思维模式，就不会从男女角度区分大家对知识的理解能力
objtube的卢克儿:
国内无法github的小伙伴使用这个地址：https://objtube.gitee.io/front-end-roadmap/#/

【回复】UP可以置顶一下~[热词系列_三连]
【回复】up主好棒！是值得收藏的系列，哈哈我自己也是零基础开始学习前端的，之前收集了好多相关文档，现在已经用不上啦，可以发给有需要的学友们啊，自己也可以打印出来哦~但是是自己整理的，不嫌弃的姐妹可以私我
dev_web:
这个评论...居然限制1000字...我的笔记2900多 无奈啊，， 说下感受，博主这期很给力，特别17分钟的一笑 哈哈 别误会，，我是替博主感到高兴，放松了很多，，加油~ 我也要加入输出的队伍 求博主后期出一个知识准备和视频剪辑的视频~ 还有那死亡7连问....博主后期看着办吧 后面视频内容都有了~

【回复】可以在评论里的回复发？分段三段
【回复】回复 @洛宸翊寒 :哇，谢谢提醒
【回复】回复 @洛宸翊寒 :机智如你[微笑][微笑] 我怎么没想到，，
祝您幸福安康平安富贵:
读作前端，写作全端 不只是技术的层面， 其实我认为前端可以说是开发线与业务线的交接点， 对外需要了解业务场景，用户体验，客户推广卖点市场玩法核心等， 对内需要了解设计模型，模块划分，具体实现技术点等， 开发线上哪还有第二个岗位应该比前端对项目的理解深？ 如果要问开发线上前端开发的黑盒是什么的话，我想大概只有后端数据处理方法(非数据处理思路，前端看得到数据就接触的到思路）和运维部署上线维护了， 庆幸过去一年的工作有所收获而非虚度[妙啊]

bili_17496233006:
真的是基础没打好，就想着学框架，现在一片稀碎[捂脸]

【回复】回复 @ART-道长 :原生js,html,css一定要熟练！不然看框架，能看懂但是写不出来
【回复】回复 @ART-道长 :原生js熟练度
【回复】回复 @智乃DeSuKi :主要是js，其次css常规布局 属性名，再html一些基本知识即可，标签会几个常用的就行了
Old_Coin:
看完之后我一直是这个表情[热词系列_知识增加]

随心管理员:
第四阶段太广，一般到这阶段都已经工作了，受限于公司使用的技术栈局限性会导致很多程序员所用的技术其实很窄。如果自己不督促自己去学习其他技术慢慢的真的就淘汰了，而最让人上火的是学会了无用武之地，慢慢的就忘了[微笑]，除非你想换个公司

【回复】公司加班多的话，哪有那么多时间去学那么多用不到的技术
Pikachu_丶:
[OK]支持UP,UP的观点和我一样，基础打牢了再去研究框架才是最重要的，框架更新的这么快，如果不懂原理就直接上手框架，虽然止住了近渴，但从长远发展来看，如果框架自身没有你当前需求的API你会怎么做呢？CSDN、博客园、StackOverflow上面去复制？如果没有呢？是不是得自己写？引一个UP提到的例子，假设你需要将PX转为REM，框架本身没有提供并且上面三个博客都没现成代码可用，你该怎么做？

碗有引力:
如果是全栈的话，（主要是后端）前端应该咋学呢？全栈需不需要前端也精通？

【回复】全栈的话前端也得擅长呀。 也是按这个路线学
【回复】我个人经验 必须把js搞的仅次于精通【对于一个2年经验的后端而言】 后面接触新的前端技术框架 都不会很难，，，现在在接触前端框架 问题全都是卡在了js上...... 真的是万丈高楼平地起，基础太重要了。
【回复】回复 @objtube的卢克儿 :web前端开发需要视频教程以及资料：百度网盘链接：http://6tt.co/uNn7 提取码: gbut
不知名初光:
up我想问问大概学到什么程度能去找工作 我觉得按你这个全部学完时间太长了

【回复】学到第三个阶段，了解掌握一个框架，基本能参与到项目的开发
【回复】回复 @objtube的卢克儿 :up我迷茫了，我那会学前后端，找实习都没找到，感觉后端学的烂的一批，又是算法又是工程模式，现在又想单独学前端了，话说你们都是看文档学吗
小鱼儿yoga:
搞的我一个学后端的都想学了[抠鼻][喜极而泣]

【回复】回复 @只有稻草人才没有心 :我们专业前端后端都有学. 我个人感觉后端是有点枯燥的, 而且前期真的一头雾水,. 前端就不一样了, 所见即所得[滑稽]
【回复】别开抢饭碗[doge] 我就是从后端来的
【回复】回复 @你又逗我了 :已经开始秋招了，我才学到bom，慌得一批
小小千万里:
开学就大三了，学校不会教啥前端🌚，我准备就按照这个路线走了[星星眼][星星眼]

【回复】我也开学就大三了，还在学dom
【回复】现在在做一个小程序的小项目（其实还不会前端，在通过写项目，然后大概了解一个应用是大概怎样的，然后就会开始系统的学）