即刻App年轻人的同好社区
下载
这是根据我自己的经验总结的一条web编程自学路线，如果你是编程小白，并且对web编程感兴趣，可以参考。
我的自学经历写在这个帖子里，回头可以看看：web.okjike.com
在开始之前，我需要声明几点：
1. 这个路线根据我的自学经历总结得出，可能不是最科学的一条路，也存在很多遗漏。
2. 它能帮你入门web编程，但不足以转码。
3. web前端有“技术娱乐圈”之称，门类繁杂，流派众多，我的技术选型仅代表个人喜好。
4. 我自知技术很菜，但仍然希望尽绵薄之力帮助萌新，帮大家避开我走过的弯路，有不足的地方还希望各位多多包涵。
⭐️ web编程的基础
所有web编程归根结底都是HTML、CSS、JavaScript这三种技术整的活，只要会用（不需要精通）这三种技术，知道它们的职责和用法，就可以算是入门了。
⭕️ HTML
HTML是超文本标记语言，负责搭建网页的框架。HTML的核心是标签，不同的标签代表不同的页面元素，比如标题、段落、图片、链接等等。学HTML其实就是记标签，写页面就是用标签搭积木，因为几乎没有逻辑，所以非常好学。
💡 不用死记硬背所有标签，掌握常用标签的用法即可，以后随用随查。
学习资源：
www.w3school.com.cn
developer.mozilla.org
这两个站既可以当做学习教程，也可以当参考手册随时查阅。
⭕️ CSS
使用HTML制作的网页就像产品经理画的原型图（甚至还不如），只提供了默认的外观，不好看。要使页面变得美观，就需要用到CSS。
CSS中文叫层叠样式表，和HTML配合使用，可以让页面变得更漂亮。学习CSS的核心是选择器和属性。例如我们想改变页面中某段文字的颜色，那么我们可以先使用选择器选中这个段落，然后修改这个段落的文本颜色属性来达到我们的目的。和HTML相比，CSS需要记的东西多了一些，但依旧主要考验记性，并不难。
💡 学习CSS有一点比较麻烦：你如果哪里写错了，只能看到页面出来的效果不符合预期，不会得到报错提示。你只能自己一点一点摸索排查，这个过程会比较耗时间。
💡 理解盒子模型，掌握flex和grid两种布局方式，再加上position属性和一些常规元素的属性就足以应对大部分需求了。
学习资源：
www.w3school.com.cn
developer.mozilla.org
和HTML一样，这两个站既是学习教程也是参考手册。
学完HTML和CSS之后，你已经有能力写静态网页了（没有复杂交互，内容固定不变的网页）。这时候你可以尝试做一个美美的个人主页练练手，放上你的照片、文字介绍和联系方式。但目前这个页面就像在网页上写死了一张图片，怎么说呢……有点“无聊”。
想让页面更“生动”？接下来我们开始JavaScript的学习。
⭕️ JavaScript
学习JavaScript，意味着你真正开始接触编程了。JavaScript（以下简称JS）是真正的编程语言，应用广泛，不仅能写前端页面，也能在服务端运行，是web编程的灵魂。另外，学习JS也非常“划算”，你甚至能仅用JS就搭建一个拥有前后端的完整web应用，可以说物超所值了。
这里我强烈推荐现代JavaScript教程(zh.javascript.info)，这是我看到过最好的中文JS在线入门教程。
这个教程分为三个部分，在第一部分——JavaScript编程语言中，你会学习到JS的基础概念。
在之前学习HTML和CSS的时候，你所经历的是渐进式的积累过程。每新学一个标签，你立即就能用上。但学习JS的情况与之前大不相同。当你学习JS基础的时候，你肯定会疑惑：这些数据类型、函数、对象啥的和我的页面有什么关系？这些东西有什么用？相信我，请一定要忍耐，坚持一下。尽管过程可能有点枯燥，但掌握这些JS基础概念对后面的学习至关重要。
总的来说，这部分内容学习难度不大，细嚼慢咽总能啃下来，但像“引用数据类型”、“原型”、“类”这些概念对初学者来说还是有点抽象，不容易理解。对此，我建议遵循“学习——理解——验证”的方法来掌握每个知识点。
以引用数据类型为例。在数据类型这一节，我们会学到：”引用数据类型的值不存储在变量中，而是存储在堆内存中。变量存储指向该值的引用。这意味着多个变量可以引用同一个值。如果更改引用值，所有引用该值的变量都会受到影响。“是不是有点抽象？没关系，我们可以先试着琢磨出一个自己的理解，无论对错。对此，我的理解是这样的：变量存储的是引用地址，这个地址指向实际的值，因此任何持有这个引用地址的变量都能访问到同一个实际值。接下来我们用数组（属于引用数据类型）来验证这个理解是否正确。
-----------
//变量a存储了一个数组的引用
let a = [1,2];
//把变量a赋值给变量b，按理说这时a和b应该都指向同一个数组
let b = a;
//给a增加一个元素
a.push(3);
//b会跟着变吗？
alert(b);
-----------
输出结果是[1,2,3]，我明明修改的是a，b却也跟着变了，这就说明了a和b都指向同一个数组！ a和b保存的是数组的引用地址，顺着引用地址，他俩访问的是同一个数组。我的理解正确！
以上就是“学习——理解——验证”的大致流程。当然，大多数时候这个过程不会这么顺利，你可能需要一遍又一遍地去理解和验证，但这个过程会帮你加深对JS基础知识的理解，长远来看事半功倍。
当你结束第一部分的学习，进入第二部分——浏览器：文档，事件，接口的时候，你会惊喜地发现，一切豁然开朗。
在这一部分，你将学到怎么用JS去控制页面以及如何和浏览器进行交互。至此，JS将和之前学过的HTML及CSS融汇贯通，真正成为你手中的一件神兵利器。不同于第一部分对基础概念的死缠烂打，第二部分更偏重实际运用，因此，在这部分的学习中，你可能会感到之前渐进式的感觉又回来了，学起来轻松不少。
对于第二部分，我的学习建议是多折腾。你可以用浏览器打开任意网站，在控制台中使用JS操作DOM，尽情试验你学到的各种招数。虽然目前的JS应用场景已经非常广泛，但操作DOM和BOM算是JS的传统艺能，非常值得一学。
现在，完成第一、二部分学习的你应该算是真正入门web编程了，你可以试着为你之前的个人主页添加更多交互和动态内容。至于教程的第三部分，从名字看就不太重要——其他文章——有空再看就行了。
如果你学习现代JavaScript教程感到吃力，这里还有另一条学习JS的路径——跟着《JavaScript高级程序设计（第3版）》学习。虽然书名中有“高级”二字，但这本书非常适合初学者入门，很多晦涩难懂的概念在作者细致的讲解和大量示例的解释下变得浅显易懂了。以我的经验，这本书的学习难度比现代JavaScript教程更低，但这本书出版于2012年，部分内容已经过时（基于ES5版本，也能用，只是没那么“先进”），你需要搭配ES6 教程(wangdoc.com)（在ES5的基础上新增了一些语法和特性）学习才能跟上最新的JS版本，而这意味着需要更多的时间。
⭐️ web编程的基础之上…
虽然HTML+CSS+JS足以让你开发出web应用，但现代web编程早已不再这么“单纯”了，在这些基础之上，现代web编程技术已经盖起了万丈高楼。不过一点儿也不用担心，你手中已经掌握的知识足以支撑你继续学习绝大部分的“高级”技术，你已经站上了巨人的肩膀。
接下来，你可以“随心所欲”地学习你感兴趣或是需要的技术，迎来美妙的“技术爆炸”时期。
绝大部分“高级”技术的存在是为了更有效率地解决某些特定问题，你不必对它们心存畏惧，因为你的付出往往会带来成倍的收益，况且凭你现在的基础，靠自己绝对能学会。以下是一些可以继续学习的方向，供参考：
⭕️ 后端开发
即使你不打算开发后端，你也应该首先了解一下Node.js，因为它已经成为了现代web开发的基础设施。Node.js 是一個跨平台 JavaScript 运行环境，让JS可以脱离浏览器单独运行，这极大拓展了JS的应用场景。无论今后学习哪个方向，你都不可避免地需要和node.js打交道。
除此之外，node.js还包含了包管理器npm，使用npm来起手项目、管理依赖已经成为了前端开发的标准之一。
node.js官网(nodejs.org)
如果你打算深入后端开发，比如开发API接口实现前后端通信，你可以从下面这些框架入手学习：
Express(expressjs.com)
koa(koajs.github.net.cn)
nestjs(nestjs.com)（这个有点难，但是功能强大）
⭕️ 开发网站
绝大部分现代网站的开发都使用了某些框架。这些框架提供了很多实用的开发工具，并且已经帮你处理好了大量的细枝末节，你只需专注功能开发即可，极大提升了开发效率。
对于希望进行网站开发的朋友，可以从以下框架中择一学习。需要说明的是，每个框架都拥有大量拥趸，关于哪个框架谁更好的口水战由来已久，我们初学者大可不必太在意。
VUE(cn.vuejs.org)——由国人大佬尤雨溪创建，现在已经成为广受欢迎的前端开发框架。中文文档支持很好，在中文互联网上也很容易找到学习资料。
React(react.dev)——可以说是全世界最流行的前端开发框架，由facebook技术团队开发并开源。
svelte(svelte.dev)——前端开发框架的后起之秀，社区支持和学习资料相对两个前辈少一些，但也是很有名的框架。列在这里是因为我最近比较喜欢用这个框架做东西。哈哈。
以上这几个框架都已经形成了各自的工具流（Nuxt、Next、sveltkit等等），在学习的过程中你将会慢慢接触到。
其实，网站开发是个笼统的概念，除了开发前端页面，还涉及到后端数据库、接口通信、上线部署等等环节，我也摸索了很久，后续再专门写帖子详述。
⭕️ 开发小程序
如果你想做小程序，我推荐你从微信小程序入手学习。第一是因为微信小程序文档非常完善，上手简单；其次是因为微信小程序可以说是小程序标杆，别家多多少少都有借鉴，会写微信小程序，其他家也不在话下。
微信小程序开发文档(developers.weixin.qq.com)
我不推荐一上来就学习类似uniapp这样的通用框架，先从原生小程序写起，等你熟练掌握小程序开发之后再考虑使用框架也不迟。
⭕️ 其他
如果你想写浏览器插件，可以看看chrome开发者中心(developer.chrome.com)，这里有你需要的一切。
JS还能用来写桌面客户端，有兴趣可以看看electron(www.electronjs.org)。
⭐️ 最后
受限于篇幅，文章中提到的很多东西只是点到即止，还有很多像TypeScript、tailwind、webpack这样比较重要的工具没有涉及，只能留待各位朋友自行探索。无论如何，web编程真的不难，不要被网上高深专业的文章劝退，万丈高楼平地起，只要愿意多折腾，遇到问题多查阅资料，多问问chatGPT，日拱一卒，断没有学不会的道理。
希望大家都能享受到编程的快乐和成就感。
我的自学经历写在这个帖子里，回头可以看看：web.okjike.com
在开始之前，我需要声明几点：
1. 这个路线根据我的自学经历总结得出，可能不是最科学的一条路，也存在很多遗漏。
2. 它能帮你入门web编程，但不足以转码。
3. web前端有“技术娱乐圈”之称，门类繁杂，流派众多，我的技术选型仅代表个人喜好。
4. 我自知技术很菜，但仍然希望尽绵薄之力帮助萌新，帮大家避开我走过的弯路，有不足的地方还希望各位多多包涵。
⭐️ web编程的基础
所有web编程归根结底都是HTML、CSS、JavaScript这三种技术整的活，只要会用（不需要精通）这三种技术，知道它们的职责和用法，就可以算是入门了。
⭕️ HTML
HTML是超文本标记语言，负责搭建网页的框架。HTML的核心是标签，不同的标签代表不同的页面元素，比如标题、段落、图片、链接等等。学HTML其实就是记标签，写页面就是用标签搭积木，因为几乎没有逻辑，所以非常好学。
💡 不用死记硬背所有标签，掌握常用标签的用法即可，以后随用随查。
学习资源：
www.w3school.com.cn
developer.mozilla.org
这两个站既可以当做学习教程，也可以当参考手册随时查阅。
⭕️ CSS
使用HTML制作的网页就像产品经理画的原型图（甚至还不如），只提供了默认的外观，不好看。要使页面变得美观，就需要用到CSS。
CSS中文叫层叠样式表，和HTML配合使用，可以让页面变得更漂亮。学习CSS的核心是选择器和属性。例如我们想改变页面中某段文字的颜色，那么我们可以先使用选择器选中这个段落，然后修改这个段落的文本颜色属性来达到我们的目的。和HTML相比，CSS需要记的东西多了一些，但依旧主要考验记性，并不难。
💡 学习CSS有一点比较麻烦：你如果哪里写错了，只能看到页面出来的效果不符合预期，不会得到报错提示。你只能自己一点一点摸索排查，这个过程会比较耗时间。
💡 理解盒子模型，掌握flex和grid两种布局方式，再加上position属性和一些常规元素的属性就足以应对大部分需求了。
学习资源：
www.w3school.com.cn
developer.mozilla.org
和HTML一样，这两个站既是学习教程也是参考手册。
学完HTML和CSS之后，你已经有能力写静态网页了（没有复杂交互，内容固定不变的网页）。这时候你可以尝试做一个美美的个人主页练练手，放上你的照片、文字介绍和联系方式。但目前这个页面就像在网页上写死了一张图片，怎么说呢……有点“无聊”。
想让页面更“生动”？接下来我们开始JavaScript的学习。
⭕️ JavaScript
学习JavaScript，意味着你真正开始接触编程了。JavaScript（以下简称JS）是真正的编程语言，应用广泛，不仅能写前端页面，也能在服务端运行，是web编程的灵魂。另外，学习JS也非常“划算”，你甚至能仅用JS就搭建一个拥有前后端的完整web应用，可以说物超所值了。
这里我强烈推荐现代JavaScript教程(zh.javascript.info)，这是我看到过最好的中文JS在线入门教程。
这个教程分为三个部分，在第一部分——JavaScript编程语言中，你会学习到JS的基础概念。
在之前学习HTML和CSS的时候，你所经历的是渐进式的积累过程。每新学一个标签，你立即就能用上。但学习JS的情况与之前大不相同。当你学习JS基础的时候，你肯定会疑惑：这些数据类型、函数、对象啥的和我的页面有什么关系？这些东西有什么用？相信我，请一定要忍耐，坚持一下。尽管过程可能有点枯燥，但掌握这些JS基础概念对后面的学习至关重要。
总的来说，这部分内容学习难度不大，细嚼慢咽总能啃下来，但像“引用数据类型”、“原型”、“类”这些概念对初学者来说还是有点抽象，不容易理解。对此，我建议遵循“学习——理解——验证”的方法来掌握每个知识点。
以引用数据类型为例。在数据类型这一节，我们会学到：”引用数据类型的值不存储在变量中，而是存储在堆内存中。变量存储指向该值的引用。这意味着多个变量可以引用同一个值。如果更改引用值，所有引用该值的变量都会受到影响。“是不是有点抽象？没关系，我们可以先试着琢磨出一个自己的理解，无论对错。对此，我的理解是这样的：变量存储的是引用地址，这个地址指向实际的值，因此任何持有这个引用地址的变量都能访问到同一个实际值。接下来我们用数组（属于引用数据类型）来验证这个理解是否正确。
-----------
//变量a存储了一个数组的引用
let a = [1,2];
//把变量a赋值给变量b，按理说这时a和b应该都指向同一个数组
let b = a;
//给a增加一个元素
a.push(3);
//b会跟着变吗？
alert(b);
-----------
输出结果是[1,2,3]，我明明修改的是a，b却也跟着变了，这就说明了a和b都指向同一个数组！ a和b保存的是数组的引用地址，顺着引用地址，他俩访问的是同一个数组。我的理解正确！
以上就是“学习——理解——验证”的大致流程。当然，大多数时候这个过程不会这么顺利，你可能需要一遍又一遍地去理解和验证，但这个过程会帮你加深对JS基础知识的理解，长远来看事半功倍。
当你结束第一部分的学习，进入第二部分——浏览器：文档，事件，接口的时候，你会惊喜地发现，一切豁然开朗。
在这一部分，你将学到怎么用JS去控制页面以及如何和浏览器进行交互。至此，JS将和之前学过的HTML及CSS融汇贯通，真正成为你手中的一件神兵利器。不同于第一部分对基础概念的死缠烂打，第二部分更偏重实际运用，因此，在这部分的学习中，你可能会感到之前渐进式的感觉又回来了，学起来轻松不少。
对于第二部分，我的学习建议是多折腾。你可以用浏览器打开任意网站，在控制台中使用JS操作DOM，尽情试验你学到的各种招数。虽然目前的JS应用场景已经非常广泛，但操作DOM和BOM算是JS的传统艺能，非常值得一学。
现在，完成第一、二部分学习的你应该算是真正入门web编程了，你可以试着为你之前的个人主页添加更多交互和动态内容。至于教程的第三部分，从名字看就不太重要——其他文章——有空再看就行了。
如果你学习现代JavaScript教程感到吃力，这里还有另一条学习JS的路径——跟着《JavaScript高级程序设计（第3版）》学习。虽然书名中有“高级”二字，但这本书非常适合初学者入门，很多晦涩难懂的概念在作者细致的讲解和大量示例的解释下变得浅显易懂了。以我的经验，这本书的学习难度比现代JavaScript教程更低，但这本书出版于2012年，部分内容已经过时（基于ES5版本，也能用，只是没那么“先进”），你需要搭配ES6 教程(wangdoc.com)（在ES5的基础上新增了一些语法和特性）学习才能跟上最新的JS版本，而这意味着需要更多的时间。
⭐️ web编程的基础之上…
虽然HTML+CSS+JS足以让你开发出web应用，但现代web编程早已不再这么“单纯”了，在这些基础之上，现代web编程技术已经盖起了万丈高楼。不过一点儿也不用担心，你手中已经掌握的知识足以支撑你继续学习绝大部分的“高级”技术，你已经站上了巨人的肩膀。
接下来，你可以“随心所欲”地学习你感兴趣或是需要的技术，迎来美妙的“技术爆炸”时期。
绝大部分“高级”技术的存在是为了更有效率地解决某些特定问题，你不必对它们心存畏惧，因为你的付出往往会带来成倍的收益，况且凭你现在的基础，靠自己绝对能学会。以下是一些可以继续学习的方向，供参考：
⭕️ 后端开发
即使你不打算开发后端，你也应该首先了解一下Node.js，因为它已经成为了现代web开发的基础设施。Node.js 是一個跨平台 JavaScript 运行环境，让JS可以脱离浏览器单独运行，这极大拓展了JS的应用场景。无论今后学习哪个方向，你都不可避免地需要和node.js打交道。
除此之外，node.js还包含了包管理器npm，使用npm来起手项目、管理依赖已经成为了前端开发的标准之一。
node.js官网(nodejs.org)
如果你打算深入后端开发，比如开发API接口实现前后端通信，你可以从下面这些框架入手学习：
Express(expressjs.com)
koa(koajs.github.net.cn)
nestjs(nestjs.com)（这个有点难，但是功能强大）
⭕️ 开发网站
绝大部分现代网站的开发都使用了某些框架。这些框架提供了很多实用的开发工具，并且已经帮你处理好了大量的细枝末节，你只需专注功能开发即可，极大提升了开发效率。
对于希望进行网站开发的朋友，可以从以下框架中择一学习。需要说明的是，每个框架都拥有大量拥趸，关于哪个框架谁更好的口水战由来已久，我们初学者大可不必太在意。
VUE(cn.vuejs.org)——由国人大佬尤雨溪创建，现在已经成为广受欢迎的前端开发框架。中文文档支持很好，在中文互联网上也很容易找到学习资料。
React(react.dev)——可以说是全世界最流行的前端开发框架，由facebook技术团队开发并开源。
svelte(svelte.dev)——前端开发框架的后起之秀，社区支持和学习资料相对两个前辈少一些，但也是很有名的框架。列在这里是因为我最近比较喜欢用这个框架做东西。哈哈。
以上这几个框架都已经形成了各自的工具流（Nuxt、Next、sveltkit等等），在学习的过程中你将会慢慢接触到。
其实，网站开发是个笼统的概念，除了开发前端页面，还涉及到后端数据库、接口通信、上线部署等等环节，我也摸索了很久，后续再专门写帖子详述。
⭕️ 开发小程序
如果你想做小程序，我推荐你从微信小程序入手学习。第一是因为微信小程序文档非常完善，上手简单；其次是因为微信小程序可以说是小程序标杆，别家多多少少都有借鉴，会写微信小程序，其他家也不在话下。
微信小程序开发文档(developers.weixin.qq.com)
我不推荐一上来就学习类似uniapp这样的通用框架，先从原生小程序写起，等你熟练掌握小程序开发之后再考虑使用框架也不迟。
⭕️ 其他
如果你想写浏览器插件，可以看看chrome开发者中心(developer.chrome.com)，这里有你需要的一切。
JS还能用来写桌面客户端，有兴趣可以看看electron(www.electronjs.org)。
⭐️ 最后
受限于篇幅，文章中提到的很多东西只是点到即止，还有很多像TypeScript、tailwind、webpack这样比较重要的工具没有涉及，只能留待各位朋友自行探索。无论如何，web编程真的不难，不要被网上高深专业的文章劝退，万丈高楼平地起，只要愿意多折腾，遇到问题多查阅资料，多问问chatGPT，日拱一卒，断没有学不会的道理。
希望大家都能享受到编程的快乐和成就感。
76 1136
来自圈子
产品经理的日常
196181人已经加入