It is not a dream to follow the roadmap and persist in learning from the front-end Xiaobai to the master. It is enough to read this article with 0 basics!
Students remember to pay attention, like and collect, so that you will not be confused on the way of self-study!
A quick overview of the front-end roadmap for self-study of zero-based Xiaobai:
Phase 1: Getting Started with Core Basics
Front-end computer common sense ➾ html+css basics ➾ html+css project practice
Phase 2: Advanced Core Technology
JavaScript Basic + Advanced ➾ Ajxa ➾ JavaScript Application Project Practice ➾ Node.js ➾ MongoDB Project Practice
Phase 3: Must-Have Technologies for Enterprises
Vue&React Development: Vue2.0+3.0 ➾ Vue Project Practice ➾ Data Visualization Project ➾ React ➾ React Project Combat ➾ UmiJS Project
Phase 4: Official Account & Mini Program Development
WeChat Official Account ➾ WeChat Mini Program ➾ Mini Program Project Actual Combat ➾ uni-app ➾ uni-app Project Actual Combat
Stage 5: Must-learn for advanced front-end improvement
Webpack5 ➾ Vite2 ➾ Typescript ➾ Harmony OS Hongmeng Development
Detailed explanation of the front-end learning route:
Front-end computer common sense
The course is an introductory computer knowledge course for Xiaobai with weak computer foundation, covering computer hardware, operating system, storage unit and binary, software installation and decompression, IP, server, DNS, domain name, environment variable, character garbled code, linux Operating system, keyboard fingering, computer English, multi-process and multi-thread, common system settings, using browser, CMD command, office software and other computer knowledge. Close to actual needs, the atmosphere is relaxed and happy, and it is a must-learn general science course for computer beginners. After completing this course, you can fully grasp the basic knowledge of computers and lay a good foundation for the next programming learning.
Getting Started with Front-End Core Basics
The following video is an introductory study guide specially prepared for zero-based front-end learners. You can watch it directly if you don’t have a little foundation! You will learn web-side page construction from scratch, and master the primary core foundation of front-end development effortlessly.
1. Getting started with HTML5+CSS3 - you have to handle it
This series of courses is full of dry goods from the concept to the specific basic knowledge points. It has found a good learning starting point for the front-end beginners. It can be used as the front-end development and learning "the place where the dream begins". Real cases consolidate knowledge, combine learning and practice, and lay a solid foundation, you are not afraid of failing to learn!
2. HTML+CSS PC project actual combat
This course is about the actual combat of HTML+css PC-side projects. By explaining the homepage and login page of Lagou.com, you can further learn to apply HTML+CSS after learning, and master the use of page layout, labels, attributes, etc., so that you can learn from it from an early age Bai evolved into a real web page beautifier.
Advanced Core Technology
It is not enough to learn the static beautification of web pages. Let your web pages perfectly interact with users and learn animation effects to open up the front-end and back-end channels. JavaScript and Node.js languages, which are necessary for front-end engineers, must also be learned and applied.
1. Basic advanced and application of JavaScript
The main content of this video is the most complete and up-to-date, including JS foundation, based on object-oriented development practice, front-end and back-end interaction practice, jQuery and BootStrap, and CSS preprocessor Sass, creating a one-stop long-term knowledge service, suitable for students with HTML and CSS foundation study.
2. Ajax extension
Ajax is "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a web development technology for creating interactive, fast and dynamic web applications, which can update some web pages without reloading the entire web page. Mastering this language can realize a small amount of data interaction between the background and the server and asynchronous update of web pages. This series of videos includes explanations of Ajax basics and practical technologies such as packaging, promise, fetch usage, CORS, and jsonp.
3. Actual combat of JS application projects
This project is based on native JavaScript and other front-end technologies to imitate Xiaomi e-commerce website, including front-end code design technology stack, JQuery, scss, Gulp, modular development, back-end construction technology PHP, MySQL and other back-end programming knowledge, students can also After learning these knowledge points first, start with the actual case of this project, and get through the front-end and back-end links in one step.
4. Introduction and application of Node.js
In this video, you will learn npm, nrm, and yarn from the beginning of knowing Nodejs; built-in modules, routing, express, MongoDB, authentication, koa, MySQL, Socket, Mocha and other knowledge points are fully covered. After learning this series of videos, you can let front-end programmers Plug in the wings of the back end, truly become a full-stack engineer, and help students develop horizontally and comprehensively. After the explanation of each major knowledge point, the absorption of knowledge points will be driven by actual demand cases, and the humorous explanation will drive the enthusiasm for learning, helping everyone quickly grow into a Nodejs development master.
5. Node.js project
The practical video course of this project can not only let you understand the 6 limitations of RESTful API and some best practices, but also master technologies such as Koa2. Postman. Online deployment method of cloud server.
Enterprise must-have technology upgrade
Just talking but not practicing fake moves, optics does not do false work. After learning the above-mentioned popular core technologies, it is necessary to further master the development technologies required in the real scene of the enterprise, and be able to make corresponding solutions for the corresponding business needs of enterprises in different industries. Vue, applets, React, and Uniapp are popular technologies at the moment, and they must be mastered by students. Finally, for a front-end engineer to keep making progress, to expand capabilities, and to improve advanced capabilities, everyone needs to learn webpack5, Vite, and TypeScript.
Vue&react development stage
1. vue2.0+vue3.0 knowledge points+projects
Vue.js is committed to building a data-driven web application development framework. It is loved by enterprises and front-end developers for its simplicity, lightweight, data-driven, and module-friendly advantages, and has become an essential skill for front-end developers. This course is driven by actual project combat, with relaxed and humorous storytelling, to help you open the door to Vue.js, easily transition from vue2 to vue3, and help students become an excellent Vue.js developer.
2. Vue+ElementUI property background management system
This project uses Vue3.0 + Element Plus UI technology to develop a background management system. In this video, you will witness building a project from scratch, teach you how to use vue3.0 component development, and use the Element UI library to quickly create project pages, using axios packaging Interact with the interceptor at the front and back ends, and use json-server to simulate data background creation. In the project, it will also talk about the encapsulation of tool libraries, the deployment of vue environment variables, the setting and configuration of routing, and responsive configuration.
3. Echarts+Vue3.0 data visualization project construction
The practical course of this project gives a detailed explanation of various core icon technologies and peripheral technologies in Echarts. A set of courses allows you to be proficient in the Echarts technology stack, connect Echarts and vue3.0 popular technology applications, and make big data visualization development as easy as possible. Silky smooth!
4、React
React has become the mainstream front-end development framework of big factories in Jianghu. This video is based on the latest version of React17. Explain in detail the core technology of React development and the surrounding technology stack, and further drive the absorption of knowledge points through actual demand cases to help everyone quickly grow into a master of React development. Finally, there is a complete practical explanation of the background management system project, so that everyone can know the development process and details of the real project team inside the company even if they are not in a large factory.
5. React project practical tutorial (global press release management system)
The practical tutorial of this project is a one-stop application of React Family Bucket to build an enterprise-level background system, which seamlessly meets the needs of various schools, so that you can know the storm without entering the rivers and lakes. Students have watched the above basic React development video first, and are familiar with React component development, component communication and basic routing development, and then it will be better to eat this practical tutorial.
6. React project UmiJS cake order management platform
Explain the basic use of Umijs from five aspects: getting started with Umijis, LeanCloud cloud services, product management and other business logic, role and authority management, AutoNavi maps and Echarts, so that students can quickly get started with the Umijs framework. Using LeanCloud cloud service as the back-end interface of the project, combined with Umijs framework, serverless cloud service realizes business logic interaction, role authority management, and finally completes the drawing function of cake distribution range, and uses Echarts to realize data visualization function
Official Account & Mini Program Development Stage
1. WeChat official account development
This series of courses starts with the introduction of the entire WeChat official account system, and further uses the editing mode to complete the construction of the most basic official account; in addition, you will also learn about the development model of the official account and the required server-side knowledge, including Express , MongoDB, Robo3T, mongoose, cloud server, etc.; will also sort out and develop the entire process of WeChat JS-SDK authentication; use the Vue technology stack combined with the vant component library to build web applications and integrate them into the WeChat public platform.
2. Wechat mini program project development
This series of video courses is divided into two parts, the basics of WeChat applets and the actual development of projects. In the basic learning part of small program development, you will learn from the development process to the basic knowledge of global configuration, todolist, basic grammar, components and custom components. The explanation of the actual development part will be from project construction to excuses, packaging, home page module, carousel module, search module, classification module, authorization module, shopping cart and my module in-depth analysis of the applet.
3. Native Mini Program - Fengyun Ticketing System - Management System Based on WeChat Cloud Hosting
This set of "Native Mini Program - Fengyun Ticketing System" course is a native mini program case practice course for developers with a certain front-end foundation. The course covers the business process of the client and the middle and back office, and the deployment of the server explains in detail the project deployment process of WeChat cloud hosting. The overall project starts from the perspective of enterprise practice, technology sharing of multiple common business secondary packaging, component reuse, and reasonable application of third-party class libraries.
4. Fengchao Live IM — Cross-platform application based on Tencent Cloud audio and video (first release on the whole network)
This video uses Tencent Instant Messaging IM+ live e-commerce solution component TLS, and involves many Tencent cloud products, including but not limited to cloud live broadcast, cloud database, Serverless, providing a one-stop explanation to help you quickly integrate live e-commerce functions to In my own business, the enthusiasm for learning is driven by humorous explanations, so that everyone can know the whole picture of the company's projects without joining the company.
5. "Imitation NetEase Cloud Music" from uni-app entry to actual combat project
Uniapp is based on the "Vue + WeChat applet" language system. Developers have low learning costs and can get started quickly. With the current Uniapp ecology, it is gradually becoming mature. Developing multi-terminal projects based on Uniapp is already a common technical solution for many small and medium-sized enterprises. We started from the Uniapp foundation, and compared with the enterprise-level practice standards, we built a multi-terminal (WeChat applet + H5 + Android app + IOS app) community forum project from zero to one.
6. uni-app cake order project development tutorial
This project is a cake customization website for some urban groups, providing online customization and real-time delivery for users in designated areas, and creating personalized cake customization services combining online and offline.
Front-end high-level promotion stage
1、webpack5
The webpack5 course is divided into four parts, namely the basic application of webpack, the advanced application of webpack, the actual combat of webpack projects, and the internal principles of webpack. In this course, we will learn webpack5 from 0 to 1 through the echoing demos, apply what we have learned in the actual project and understand its underlying principles in the final stage, so as to achieve the essence of knowing what webpack5 is and why The level of proficiency has completed a big step forward for front-end engineers.
2、Vite2
Vite is a front-end construction tool based on native ES-Module. Vite is known as the next-generation front-end construction tool because of its ability to cross front-end frameworks and extremely superior performance. It is necessary to learn new technologies in a timely manner. In this series of videos, you will learn how to build the Vite environment, rely on pre-build, module hot reload, use vue2\vue3\CSS and other technologies in Vite, server rendering and other related technologies.
3、typescript
This set of videos will start with the knowledge points on the official website, and will be divided into 4 chapters: Basic, Advanced, Case and Project. Combined with the case, it will take you to get started with TypeScript step by step. This video is also accompanied by detailed text notes to help you learn TypeScript from 0 to 1, so that you can read other people's TS codes and write your own TS codes at the same time.
4. Write a HarmonyOS app from scratch
This actual case of the project will teach you how to write the Huawei Hongmeng app from scratch. This video includes technical details of the Hongmeng system, a comprehensive analysis of the ecosystem, and a detailed explanation of the technical architecture of the Hongmeng system. Finally, everyone can develop their own first app. A Hongmeng app! Really use the core technology points learned in series.
If you want to be strong but not sharp, success is not fast.
Take a certain amount of time every day to clock in and study the course videos, and you will definitely gain something if you stick to it!
Join the learning community to learn together and exchange learning experiences with everyone~ The community will release the latest video updates and first-hand news from time to time!
Every front-end person must ensure that there are corresponding knowledge point exercises and project exercises at the stage of learning technology, and keep learning new technologies so as not to be left behind. This set of front-end roadmap is also presented to everyone according to this idea.
We will update the front-end learning roadmap and the latest front-end dry goods teaching videos from time to time.
For your uninterrupted growth, don't forget to click three times! Bookmark the learning route, watch it, learn it all the time, and update it all the time.
Finally: I wish everyone can get promoted and raise their salaries in the growth path of front-end engineers.