Front End Roadmap

[goldstine]

https://goldstine.github.io/Front-End-RoadMap/

第一阶段-前端基本功

html:

html元素和属性，html表单和图形处理，html媒体和最佳实践

css:

css基本语法和选择器，
css背景，文本，边框，轮廓与颜色
css列表，表单与表格样式
css样式层叠与继承
css盒模型，定位，浮动和显示属性
css渐变，阴影与滤镜
css变换，过渡与动画
web字体与多列布局

页面制作工具

vscode photoshop markman pxcook 蓝湖 sketch axure

第二阶段-布局技术、布局规范与方案

布局技术：

包含了BFC、IFC、GFC、FFC、Flex弹性布局、网格布局、媒体查询、viewport、remvw、 dpr与ppi、

布局规范与方案：

PC端网站布局规范，响应式布局、移动端设备适配最佳实践、流式布局 (100%布局)等小点

第三阶段-JavaScript

原生JavaScript交互功能开发

基本语法，流程控制语句，函数与数组，String与Date,BOM与DOM,拖拽效果，客户端存储（Cookie存储与WebStorage）,正则表达式，Ajax,面向对象基础，运动与游戏开发，数据结构与算法

原生JS经典特效开发

时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，弹出层特效，倒计时特效，抽奖特效

面向对象进阶与ES应用

Promise async/await语法 try/catch语法 原型链 构造函数 执行上下文栈与上下文 作用域链 闭包 this ES5-ES12 设计模式

JS工具库自主研发

DOM库 事件库 AJAX库 原型和继承库 MVVM核心库 基于SPA的路由库

第四阶段-全栈项目

PC端网站开发


Nodejs 服务端开发

Node基础 EXpress框架基础 中间件开发 MVC开发模式 基于Express的后端路由 MongoDB数据库基本使用 基于Token登陆状态保持 NodeJS的EventLoop 文件上传（单文件/多文件） 模板引擎 静态资源加载 服务端渲染页面

前端工程化与模块化

Linux Less/Sass NPM Git AMD/CMD/UMD ES6模块化

前端工具库

Animate CSS VanillaJS Lodash Swiper axios Moment.js Eslint/prettier ECharts JQuery

第五阶段-大前端

Angular


React


Vue


Web3 ：web3生态概念  Solidity智能合约  Web3.js for DAPP上以太坊…

第六阶段-进阶

PWA技术：PWA项目实战


Electron技术：

Electron入门 Electron调试技巧 Electron主进程与渲染进程API Electron与React,Vue集成 构建Windows,Mac Linux跨平台应用

微信公众号

微信内置公众号定制 JSSDK接入 公众号常见功能开发

微信小程序

微信小程序基础 小程序高级应用 原生多端小程序开发 Uni-app多端小程序框架 Taro多端小程序框架

第七阶段-原生应用开发技术

React-Native

RN 环境搭建；RN基础组件 ；RN动画与手势 ；Expo基础 ；RN+Expo调用硬件设备

Flutter

Flutter环境搭建 界面构建与基础部件 布局与表单 Dart语法 Widgets容器 网络请求与路由

HarmonyOS鸿蒙开发

认识鸿蒙，框架基础 内置组件 自定义组件 接口

第八阶段-大前端架构

开发工具及服务器技术

Webpack5 Vite2 EsLint与单元测试 TypeScript Nginx Docker Serverless WebAssembly技术

前端性能

SSR技术 Nuxt.js服务端渲染 Next,js服务端渲染 SEO优化

微前端

Webpack+Vue+React微前端实践

低代码组件库

低代码平台搭建 Vue/React/小程序的UI组件库开发

安全

前端攻击 前端异常监控