前端学习路线

这段日子收到不少私信想要前端的学习规划路线,最近我也呕心沥血,给大家总结了一套前端的学习规划路线,从小白到初级前端工程师,再接着进阶高级等等该掌握的技能,希望对大家有帮助

HTML

HTML 是用来编写网页代码结构的,它有一系列的标签用于显示不同的页面元素,比如用 <a/> 显示一个超链接,<img/> 显示一张图片,就跟写一个 word 文档一样,只是单纯用 html 只能写内容,不能进行排版和美化样式,如果让网页变得漂亮,需要 CSS。

✔︎  学习 HTML 基础,标签、元素、表单验证等等

✔︎ 语义化标签

✔︎ 了解 Web 无障碍(Accessibility)

✔︎ 学习 SEO 优化

学习HTML :推荐wschool官网 https://www.w3school.com.cn/


CSS

CSS 是用来美化 HTML 编写的页面的,通过一些语法选择特定的 html 标签,然后用一些属性来给它们添加样式,比如文字颜色,背景,位置,边距,定位等等,还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式,比如 flex、grid 等。

✔︎  学习 CSS 基础

✔︎  制作布局:浮动、定位、显示、盒模型、网格布局、弹性布局

✔︎  响应式设计和媒体查询(@media)

✔︎ 结合 HTML 制作一个简单的网页作为最佳实践

学习CSS :推荐wschool官网 https://www.w3school.com.cn/


JavaScript

在写完html、css 之后,咱们就可以写漂亮的页面了,那么接下来就是需要学习 JavaScript,让网页能和人进行互动,比如点击按钮弹出个对话框,处理用户输入的表单信息,添加一些复杂的动画,使用 ajax 加载远程数据等等。它可以直接操作 HTML 元素

✔︎  学习语法和基本结构

✔︎  学习操作 DOM

✔︎  学习 Fetch API / Ajax(XHR)

✔︎  ES6+ 和模块化 JavaScript

✔︎  了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念

书籍:《JavaScript 高级程序设计(第4 版)》也就是红宝书

《你不知道的JS(上中下)》

《Es6标准入门(阮一峰)》


计算机网络

建议看看《图解Http》《图解Tcp/ip》

前端进阶

前端三大框架(Vue、React、Angular)

Vue3.0基础语法


  • Vuex:状态管理
  • Vue-router:路由
  • axios:请求
  • Vue-Devtools:调试工具
  • vite:构建工具
  • 可选:vue-cli + webpack


Vue-UI库


  • element-UI(饿了么团队)
  • Ant-Design(蚂蚁金服团队)
  • vant(有赞团队)


前端工程化

前端模块化

模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载

前端组件化

模块化是在文件层面上,对代码或资源的拆分;

组件化是在设计层面上,对UI(用户界面)的拆分

前端规范化

职责分离,规范项目各个事项

前端自动化

把一切简单机械的重复劳动都让自动化工具去完成

高级前端


HTTP协议

网络安全

设计模式

数据结构

算法

性能优化

移动端开发

微信小程序

微信公众号

微前端



后端知识


linux

数据库(mysql、mongoDB)

node.js

node.js框架(koa、express、Nest.js)



工具


vscode

babel

自动化工具(Grunt、Gulp)

包管理工具(npm、yarn)

构建工具(vite、vue-cli+webpack)

git工具

富文本编辑器:Braft Editor

数据可视化:ECharts

模拟数据:Mock.js


 ***********************

#前端##内推##春招##实习##面经##笔经##秋招#
全部评论
兄弟,你这图有点眼熟,怎么好像是我写的路线🤔,原帖地址:https://juejin.cn/post/6982801495993352229
2 回复 分享
发布于 2023-02-21 18:11 广东
感谢分享!收藏了!!!
点赞 回复 分享
发布于 2022-04-07 16:51
可以要一张思维导图原图嘛
点赞 回复 分享
发布于 2022-07-13 21:59

相关推荐

01-09 00:44
已编辑
门头沟学院 Web前端
先说一下背景:双非,目前在读大三,目前&nbsp;(2024/12/31)&nbsp;无实习经历,所有投递都是从官网投递,无内推。岗位是微信开放平台基建最汗流浃背的一集,当时刚好是在游戏部门挂了后几天微信打电话过来问愿不愿意面试,我说上次不是挂了吗,双方就都很尴尬的笑了一下,最后说回去思考一天再确定要不要面。当时学期也快结束了,跟几个哥们聊了一下这件事,就觉得可能是&nbsp;kpi。还好当时鼓足了勇气,想着就算是&nbsp;kpi&nbsp;也要尽力去学到东西和表达想法。事实证明确实不是&nbsp;kpi&nbsp;面,而且拷打的非常恐怖,一面面试官说看了面评知道项目很大很复杂,于是就狠狠的考察了项目的广度,以及临场反应速度。二面则是结合计算机基础深究了项目的细节,现在回想起来我都不知道我是怎么顶住面试官的拷问的。三面则是最轻松但也是最需要口才的一集,就像是在给上司讲述自己的产品,讲自己的思考以及是否存在能效提升一样视频面两面都没有开摄像头,就最后&nbsp;hr&nbsp;面开了一下。最后实习&nbsp;oc&nbsp;也选了他,首先是因为没几个能选的,同期的就另一个外企发了offer,地点在北京,往返比较麻烦。微信这边主要是技术栈为&nbsp;js&nbsp;和&nbsp;rust,还是基建岗,感觉还是比较符合胃口的。我对这次面试最大的总结就是:计算机的基础思想很重要,许多地方都可以用上他。理解思想,并把它融入到自身作为一个工具使用。就好比我前文提到的&nbsp;monorepo&nbsp;和&nbsp;react&nbsp;hooks&nbsp;一样,我感觉就像是把他融入到自身,他是一个工具,理解他在什么时候该发挥什么样的作用其次还是基础,一面结束后复盘了一下八股,答得真的是稀烂,寒假还是要恶狠狠的弥补啊。###&nbsp;一面(2h&nbsp;30min)上来先四道英文题目手撕(1小时&nbsp;+&nbsp;20&nbsp;分钟思路拷打):-&nbsp;async&nbsp;pub&nbsp;sub-&nbsp;依赖解析-&nbsp;爬楼梯-&nbsp;glob&nbsp;库实现八股:-&nbsp;事件循环-&nbsp;异步任务的作用-&nbsp;setTimeout&nbsp;浏览器底层实现-&nbsp;JS&nbsp;内存管理(v8&nbsp;回收,但是讲的不是很清楚-&nbsp;引用计数-&nbsp;weakMap&nbsp;以及为什么不能遍历,以及只能用引用数据类型做&nbsp;key-&nbsp;对&nbsp;ts&nbsp;泛型的理解-&nbsp;rust&nbsp;用过什么异步框架(tokio)-&nbsp;rust&nbsp;内存管理(drop&nbsp;trait,作用域,无GC)-&nbsp;css&nbsp;媒体查询-&nbsp;git&nbsp;merge&nbsp;行为(只知道合并成一个提交,面试官说还有一些其他行为,后续看了一下是&nbsp;fast&nbsp;forward&nbsp;/&nbsp;无冲突&nbsp;merge&nbsp;/&nbsp;有冲突&nbsp;merge)-&nbsp;约定式提交以及如何做约束(命令行应用与&nbsp;git&nbsp;hooks&nbsp;正则匹配)-&nbsp;https&nbsp;中间人攻击-&nbsp;https&nbsp;链接上请求内放密码-&nbsp;https&nbsp;的数据是安全的吗(只想到密钥泄露)-&nbsp;快排时间复杂度,为什么最坏是&nbsp;On2-&nbsp;对一块内存上的数组尾插&nbsp;/&nbsp;头插元素的时间复杂度讲项目(40min+)-&nbsp;立项,重构,后台实现,远程协同-&nbsp;CRDT&nbsp;思想-&nbsp;脏路径处理-&nbsp;并发冲突-&nbsp;简单说说&nbsp;YATA&nbsp;数学证明?(包不懂的)-&nbsp;断网后怎么办,或者说有个客户端延迟很高(插入永远有一个唯一位置,应对比较轻松)-&nbsp;服务是中心化还是去中心化-&nbsp;一个人删除了一行文字,另一个人在这行文字添加内容,结果是什么(根据&nbsp;YATA&nbsp;算法第一层比较,客户端小的操作优先)-&nbsp;简单对比&nbsp;OT-&nbsp;项目背景-&nbsp;简单介绍&nbsp;Astro&nbsp;框架-&nbsp;项目设计(做成&nbsp;npm&nbsp;包,并作为&nbsp;astro&nbsp;插件使用)-&nbsp;项目技术栈对比,自研的原因-&nbsp;第一次升级后的成果与遇到的问题(框架问题,GitHub&nbsp;issue&nbsp;讨论,细节挺多的)-&nbsp;语法分析器的设计(core&nbsp;层&nbsp;和&nbsp;plugin&nbsp;层)-&nbsp;如何进行语法检查的(ast&nbsp;语法树遍历分析)-&nbsp;LSP&nbsp;服务器设计与消息优化(VSCode&nbsp;LSP&nbsp;使用&nbsp;pipeline&nbsp;或&nbsp;websocket,如果要优化可以通过自研协议分主动推送和监听广播行为)-&nbsp;前后端结构(前端,后端,脚手架后端)-&nbsp;项目发布过程-&nbsp;mdx&nbsp;中用户如何使用自定义组件-&nbsp;mdx&nbsp;可以回退&nbsp;md&nbsp;吗(没有研究,后续看了一下,mdx&nbsp;是作为一个&nbsp;astro&nbsp;插件使用,回退的话可能需要对内容进行过滤处理(表达式,用户组件,script&nbsp;标签过滤))-&nbsp;markdown&nbsp;过滤-&nbsp;astro&nbsp;编译&nbsp;mdx&nbsp;底层实现(讲了用到的插件,但是还可以继续讲讲&nbsp;vite&nbsp;怎么去&nbsp;resolve&nbsp;module&nbsp;的,和源码中经过了几次编译后才输出结果)-&nbsp;如果有用户恶意输入,你是怎么处理的(pr&nbsp;check)-&nbsp;如果用户太多你管不过来怎么办(插件过滤&nbsp;script,工作流中使用&nbsp;bot&nbsp;自动检查)-&nbsp;mdx&nbsp;注入组件的白名单-&nbsp;mdx&nbsp;可以渲染&nbsp;react,那可以渲染&nbsp;vue&nbsp;吗(可以,配置插件即可)-&nbsp;如果要在一个&nbsp;react&nbsp;组件里面使用&nbsp;vue,我该做什么-&nbsp;app.mount&nbsp;发生了什么(没说全,讲了一下对比和&nbsp;mount&nbsp;和&nbsp;patch,其实就相当于把&nbsp;vue&nbsp;渲染讲一遍)-&nbsp;如果我想在&nbsp;react&nbsp;组件内用&nbsp;vue,vue&nbsp;组件内继续套&nbsp;react,我该怎么办(编译器做一个类似&nbsp;rust&nbsp;的宏展开自动注入&nbsp;render&nbsp;code)-&nbsp;还有可以扯的吗(astro&nbsp;wasm&nbsp;组件编译,content&nbsp;layer&nbsp;api,SSR&nbsp;编译&nbsp;mdx&nbsp;可以实现运行时无编译开销;选择&nbsp;jsx&nbsp;作为通用组件的原因)-&nbsp;反问-&nbsp;技术栈(js&nbsp;ts&nbsp;rust&nbsp;c++)-&nbsp;业务还是基建(基建)-&nbsp;期望实习时长-&nbsp;大概还有几轮(一般三轮)-&nbsp;关于微信游戏二面面评(每个面试官都有自己的看法)-&nbsp;需要改进的地方当时开始做题的时候我还没有意识到事情的严重性,还跟群友聊了一下说怎么一上来就做题,随后一顿拷打让我知道自己是多渺小了。八股复盘的时候感觉自己就是个超级大笨蛋,说不定面试官都躲在屏幕后面笑,说这小孩子想象力还挺丰富的面完这两个半小时人都虚脱了,在会议室里面跟群友汇报完后缓了好久才走出会议室,刚好实验室外面刚刚结束24届大一同学面试。后端的一哥们说想转前端了,于是就把前端在场的同学一起叫了过来,聊了一下他们的学习进度,并针对他们现场确定了一下学习路线,最需要关注的内容和接下来该做的事情以及未来要如何发展,全部聊完后也都晚上&nbsp;11:10&nbsp;了,于是听着私宅特有的歌冲回了宿舍。实验室真的跟家一样,我可以说实验室和简历的项目几乎就是我大学的全部了,没有这两样我也走不到今天这一步
投递腾讯等公司10个岗位
点赞 评论 收藏
分享
评论
31
276
分享

创作者周榜

更多
牛客网
牛客企业服务