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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 414 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近想系统化的学习一下 web 前端开发

知识背景

JavaScript 有点儿基础
html 略有基础
div 不够熟练，css 不够熟练（古早年代用 table 多）
没有接触过 H5
没有接触过各种框架
没有接触过各种打包工具（ node.js 那些）

学习目标

使用 html 、css 搭建常规网站
使用 Vue
熟练使用 node.js 构建工具

求助

给小弟介绍下学习路线
推荐几本书

第 1 条附言 · 2023-10-11 14:46:06 +08:00

根据各位大佬的回复，整理了一个汇总贴：

Web 前端学习路径及资料汇总 [2023 年]

https://v2ex.com/t/980954

熟练

CSS

Node

HTML

49 条回复 • 2024-06-10 13:11:32 +08:00

root71370

2023-10-10 10:10:05 +08:00

学个 der

zebraooooo

2023-10-10 10:10:23 +08:00

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

variousdidt

2023-10-10 10:12:11 +08:00

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 切换，级联菜单，手风琴... 不会的看菜鸟教程对应的解释。最后再做上面的第二步。

LavaC

2023-10-10 10:13:07 +08:00

https://www.freecodecamp.org/chinese/learn/

solobat

2023-10-10 10:31:33 +08:00

学 react ，vue 纯属误人子弟

7inFen

2023-10-10 10:34:52 +08:00

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

9956

2023-10-10 10:38:44 +08:00

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

suzhenyu

2023-10-10 10:42:17 +08:00

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

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

6379616e

2023-10-10 11:33:45 +08:00

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

ochatokori

2023-10-10 11:34:34 +08:00 via Android

先学转行

boluochixue

2023-10-10 11:36:12 +08:00

梭哈都学

1t1y1ILnW0x5nt47

2023-10-10 11:38:36 +08:00

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

ZZ74

2023-10-10 11:40:15 +08:00

有群么我也想学前端

gogogo1203

2023-10-10 11:43:57 +08:00

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

solobat

2023-10-10 11:44:33 +08:00

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

make17better

2023-10-10 11:51:38 +08:00

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

makelove

2023-10-10 11:51:42 +08:00

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

realJamespond

2023-10-10 11:56:27 +08:00

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

Bartholomew

2023-10-10 11:57:11 +08:00

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

z1645444

2023-10-10 13:26:26 +08:00

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

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

lilei2023

2023-10-10 13:32:07 +08:00

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

xption

2023-10-10 13:53:01 +08:00

@z1645444 老哥请问 FP 是什么？

jingcoco

2023-10-10 13:53:57 +08:00

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

xption

2023-10-10 13:56:18 +08:00

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

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

z1645444

2023-10-10 14:09:22 +08:00

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

DOLLOR

2023-10-10 14:21:21 +08:00

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

Jat001

2023-10-10 14:28:42 +08:00 via iPhone

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

PTLin

2023-10-10 14:28:55 +08:00

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

ixcode

2023-10-10 15:43:57 +08:00

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

libook

2023-10-10 16:16:15 +08:00

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

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

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

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

jones2000

2023-10-10 16:25:50 +08:00

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

lete

2023-10-10 16:39:50 +08:00

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

tsja

2023-10-10 16:48:01 +08:00

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

Warden2003

2023-10-10 18:44:53 +08:00

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

zhwithsweet

2023-10-10 20:17:19 +08:00

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

leokun

2023-10-10 20:51:18 +08:00

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

solobat

2023-10-10 21:08:42 +08:00

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