- Blog/
如果能重来,我会怎么学习前端
Table of Contents
HTML, CSS & JavaScript #
在学习前端前,需要了解一些基本的知识,比如HTML、 CSS 和 JavaScript。我在学习这些基础时,总想着把YouTube上所有的教程看完,因为觉得这个教程好,那个教程也好,我如果不全都看完可能会错过一些什么。但问题是:
- 这些教程有80%相似的内容
- 在看完了几个教程后,我发现我还是不会写网页
于是在这里犯了第一个错误:教程地狱(Tutorial Hell)。看教程只是学习编程的第一步,看了教程学了基础,应该试着做项目来巩固理解学过的东西,而不是不停地看一个又一个教程。
所以每个技术应该只选择一个教程并把它看完,我的选择是:
- HTML Full Course for free 🌎 (2023)
- CSS Full Course for free 🎨 (2023)
- JavaScript Full Course for free 🌐 (2023)
看完教程后,可以阅读一些完整的在线文档来查缺补漏:
- HTML - W3Schools - HTML Tutorial
- CSS - W3Schools - CSS Tutorial
- JavaScript - MDN JavaScript
但是要注意不要困于基础(Stuck In Basics),不要认为必须知道所有的基础概念后才能开始做项目。看完教程后就可以练习一些简单的项目了,阅读文档只是为了补足知识的缺漏。学习前端(或编程)应该花最少的时间看,花最多的时间做。
完成了这些基础的学习后,可以用一些游戏测试自己对知识的掌握程度:
- CSS
- CSS Diner: 一个餐桌游戏,通过CSS选择器来选中不同的盘子或食物。
- Flexbox Froggy: 练习Flexbox的不同属性值,让青蛙回到对应的荷叶上。
- Grid Garden: 练习Grid的不同属性值,给胡萝卜浇水。
- JavaScript
一些项目的推荐:
- 50project50days: 每天做一个小的网呀项目一共50天,一共50个项目。比如拓展卡片,隐藏和展开搜索框等。
- JavaScript30
- HTML CSS JavaScript projects for beginners 2023 - 12 js projects with source code
- Learn JavaScript by Building 7 Games - Full Course
- Build 15 JavaScript Projects - Vanilla JavaScript Course
CSS Framework #
到了这个阶段时,我们会发现CSS代码非常冗长以及难以维护,所以我们需要CSS框架来帮助开发,简化流程。现在流行的CSS框架有 Bootstrap 和 Tailwind CSS。但是用Bootstrap写的网站大多千篇一律,Tailwind提供了更强大的定制能力,可以写出更自定义的网站,所以我会学习Tailwind CSS。
Tailwind有完整的文档可供学习,但是我会先看完一个1小时内的Tailwind教程再开始看文档,这样的学习心智负担会更小。
学习Tailwind,不需要记住所有东西,只需要对Tailwind有大概的了解,知道它是如何起作用的就够了。
学完Tailwind基础概念后,可以练习怎么用Tailwind做一个Instagram Story:
如果在做项目的过程中遇到了不懂或不熟悉的概念,就在Tailwind文档中找到它再看一次,Learn By Doing。
JavaScript Framework #
学完Tailwind CSS后,可以开始学习JavaScript框架。现在流行的JavaScript框架有 React, Vue, Angular。我选择学习React。
在学习React之前必须保证有坚实的JavaScrip基础,可以翻阅一遍 JavaScript Info再开始学习React:
Build Project #
在对Tailwind和React有了一定的理解后,可以用它们做一些网站克隆项目:
- React & Tailwind CSS Image Gallery
- 🔴 Let’s build LinkedIn with REACT.JS! (with Redux & Firebase) - React JS Crash Course for Beginners - Build 4 Apps in 12 Hours (Redux, Firebase, Auth + More) [2023]
接下来可以试着用Next.js来做项目,Next.js是进阶版React。
- 🔴 Let’s build Facebook 2.0 with REACT.JS! (Next.js, Tailwind CSS, Image Uploading, Facebook Login)
- 🔴 Let’s build Hulu 2.0 with REACT.JS! (Next.js, Tailwind CSS, Responsive)
Portfolio #
学了这么多技术后,我们需要一个作品集网站来展示我们的作品,作品可以是:
- 日常会使用的一些流行网站的克隆
- 根据自己的生活需求创建的工具
谨慎地选择我们要做的项目,因为我们会回来为这些前端项目加上后端的功能。
Node.js, Express.js & MongoDB #
Node.js是可以在服务器上运行的JavaScript环境, Express.js是针对Node.js的框架。 MongoDB是数据库,用于存储网页上用户提供的数据。
因为我们从做项目中学习,如果在任何概念上卡住了,就善用搜索引擎。在工作中,任何程序员都不是所有概念都准备好了才开始做项目的。
Bring Frontend and Backend Together #
做完这个项目后,就可以回到自己的Portfolio项目中,添加一些后端的功能。