2021 web front-end development video tutorial, self-study web front-end development technology,Full setweb front-end learning route notes
【Introduction】: Problems that beginners who are new to web front-end often encounter, 1 . No method 2. No resources 3. No experience and don’t know where to start. Code Brother (DaiMaGe3) was also a novice before and can understand the difficulties of web front-end novices. In order to better help everyone learn web front-end development on their own , I have shared my carefully sorted web self-study materials, experiences and complete web front-end learning route, hoping to be helpful to friends in need!
【Digest】:
1. Why should you learn web front-end development?
2. Who can learn web front-end development?
3. What are the benefits of self-study web front-end development?
4. How to learn web front-end development efficiently?
5. What practical projects + cases are included in the self-study web front-end course?
6. Part of the entire web front-end course video + source code + notes and pictures.
【正文】：
- Why learn web front-end development?
- The main reason is good employment and good salary
Note: With the in-depth development of the mobile Internet, multi-screen interaction and multi-terminal compatible and friendly interfaces have become important requirements for the current system, making front-end development engineers a talent that is in short supply in the current market.
2. No restrictions on majors: computer majors and non-computer majors account for 3:4
3. Suitable for people with zero foundation: professional and gender are not limited, and you can learn even if you don’t have a foundation.
4. Quick to master technology: 4 months, quick learning and system mastering
5. Stable career: All software projects require front-end development. If IT is there, front-end is there.
2.Who can learn web front-end development?
1.Currently enrolled university students
2. New graduates in technology
3. Non-working IT personnel who want to change careers with zero foundation
4. Working IT staff who have the foundation and want to change careers
5. IT developers who want to improve their skills
...........
3. What are the gains from passingself-study web front-end developmentcourse?
- Proficient in front-end development HTML, CSS, JavaScript and other core technologies, proficient in Vue, React
- Be proficient in using object-oriented thinking for programming, and master the ability to deal with business programming and common compatibility solutions
- Proficient in the front-end and back-end division of labor development process, native Ajax request process and details, and master common cross-domain skills
- Able to skillfully develop web page functions based on jQuery related APIs
- Proficient in using H5 to implement project development, using native JS to develop mobile web pages, and using bootstrap and CSS3 media queries to develop responsive web pages.
- Proficient in modular programming and proficient in using Node.js and Express framework to add, delete, modify and query MySQL database.
- Proficient in the application of artTemplate template engine
- Proficient in persistence and authentication based on cookies, sessions, and tokens
- Proficient in front-end and back-end separation development model
- Proficient in Webpack project packaging configuration process
- Proficient in WeChat mini program project development
4.How to learn web front-end development efficiently?
According to the author’s experience, I follow the following 8-stage self-study method, work steadily, and gradually consolidate the knowledge points I have learned:
Phase 1: Front-end basics
Learn: HTML, CSS, HTML5 and CSS3 basics
Mastery: Able to complete the development of PC-side static web pages based on PSD files. After learning this stage, it is not yet able to meet corporate employment standards.
Phase 2: Mobile Web page development
Learning: H5C3 advanced Flex scalable layout mobile web development
Master: Be able to complete the development of mobile web pages, responsive pages and cool pages. After learning this stage, you will not be able to meet the enterprise employment standards.
Stage 3: JavaScript web programming
Learning: JavaScript basic syntax, WebAPI programming, jQuery rapid development
Mastery: Be able to complete the development of functions and special effects in PC web pages, mobile web pages, and responsive pages. After completing this stage, you will have certain basic enterprise employment standards, but have not yet reached the level of a junior front-end development engineer.
Stage 4: Node and Ajax
Learning: JavaScript basic syntax, WebAPI programming, jQuery rapid development
Mastery: able
Stage 4: Node and Ajax
Learning: Ajax+HTTP Basic use of Git and github Node basics npm+module loading mechanism Express MySQL database web development mode, identity authentication + session, jwt
Mastery: Be able to complete front-end and back-end data interaction, development work based on front-end and back-end separation models, and traditional models. After completing this stage, you will have basic enterprise employment standards and be able to reach the level of a junior front-end development engineer.
StepFive : Vue.js 项目实战
Learning: webpack Vue-cli3 and Element-UI Vue-cli3 (Vue scaffolding), Element-UI component library
Vuex basics, [Case] todos case based on Vuex [Project] Social media-Toutiao project HR-saas middle-end management project
Mastery: Be able to realize development capabilities based on Vue technology stack projects. After completing this stage, you will have enterprise employment standards and be able to reach the level of an intermediate front-end development engineer.
LevelSix: WeChat Small Steps
Learning: Introduction to WeChat Mini Program, WeChat Mini Program configuration, WeChat Mini Program code composition, WeChat Mini Program hosting environment, WeChat Mini Program collaborative work and release, WeChat Mini Program basics, WeChat Mini Program advanced, WeChat Mini Program data requests and cases , WeChat Mini Program page navigation, WeChat Mini Program page events and pull-up bottoming cases, WeChat Mini Program life cycle and wxs
Master: Be able to use the native mini program framework and uniapp framework to develop WeChat mini program projects. After completing this stage, you will have enterprise employment standards and be able to reach the level of an intermediate front-end development engineer.
PhaseSeven : React.js project practice
Learning: Basic usage of React, JSX syntax, basics of React components, advanced React components, React principles and optimization, React routing
Master: Be able to realize project development capabilities based on the React technology stack, cooperate with common component libraries to solve some common problems in the project, and meet common needs in the front-end development industry. After completing this stage, you will have enterprise employment standards and be able to reach the level of an intermediate front-end development engineer.
StageEight : Interview guidance + front-end interview questions
Learning: Front-end - job interview guidance skills: resume content, job search content, interview content, job content, market conditions, personnel content, and work psychology
Master: Through interview guidance + employment guidance materials + front-end interview questions + review, after completing this stage, you will have corporate employment standards and be able to reach the level of an intermediate front-end development engineer
5.What practical projects + cases are included in the self-study web front-end course?
By learning and practicing the following 7 special projects, you can quickly improve your self-study level and accumulate corporate project development experience, helping self-learners lay the foundation for future salary increases in the workplace. DaiMaGe3’s 7 featured practical projects are as follows:
01. Xuecheng.com online project
The Xuecheng Online case is an online education platform. In this case, HTML+CSS is used for page layout. The homepage mainly includes the header area of the webpage, the banner area of the webpage, course navigation and course list.
02. Pinyougo e-commerce project
The Pinyougo e-commerce project is a B2C e-commerce platform, similar to JD.com and Taobao. In this project, HTML+CSS/CSS3 is used to implement page layout and dynamic effects. It mainly implements the e-commerce homepage, list page, and detail page. , you can switch between the three pages.
03.ECharts data visualization project
It is a data visualization display platform. This project is widely used in enterprise backends. The page layout in the project is adapted using rem+flex+felxible.js. The map display, charts, etc. in the project are all implemented based on ECharts.
04.Big event projects
It is a CMS content management system. The layout and interaction of the project are mainly implemented using Layui. The functions implemented mainly include registration, login, writing articles, publishing articles, modifying articles, article category management, deleting articles, paging, uploading article picture covers, Article data visualization, password reset, avatar change and other functions.
05. Big event back-end interface project
It provides back-end interface services for major event projects. The project mainly uses Express+MySQL+cors+bcryptjs, etc. to implement back-end interface development. The project mainly implements login and registration interface development, personal center related interface development, and article category management related interfaces. Development and article management related interface development. By studying this project, you can become familiar with the general process of back-end development, lay a solid foundation for data interaction with back-end personnel in future work, and have certain back-end interface development capabilities.
06. Yougou Mall Project
Yougou Mall is a small program e-commerce business project. The project starts from the classic business needs of enterprises and covers core modules such as product classification, product list, product details, shopping cart, orders, WeChat payment, and customer service.
07. Haoke rental project
The Haoke rental project is developed using the current front-end React technology stack, covering the most commonly used technologies in React and solutions to mobile scenario problems. It uses the workflow provided by React's official scaffolding tool to quickly build and develop the project, and uses Alibaba's antd- The mobile component library builds the page structure, uses React-Router-DOM as the front-end routing to manage complex pages, uses Baidu Map API to implement geographical positioning, and directly searches for real estate on the map and other practical functions.
6.Part of the complete set of web front-end course videos + source code + notes and pictures.
This is the learning route and experience I have summarized myself. It is relatively rigorous and concise. Generally, if you follow this, you will have no problem finding a job with this knowledge. If you have any questions about the front-end that you don’t understand, you can PM me at any time.