Skip to content
Lucky Snail Logo Lucky Snail
中文

Frontend Learning Roadmap (Self-Study)

/ 10 min read /
#三本大学生 #前端学习路线 #资源
Table of Contents 目录

First, I suggest watching these two videos by Yupi + how to learn technical articles:

  1. https://bcdh.yuque.com/staff-wpxfif/resource/rito86b49l53w1w2 (Frontend 1 hour - 1 hour 16 min)
  2. https://www.bilibili.com/video/BV1nh411e7oG, a super detailed frontend learning roadmap
  3. https://bcdh.yuque.com/staff-wpxfif/resource/nxkhhu
  4. https://www.bilibili.com/video/BV1Ax4y1m72q

Let me share the path for a beginner to become a frontend developer. Think of learning frontend development as building a house.

Course features: I’ll recommend both video and text tutorials, so whether you prefer videos or text, you can learn painlessly (I suggest gradually transitioning to text tutorials as you go).

Learning goals:

  1. Build a website and publish it to the internet
  2. Write a good resume and land a satisfactory job

Set Up Your Frontend Development Environment

A craftsman must first sharpen his tools. So setting up a good development environment can make learning more efficient.

  • Visual Studio Code: A lightweight but powerful source code editor that supports Windows, macOS, and Linux. It has built-in support for JavaScript, TypeScript, and Node.js, and supports more languages and runtime environments through a rich extension ecosystem.
  • WebStorm: A powerful commercial IDE developed by JetBrains, designed for the modern JavaScript ecosystem, supporting frontend frameworks and libraries like React, Angular, and Vue.js. It provides advanced features such as code completion, refactoring, a powerful debugger, and tight integration with various build tools and version control systems to enhance web development efficiency and experience.
  • Edge: Microsoft’s Chromium-based browser
  • Firefox: Mozilla’s browser
  • Chrome: Google’s browser — the most recommended

Version Control Tool Git and Code Hosting Platform GitHub

Git and GitHub are like a library management system and a library: Git manages code, GitHub stores code. Before you actually start writing code, I suggest you first get to know Git and GitHub. Learn Git basics, grasp version control concepts and basic operations.

  1. Video tutorial: https://www.bilibili.com/video/BV1HM411377j
  2. Text tutorial: https://www.bookstack.cn/read/git-tutorial/README.md

Use GitHub for code hosting and collaborative development:

  1. Video tutorial: https://www.bilibili.com/video/BV1hS4y1S7wL
  2. Text tutorial: https://docs.github.com/en/get-started

If you have time, it’s best to also go through these two tutorials:

  1. SSH, the login tool for Linux systems: https://wangdoc.com/ssh
  2. Basic usage and shell scripting of Linux command-line Bash: https://wangdoc.com/bash

Why learn Git and GitHub first? Because the learning process is all about continuously writing code. Having a tool that records every line of code you write not only helps when job hunting — others can quickly see your commit history — but also lets you clearly feel your progress each day after you commit, giving you a strong sense of accomplishment.

The Three Pillars of Frontend

HTML

Builds the structure of a webpage. Think of it as the framework of a house.

Related resources:

  1. MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML
  2. Runoob Tutorial: https://www.runoob.com/html/html-tutorial.html

Start learning from the basic tags, and make sure to write a lot of code so you have some impression of each tag. Stuck in development? Use AI tools to ask questions. Recommended AI tools (won’t repeat later):

  1. Yucongming AI: yucongming.com
  2. devv.ai — an AI tool better suited for programmers
  3. Tongyi Qianwen (also has corresponding VSCode and WebStorm plugins)

CSS

Styles the webpage, including layout, color, fonts, etc. Think of it as the interior and exterior decoration of a house.

Related resources:

  1. A CSS specification and code style guide: https://github.com/chadluo/CSS-Guidelines

CSS is actually quite complex. During learning, you don’t need to memorize everything — just get a rough impression. Later, when you encounter a problem, you’ll know which property to use. After you’ve finished learning HTML and CSS sequentially, take a break and test whether you’ve truly mastered the material. Here are two tasks:

  1. Play through the freeCodeCamp【Responsive Web Design Certification】like a game.
  2. Build a static website entirely on your own without watching video tutorials (e.g., clone JD.com’s PC homepage). Check out this pure HTML + CSS website with many GitHub stars: https://github.com/codewithsadee/vcard-personal-portfolio

After completing these two tasks, let’s climb the third mountain: JavaScript — a language that’s consistently in the top 10 of programming language rankings. Proof: image.png

JavaScript

A scripting language that brings interactivity to web pages — the magic that makes a webpage “come alive.” Think of it as the electrical and smart home system of a house.

  1. Basics: https://wangdoc.com/javascript/
  2. ES6: https://es6.ruanyifeng.com/

Related resources:

  1. MDN Learning JavaScript: https://developer.mozilla.org/en-US/docs/Learn/JavaScript
  2. freeCodeCamp JavaScript Algorithms and Data Structures: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/

JavaScript is the core technology of frontend, so be sure to practice by writing a lot of code. If you run into problems, ask AI promptly, or ask others. If you have time, consider reading these books to improve your JavaScript skills (not required):

  • JavaScript Advanced Programming
  • You Don’t Know JS
  • JavaScript: The Good Parts
  • Eloquent JavaScript
  • JavaScript: The Definitive Guide

After learning the frontend trilogy, you can now add some events to your static projects and make the website “come alive.” If you try building websites with just raw technologies (HTML, CSS, JavaScript), you’ll find development is slow — especially for complex sites — and the code is hard to maintain. At this point, you’ll urgently need a framework to boost efficiency. So next, you can learn a framework and experience its magic.

Modern Frontend Development

Essential Environment: Package Manager

Before learning a framework, you need to learn about package managers such as npm, yarn, pnpm, etc. Learn the basics of using packages including installing, updating, and managing dependencies. During this process, you’ll find you need to switch Node versions and npm registry mirrors. Recommended:

Frontend Framework

Learn Vue 3 directly — Vue 2 is no longer maintained.

I think Vue’s official website is the best tutorial and the best documentation, bar none. Vue is easier to get started with, so I recommend learning Vue.

Vue server-side framework (not required):

Nuxt: https://nuxt.com/

(If you can, read the English docs since they’re more accurate and up-to-date.)

Reference resources:

  1. Vue source code learning: https://juejin.cn/post/6925668019884523534
  2. Two big names in the Vue community:

React (currently the most used in large companies)

The new official docs were rewritten by Dan Abramov — they’re excellent. If you can, read the English version: https://react.dev/

React server-side framework:

Next.js: https://nextjs.org/

(Read the English docs if possible.)

Reference resources

  1. Ruan Yifeng’s React technology stack tutorial: https://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
  2. Geek Time React Hooks course: https://time.geekbang.org/column/intro/100079901
  3. Dan Abramov: https://overreacted.io/

No matter whether you learn Vue or React, after finishing the framework, you should build a single-page application using it — for example, create your own blog, then deploy it to the internet. Oh, and make sure to include it as a personal project on your resume. Refer to the following articles and video tutorials:

  1. https://www.bilibili.com/video/BV1rU4y1J785/
  2. https://www.bilibili.com/video/BV1uK411p7Bp
  3. https://zhuanlan.zhihu.com/p/554519860

Build Tools and CSS Preprocessors

Build Tools

webpack (recommended to learn)

Vite

Vite is the new generation bundling tool — faster and simpler. Currently, Vite’s underlying packaging relies on Rollup (a bundler), so knowing a bit about Rollup helps when using Vite. Learning goal: Use a build tool to package and deploy a project from scratch — for example, create your own scaffolding tool or publish your own npm package.

CSS Preprocessors

Less

Sass

Learn the following chapters from the course: image.png

Learning goal: Refactor a project using a preprocessor to improve CSS authoring efficiency.

Advanced Learning

By now, you’ll probably realize there are some topics you haven’t touched yet, like TypeScript, Node.js, ESLint, Prettier, etc. These are now essential skills for developing large-scale projects. Let’s dive in!

TypeScript

Reference resources:

  1. Yayu’s TypeScript course: https://ts.yayujs.com/
  2. TypeScript introductory tutorial: https://ts.xcatliu.com/

Learning goal: Refactor your project using TypeScript.

Node.js

References:

  1. Ruan Yifeng’s Node tutorial (unfinished): https://github.com/wangdoc/nodejs-tutorial
  2. Node minimal tutorial: https://www.yuque.com/sunluyong/node

Learning goal: Write your own scaffolding tool, and use node-puppeteer to automate some tasks.

CSS Frameworks

Choosing between Tailwind CSS and Bootstrap depends on project requirements and development experience. Tailwind CSS suits projects that need high customization and unique styling, while Bootstrap is great for rapid development and standardization. Choose the framework that best matches your project and team. Learning goal: Use a CSS framework to simplify styling and boost page construction efficiency.

Mini Program Development

Here I’ll assume you mean WeChat Mini Programs. No matter which tech stack you use, you should go through the official WeChat Mini Program docs: https://developers.weixin.qq.com/miniprogram/dev/framework/

Vue tech stack: uni-app (which is very similar to Vue)

Reference: https://juejin.cn/post/6899642866693423111

React tech stack: Taro — this framework is used for large-scale mini program development.

Learning goal: Build your own WeChat mini program and publish it.

Design Patterns

Understanding common design patterns helps you write better, more maintainable code. References:

  1. https://juejin.cn/post/7306459858127732786
  2. https://juejin.cn/post/7211026540129157180
  3. https://github.com/lxj/javascript.patterns

Frontend Engineering

Code Quality Tools (ESLint, Prettier, SonarLint)

ESLint

Prettier

SonarLint (not required, but I find it very helpful — it detects and highlights bugs, vulnerabilities, and code smells in real time, helping you improve code quality.) Learning goal: Add ESLint + Prettier to your project to maintain a consistent code style.

Frontend Performance Optimization

I haven’t practiced this myself yet; I found these resources online that I’ll likely use in the future. If you have good resources, please let me know! Reference: https://woai3c.github.io/introduction-to-front-end-engineering/

Hands-On Projects & Contributing to Open Source

Personal Projects

  • Blog
  • Others

Goal: Build one (or more) personal projects, deploy them online, and put them on your resume.

Community

  • Submit PRs to open source repositories
  • Publish articles on Juejin, SegmentFault, 51CTO, CSDN, etc.

If you contribute code to well-known open source projects, you can also list that on your resume.

Common Questions from Self-Learners (Beginners)

There are so many HTML/CSS properties — how can I remember them all? What if I forget earlier content?

Forgetting earlier content is completely normal. The key when you start learning is to write a lot of code so you develop a deeper impression. When you need a property, just look it up in the docs or ask an AI. Even senior frontend developers can’t work without a search engine (at least I can’t).

What if I lose motivation after a while?

Create things that give you a sense of accomplishment. Learn by recording and outputting. Learning itself gives little positive feedback, so you need to actively build a positive feedback loop. Then learning can be as enjoyable as playing a game.

What to do when stuck on a bug or a learning block?

  1. Ask Google
  2. Ask AI
  3. Join some communities — for example, the Programming Navigation Knowledge Planet — and ask experienced frontend developers.

Do I need to go deep into JavaScript?

Yes, but you can’t become an expert overnight. I think my JavaScript skills are just average, but in today’s framework-centric ecosystem, even with average JavaScript you can handle daily work. Let me share a big-name developer’s learning method: “Learn the basics of a technology, build a project, write a resume for a related job, then join the company and get paid to learn.” I agree with this, because on the job you’ll encounter many scenarios, which is the fastest way to grow technically, plus the pressure forces you to learn.

How to prepare for interviews?

In my understanding, an interview is about selling yourself — you need to package and present yourself so the interviewer thinks, “Wow, I have to hire this person.” So before the interview, memorize all the “eight-legged essays” (common questions), practice algorithms, prepare for interview questions, etc. Interviewing and working are two different things. References:

  1. Programmer Yupi’s step-by-step guide: https://bcdh.yuque.com/staff-wpxfif/resource/yvtiza4dmgumk3dt
  2. Ruan Yifeng’s “How to Write an Effective Technical Resume”: https://www.ruanyifeng.com/blog/2020/01/technical-resume.html
  3. The Essence of a Resume: https://github.com/Wscats/CV

How Can a Backend Developer Quickly Get Started with Frontend?

I asked my backend partner, Songbai, how to get into frontend quickly. His answer was: image.png I totally agree. Backend developers already have a programming foundation, so learning another language is relatively easy. HTML + CSS are straightforward, and JavaScript is no problem. So all you need to learn is a framework. And Vue’s official documentation is so good — what more can I say!