前端学习路线(2023版)超详细

article/2025/11/11 7:15:42

在这里插入图片描述
一:前端开发基本功
俗话说的好“不积跬步,无以至千里”,学习也是一样的从简单的基础的知识点开始慢慢积累,首先就是掌握前端语言的基础知识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个阶段,希望上面的路线可以对不管是自学还是正在培训的小伙伴有帮助,喜欢的话点个关注!!!最后送上一张完整的前端学习路线图由于限制是5M,如果看不清可以联系我。
在这里插入图片描述


http://chatgpt.dhexx.cn/article/LgGI5Fj9.shtml

相关文章

2023版完整版web前端学习路线图(超详细自学路线)

跟着路线图认真坚持学习从前端小白到大神不是梦,0基础看这一篇足矣! 学们记得加关注点赞收藏,自学路上不迷糊! 零基础小白自学前端路线图速览: 阶段一:核心基础入门 前端计算机常识 ➾ htmlcss基础 ➾ h…

ionic4的ion-searchbar的setFocus()方法使用

使用场景: app的某个页面需要一个搜索功能:1. 点击搜索图标打开一个新的搜索页2. 加载页面的同时给搜索框设置焦点、触发键盘。(提升用户的体验,类似于微信的搜索功能操作)具体方法: 在对应的ts文件中引入…

setFocus不能生效的问题

focusInEvent只有在对象显示出来的情况下设定setFocus才可以触发。这一点help手册里有说明: 转一篇文章如下:http://blog.csdn.net/alex201030273437/article/details/8193757 focus问题曾经困扰了我一些时间。过程中也朋到了很多麻烦。现在总结一下&…

html 表单控件光标获取,4.4、表单插件,设置焦点,this.View.GetControl().SetFocus()

续 业务场景: 1、设置焦点,例如设置了必录项,没填,自动跳转到必录项上面,判断哪些值没有录入; 2、条码扫描,固定在一个焦点; 1、注释,上一节代码 2、//获取焦点,备注this…

主窗口给按钮控件发送消息 BN_CLICKED和BN_SETFOCUS和BN_KILLFOUCS

先说明一下,按钮控件的消息有很多种,下面的列表是按钮发送的消息,其中用的比较多是BN_CLICKED和BN_SETFOCUS和BN_KILLFOUCS /** User Button Notification Codes*/ #define BN_CLICKED 0 #define BN_PAINT 1 #define BN…

vba 判断文本框内容是否为空_VBA代码用SetFocus精确控制焦点事件

VBA++ 题记: 静下心,多学习有用的知识,多提高自己的水平和能力,这才是正道。时间就像一张网,你撒在哪里,你的收获就在哪里。谨记自己的方向,这是路之所在。适当节制自我的各种欲望,谁都逃不过时间的历练,谁都是命运的行者,谁都是在人生的道路上一步一趋。你要做的,是…

Qt setFocus无法生效问题

setFocus 无法生效的问题 官方文档说的很明白当前部件或者其父部件必须是active window. 所以 mywidget.activateWindow() mywidget.setFocus()但是有些时候这样也不会获得焦点,比如当自己内部需要setFocus的时候。可以通过focusOutEvent() or focusInEvent(&#x…

QLineEdit setFocus失效问题

QLineEdit setFocus失效问题 目标效果: 弹窗弹出后,弹窗上的输入框获得焦点,以便不必再点击输入框就可以直接输入。 但在我通过一些方式为这个弹窗添加了背景遮罩后,发现输入框没有自动获得焦点了。 最终解决方法 激活弹窗。添…

【Python】【setFocus】焦点

以此文为例子展示setFocus()的用法 1.无焦点 self.setFocus()#设置焦点,下文演示有无焦点的区别 2.焦点默认在文本框 #self.setFocus()#设置焦点,下文演示有无焦点的区别 3.设置输入焦点 在某一时刻,只有一个控件(或根本没有)可以获得输入…

解决Eclipse的Validating速度太慢的方法

以下操作对项目不会有影响,请放心操作。 第一步: 第二步:

在Eclipse里Validating非常缓慢

解决: 1.打开eclipse,点击【window】菜单,选择【preferences】选项 2.在左侧搜索【validation】,在右侧可以看到eclipse进行的自动检查都有哪些内容 3.将Manual(手动)保持不动,将build里面全部去…

亲测解决INFO Validating config

INFO Validating configFATAL YAMLException: duplicated mapping key at line 859, column -321: model: 把model项合并即可,注意你的报错可能块是不一样的。

MyEclipse的Validating速度太慢优化

最近在做项目的时候经常因为各种原因重启myeclipse,当重新打开后会发现一直在执行Validating,简直是龟速啊,后来在百度上看到这样的设置,虽然不知道这个是干什么的,但是修改了之后在此重启时确实变快了,也还…

HV000030: 使用@Size validating type ‘java.lang.Integer‘. Check configuration for ‘*‘ 及 Validated注解使用示例

javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint javax.validation.constraints.Size validating type java.lang.Integer. Check configuration for channel Size不支持数值类型校验,仅支持字符、集合、数组的长…

Eclipse Validating缓慢的优化

使用Eclipse的人基本都有这种情况,如图: 各种等待有木有,各种崩溃啊有木有,反正我是觉得挺烦的,但是也不知道是干嘛的,如果取消了,造成程序出问题,就是给自己找麻烦,我知…

Kubernetes ImagePolicyWebhook与ValidatingAdmissionWebhook【3】validating_admission.go源码解析

文章目录 1. 代码依赖2. handler的validating_admission.go2.1 metav1.status是什么?2.2 admissionReview.Response.Result是什么? 3. 总结 相关阅读: Kubernetes ImagePolicyWebhook与ValidatingAdmissionWebhook【1】动手实践感受区别所在…

Eclipse Validating的作用及优化

今天接手一个小项目,一切导入正常。可是右下角一直出现 28% Validating 项目名 ,如下所示 各种等待有木有,各种崩溃啊有木有,反正我是觉得挺烦的,但是也不知道是干嘛的,如果取消了,造成程序出问…

validating project时间过长,解决办法

validating project时间过长,解决办法 另外,可能有时项目怎么clean也还是原来的样子,可以在浏览器利用快捷键ctrlshiftdelete,清除缓存之后再试试。

解决No validator could be found for constraint ‘javax.validation.constraints.NotBlank‘ validating type

文章目录 1. 复现问题2. 分析问题3. 解决问题4. 重要补充5. 其他说明 1. 复现问题 今天在使用Knife4j调用后端接口,报出如下错误: javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint javax.validation.…

Kubernetes Admission Webhook Validating 与 mutating 实践

Kubernetes Admission Webhook Validating 与 mutating 实践 文章目录 Kubernetes Admission Webhook Validating 与 mutating 实践1. k8s 的配置2. 构建3. 部署服务4. 测试Validating webhook5. 测试 mutating webhook 1. k8s 的配置 启用 MutatingAdmissionWebhook 和 Valid…