路线图

1.计算机网络如何运行

互联网采取client-server结构，client就是你的浏览器，server存储所有的文件。

cs架构

http/https

超文本传输协议，网络传输数据。

安全的http，需要来自第三方供应商的安全证书来保护连接并验证该站点是否安全。此安全证书称为SSL（安全套接字层）

dnshosting浏览器域名2.你应该知道的web开发者基本工具2.1终端

在基于macOS和Linux的计算机上，自带bash终端。

Windows操作系统，可以访问通过WSL2（适用于Windows的Linux子系统）在UNIX的工作空间中使用WSL2。

bashzshgit bash2.2设计figma（推荐）adobe xd2.3浏览器chrome（dev tools）2.4文本编辑器

在熟练使用其中一种编辑器功能之前，不使用其它的。

vscode（推荐）atomsublime text3.html最佳实践seo语义 html表单与验证4.css4.1css基础css grid

布局，包括位置，尺寸，对齐。

flexbox

css3中的布局模式。

自定义属性

css变量，自定义实体。

4.2现代csscss模块样式化组件（styled components）

高级

4.3css框架Tailwind cssbootstrap4.4响应式设计

不同屏幕尺寸的适配

viewport

视口。移动设备出现后的概念。网页不再是固定大小。

rem units

根据W3C规范，rems单位是根元素上font-size的计算值，在根元素的font-size属性中指定时，rem单位是指属性的初始值。

css媒体查询（media queries）

在浏览器和设备环境与您可以指定的规则匹配时才应用CSS的方法

4.5css 预处理sass（推荐）postcss（简单易扩展）4.6动画普通动画（plain css）gsap

适合初学者。应用于web程序和游戏。

anime.js

选择你的栈

5.前端5.1学习JavaScript基本语法fetch apijsones6/es7typescript5.2JavaScript栈5.2.1推荐工具gitgithubnpm scriptprettiereslintaxiosvscode插件浏览器开发者工具5.2.2包管理npm*yarm5.2.3模块打包webpackparcelrollup

5.2.4前端框架5.2.5pwa5.3前端框架5.3.1react

灵活

5.3.2vue

简单，灵活

5.3.3angular5.3.4状态管理react：redux，context apivue：vuexangular：services5.3.5ssr-服务端渲染vue：nuxt.jsreact：next.js5.3.6静态网站生成器vue：gridsome，nuxt.jsreact：gatsby，next.js6.后端6.1后端框架node.js(javascript)deno(js)flask(pthon)

wsgi框架

django(python)

全栈web框架

6.2数据库6.2.1关系型mysqlpostgresql6.2.2nosql/云数据库mongodb（推荐）aws（易于扩展）firebase（小型项目绝佳选择）6.3APIs6.3.1授权authenticationoauthjwt（JavaScript Web令牌）6.3.2providersauth0firebase6.4CMS(内容管理系统)6.4.1传统wordpressdrupal6.4.2无头netlify cmsstraplprismicstoryblok6.5部署6.5.1需要学习的概念负载平衡（load balancing）github actionsssh监控monitoring安全securityssl证书6.5.2无服务器（serveless/FaaS）aws lambdanetlify6.5.3web服务器apachenginx6.5.4hosting（网站托管，主机空间，虚拟主机服务）静态：netlify，github pagesherokuawsazurelinode6.5.5测试单元测试集成测试功能测试6.5.6虚拟化dockerKubernetes

参考