2021 年前端学习路线总结
下面是我翻译的一个文字版,可以先看图再看文字。
✅ 表示个人推荐学习
✳️ 表示可选择学习
❇️ 表示不需要严格按照路线的先后顺序,可在任何时间补充这一块的知识
❎ 表示个人不再推荐
计算机网络
掌握计算机网络的基础是一名前端工程师的基本素养,建议先学习以下的知识:
✅ Internet 如何工作
✅ HTTP 协议
✅ 浏览器工作机制
✅ DNS 及其运行机制
✅ 了解域名、网站托管
HTML
✅ 学习 HTML 基础,标签、元素、表单验证等等
✳️ 语义化标签
✳️ 了解 Web 无障碍(Accessibility)
✳️ 学习 SEO 优化
CSS
✅ 学习 CSS 基础
✅ 制作布局:浮动、定位、显示、盒模型、网格布局、弹性布局
✅ 响应式设计和媒体查询(@media)
✅ 结合 HTML 制作一个简单的网页作为最佳实践
JavaScript
✅ 学习语法和基本结构
✅ 学习操作 DOM
✅ 学习 Fetch API / Ajax(XHR)
✅ ES6+ 和模块化 JavaScript
✅ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念
版本控制
✅ Git 的基本操作
✅ 创建账号并且学习使用 GitHub
✳️ 创建账号并且学习使用 GitLab
Web 安全知识
❇️ HTTPS
❇️ 内容安全策略(CSP)
❇️ 跨域资源共享
❇️ OWASP 安全风险
上面的内容是前端最基础的部分,建议多花时间,掌握好每一个知识点。
从这开始,将进入前端工程化的部分,你可能会接触到很多种不同的框架,并学习使用多种的工具为自己的开发提效。
在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。
包管理工具
npm 和 yarn 都很好,选择一个学习即可,他们两是相似的
✅ npm
✳️ yarn
CSS 构架
通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式,不用再担心 CSS 的构架问题,但熟悉 BEM 规范是一个不错的选择。
❇️ BEM,一种书写规范
❎ OOCSS
❎ SMACSS
CSS 预处理器
以下三个可选择一个进行学习。
❇️ SCSS
❇️ PostCSS
❇️ Less
构建工具
任务执行器
✅ npm scripts
❎ Gulp
代码检查和格式化工具
❇️ Prettier 代码格式化
❇️ ESLint 代码检查
❎ StandardJS
模块打包
✅ Webpack
✳️ Rollup
前端框架
前端框架推荐先学习 React,能理解函数式编程和组件化。Vue 的特点是上手快,中文文档齐全,可以选择性的学习。
✅ React.js
✅ Redux
✳️ MobX
✳️ Vue.js
VueX
✳️ Angular
RxJS
NgRx
现代 CSS
✅ Styled Component
✅ CSS Module
✳️ Styled JSX
✳️ Emotion
❎ Radium
❎ Glamorou
Web 组件
❇️ HTML 模版
❇️ 自定义元素
❇️ Shadow DOM
CSS 框架
CSS 框架有两种,一种是基于 JavaScript 框架开发的应用程序。推荐的框架有:
✅ Reactstrap
✳️ Material UI
✅TailWind CSS(这里和图片不一致,我认为 tailwind 更值得学习)
✳️ Chakra UI
另外一只是纯 CSS 框架,默认和不和 JavaScript 组件一起使用。
✅ BootStrap
✳️ Materialize CSS
✳️ Bulma
测试
在这里你需要学习使用下面的框架进行单元、集成和功能测试。
✅ Jest
✅ react-testing-library
✅ Cypress
✅ Enzyme
类型检查器
✅✳️ TypeScript
❎ Flow
上面是前端工程化的学习内容,接下来的内容涉及到性能、服务端渲染以及跨端,这一部分前端也叫被称作「大前端」。
PWA
❇️ 学习 PWA 中使用到的 Web API:
Storage
Web Sockets
Service Workers
定位
通知
设备方向
支付、证书等等
❇️ 计算、测量以及提高性能:
PRPL 模式
RAIL 模式
性能指标
学习使用 LightHouse
学习使用 DevTools
服务端渲染
✅ Next.js (React.js)
✳️ Nuxt.js (Vue.js)
✳️ Universal(Angular)
❇️ GraphQL
✅ Apollo
✳️ Relay Modern
❇️ 静态网站生成
✅ Next.js
✅ GatsbyJS
✳️ Nuxt.js
✳️ Vuepress
✳️ JekyII
✳️ Hugo
❇️ 移动端应用开发
✅ ReactNative
❇️ Flutter
❇️ 桌面应用开发
✅ Electron
✳️ Carlo
✳️ Proton Native
❇️ WebAssembly
总结完毕,不由得感叹前端生态真是丰富多彩,要学的东西很多,自己不懂的也很多,有些知识点也是浅尝辄止。虽然有这么多的方向,但还是需要找到一个点能够深挖。
如果你是前端的初学者,也不要被这些框架给吓到,学好基础然后加以实践更为重要。
上面推荐的 Roadmap GitHub 仓库里也有后端以及 DevOps 的学习路线,可以自行浏览,如果有时间我也会整理出一版文字版以供大家参阅。
Keep Learning,持续精进。
2021 年前端学习路线总结相关推荐
- 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
- 2020前端学习路线收集整理
本人18年毕业,刚毕业自学Java,第一份工作因部门解散,时效半年,其实那时我一直在想往前端发展,恰巧拿到下家offer,第二份工作确实是前端,不过是客户是银行,样式全部统一,与我想象的色彩缤纷的前端 ...
- 前端学习路线+资源整合
前端学习路线 由'技术胖前端学习路线'延展开来,加入一些自己觉得很好的资源.(持续整理中) 1.网络知识 网络工作原理 知识点:缓存.渲染原理.阻塞原理.浏览器本地存储.Web安全问题.事件循环机制 ...
- “计算机之子”winter:我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
- 黑马程序员:从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
- 2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
- Web前端学习路线分享,初学者不要错过!
在技术岗中,前端开发一直是薪资比较高的岗位. ▲北京前端工程师月均薪20.7K(职友集) 前端技术的更新迭代,导致大部分技术人员跟不上.因此越来越多的人想转型做前端开发了.毕竟想要驰骋职场,想要拿年薪 ...
- 如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧
好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...
- js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局 左边20% 中间自适应 右边200px 不能用定位 答案:圣杯布局/双飞翼布局或者 ...
最新文章
- poj2002 hash+数学
- 《流浪地球》是一部违反科学常识的大烂片
- SSM三大框架整合Springfox(Swagger2)详细解决方案
- doctype是什么?
- php 判断设备来源,PHP判断移动设备来源的方法
- 设置mac的全局命令
- ASPNET5的依赖注入
- 下载android版趣步最新版,趣步下载2021安卓最新版_手机app官方版免费安装下载_豌豆荚...
- MVC阻止用户注入JavaScript代码或者Html标记
- 使用手机企业微信创建自己的企业(公司)
- 【elasticsearch】ES生命周期管理
- php ngx_http_auth_basic_module,nginx认证模块ngx_http_auth_basic_module
- python工厂模式看不懂_python模式 工厂模式原理及实例详解
- React Hook 写 Timer时钟
- VBS病毒(爱虫病毒) 源代码
- 灵飞经5龙生九子 第二十一章 危机四伏 3
- unity IOS 微信踩坑记录
- python优点是代码库支持、灵活_Google将限制Python语言的应用 开发社区热议
- 三冲IPO,独角兽唱吧能成为“K歌第一股”吗?
- Python中的逻辑运算符号
热门文章
- linux 屏幕输出 高亮_通过printf设置Linux终端输出的颜色和显示方式
- html怎样获取用户手机号码,小程序如何获取用户手机号?
- java miglayout_Java - MigLayout设置边界
- 用docker swarm 实现集群
- 那些云中的负载均衡器——Azure、AWS和NetScaler
- C#性能优化篇 - 基于索引器封装EPList
- 黑马程序员——Java基础---String与StringBuilder
- 探究Ubuntu如何存储用户登录密码
- 信息熵(Information Entropy)
- 应对亚洲劳动力成本不断上升的挑战