V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xption
V2EX  ›  前端开发

2023 年的 web 前端,该如何学起?

  •  1
     
  •   xption · 2023-10-10 10:02:11 +08:00 · 7926 次点击
    这是一个创建于 394 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近想系统化的学习一下 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
    49 条回复    2024-06-10 13:11:32 +08:00
    root71370
        1
    root71370  
       2023-10-10 10:10:05 +08:00   ❤️ 2
    学个 der
    zebraooooo
        2
    zebraooooo  
       2023-10-10 10:10:23 +08:00   ❤️ 1
    https://vue3.chengpeiquan.com/ 了解一些特定词汇有些帮助的
    variousdidt
        3
    variousdidt  
       2023-10-10 10:12:11 +08:00   ❤️ 1
    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
        4
    LavaC  
       2023-10-10 10:13:07 +08:00   ❤️ 1
    solobat
        5
    solobat  
       2023-10-10 10:31:33 +08:00   ❤️ 3
    学 react ,vue 纯属误人子弟
    7inFen
        6
    7inFen  
       2023-10-10 10:34:52 +08:00   ❤️ 1
    建议先快速过一遍 javascript 高级程序设计,再入手 React/Vue
    9956
        7
    9956  
       2023-10-10 10:38:44 +08:00   ❤️ 2
    suzhenyu
        8
    suzhenyu  
       2023-10-10 10:42:17 +08:00   ❤️ 2
    目前我也在自学前端。
    第一步,先过了一遍 https://www.freecodecamp.org/chinese/learn/ 里的『响应式网页设计认证』,基本上 HTML 、CSS 常用的东西就了解了。之所以用 freecodecamp ,是因为可以边学边练。
    第二步,了解 JavaScript 基础。可以继续用 freecodecamp ,或者其他的也行。
    第三步,选一个常用的流行的前端框架,推荐 React 或 Vue 。我目前在看 React 的官方文档,写得很棒。

    至于之后的步骤,我也没做到呢。推荐一个网站 https://roadmap.sh/frontend ,给出了前端学习的路线图。
    6379616e
        9
    6379616e  
       2023-10-10 11:33:45 +08:00
    @solobat #5 这俩有什么区别吗?很费时间吗?难道不是全都要吗
    ochatokori
        10
    ochatokori  
       2023-10-10 11:34:34 +08:00 via Android
    先学转行
    boluochixue
        11
    boluochixue  
       2023-10-10 11:36:12 +08:00
    梭哈都学
    ZZ74
        13
    ZZ74  
       2023-10-10 11:40:15 +08:00
    有群么 我也想学前端
    gogogo1203
        14
    gogogo1203  
       2023-10-10 11:43:57 +08:00
    2023 年建议买个 chatgpt plus ,然后看一些知名的开源项目代码。看别人都用什么库,看别人怎么实现 state 和 api call. 太多设计漂亮的组件可以用了。现在前端都是搭积木,在成熟的组件库基础上改改样式和带入数据变化逻辑。
    solobat
        15
    solobat  
       2023-10-10 11:44:33 +08:00
    @6379616e Vue 就是反编程的,不利于新手提高代码能力,js 的核心是函数,不是模板语法之流。
    make17better
        16
    make17better  
       2023-10-10 11:51:38 +08:00   ❤️ 1
    “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
        17
    makelove  
       2023-10-10 11:51:42 +08:00
    @solobat 别误导人了,signal 才是 ui 未来,不喜欢 vue 模板优先的可以用 solid-js 或别的,react 运行模型心智负担太大,ui 不是纯函数,状态管理才是大头
    realJamespond
        18
    realJamespond  
       2023-10-10 11:56:27 +08:00   ❤️ 1
    react,antd,antv,es2015-2023,html5,webgl,webgpu
    Bartholomew
        19
    Bartholomew  
       2023-10-10 11:57:11 +08:00   ❤️ 1
    《 javascript 高级程序设计》这本书认真看一遍 JS 基础就稳了,语法过时的部分结合阮一峰的 ES6 入门教程看
    z1645444
        20
    z1645444  
       2023-10-10 13:26:26 +08:00   ❤️ 2
    如果是我重新学起,我自己会更喜欢这个学习路径:

    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
        21
    lilei2023  
       2023-10-10 13:32:07 +08:00
    先从 js html css 这三个学起吧,教程的话,上网搜吧,一大堆,等到了一定程度,开始看看 vue react
    xption
        22
    xption  
    OP
       2023-10-10 13:53:01 +08:00
    @z1645444 老哥请问 FP 是什么?
    jingcoco
        23
    jingcoco  
       2023-10-10 13:53:57 +08:00   ❤️ 2
    英语还可以的话 可以看看 https://frontendmasters.com/courses, 从入门到到扩展,基本都是请的大厂的人来讲的, sevlte ,rust,vue 请到了核心开发者
    xption
        24
    xption  
    OP
       2023-10-10 13:56:18 +08:00   ❤️ 1
    感谢大家的回复,我今晚整理下这就动手学起来,后续有进步会来给大家汇报

    同时看到不少 V 友收藏了这个帖子,说明有同样疑惑的不止我一个人
    大家的回复给我们提供了帮助
    z1645444
        25
    z1645444  
       2023-10-10 14:09:22 +08:00
    @xption #22 Functional Programming ,函数式编程👉
    DOLLOR
        26
    DOLLOR  
       2023-10-10 14:21:21 +08:00
    光会前端是没什么前途的,建议同时学 java spring ,卷全栈。
    Jat001
        27
    Jat001  
       2023-10-10 14:28:42 +08:00 via iPhone
    学 vue ?你知道 vue 相关的生态迭代有多快吗
    选项式 api->组合式 api
    vuex->pinia
    webpack->vite
    vuepress->vitepress
    只能说这些人太卷了,隔两年就推出新的一个框架替代旧的
    PTLin
        28
    PTLin  
       2023-10-10 14:28:55 +08:00   ❤️ 1
    我说说我的路线。
    JavaScript 高级程序设计。
    深入解析 CSS 。
    了解常见 html 标签,表单。
    官网学习 React ,扒一个项目看看都用了什么库。
    了解 React 的各种常见库,表单库,useSWR ,ahook 等等,看 UI 库比如 MUI 什么的。
    学习 TS 。
    学习 webpack ,vite 。
    放弃 web 。
    ixcode
        29
    ixcode  
       2023-10-10 15:43:57 +08:00
    找个类似的视频跟练几个就啥都会了
    libook
        30
    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
        31
    jones2000  
       2023-10-10 16:25:50 +08:00
    先说下自己的学的专业, 如果不是科班出生的,建议先补基础, 高等数学, 编译原理 ........
    lete
        32
    lete  
       2023-10-10 16:39:50 +08:00
    学个 der ,根本学不完,后面有你好受的
    tsja
        33
    tsja  
       2023-10-10 16:48:01 +08:00
    视频课程推荐 coderwhy 的大前端系列。腾讯课堂原价七千多,现在加客服大几百就能买全套。当然网上免费的盗版也有很多。我也看过不少书和视频,但都没有 coderwhy 这一套讲的成体系。学到你要求的水平,应该三个月就够。
    Warden2003
        34
    Warden2003  
       2023-10-10 18:44:53 +08:00   ❤️ 2
    @jones2000 高等数学?各位编程中真的用得到这个东西的占多少?更别提前端了。
    叠甲:本人计算机科班在读,数学爱好者。
    zhwithsweet
        35
    zhwithsweet  
       2023-10-10 20:17:19 +08:00
    @makelove #17 前端要以和为贵,react / vue 35 岁也得 滴滴外卖,到时候一起抢单,不要因为框架伤了和气。
    leokun
        36
    leokun  
       2023-10-10 20:51:18 +08:00
    @solobat 我之前一直写 react ,并且一直是 FP 的爱好者,最近不得已的情况下,用 vue3 开发一套系统(tsx+template)
    实话实话,vue3 真的比 react 方便太多了,不需要考虑太多的东西就可以写出来性能非常好的代码(watchEffect 和 render 函数中访问了属性,立马就可以自动建立响应式依赖) 它真的就是响应式 react ,踩一捧一真的👎
    solobat
        37
    solobat  
       2023-10-10 21:08:42 +08:00
    @leokun 我想说的跟 FP 与响应式或 UI 都没有关系,前端也是编程的一部分,用函数而非模板就是要学会去抽象,这才是编程的核心能力,掌握了这个,其它 UI 、状态管理之类的细枝末节,使用多了就熟悉了,没什么好大惊小怪的。OP 明显是个前端新手,对新手而言,我觉得重要的是代码能力,而不是方便和效率。
    fdghjk
        38
    fdghjk  
       2023-10-10 21:25:16 +08:00
    @make17better 现在不是流行网格布局吗
    jones2000
        39
    jones2000  
       2023-10-11 09:52:18 +08:00
    @Warden2003 傅里叶变换, 正态分布
    ynxh
        40
    ynxh  
       2023-10-11 11:00:32 +08:00
    学前端死路一条,看看招聘吧,哎,49 年入国军
    DreamyTZK
        41
    DreamyTZK  
       2023-10-11 11:53:48 +08:00
    @lete 啊 捕捉到一个大佬
    Uplay
        42
    Uplay  
       2023-10-11 14:19:13 +08:00   ❤️ 1
    @PTLin #28 最后一句暴击了,,所以现在学的啥?
    TiMaRaaa
        43
    TiMaRaaa  
       2023-10-11 15:51:45 +08:00
    先学一下怎么找一个好行业,方便以后转行
    PTLin
        44
    PTLin  
       2023-10-12 08:33:18 +08:00
    @Uplay 特别搞笑,当时看到 web 居然支持 OpenGL 后就开始学这方面的了。
    tomjiangg
        45
    tomjiangg  
       2023-10-21 00:15:14 +08:00
    前端的工具,框架变化太快,不知道什么时候能稳定起来
    CyberRunner
        46
    CyberRunner  
       2023-10-30 16:29:20 +08:00
    @7inFen 是那本大名鼎鼎的红宝书吗?
    shintendo
        47
    shintendo  
       2023-11-06 11:09:32 +08:00
    看到“div 不够熟练,css 不够熟练 (古早年代用 table 多)”这句,震惊地拉回去看了一眼日期
    lordofmetis
        48
    lordofmetis  
       355 天前 via Android
    我在跟着 The Odin Project 学
    make17better
        49
    make17better  
       150 天前
    @fdghjk 对,但是不完全对。其实 Grid 布局也并没有很流行,但它的使用率确实是有增长趋势的,只是实际工作中用得并不多,对于大多数情况都没有 Flex 来得方便,就我目前工作这么久来说,大多数情况都是 Flex 布局为主,偶尔有些网格状的页面排布和全局布局会用到 Grid 布局。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3670 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:28 · PVG 18:28 · LAX 02:28 · JFK 05:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.