The front-end learning route that suits me (learn the front-end without getting lost)

Friends want to learn the front-end, but they don’t know how to start. Check the front-end learning route on the Internet. The first page is often full of advertisements of various training companies, or when you search for the front-end learning road map, a large number of road maps appear. Not sure which route is right for you.

So here I will share with you the front-end path I took.

One: Generally speaking, there are two options for learning the front end

It means whether you choose to study by yourself or apply for training classes in the society. Why should I mention this first, because in my opinion this is also a key step in learning the front end. Then I will give some suggestions of mine.

1: If you are a freshman or sophomore, have plenty of time, and have a firm belief in learning the front-end, here I suggest self-study, if your major offers front-end courses, you should communicate with the course teacher more, if you You have almost learned the front-end, let the course teacher notice you, then he may take you to do projects in the future, and even push some of his employment resources to you.

2: If you are now a junior, or even in the second semester of your junior year, you have to take the front-end path. That must have been self-taught at first. Follow the video on station b step by step. At this time, you have to make good use of the last winter vacation and summer vacation (because you will recruit in autumn in the first semester of your senior year). If you are recruited in the autumn of senior year, you go for an interview, and if you find a job, then everything will be fine. If you don't find a job, you can continue to study until a recruitment in the first semester of your senior year, but in my opinion, you can also choose to apply for training courses. It depends on your choice, because the general training class charges around 10,000 to 20,000 yuan. (I'm currently a junior and I'm studying by myself. I don't know if I can catch up with this year's autumn recruitment).

3: If you only started learning the front-end in your senior year, or if you are not satisfied with the job you found in the autumn recruitment of your senior year, you can choose to apply for training courses at this time. Generally, the fee for a training class is around 10,000 to 20,000. In the training class, because it guarantees your employment, the learning process may be very strict. If you study hard, you will definitely be able to learn. And I heard that in some training courses, if you don’t find a job in the end, it will refund some of your tuition fees, and it should have a quota for internal referrals, but it will definitely give priority to the outstanding ones, and will pack your resume and so on. (When I say this, some friends will definitely be tempted, but I am not advertising. After all, you are also a resource in exchange for money).

Two: My front-end learning route (only represents me personally)

Many people must have seen this picture, how many front-end beginners have been persuaded by the power of a picture, haha. In fact, it is not that exaggerated. In fact, you can almost find a job at the third stage, but the premise is that you must be particularly proficient in it, and it is best to have a project developed by yourself.

I am studying the learning video of Shang Silicon Valley at station b. It also organizes a learning roadmap: The most complete web front-end learning route on the entire network in 2021 - Bilibili column (bilibili.com) . I don't know about other brands' educational videos, but in my opinion, Shang Silicon Valley's learning videos are really good. (Haha, this is not an advertisement, you can choose by yourself. There is a way, that is to search for relevant knowledge points on station b, and directly follow the videos with high playback volume to learn).

Then I will also describe my front-end learning path in stages.

Phase 1: laying the foundation

html-->css-->js-->js高级-->less-->jQuery-->BootStrap-->AJAX

HTML: Hypertext Markup Language (web page structure). Learning video: Shang Silicon Valley Web front-end HTML5&CSS3 beginners zero-based entry full set full version_哔哩哔哩(゜-゜)つロcheers~-bilibili

css: Cascading Style Sheets (adding styles). Learning video: Shang Silicon Valley Web front-end HTML5&CSS3 beginners zero-based entry full set full version_哔哩哔哩(゜-゜)つロcheers~-bilibili

js: Let the web page respond to a certain behavior (make the web page move). Learning video: The latest version of the JavaScript basic full set of tutorials in Silicon Valley (140 episodes of practical teaching, JS from entry to proficiency)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

js Advanced: Describe in detail, use it in the future, interview must be face-to-face. Learning Video: Advanced JavaScript Course in Silicon Valley (Advanced JavaScript Actual Combat)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Less: is a CSS preprocessing language. Learning video: Shang Silicon Valley Front-end Less Tutorial_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

jQuery: It is a fast and concise JavaScript framework, and it is another excellent JavaScript code library after Prototype . Learning video: Shang Silicon Valley jQuery tutorial (jquery from entry to proficiency)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

BootStrap: Provides elegant HTML and CSS specifications. Learning video: [Geek Academy] Learn Bootstrap in a week_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

AJAX: front-end and back-end interaction. Learning video: Shang Silicon Valley Web front-end Ajax tutorial for beginners from zero basics to mastering a full set of full version (the latest version of ajax)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Phase 2: Paving the way before learning the framework

ES6-->Node.js-->MongoDB-->Webpack-->Git-->TypeScript-->promise-->axios

Friends, don’t think that there is a lot of content. In fact, there is not much content for each knowledge point. On average, each knowledge point will take two or three days, and the most will not exceed a week.

ES6: Some new syntax. Learning video: Shang Silicon Valley Web front-end ES6 tutorial, covering ES6-ES11_哔哩哔哩(゜-゜)つロ Cheers~-bilibili .

Node.js: Optimized for some special use cases, providing an alternative API . Learning video: [Silicon Valley] The most classic Node.JS full set of tutorials (quick start nodejs)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili .

MongoDB: A connectionless database. Learning Video: MongoDB Basic Tutorial (Database Intensive)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili .

Webpack: Essential for learning the framework. Learning video: The latest version of Webpack5 practical tutorial in Silicon Valley (from entry to mastery)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Git: It is an open source distributed version control system that can effectively and quickly handle project version management from small to very large. Learning Video: Full set of Git tutorials in Shang Silicon Valley (12h in-depth mastery of git)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

TypeScript: This should be familiar to anyone who has studied java. Learning Video: 2021 TypeScript Tutorial of Shang Silicon Valley (Teacher Li Lichao’s new TS class)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

promise: an essential part of the learning framework. Learning video: Shang Silicon Valley Web front-end Promise tutorial from entry to mastery (2021 pre-emptive version)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

axios: An essential part of the learning framework. Learning video: Getting Started with the latest version of axios and source code analysis in Silicon Valley 2021

Phase 3: Highlights (Framework)

React-->Vue-->Vue3-->WeChat applet

React: A multi-purpose framework for first-tier cities. Learning Video: The 2021 version of React technology in Shang Silicon Valley is a full set of family barrels (from zero basics to proficiency / taught by the male god Tianyu)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Vue3: new features. popular frame. Learning video: Quick start to the latest Vue.JS tutorial in Silicon Valley 2021 to actual project combat (Vue3/VueJS technical details)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Stage Four: Actual Combat.

Actual combat is to do more projects, first follow some projects on the Internet and practice more. Finally the team completes a meaningful project.

React Actual Combat: React Project Tutorial in Shang Silicon Valley (react actual combat full-stack grain background)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Vue Combat: Shang Silicon Valley Vue Practical Tutorial (Enterprise Vue Project, Vue Project Silicon Valley Takeaway)_哔哩哔哩(゜-゜)つロ Cheers~-bilibili

Stage Four: Interview Questions

Let the friends down here. I'm also about to face job hunting, but I don't have much resources on interview questions, so I rely on my almighty little partner here. Please share (haha)

Three: The official website of related technologies

html, css: HTML series tutorials (w3school.com.cn)

js: JavaScript Tutorial | Rookie Tutorial (runoob.com)

less : Less Chinese website (lesscss.cn)

jQuery：Download jQuery | jQuery

BootStrap: Bootstrap v3 Chinese documentation · Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive layout, mobile device-first WEB projects. | Bootstrap Chinese website (bootcss.com)

ES6: ES6 Getting Started Tutorial - Getting Started with ECMAScript 6 (ruanyifeng.com)

Node.js：Node.js (nodejs.org)

MongoDB: MongoDB Chinese Website

Webpack：webpack (docschina.org)

Git: search github directly

TypeScript: TypeScript Chinese Network TypeScript——Superset of JavaScript (tslang.cn)

promise: JavaScript Promise object | rookie tutorial (runoob.com)

axios: axios Chinese website | axios API Chinese documentation | axios (axios-js.com)

React: Official Chinese documentation for React – a JavaScript library for building user interfaces (docschina.org)

Vue: Vue.js Tutorial | Rookie Tutorial (runoob.com)

There are also many more practical websites such as: Ali's vector library, bootCDN, etc.

Four: Good Book Recommendation

js Redbook and Rhino Book. (If you don't know what it means, you can find it directly on Taobao. I haven't bought it yet, so I don't know the full name, haha).

Five: the end

I hope you can share more learning experiences. I haven't finished learning yet, and it takes a lot of time to do this sharing. Friends, don't be stingy with one button and three links.

If you have a small partner who wants some relevant note codes for the information, you can also comment and chat with me privately.