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

2023-10-10 10:02:11 +08:00
 xption

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

知识背景

学习目标

求助

7991 次点击
所在节点    前端开发
49 条回复
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
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
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
先学转行
boluochixue
2023-10-10 11:36:12 +08:00
梭哈都学
1t1y1ILnW0x5nt47
2023-10-10 11:38:36 +08:00
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 的思维看世界还是挺奇妙的,不过完全是可选项,只是学点新鲜的东西可以保持自己的兴趣,我是那种如果完全熟悉了,一直没有新东西给我,我会变成自以为是的那种人,只有看得多才会觉得让傻逼的自己闭嘴,免得发出来的文字吓到真的高搜(

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/980505

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX