如何一步步成为一名现代前端？

以下归纳总结来源于：roadmap  黑色为必备，灰色非必备知识

Internet

• internel 是怎样工作的？
• 什么是 HTTP ?
• 浏览器是怎样工作的？
• DNS 是怎样工作的？
• 什么是域名？
• 什么是主机名？

HTML

• 学习基础
• 表单及表单验证
• 惯例和最佳做法
• 语义化HTML 直达
• SEO 基础 直达

CSS

• 学习基础
• 形成布局
  • Floats
  • Positioning
  • Display
  • Box Model
  • CSS Grid
  • Flex Box
• 响应式布局和媒体查询

JavaScript

• 语法和基本架构
• DOM 操作
• 请求接口
• ES6+ 和 模块化 JavaScript
• 理解变量提升、事件冒泡 、作用域、原型对象、Shadow DOM、严格模式的概念

版本控制系统

• Git 基础
• Github

WEB 安全知识

• HTTPS
• CORS
• 内容安全策略
• OWASP 安全风险

包管理工具

• npm
• yarn

CSS 预处理器

• Sass
• Less

打包工具

• npm scripts
• Gulp 直达
• Webpack
• Rollup 直达

框架

• React.js
  • Redux
• Angular 直达
  • RxJS
  • NgRx
• Vue.js 直达
  • Vuex

现代化 CSS

• 样式组件
• CSS 组件
• Styled JSX
• Emotion

CSS 框架

• Reactstrap
• Material UI
• Bootstrap
• Tailwind CSS 直达

测试你的应用

• Jest
• react-testing-library
• Cypress
• Enzyme

类型检查

• TypeScript

服务端渲染 SSR

• React.js —— Next.js
• Angular —— Universal
• Vue.js —— Nuxt.js 直达

GraphQL

• Apollo

移动端应用

• React Native
• Flutter 直达
• NativeScript

桌面端应用

• Electron

Keep Learning...