WEB开发路线图
图出自Github的developer-roadmap项目，star数为113K

序言

web开发路线图 - 图1
说明：
l Git版本控制（Git-Version Control）
https://git-scm.com/doc
熟练使用git，（如果只是做版本控制的话类似于SVN，虽有不同，但使用上差距不太大。）

l 基本终端机使用（Basic Terminal Usage）
https://devblogs.microsoft.com/commandline/windows-terminal-1-0/
熟悉基本的terminal的使用（比如mkdir、cd等基本命令、或者npm、node、svn等等应用命令）

l 资料结构和演算法(Data Structures & Algorithms)
数据结构（数组、栈、队列、链表、树、图、堆、散列表），算法，常用目的：检索、插入、删除、更新、排序

l SOLID、KISS、YANGI（最新的已删除）
SOLID解读
https://blog.csdn.net/houzhizhen/article/details/79993880
l 单一职责原则（SRP）表明一个类有且只有一个职责.
l 开放封闭原则（OCP）, 一个类应该对扩展开放，对修改关闭
l 里氏替换原则（LSP）,派生的子类应该是可替换基类的，也就是说任何基类可以出现的地方，子类一定可以出现
l 接口隔离原则（ISP）,类不应该被迫依赖他们不使用的方法，也就是说一个接口应该拥有尽可能少的行为，它是精简的，也是单一的
l 依赖倒置原则（DIP）, 高层模块不应该依赖低层模块，相反，他们应该依赖抽象类或者接口
l 授权条款（License）
https://www.cnblogs.com/zhw511006/archive/2012/12/09/2810070.html
软件的授权许可，里面详尽表述了你获得代码后拥有的权利，可以对别人的作品进行何种操作，何种操作又是被禁止的。软件协议可分为开源和商业。当然本文要讨论的当然是开源协议。
l 语义化版本（Semantic Versioning）：一个版本号的标准
简单来说就是 X.Y.Z (均为非负整数)
n 主版本号(X)：每当进行非向下兼容的修改或者颠覆性的更新时，主版本号加1。
n 次版本号(Y)：每当进行向下兼容的修改或者添加兼容性的新功能时，次版本号加1。
n 补丁号(Z)：没有新功能的引入，仅仅是打一些兼容性补丁，做一些兼容性修复时，补丁号加1。
l SSH（Secure Shell）
http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html
SSH 是较可靠，专为远程登录会话和其他网络服务提供安全性的协议。利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。
l HTTP（S）和APIs
熟悉http（s）协议，知道应用程序接口（API）。
l 设计模式（Design Patterns）
设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
l 字符编码(Character Encoding)
http://cenalulu.github.io/linux/character-encoding/
也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），以便文本在计算机中存储和通过通信网络的传递.常用字符集（ASCII、MBCS、GB2312、GBK、Big5、Unicode、UTF-8、Base64）

前端

web开发路线图 - 图2

互联网

l 互联网如何工作的
https://developer.mozilla.org/zh-CN/docs/learn/How_the_Internet_works
l 什么是HTTP
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
l 浏览器及其运行机制
https://www.cnblogs.com/mataoblogs/p/10706532.html
l DNS及其运行机制
l 什么是域名
https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name
l 什么是网站托管
https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines

HTML

l 学习HTML基础
https://developer.mozilla.org/zh-CN/docs/Web/HTML
l 书写语义化的HTML
l https://www.cnblogs.com/fliu/articles/5244866.html
l 表单和验证
n 表单
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form
n 验证
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Data_form_validation
l 惯例和最佳实践
l 可访问性
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
l 搜索引擎优化基础（SEO）
https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/3132?fromtitle=seo&fromid=102990&fr=aladdin

CSS

l 学习CSS基础
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks
l 布局
n 浮动
https://www.w3school.com.cn/css/css_positioning_floating.asp
n 定位
https://www.w3school.com.cn/css/css_positioning.asp
n 显示
https://www.runoob.com/css/css-display-visibility.html
n 盒模型
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
n 网格布局
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
n 弹性布局
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

JavaScript

l 语法和基础结构
https://www.w3school.com.cn/js/index.asp
l 学习dom操作
https://www.w3school.com.cn/js/js_htmldom.asp
l 学习Fetch API/AJAX(XHR)
https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
l Es6+和模块化javascript
https://es6.ruanyifeng.com/
l 学习一些概念
u 变量提升
https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting
u 事件冒泡
https://blog.csdn.net/chenjuan1993/article/details/81347590
u 作用域
https://www.cnblogs.com/leftJS/p/11067908.html
u 原型
https://www.cnblogs.com/jianghao233/p/8983176.html
u Shadow DOM
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/%E5%BD%B1%E5%AD%90_DOM
u 严格模式
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

版本控制系统

l Git基本操作
https://www.runoob.com/manual/git-guide/
l 仓库托管服务
u GitHub
https://github.com/

Web安全知识

l HTTPS
HTTPS （安全的HTTP）是 HTTP 协议的加密版本。它通常使用 SSL 或者 TLS 来加密客户端和服务器之间所有的通信。这安全的链接允许客户端与服务器安全地交换敏感的数据，例如网上银行或者在线商城等涉及金钱的操作。
l 跨域资源共享（CORS）
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
l 内容安全策略（CSP）
https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP/Introducing_Content_Security_Policy
l OWASP安全风险
OWASP是站在攻击者的角度，思考当今攻击者针对Web应用软件漏洞采取的最常用攻击方式，从而提高开发者对应用安全的关注度
https://www.cnblogs.com/LuckyEnterprise/p/11519158.html