2023 年的 web 前端，该如何学起？

学个 der

https://vue3.chengpeiquan.com/ 了解一些特定词汇有些帮助的

1. 对着一些网站模仿，用原生 html ，css ，js 写一遍这个网站首页，有简单的交互，能发请求展示数据。如站酷 https://www.zcool.com.cn/home#tab_anchor ；
2. 对着 vue 3/React 官方网站啃一遍；
以上是速成的方式，如果是想要系统化的学习，先做多练练第一步，拿一本犀牛书放边上 https://kingyinliang.github.io/PDF/JavaScript%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97%EF%BC%88%E7%AC%AC6%E7%89%88%EF%BC%89.pdf ，多翻翻，js 能搞定。至于 html 和 css ，办法不多，只能多模仿着写，手写轮播图，tab 切换，级联菜单，手风琴... 不会的看菜鸟教程对应的解释。最后再做上面的第二步。

学 react ，vue 纯属误人子弟

建议先快速过一遍 javascript 高级程序设计，再入手 React/Vue

可以跟着巨硬教程来，https://github.com/microsoft/Web-Dev-For-Beginners

目前我也在自学前端。
第一步，先过了一遍 https://www.freecodecamp.org/chinese/learn/ 里的『响应式网页设计认证』，基本上 HTML 、CSS 常用的东西就了解了。之所以用 freecodecamp ，是因为可以边学边练。
第二步，了解 JavaScript 基础。可以继续用 freecodecamp ，或者其他的也行。
第三步，选一个常用的流行的前端框架，推荐 React 或 Vue 。我目前在看 React 的官方文档，写得很棒。

至于之后的步骤，我也没做到呢。推荐一个网站 https://roadmap.sh/frontend ，给出了前端学习的路线图。

@solobat #5 这俩有什么区别吗？很费时间吗？难道不是全都要吗

先学转行

梭哈都学

新手:https://roadmap.sh/frontend?r=frontend-beginner
进阶:https://roadmap.sh/frontend
高手:https://roadmap.sh/backend

有群么 我也想学前端

2023 年建议买个 chatgpt plus ，然后看一些知名的开源项目代码。看别人都用什么库，看别人怎么实现 state 和 api call. 太多设计漂亮的组件可以用了。现在前端都是搭积木，在成熟的组件库基础上改改样式和带入数据变化逻辑。

@6379616e Vue 就是反编程的，不利于新手提高代码能力，js 的核心是函数，不是模板语法之流。

“div 不熟练”我猜你应该是想表达的是对网页结构和布局的运用还不是很熟练吧，推荐你去 https://static.vgee.cn/static/index.html 看看 flex 布局，还有张鑫旭的博客，还有一个入门 CSS 的网站： https://zh.learnlayout.com/ 。然后去 flexboxfroggy 练练 flex 布局。还有，Node.js 是服务端的 JS 运行环境，不是构建工具。前端构建工具是 Webpack 和 Vite 这些，它们是运行于 Node.js 环境的。一定要对概念有一个正确的认识。可以看看阮一峰的 ES6 教程。

@solobat 别误导人了，signal 才是 ui 未来，不喜欢 vue 模板优先的可以用 solid-js 或别的，react 运行模型心智负担太大，ui 不是纯函数，状态管理才是大头

react,antd,antv,es2015-2023,html5,webgl,webgpu

《 javascript 高级程序设计》这本书认真看一遍 JS 基础就稳了，语法过时的部分结合阮一峰的 ES6 入门教程看

如果是我重新学起，我自己会更喜欢这个学习路径：

1. HTML 看个大概，标签是什么，属性是什么，常见的几个标签是哪几个，简单写一个表格一个表单就可以了
2. JS -> https://zh.javascript.info/ -> 第一章细看，第二章了解
3. 完善表格和表单的交互
4. 给表单加点样式，怎么加看起来更现代化，边写 CSS 边积累样式实现
5. 学 React （个人比较喜欢写 JSX ，所以 React 或者 Solid ，你可能会更喜欢 Vue 甚至 Angular ，）重新实现
6. 抄一个你最近访问最多的站点，用你学过的简单实现，查查写写学学
7. 换个框架，重新实现，感受一下不同框架不同写法
8. 我不知道你的目的是什么，假设是找工作，打开招聘软件，看看你感兴趣的地区都要什么技术，顺着关键词继续学，把做的站点丢到 GitHub 上，学一点缝补一点
9. 这时候写了很多，你对各种框架各种 API 的实现都会有点自己猜测，再回过头看看 2. 的第二章和第三章
10. 我不主张一开始就硬着头皮去看框架怎么实现，你用过的功能，你猜着怎么做，再看看几篇博客他们说怎么做，再带着各种理解打开仓库看，会舒服很多
11. 扩充一下其他方向的知识，不是说你做一个方向就只懂一个方向不行，只是这样会拖慢你自己探索整个开发流程，找到你个人的最佳实践，大致是 web 后端 -> 网络看个大概 -> 部署 -> 回到网络看更多



还想建议看看 FP 相关内容，用 FP 的思维看世界还是挺奇妙的，不过完全是可选项，只是学点新鲜的东西可以保持自己的兴趣，我是那种如果完全熟悉了，一直没有新东西给我，我会变成自以为是的那种人，只有看得多才会觉得让傻逼的自己闭嘴，免得发出来的文字吓到真的高搜（

先从 js html css 这三个学起吧，教程的话，上网搜吧，一大堆，等到了一定程度，开始看看 vue react

@z1645444 老哥请问 FP 是什么？

英语还可以的话 可以看看 https://frontendmasters.com/courses, 从入门到到扩展,基本都是请的大厂的人来讲的, sevlte ,rust,vue 请到了核心开发者

感谢大家的回复，我今晚整理下这就动手学起来，后续有进步会来给大家汇报

同时看到不少 V 友收藏了这个帖子，说明有同样疑惑的不止我一个人
大家的回复给我们提供了帮助

@xption #22 Functional Programming ，函数式编程👉

光会前端是没什么前途的，建议同时学 java spring ，卷全栈。

学 vue ？你知道 vue 相关的生态迭代有多快吗
选项式 api->组合式 api
vuex->pinia
webpack->vite
vuepress->vitepress
只能说这些人太卷了，隔两年就推出新的一个框架替代旧的

我说说我的路线。
JavaScript 高级程序设计。
深入解析 CSS 。
了解常见 html 标签，表单。
官网学习 React ，扒一个项目看看都用了什么库。
了解 React 的各种常见库，表单库，useSWR ，ahook 等等，看 UI 库比如 MUI 什么的。
学习 TS 。
学习 webpack ，vite 。
放弃 web 。

找个类似的视频跟练几个就啥都会了

JS 、Web API 、CSS 去 MDN 上看 Guide ，看完后通读 API 文档。

Vue 的话去 Vue 官网看文档，算是中文文档写的最好的框架了。

Node.js 去 Node.js 官网看 Guide （或者找中文翻译版），基本就会用了，如果想做 Node.js 开发的话可以通读 API 文档。

三个网站，完全可以满足你的学习目标。

先说下自己的学的专业， 如果不是科班出生的，建议先补基础， 高等数学， 编译原理 ........

学个 der ，根本学不完，后面有你好受的

视频课程推荐 coderwhy 的大前端系列。腾讯课堂原价七千多，现在加客服大几百就能买全套。当然网上免费的盗版也有很多。我也看过不少书和视频，但都没有 coderwhy 这一套讲的成体系。学到你要求的水平，应该三个月就够。

@jones2000 高等数学？各位编程中真的用得到这个东西的占多少？更别提前端了。
叠甲：本人计算机科班在读，数学爱好者。

@makelove #17 前端要以和为贵，react / vue 35 岁也得 滴滴外卖，到时候一起抢单，不要因为框架伤了和气。

@solobat 我之前一直写 react ，并且一直是 FP 的爱好者，最近不得已的情况下，用 vue3 开发一套系统(tsx+template)
实话实话,vue3 真的比 react 方便太多了，不需要考虑太多的东西就可以写出来性能非常好的代码(watchEffect 和 render 函数中访问了属性，立马就可以自动建立响应式依赖) 它真的就是响应式 react ，踩一捧一真的👎

@leokun 我想说的跟 FP 与响应式或 UI 都没有关系，前端也是编程的一部分，用函数而非模板就是要学会去抽象，这才是编程的核心能力，掌握了这个，其它 UI 、状态管理之类的细枝末节，使用多了就熟悉了，没什么好大惊小怪的。OP 明显是个前端新手，对新手而言，我觉得重要的是代码能力，而不是方便和效率。

@make17better 现在不是流行网格布局吗

@Warden2003 傅里叶变换， 正态分布

学前端死路一条，看看招聘吧，哎，49 年入国军

@lete 啊 捕捉到一个大佬

@PTLin #28 最后一句暴击了，，所以现在学的啥？

先学一下怎么找一个好行业，方便以后转行

@Uplay 特别搞笑，当时看到 web 居然支持 OpenGL 后就开始学这方面的了。

前端的工具，框架变化太快，不知道什么时候能稳定起来

@7inFen 是那本大名鼎鼎的红宝书吗？

看到“div 不够熟练，css 不够熟练 （古早年代用 table 多）”这句，震惊地拉回去看了一眼日期

我在跟着 The Odin Project 学

@fdghjk 对，但是不完全对。其实 Grid 布局也并没有很流行，但它的使用率确实是有增长趋势的，只是实际工作中用得并不多，对于大多数情况都没有 Flex 来得方便，就我目前工作这么久来说，大多数情况都是 Flex 布局为主，偶尔有些网格状的页面排布和全局布局会用到 Grid 布局。