前端学习路线(2023版)超详细(前端到底怎么学)
itomcoil 2025-01-26 22:46 22 浏览
一:前端开发基本功
俗话说的好“不积跬步,无以至千里”,学习也是一样的从简单的基础的知识点开始慢慢积累,首先就是掌握前端语言的基础知识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个阶段,希望上面的路线可以对不管是自学还是正在培训的小伙伴有帮助,喜欢的话点个关注!!!最后送上一张完整的前端学习路线图由于限制,如果看不清可以联系我。
相关推荐
- Python Qt GUI设计:将UI文件转换Python文件三种妙招(基础篇—2)
-
在开始本文之前提醒各位朋友,Python记得安装PyQt5库文件,Python语言功能很强,但是Python自带的GUI开发库Tkinter功能很弱,难以开发出专业的GUI。好在Python语言的开放...
- Connect 2.0来了,还有Nuke和Maya新集成
-
ftrackConnect2.0现在可以下载了--重新设计的桌面应用程序,使用户能够将ftrackStudio与创意应用程序集成,发布资产等。这个新版本的发布中还有两个Nuke和Maya新集成,...
- Magicgui:不会GUI编程也能轻松构建Python GUI应用
-
什么是MagicguiMagicgui是一个Python库,它允许开发者仅凭简单的类型注解就能快速构建图形用户界面(GUI)应用程序。这个库基于Napari项目,利用了Python的强大类型系统,使得...
- Python入坑系列:桌面GUI开发之Pyside6
-
阅读本章之后,你可以掌握这些内容:Pyside6的SignalsandSlots、Envents的作用,如何使用?PySide6的Window、DialogsandAlerts、Widgets...
- Python入坑系列-一起认识Pyside6 designer可拖拽桌面GUI
-
通过本文章,你可以了解一下内容:如何安装和使用Pyside6designerdesigner有哪些的特性通过designer如何转成python代码以前以为Pyside6designer需要在下载...
- pyside2的基础界面(pyside2显示图片)
-
今天我们来学习pyside2的基础界面没有安装过pyside2的小伙伴可以看主页代码效果...
- Python GUI开发:打包PySide2应用(python 打包pyc)
-
之前的文章我们介绍了怎么使用PySide2来开发一个简单PythonGUI应用。这次我们来将上次完成的代码打包。我们使用pyinstaller。注意,pyinstaller默认会将所有安装的pack...
- 使用PySide2做窗体,到底是怎么个事?看这个能不能搞懂
-
PySide2是Qt框架的Python绑定,允许你使用Python创建功能强大的跨平台GUI应用程序。PySide2的基本使用方法:安装PySide2pipinstallPy...
- pycharm中conda解释器无法配置(pycharm安装的解释器不能用)
-
之前用的好好的pycharm正常配置解释器突然不能用了?可以显示有这个环境然后确认后可以conda正在配置解释器,但是进度条结束后还是不成功!!试过了pycharm重启,pycharm重装,anaco...
- Conda使用指南:从基础操作到Llama-Factory大模型微调环境搭建
-
Conda虚拟环境在Linux下的全面使用指南:从基础操作到Llama-Factory大模型微调环境搭建在当今的AI开发与数据分析领域,conda虚拟环境已成为Linux系统下管理项目依赖的标配工具。...
- Python操作系统资源管理与监控(python调用资源管理器)
-
在现代计算环境中,对操作系统资源的有效管理和监控是确保应用程序性能和系统稳定性的关键。Python凭借其丰富的标准库和第三方扩展,提供了强大的工具来实现这一目标。本文将探讨Python在操作系统资源管...
- 本地部署开源版Manus+DeepSeek创建自己的AI智能体
-
1、下载安装Anaconda,设置conda环境变量,并使用conda创建python3.12虚拟环境。2、从OpenManus仓库下载代码,并安装需要的依赖。3、使用Ollama加载本地DeepSe...
- 一文教会你,搭建AI模型训练与微调环境,包学会的!
-
一、硬件要求显卡配置:需要Nvidia显卡,至少配备8G显存,且专用显存与共享显存之和需大于20G。二、环境搭建步骤1.设置文件存储路径非系统盘存储:建议将非安装版的环境文件均存放在非系统盘(如E盘...
- 使用scikit-learn为PyTorch 模型进行超参数网格搜索
-
scikit-learn是Python中最好的机器学习库,而PyTorch又为我们构建模型提供了方便的操作,能否将它们的优点整合起来呢?在本文中,我们将介绍如何使用scikit-learn中的网格搜...
- 如何Keras自动编码器给极端罕见事件分类
-
全文共7940字,预计学习时长30分钟或更长本文将以一家造纸厂的生产为例,介绍如何使用自动编码器构建罕见事件分类器。现实生活中罕见事件的数据集:背景1.什么是极端罕见事件?在罕见事件问题中,数据集是...
- 一周热门
- 最近发表
-
- Python Qt GUI设计:将UI文件转换Python文件三种妙招(基础篇—2)
- Connect 2.0来了,还有Nuke和Maya新集成
- Magicgui:不会GUI编程也能轻松构建Python GUI应用
- Python入坑系列:桌面GUI开发之Pyside6
- Python入坑系列-一起认识Pyside6 designer可拖拽桌面GUI
- pyside2的基础界面(pyside2显示图片)
- Python GUI开发:打包PySide2应用(python 打包pyc)
- 使用PySide2做窗体,到底是怎么个事?看这个能不能搞懂
- pycharm中conda解释器无法配置(pycharm安装的解释器不能用)
- Conda使用指南:从基础操作到Llama-Factory大模型微调环境搭建
- 标签列表
-
- 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)