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

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

  •  1
     
  •   xption · 200 天前 · 6622 次点击
    这是一个创建于 200 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    知识背景

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

    学习目标

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

    求助

    • 给小弟介绍下学习路线
    • 推荐几本书
    第 1 条附言  ·  199 天前
    根据各位大佬的回复,整理了一个汇总贴:

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

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

    至于之后的步骤,我也没做到呢。推荐一个网站 https://roadmap.sh/frontend ,给出了前端学习的路线图。
    6379616e
        9
    6379616e  
       200 天前
    @solobat #5 这俩有什么区别吗?很费时间吗?难道不是全都要吗
    ochatokori
        10
    ochatokori  
       200 天前 via Android
    先学转行
    boluochixue
        11
    boluochixue  
       200 天前
    梭哈都学
    ZZ74
        13
    ZZ74  
       200 天前
    有群么 我也想学前端
    gogogo1203
        14
    gogogo1203  
       200 天前
    2023 年建议买个 chatgpt plus ,然后看一些知名的开源项目代码。看别人都用什么库,看别人怎么实现 state 和 api call. 太多设计漂亮的组件可以用了。现在前端都是搭积木,在成熟的组件库基础上改改样式和带入数据变化逻辑。
    solobat
        15
    solobat  
       200 天前
    @6379616e Vue 就是反编程的,不利于新手提高代码能力,js 的核心是函数,不是模板语法之流。
    make17better
        16
    make17better  
       200 天前   ❤️ 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  
       200 天前
    @solobat 别误导人了,signal 才是 ui 未来,不喜欢 vue 模板优先的可以用 solid-js 或别的,react 运行模型心智负担太大,ui 不是纯函数,状态管理才是大头
    realJamespond
        18
    realJamespond  
       200 天前   ❤️ 1
    react,antd,antv,es2015-2023,html5,webgl,webgpu
    Bartholomew
        19
    Bartholomew  
       200 天前   ❤️ 1
    《 javascript 高级程序设计》这本书认真看一遍 JS 基础就稳了,语法过时的部分结合阮一峰的 ES6 入门教程看
    z1645444
        20
    z1645444  
       200 天前   ❤️ 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  
       200 天前
    先从 js html css 这三个学起吧,教程的话,上网搜吧,一大堆,等到了一定程度,开始看看 vue react
    xption
        22
    xption  
    OP
       200 天前
    @z1645444 老哥请问 FP 是什么?
    jingcoco
        23
    jingcoco  
       200 天前   ❤️ 2
    英语还可以的话 可以看看 https://frontendmasters.com/courses, 从入门到到扩展,基本都是请的大厂的人来讲的, sevlte ,rust,vue 请到了核心开发者
    xption
        24
    xption  
    OP
       200 天前   ❤️ 1
    感谢大家的回复,我今晚整理下这就动手学起来,后续有进步会来给大家汇报

    同时看到不少 V 友收藏了这个帖子,说明有同样疑惑的不止我一个人
    大家的回复给我们提供了帮助
    z1645444
        25
    z1645444  
       200 天前
    @xption #22 Functional Programming ,函数式编程👉
    DOLLOR
        26
    DOLLOR  
       200 天前
    光会前端是没什么前途的,建议同时学 java spring ,卷全栈。
    Jat001
        27
    Jat001  
       200 天前 via iPhone
    学 vue ?你知道 vue 相关的生态迭代有多快吗
    选项式 api->组合式 api
    vuex->pinia
    webpack->vite
    vuepress->vitepress
    只能说这些人太卷了,隔两年就推出新的一个框架替代旧的
    PTLin
        28
    PTLin  
       200 天前   ❤️ 1
    我说说我的路线。
    JavaScript 高级程序设计。
    深入解析 CSS 。
    了解常见 html 标签,表单。
    官网学习 React ,扒一个项目看看都用了什么库。
    了解 React 的各种常见库,表单库,useSWR ,ahook 等等,看 UI 库比如 MUI 什么的。
    学习 TS 。
    学习 webpack ,vite 。
    放弃 web 。
    ixcode
        29
    ixcode  
       200 天前
    找个类似的视频跟练几个就啥都会了
    libook
        30
    libook  
       200 天前
    JS 、Web API 、CSS 去 MDN 上看 Guide ,看完后通读 API 文档。

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

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

    三个网站,完全可以满足你的学习目标。
    jones2000
        31
    jones2000  
       200 天前
    先说下自己的学的专业, 如果不是科班出生的,建议先补基础, 高等数学, 编译原理 ........
    lete
        32
    lete  
       200 天前
    学个 der ,根本学不完,后面有你好受的
    tsja
        33
    tsja  
       200 天前
    视频课程推荐 coderwhy 的大前端系列。腾讯课堂原价七千多,现在加客服大几百就能买全套。当然网上免费的盗版也有很多。我也看过不少书和视频,但都没有 coderwhy 这一套讲的成体系。学到你要求的水平,应该三个月就够。
    Warden2003
        34
    Warden2003  
       199 天前   ❤️ 2
    @jones2000 高等数学?各位编程中真的用得到这个东西的占多少?更别提前端了。
    叠甲:本人计算机科班在读,数学爱好者。
    zhwithsweet
        35
    zhwithsweet  
       199 天前
    @makelove #17 前端要以和为贵,react / vue 35 岁也得 滴滴外卖,到时候一起抢单,不要因为框架伤了和气。
    leokun
        36
    leokun  
       199 天前
    @solobat 我之前一直写 react ,并且一直是 FP 的爱好者,最近不得已的情况下,用 vue3 开发一套系统(tsx+template)
    实话实话,vue3 真的比 react 方便太多了,不需要考虑太多的东西就可以写出来性能非常好的代码(watchEffect 和 render 函数中访问了属性,立马就可以自动建立响应式依赖) 它真的就是响应式 react ,踩一捧一真的👎
    solobat
        37
    solobat  
       199 天前
    @leokun 我想说的跟 FP 与响应式或 UI 都没有关系,前端也是编程的一部分,用函数而非模板就是要学会去抽象,这才是编程的核心能力,掌握了这个,其它 UI 、状态管理之类的细枝末节,使用多了就熟悉了,没什么好大惊小怪的。OP 明显是个前端新手,对新手而言,我觉得重要的是代码能力,而不是方便和效率。
    fdghjk
        38
    fdghjk  
       199 天前
    @make17better 现在不是流行网格布局吗
    jones2000
        39
    jones2000  
       199 天前
    @Warden2003 傅里叶变换, 正态分布
    ynxh
        40
    ynxh  
       199 天前
    学前端死路一条,看看招聘吧,哎,49 年入国军
    DreamyTZK
        41
    DreamyTZK  
       199 天前
    @lete 啊 捕捉到一个大佬
    Uplay
        42
    Uplay  
       199 天前   ❤️ 1
    @PTLin #28 最后一句暴击了,,所以现在学的啥?
    TiMaRaaa
        43
    TiMaRaaa  
       199 天前
    先学一下怎么找一个好行业,方便以后转行
    PTLin
        44
    PTLin  
       198 天前
    @Uplay 特别搞笑,当时看到 web 居然支持 OpenGL 后就开始学这方面的了。
    tomjiangg
        45
    tomjiangg  
       189 天前
    前端的工具,框架变化太快,不知道什么时候能稳定起来
    CyberRunner
        46
    CyberRunner  
       180 天前
    @7inFen 是那本大名鼎鼎的红宝书吗?
    shintendo
        47
    shintendo  
       173 天前
    看到“div 不够熟练,css 不够熟练 (古早年代用 table 多)”这句,震惊地拉回去看了一眼日期
    lordofmetis
        48
    lordofmetis  
       161 天前 via Android
    我在跟着 The Odin Project 学
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2828 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:00 · PVG 18:00 · LAX 03:00 · JFK 06:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.