前端职业化零基础学习路线附教程

李恒道 · 发表于 2022-8-16 13:24:53

前文

很多人都问过我怎么零基础入门前端的这个问题
说实话前端其实并不是特别难
主要的问题还是又多又乱
虽然我也不是特别强
但是还是给大家安利下我的学习路线

基础

html+css+js
初级简单翻一遍菜鸟教程即可
HTML
https://www.runoob.com/html/html-tutorial.html
CSS
https://www.runoob.com/css/css-tutorial.html
JS
https://www.runoob.com/js/js-tutorial.html
学会简单flex布局
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
基础git
https://www.liaoxuefeng.com/wiki/896043488029600
关于git进阶可以查看麦兜搞IT的系列教程(初级可不看)
https://space.bilibili.com/364122352/channel/collectiondetail?sid=290009

进阶

如果你学完了刚才的部分
那么我们可以进阶框架了
推荐基础掌握Vue+Element
这里目前还是以vue2为主，因为vue3的复杂度个人认为比2高出来很多
尚硅谷入门教程
https://www.bilibili.com/video/BV1gd4y1K7SB?spm_id_from=333.337.search-card.all.click&vd_source=ce6d4ed7eed3e3b30de621b1608d766d
黑马实战项目
https://www.bilibili.com/video/BV1KJ411U7ML?p=228&vd_source=ce6d4ed7eed3e3b30de621b1608d766d
如果学完了这俩，可以考虑进阶vue3
目前最推荐的还是coderwhy的Vue3教程(付费的，来源请自己寻找)
https://www.bilibili.com/video/BV1Cv411L7kM?spm_id_from=333.337.search-card.all.click&vd_source=ce6d4ed7eed3e3b30de621b1608d766d
webpack脚手架基础了解
https://www.bilibili.com/video/BV14T4y1z7sw?spm_id_from=333.337.search-card.all.click&vd_source=ce6d4ed7eed3e3b30de621b1608d766d
看完了可以继续看书籍【webpack+babel源码与实例】讲解
ES6-11基础语法
https://www.bilibili.com/video/BV1uK411H7on?spm_id_from=333.337.search-card.all.click
vuex
掌握一点基础后看官网文档
https://www.bilibili.com/video/BV1h7411N7bg?spm_id_from=333.337.search-card.all.click&vd_source=ce6d4ed7eed3e3b30de621b1608d766d
https://vuex.vuejs.org/zh/guide/modules.html
vue-router
看官网文档
https://router.vuejs.org/zh/
如果你已经学的感觉有点感觉了
也可以重新再读一遍vue文档，百看不厌的
https://cn.vuejs.org/guide/quick-start.html#with-build-tools

因为Vue3要组合TS来用
Typescript教程目前最推荐的三个是
Ts中文网(资料有大量错误，有问题优先去查看官网的英文版)
https://www.tslang.cn/docs/handbook/basic-types.html
官网
https://www.typescriptlang.org/
Typescript入门教程
https://ts.xcatliu.com/introduction/index.html

读完以上两个可以考虑进阶
掘金小册TypeScript 全面进阶指南
https://s.juejin.cn/ds/jD4SPRm/
掘金小册TypeScript 类型体操通关秘籍
https://s.juejin.cn/ds/jD4wK1E/

quasar框架
因为element只兼容桌面端，所以推荐再学一套框架
https://quasar.dev/

进阶后再进阶

拉钩大前端前三大节(付费1w+，但是你懂)
https://edu.lagou.com/growth/sem/fe_enhancement.html
Vue2源码学习参考ustbhuangyi的教程，可能有点简陋，但是确实是比较好的资料了
https://coding.imooc.com/class/228.html
Vue3源码学习hcysunyang
书籍-Vue源码设计与实现

Css可以考虑查阅【精通CSS】资料较老，但是写的很好
以及张鑫旭的blog
https://www.zhangxinxu.com/

Nuxt
查看官网以及
https://item.taobao.com/item.htm?spm=888&id=652814677423&ns=1&abbucket=15&mt=
这个教程说实话讲的不是特别好
但是市面实在没啥教程
可以快速刷一遍度过基础语法阶段
然后结合编译的源码和官方文档再研究
Context实例部分我没记错讲错了= =

NestJS
后端框架，掌握基础就可以装全栈吹牛逼了

进阶后再进阶后再进阶

你已经很棒了
可以自己找到想深入的路了

unity韩 · 发表于 2022-8-16 13:43:31

别看了，大家，还是睡觉吧。急头白脸的学3-4个月，可能有成效。

王一之 · 发表于 2022-8-16 15:32:27

真的不用学git吗？

李恒道 · 发表于 2022-8-16 16:04:36

王一之发表于 2022-8-16 15:32
真的不用学git吗？

安利了git了
虽然我没学会
哈哈哈哈

lty123 · 发表于 2022-8-17 16:19:27

急头白脸学完了，现在是一名小码畜

lty123 · 发表于 2022-8-17 16:24:09

哥哥有拉钩大前端前三大节(付费1w+，但是你懂)的那啥吗（你懂的）

李恒道 · 发表于 2022-8-17 16:47:53

lty123 发表于 2022-8-17 16:24
哥哥有拉钩大前端前三大节(付费1w+，但是你懂)的那啥吗（你懂的）

我买的那个大黄蜂加密的版本
没法分享

lty123 · 发表于 2022-8-18 15:35:25

李恒道发表于 2022-8-17 16:47
我买的那个大黄蜂加密的版本
没法分享

哈哈哈哈哈没事，自己去你懂的一下