前端学习路线(2023版)超详细(前端到底怎么学)
itomcoil 2025-01-26 22:46 29 浏览
一:前端开发基本功
俗话说的好“不积跬步,无以至千里”,学习也是一样的从简单的基础的知识点开始慢慢积累,首先就是掌握前端语言的基础知识3大部分(HTML、CSS、页面制作工具)其中包含了元素和属性、表单和图形处理、CSS基本语法与选择器、文本、边框、轮廓与颜色、SS列表、表单与表格样式、CSS样式层叠与继承、PhotoShop的使用和图片整合、markman、pxcook工具使用等等小点。
学习完获得初级Web前端工程师水平,熟悉前端开发的HTML与CSS基础知识。能够配合UI设计师进行项目开发。
可从事职位: 初级前端开发工程师、前端实习生
二:页面布局实战
这个阶段就是掌握2大部分(布局技术、布局规范与方案)其中包含了BFC、IFC、GFC、FFC、Flex弹性布局、网格布局、媒体查询、viewport、remvw、 dpr与ppi、PC端网站布局规范响应式布局、移动端设备适配最佳实践、流式布局 (100%布局)等小点。
学完获得初级Web前端工程师水平,能够完成各种PC端与移动端网页布局与样式设计实现。可以做各浏览器兼容与设备适配。
可从事岗位: 初级前端开发工程师、前端实习生
三:前端开发内功
这个阶段就是掌握4大部分(面向对象进阶与ES应用、原生JavaScript交互功能开发、JavaScript具库自主研发、原生JS经典交互特效开发)其中包含了Promise、async/await语法、try/catch 语法、原型链、基本语法、流程控制语句、函数与数组、String与Date、BOM与DOM、DOM库、事件库、原型和继承库等小点。
学完获得中级Web前端工程师水平,主要进行页面行为交互实现网站中常见交互特效。
可从事岗位: JavaScript开发工程师
四:PC端全栈项目开发
这个阶段就是掌握4大部分(前端工具库、前端工程化与模块化、Node.jS服务端开发、PC端网站开发)其中包含了Node 基础入门、Express 框架基础、中间件开发、MVC开发模式、基于Express的后端路由、Animate CSS、VanillaJs、Lodash、Swiper、axios、Moment.js等小点。
学完获得中级Web 前端工程师水平,并能配合 UI 和后台实现项目。
可从事职位: 网站开发工程师、Web前端开发工程师
五:前端高级框架技术
这个阶段就是掌握5大部分(React、Vue、全栈web3.0开发、数据可视化、Angular)其中包含了React 18、ReactRouter6、Umi技术、Vue3选项式API、Vue3组合式API、Vite2+SFC、VueRouter4、Vuex4、Angular脚手架与创建命令、TypeScript语法与修饰模式、Ng服务与依赖注入等小点。
学完获得高级Web前端工程师水平,主要进行前后端全栈开发。能够独立完成一个中小项目的前后台。对于Web开发有着非常熟练的编程能力.
可从事职位: 高级Web开发工程师
六:混合应用开发技术
这个阶段就是掌握4大部分(微信小程序、微信公众号、Electron技术、PWA技术)其中包含了微信内置公众号定制、JSSDK接入、公众号常见功能开发、微信小程序基础、小程序高级应用、原生多端小程序开发、Electron入门、Electron 调试技巧、Electron主进程与渲染进程API等小点。
获得高级Web前端工程师水平,主要进行混合式App项目开发。能够实现多端开发并拥有多端开发能力,整合资源,实现跨平台跨设备的架构能力
可从事岗位: 混合APP开发工程师/小程序开发工程师/高级Web前端开发工程师/Electron开发工程师
七:原生应用开发技术
这个阶段就是掌握3大部分(ReactNative、Flutter、HarmonyOS鸿蒙开发)其中包含了Flutter环境搭建、界面结构与基础部件、布局与表单、RN环境搭建、RN基础组件、RN动画和手势、框架基础、内置组件、自定义组件等小点。
获得大前端高级开发工程师水平,主要涉猎原生APP开发。主导移动端多元产品项目实现。能够跨平台开发提出可建设性解决方案。
可从事岗位: 大前端高级开发工程师
八:大前端架构
这个阶段就是掌握5大部分(开发工具及服务器技术、前端性能、微前端架构、低代码与组件库开发、安全)其中包含了Webpack5、Vite2、Git工具及GitHub/Gitee、ESLint与单元测试、SSR技术、Nuxt.js 服务器端渲染、Next.js 服务器端渲染、基于Webpack+Vue+React微前端实战等小点。
获得大前端架构师水平,主要进行前端项目架构和项目把控。能够解决网站出现的突发状况,能够改进网站性能到极致。拥有大型网站、大量高并发访问量等开发经验。
可从事岗位: 大前端架构师/资深前端开发工程师
以上就是前端学习的8个阶段,希望上面的路线可以对不管是自学还是正在培训的小伙伴有帮助,喜欢的话点个关注!!!最后送上一张完整的前端学习路线图由于限制,如果看不清可以联系我。
相关推荐
- selenium(WEB自动化工具)
-
定义解释Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7,8,9,10,11),MozillaF...
- 开发利器丨如何使用ELK设计微服务中的日志收集方案?
-
【摘要】微服务各个组件的相关实践会涉及到工具,本文将会介绍微服务日常开发的一些利器,这些工具帮助我们构建更加健壮的微服务系统,并帮助排查解决微服务系统中的问题与性能瓶颈等。我们将重点介绍微服务架构中...
- 高并发系统设计:应对每秒数万QPS的架构策略
-
当面试官问及"如何应对每秒几万QPS(QueriesPerSecond)"时,大概率是想知道你对高并发系统设计的理解有多少。本文将深入探讨从基础设施到应用层面的解决方案。01、理解...
- 2025 年每个 JavaScript 开发者都应该了解的功能
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.Iteratorhelpers开发者...
- JavaScript Array 对象
-
Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...
- Gemini 2.5编程全球霸榜,谷歌重回AI王座,神秘模型曝光,奥特曼迎战
-
刚刚,Gemini2.5Pro编程登顶,6美元性价比碾压Claude3.7Sonnet。不仅如此,谷歌还暗藏着更强的编程模型Dragontail,这次是要彻底翻盘了。谷歌,彻底打了一场漂亮的翻...
- 动力节点最新JavaScript教程(高级篇),深入学习JavaScript
-
JavaScript是一种运行在浏览器中的解释型编程语言,它的解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript广泛用于浏览器客户端编程,通常JavaScript脚本是通过嵌...
- 一文看懂Kiro,其 Spec工作流秒杀Cursor,可移植至Claude Code
-
当Cursor的“即兴编程”开始拖累项目质量,AWS新晋IDEKiro以Spec工作流打出“先规范后编码”的系统工程思维:需求-设计-任务三件套一次生成,文档与代码同步落地,复杂项目不...
- 「晚安·好梦」努力只能及格,拼命才能优秀
-
欢迎光临,浏览之前点击上面的音乐放松一下心情吧!喜欢的话给小编一个关注呀!Effortscanonlypass,anddesperatelycanbeexcellent.努力只能及格...
- JavaScript 中 some 与 every 方法的区别是什么?
-
大家好,很高兴又见面了,我是姜茶的编程笔记,我们一起学习前端相关领域技术,共同进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力在JavaScript中,Array.protot...
- 10个高效的Python爬虫框架,你用过几个?
-
小型爬虫需求,requests库+bs4库就能解决;大型爬虫数据,尤其涉及异步抓取、内容管理及后续扩展等功能时,就需要用到爬虫框架了。下面介绍了10个爬虫框架,大家可以学习使用!1.Scrapysc...
- 12个高效的Python爬虫框架,你用过几个?
-
实现爬虫技术的编程环境有很多种,Java、Python、C++等都可以用来爬虫。但很多人选择Python来写爬虫,为什么呢?因为Python确实很适合做爬虫,丰富的第三方库十分强大,简单几行代码便可实...
- pip3 install pyspider报错问题解决
-
运行如下命令报错:>>>pip3installpyspider观察上面的报错问题,需要安装pycurl。是到这个网址:http://www.lfd.uci.edu/~gohlke...
- PySpider框架的使用
-
PysiderPysider是一个国人用Python编写的、带有强大的WebUI的网络爬虫系统,它支持多种数据库、任务监控、项目管理、结果查看、URL去重等强大的功能。安装pip3inst...
- 「机器学习」神经网络的激活函数、并通过python实现激活函数
-
神经网络的激活函数、并通过python实现whatis激活函数感知机的网络结构如下:左图中,偏置b没有被画出来,如果要表示出b,可以像右图那样做。用数学式来表示感知机:上面这个数学式子可以被改写:...
- 一周热门
- 最近发表
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)