出于业余爱好的目的，如何学习前端？

[AndyBlocker]

不是为了工作，偶尔和做设计的朋友一起做点小玩意，之前都是直接 div 一把梭，但是越来越觉得开发效率低、调整复杂，想给不同分辨率做适配的时候很痛苦。如果只是处于一个好玩、半吊子的状态，不追求完美只是想相对高效地将一个（图片，Figma 等中的）设计稿快速转化成一个实际工具，应该学习哪些前端技术？

[murmur]

业余前端根本不看设计稿，antd 和 element 有啥做啥样

[AndyBlocker]

@murmur 好快的回复 不过需求就是从设计稿开始做，所以还是在想是不是学个框架之类的会更快点

[Track13]

tailwindcss 。移动优先（分辨率从小到大）来写布局。

[murmur]

@AndyBlocker 你思路错了，业余前端做什么设计稿实现，那是要正经学 css 的

正确做法是做稿子的时候就按照 element 或者 antd 做，你做页面的时候要一眼能看出用哪些组件拼出来

等这一步做熟练了，再想着脱离组件库自己做设计

[z4oSkDNGGC2svsix]

什么叫 div 一把梭? 如果你说的是 20 年前的所谓 div+css 布局的话, 那么现代前端有的你学的了, 几乎等于重新学习 2 门语言, css 和 JS, 而学完你还可能需要学习 VUE, REACT, 因为现代前端的状态手动管理非常复杂.

另外, 你还需要学习前端工具链, node.js, webpack.

所以这根本不好玩.

综上, 最后我的建议是学习 bootstrap+抄代码, 即便这样, 你可能仍然需要学习 gulp 或 webpack 之类的打包工具.

[cli007]

适配不同尺寸屏幕 css 用 rem 来写就行了呀

[kylebing]

就目前的状态来看，用框架确实是最快的，之后等到框架满足不了你的时候可以自己整一些东西。
这里有很多非常好的框架，适用于 PC 和 适用于 Mobile 的都有：

https://ui-libs.vercel.app/