Background

Hi everyone, I’m Axing. I’ve been a frontend developer for almost three years now (including my internship). During a recent live stream by the programmer Fish Skin, he shared a frontend learning roadmap and I felt I learned a lot from it. I also realized I’d never really organized my own frontend learning path or my technical map in a systematic way. So I thought I’d take this live stream sharing as an opportunity to also sort out my three-year frontend learning journey and my personal understanding of frontend development.

Below I’ll share:

1. My journey from first encountering frontend to becoming a frontend developer
2. Then I want to share how I think someone can quickly get started with frontend in 2024 and join the frontend worker family
3. Then I want to share my understanding of how backend developers can quickly get started with frontend
4. Finally, I want to reply to some common questions I’ve seen from newcomers (just starting frontend) from my own understanding

My Self-Taught Frontend Journey

The story of an ordinary third-tier college (Huanghe Science and Technology College) student becoming a frontend programmer. Although my experience can’t be replicated, some lessons can be drawn.

First Meeting Frontend, Deciding to Become a Frontend Worker

In 2021, I was a junior in college. The school offered a course called “HTML5 Web Design.” After finishing it, I fell in love with it — it was way more fun than the C++ I’d been learning before. Near the end of the course, our school happened to collect a future planning form: graduate school or work? What specific industry to go into? Feeling lost, I found the course I loved, “HTML5 Web Design,” and the corresponding job position “Frontend Development Engineer.” So I filled in: Frontend Engineer. Like most beginners, I thought about signing up for a training class. But after weighing multiple factors, I eventually decided to teach myself. I started looking for a good course. First I searched on Bilibili, but all of them had one problem — they weren’t systematic enough. My goal was to learn enough to get a job, so I tried searching on Taobao and Xianyu. Sure enough, persistence paid off — I found the Heima frontend systematic course. Here’s the course roadmap from back then: https://zhuanlan.zhihu.com/p/359288649. If you’re a complete beginner in programming, you might spend a long time finding the course that makes you want to learn all the way through, because that’s how I was. At that time, I really wanted to sign up for a training class to get the latest tutorial plus a teacher to guide me, rather than just any course I happened to find. Looking back, as long as you have clear goals and strong execution, free resources are more than enough.

Grinding Hard, Sending Resumes, Painful Internship Life

Once I decided to learn frontend and figured out what to learn, I started studying. I genuinely liked frontend back then. One night at 4 a.m. I was still studying JavaScript. I even volunteered to build the official website for our Engineering Department for free. Back then, with only HTML + CSS + JS knowledge, I wrote many pages. Though the site wasn’t adopted, I got to know the head of our Engineering Department through it, who later helped me solve my credit shortage problem. Karma works in mysterious ways (lol).

After finishing the frontend three-piece set (Teacher Pink’s videos), summer break was approaching. Based on analysis with my roommate, I boldly sent out resumes with only those three technologies — yes, just the frontend three-piece set. I got a few interviews (so the job market was pretty good back then). Not surprisingly, I failed all of them, but I gained a lot. I knew I needed to learn a frontend framework. So over the summer, I learned Vue and built two projects. Maybe I wasn’t as fast as someone in a training class, but I still made it happen. That period was also very anxious for me, because I didn’t know if I met market demands. No one was guiding me, and I had no one to ask (if only the Programming Navigation community had existed back then). In September, I rewrote my resume and started sending it out, memorizing frontend interview questions every day (recommended by Teacher Pink). Every day was filled with anxiety. I interviewed at four or five companies and got two offers. One had a higher salary but the company didn’t seem great; the other was more formal and larger (at least for me at the time). I was satisfied with the offer I accepted.

When I started my internship, the company used a React tech stack. My manager asked me to learn React. After I finished learning, I told my supervisor I was ready to work. But no one mentored me — they were all busy and didn’t assign me tasks. Despite the misunderstandings from many senior colleagues, I proactively asked my supervisor for tasks. My supervisor was really good — he assigned me work and patiently guided me. I was really lucky! The early days of my internship were painful because I had to read legacy code. The code was deeply coupled with business logic, with almost no documentation or comments. I even got scolded for asking senior colleagues about code issues. Looking back, it was indeed my problem — if you can Google something, never ask someone else.

Let me show you the code I uploaded to Gitee and GitHub during my learning phase. I actually built many projects, but I thought the code was too bad, so I deleted them. These are from the Heima course practice sessions.

This is the resume I submitted in September 2021, built using the skills I’d learned (I can’t stand looking at it now).

Continuous Learning

After working for a while, I found I could fully handle the job and had a lot of free time at work. So I started learning other technologies, such as: coderwhy’s webpack course, Wang Pei’s React Hooks course, coderwhy’s Vue3 course. Later, I joined the Programming Navigation knowledge planet, self-studied WeChat Mini Programs, built my own expense tracker: https://articles.zsxq.com/id_olncmzwhm8xn.html, learned the full-stack framework Next.js, and created my own blog. I also turned some of the knowledge and work experience I gained into articles and shared them. According to the Feynman technique, output is the best input.

Summary

Act Toward Your Goal

I might not have been aware at the time that I was acting toward my goal (finding an internship job), but looking back now, I was always moving forward toward that goal. So, set clear goals, make a plan, and execute the plan — that’s all you need!

Having a Mentor (or the Right Environment) is Also Important

1. Most people are influenced by their environment. So choosing your environment is choosing who you want to become. In my junior year, I was under the pressure of feeling like I’d be unemployed right after graduation, which forced me to take action.
2. If you have someone guiding you along your growth path, that’s incredibly lucky! Although knowledge itself doesn’t change, everyone encounters different problems during the learning process. If you have a mentor, they can spot issues at a glance, prescribe the right solution, keep you from going astray, and save you a lot of time. So finding such a person is totally worth it.

To Everyone Willing to Work Hard and Improve: “Keep It Up”

I am definitely one of those slower learners. I took a lot of detours before gradually changing. During my growth, I was lucky to meet many patient people willing to give me a hand. I’m truly grateful to them. The least I can do is pass on that spirit — when faced with newcomers or people who have questions, I’ll try my best to help them grow, because they are the former me!

Next time, I’ll share the frontend learning roadmap as I understand it.