Front-end development and learning websites: 10 high-quality learning platforms, a complete path from zero foundation to advanced level
I changed careers from zero-basic self-study, and it took me almost a year to go on this road. Looking back, the most fortunate thing is to start learning from the right website and not waste time on junk tutorials. Sort out the 10 front-end learning platforms I have used in the past year that I find truly useful, and talk about them in the order of learning.
Let's talk about the overall route of front-end learning first. This is very important. If the order is wrong, it will be twice the result:
HTML --> CSS --> JavaScript --> Framework--> Engineering--> Advanced
HTML and CSS can see results in almost a month-you can write decent static pages. JavaScript takes longer, two months to base. Another month for advanced JS features. Then choose a framework (Vue or React) and learn it for a month. Five to six months overall, two to three hours a day.
MDN Web Docs: The authoritative dictionary on the front end
MDN is not used to "learn", but to "check".
How to put this? The content of MDN is the most authoritative-the official production of W3C, which is so accurate that you don't need to doubt it. But it is not a "hands-on" tutorial. It is more like a dictionary and encyclopedia for front-end developers. Every time I learn a new CSS attribute or JavaScript API, I go to MDN to read the full instructions and examples.
HTML tutorials, CSS tutorials, JavaScript tutorials, Web APIs, best practices-there are content in every direction. The translation quality of the Chinese version is also good and friendly to domestic users.
My usage habits are: A concept for a novice tutorial--> MDN in-depth understanding of the principles--> Come back and check if you encounter it in an actual project. By repeating this several times, the knowledge will be solid.
The Bible of front-end developers, when encountering problems, the first reaction should be to check MDN, not Baidu.
freeCodeCamp: 10 million people around the world learn to code here
If I hadn't started at freeCodeCamp, my road to the front end would have been much more tortuous.
Its biggest advantage is not "teaching you" but "leading you to do it." It's not passive learning like watching videos or reading articles, but the kind of writing code directly in the browser and seeing instant feedback. There are clear requirements for each step, and you can only continue after passing the test.
Its front-end learning path is divided into three stages: responsive web design (HTML+CSS, 300 hours, 5 practical projects), JavaScript algorithms and data structures (300 hours, 5 projects), and front-end development libraries (React, Redux, Sass, 300 hours, 5 projects). You can obtain an international certification certificate if you complete all 15 projects.
Seriously, after completing these 15 projects, your GitHub will have something to show the interviewer. Many companies recognize this certificate not because it is authoritative, but because it proves that you have actually written code.
Getting started with zero basics, you can't get off to start here.
Newbie Tutorial: The first stop for domestic Xiaobai
I know some programmers look down on the rookie tutorial and say it is too basic. But for people with pure zero basics, it's really the most friendly entry material.
The explanation is simple and straightforward, with examples for each knowledge point, and you can also run the code online to see the effect-you don't need to be in this nodejs environment, you can directly change the code on the web page to see the changes. This experience is great for novices.
HTML --> CSS --> JavaScript look at it in order, type each example once, and finish the exercises after class. Look repeatedly at places where you can't, and don't be afraid of being slow. I used rookie tutorials to get the basics of HTML tags and CSS selectors.
Purely because it is simple and useful.
JavaScript.info: The best JS tutorial, no one
After getting started, if you want to really understand JavaScript-not how to use it, but how it works, understand prototype chains and closures, and understand asynchronous programming-Javascript.info is the best choice.
The tutorial is divided into four major parts: basics of JS (syntax, data types, functions), advanced JS (prototypes, closures, asynchronous), browser-related (DOM, BOM, events), and additional topics (regular, network, animation). From basic to advanced, the system is complete.
Each chapter has exercises and answers. At that time, I went to school at JavaScript.info every day and typed the answers from the beginning. In two months, my JS level improved by leaps and bounds.
After getting started with JS, you must read this.
Vue.js official document: Only use it to learn Vue
Don't read messy third-party tutorials! Don't look! Learn directly from official documents!
I'm serious, the Chinese tutorial that You Yuxi personally participated in and wrote is of extremely high quality. Following the tutorial from scratch is better than watching any paid course yourself. The "Getting Started" chapter takes you step by step to build a Vue project, the "Tutorial" chapter explains every core concept thoroughly, and the "Examples" chapter gives you code that you can use directly.
Looking directly at the official documentation is really the fastest way to learn Vue. Many people make a mistake-when searching for second-hand tutorials on the Internet, the version may be incorrect or outdated, which wastes a lot of time.
The first thing to do when learning Vue: close those messy favorites and open official files.
React official documentation: It will be easier to use after rewriting in 2023
React's documentation has undergone a completely new rewrite in 2023, making it much easier to use than before.
There is an interactive tutorial in the official "Getting Started" section that you can practice while watching. Then the "Learning React" chapter explains the core concepts thoroughly-functional components, HOOKS, and state management. When I learned React, I followed the official quickly to get started, and then made a TodoList to practice, and the effect was good.
One thing to remember: Before learning React, you must first understand the basics of JavaScript. The concept of HOOKS If you understand the closures and array methods of JS, you will feel very natural; if the foundation of JS is not strong, reading HOOKS is like reading a book of books.
TypeScript support has also been included in the official documentation.
LeetCode: Must be used for interviews, no exceptions
The fact that front-end interviews also require algorithms has surprised many people. But none of the major factories I have met does not ask about algorithms.
The advantage of the China version is that it is all in Chinese, so you don't have to be confused about English questions. 2000+ dao questions, the quality of community problem solutions is very high, and you don't have to think about it yourself.
I think the front-end problem brushing route can be done like this: first brush 50 simple questions (mainly arrays and strings), then brush 50 medium questions (linked list, tree, dynamic planning) when you are proficient, and then challenge difficult questions when you have time. Key points-Write in JavaScript and be able to write JS methods by hand during the interview. This is a mandatory question.
At that time, I used two trips a day and made up for progress on weekends. I used it intermittently for three months, and I really used it during the interview.
If you want to find a front-end job, LeetCode is a hurdle that cannot be overcome.
GitHub: Reading other people's code is the fastest way to improve
GitHub is not strictly a "learning site," but it is the best school for front-end developers.
Looking at excellent open source project code and imitating other people's writing and project architecture is more effective than reading any tutorial. When I was building a blog site, I first looked at the component code of Element UI and learned its design ideas.
Several front-end projects worth paying attention to:
- Ruan Yifeng's front-end learning route (GitHub searches for "Wanwei/Front-end Learning Route", the 150K + Stars warehouse): The content is super comprehensive, covering all front-end directions, suitable for checking for leaks and filling gaps
- 30-day JS Challenge (JavaScript30): 30 small native JS projects that do not use frameworks, and your JS skills will increase significantly after completing it.
- Vue, React (their respective official repositories): You can take a look at the framework source code
- Element UI (Element-plus): An excellent example of learning component library design
- Ant Design: enterprise-level component library with a complete design system
There are also tricks to read code: Don't just bite the core code at the beginning, look at the examples and documentation first, then follow Issue and Pull Request to understand the development process, and finally go deep into the source code.
CodePen: A playground for front-end creativity
CodePen is an online code editor (HTML+CSS+JS real-time preview) and a global community of creators.
I often use it to practice small effects-write CSS animations, create button effects, try new Layout schemes. When I see someone in the community doing a particularly cool effect, I will click on it to read the source code and learn, and then rewrite it myself.
Sometimes when you encounter uncertain CSS effects, it is much faster to write a few lines of code directly on CodePen than to build a local environment. It is also very convenient to build a small Demo to share with others.
Station B: Video learning, but pay attention to methods
Station B has many good front-end tutorials. I recommend a few that I have read myself: Shang Silicon Valley Web Front-End (the most systematic video tutorial, from zero-basics to a complete set of employment. The explanation is very detailed and it is recommended for students who want to change careers to follow it from the beginning), Dark Horse Programmer Front-End (suitable for zero-basics, with rich examples), and Technology Fat (Vue, React, which is suitable for people with basics for special improvement).
But video learning has a serious problem: just watching but not practicing.
I have seen countless people collect hundreds of gigabytes of tutorials, but they haven't finished one of them. Watching the video and feeling that "I understand" is the most terrible illusion, and it becomes useless as soon as you write the code. My experience is watching 10 minutes of video and stopping for 30 minutes to write code. After watching a section, turn off the video and reproduce it yourself. Only by writing it independently can you truly learn it.
How to choose platforms for different scenarios
The first step of pure zero-foundation is to use the rookie tutorial with the video of Station B. The rookie tutorial is simple and straightforward, and the video from Station B allows you to see the actual operation process.
To systematically learn the basics of front-end, freeCodeCamp and MDN are the best combination. freeCodeCamp takes you on projects, and MDN helps you find gaps and fill in gaps.
For a deep understanding of JavaScript, JavaScript.info is the best choice. The explanation is thorough and there are many exercises.
To learn the Vue framework, just read the Vue official documentation directly. The Chinese tutorial you Yuxi personally participated in and wrote is of extremely high quality.
To learn the React framework, the official React documentation is the first choice. After rewriting in 2023, the quality of the tutorial has improved a lot.
You can't get around LeetCode by swiping the algorithm to prepare for the interview. Front-end interviews also require algorithms, a fact that many people don't know.
Learn code and project architecture, and go to GitHub to see excellent open source projects. Looking at other people's code is the fastest way to improve.
CodePen is convenient to practice small effects and code snippets. Online editor, real-time preview and easy sharing.
MDN is the authority to check API and specification issues. The first reaction when encountering a problem should be to check MDN, not Baidu.
My learning timeline
Learn the basics of HTML and CSS in the first month, and the goal is to restore the home page of any website. After learning the HTML and CSS parts of the rookie tutorial from scratch, freeCodeCamp's responsive web design follows suit. For two hours a day, every knowledge point is written by hand. Choose a website you like at the end of the month and try to restore it.
In the second to third months, I learned the basics of JavaScript. The goal is to be able to write TodoList in native JS and understand closures and asynchronous. Learn it systematically at JavaScript.info, and freeCodeCamp's JavaScript courses advance simultaneously. Two to three hours a day and writing at least 200 lines of code a day is more effective than any tutorial.
In the fourth month, I learn Web APIs and browsers. The goal is to be able to write common interactive effects such as carrouse charts, tabs, and lazy loading. DOM operations, event processing, BOM, Fetch API-this is the most clearly written part of MDN. When the effect cannot be achieved, go to CodePen to see what others are doing.
Select a framework in the fifth month, and the goal is to use the framework to complete a complete front-end project independently. It is recommended to learn Vue (official documentation) first to get started faster. If you are particularly interested in React, it is fine, but it is recommended that Vue get started and learn React.
In the sixth month, I will do actual project combat and interview preparation. The goal is to launch two complete projects, and LeetCode will be on the road in 100 tracks. The project must have a GitHub address, preferably an online demonstration. LeetCode focuses on scanning questions related to arrays, strings, and linked lists. The written test questions at the front end are basically within this range.
The easiest pit for newcomers to step on
There are too many pits, let me tell you a few things I have experienced:
Video dependence: Watching the video feels that you understand everything, but it becomes useless as soon as you write it. The solution is to read for 10 minutes and write for 30 minutes, and type the code yourself.
Tutor-collecting obsession: There are dozens of gigabytes of tutorials on the hard drive, but I haven't finished reading any of them. Choose a systematic tutorial and read it from beginning to end. It is more useful than collecting a hundred tutorials.
I was in a hurry to learn the framework before I had a good foundation: JS learned Vue before I understood it, but as a result, Vue's responsive principle was completely incomprehensible. The foundation is weak and the mountains shake.
Pursuing new technologies: Vue today, React tomorrow, Svelte the day after tomorrow, and in the end, none of them learned well. Learn one first.
Ask others immediately if you encounter problems: check for 30 minutes for bugs yourself-Google, MDN, Stack Overflow. Before you ask others, ask yourself: Have I checked?