First month, HTML+CSS
Week 1 schedule:
It is the first step to understand the front-end entry. You must learn to install and use IDE plug-ins, master the application of H5 grammar and basic tags, and you can build simple pages this week after learning.
- 1. Understand the development of the front-end industry
- 2. Understand the significance of HTML5 for web pages
- 3. Learn common tags/attributes and build structures
- 4. Master unordered list/ordered list/custom list
- 5. Learn form tags/attributes and create common form structures
- 6. Master the label nesting rules/use of inline elements/block elements
- 7. Learn the use of VSCode development tools and be able to create simple web pages
Learning Resources:
Course: Front-end HTML5+CSS3+Mobile Web Complete Course
The second week's schedule:
CSS3 is the "beautician" of web pages. This week, I will start to learn CSS3 styles, master the grammatical structure, selectors, box models, text and font style settings, and be able to develop simple styles for web pages.
- 1. Master the basic syntax and usage of CSS3
- 2. Master various types of selectors/style attributes of CSS3 for rapid development
- 3. Learn common attributes such as text and fonts
- 4. Explain the core knowledge of the box model and understand the principles in depth
- 5. Master the setting and conversion of inline elements and block-level elements
Learning Resources:
Course: Front-end HTML5+CSS3+Mobile Web Complete Course
Week 3 schedule:
Simple style development is not enough, by mastering floating, positioning, border, background style and 2D&3D conversion, as well as layout skills. It can draw special graphics and develop more beautiful web page effects.
- 1. The core knowledge of floating and positioning can be flexibly used to realize the layout of web pages
- 2. Common layout methods to solve common layout problems
- 3. How to draw special graphics such as rounded borders/shadow frames/picture borders
- 4. Master element distortion/shift/rotation, and decorate HTML more freely
- 5. Differences between BFC specifications and browsers
Week 4 Schedule:
CSS3 can also achieve cool webpage dynamic effects. Combined with the enterprise-level online "Travel Network" project, and comprehensively apply the knowledge learned before, the layout of Qyer's homepage and the development of CSS3 animation special effects are completed.
- 1. Big project: Combining with H5/CSS3, complete the layout development of the homepage of PC Little Rabbit Fairy
- 2. Master different layout structures and techniques
- 3. Master the use of transition and easing effect, and realize common small cases
- 4. Use animation effects to achieve cool animation effects
Summary of the first month class schedule:
One month's detailed class schedule, combined with mind map time arrangement for learning!
| Course Catalog | details |
|---|---|
| HTML awareness | 1. Basic syntax of HTML2 . Typesetting tags of HTML3. Absolute path and relative path4. Multimedia tags of HTML5. Link tags of HTML6. Cases: recruitment cases, cases of today’s hot words |
| HTML basics | 1. List tags in HTML 2. Table tags in HTML 3. Form series tags in HTML 4. Semantic layout tags in HTML 5. Character entities in HTML 6. Cases: student information form case, member registration form case |
| CSS basic selector + font text style | 1. CSS introduction method 2. CSS label, class, ID, wildcard selector 3. CSS font-related styles 4. CSS text-related styles 5. CSS horizontal centering skills 6. Use of Chrome debugging tools 7. Cases : News web page case, card centering case |
| CSS selector advanced + background related attributes + element display mode + three major features | 1. CSS descendant, descendant, union, intersection selector 2. Emmet basic syntax 3. Hover pseudo-class selector 4. Background-related properties of CSS 5. Three common element display modes 6. Three major features of CSS: Inheritance 7. Three major features of CSS: cascading 8. Case: colorful navigation case |
| CSS Box Model | 1. The three major characteristics of CSS: priority 2. The weight superposition calculation method of CSS 3. The components of the box model 4. The functions and code implementation of the border, inner margin and outer margin of the box model 5. Collapsing phenomenon of outer margins 6. Case: Sina navigation case, web news list case |
| css float | 1. CSS structural pseudo-class selector 2. Basic use of pseudo-elements 3. Arrangement rules of standard flow 4. Characteristics and usage of floating 5. Common methods of clearing floating 6. Cases: Xiaomi layout case, web page navigation case |
| CSS Positioning + Decoration | 1. The characteristics and use of positioning 2. Vertical alignment 3. Border rounded corners complete the effect of perfect circle and capsule button 4. Element display hide switching effect 5. CSS completes the triangle effect 6. CSS link pseudo-class selector 7. CSS Focus pseudo-class selector 8. CSS attribute selector 9. Case: case of card module hot icon, navigation two-dimensional code centering case |
| Little rabbit fresh project pre-style + project construction | 1. The use of sprites 2. CSS background image size attributes 3. Text and text shadow effects 4. Three major SEO tags 5. Project structure construction and basic public styles 6. Actual combat: Realize the header module of "Little Rabbit Fresh Project" to develop |
| Xiaotuxian header+footer+main content | 1. Actual combat: Realize the header module development of "Little Rabbit Xianer Project" 2. Actual combat: Realize the development of xtx-entry module at the website entrance of "Little Rabbit Xianer Project" 3. Actual combat: Realize the "Little Rabbit Xianer Project" fresh good things panel xtx -new-goods module development |
| CSS3 Advanced | 1. Plane Transformation 2. Space Transformation 3. Animation |
| Flex Layout Model | 1. Use of the Flex layout model 2. Project: Xiaotuxianer-Mobile 3. Project: Xiaotuxianer-PC |
| Mobile Web Adaptation Solution | 1. Rem basic usage 2. Rem + media query adaptation 3. Rem + flexible adaptation 4. Rem adaptation principle 5. Project: amusement park 6. vw/vh basic use 7. vw/vh adaptation principle 8. Project : Station B |
| Responsive | 1. Basic use of media query 2. Media query to achieve responsive web page effects 3. Basic use of Bootstrap framework 4. Bootstrap framework grid system 5. Project: Tencent Full Terminal |
Second month, JavaScript
Week 5 schedule
JS is the first step in web programming. This week, I started to learn the JS programming language, and mastered the basic grammatical structure, variable declaration and naming rules, data types, expressions and operators. After learning this week, I can write simple JS code.
- 1. Master the basic syntax of JS
- 2. Master the mechanism of JS variable declaration and promotion
- 3. Master JS operator operations and expressions
- 4. Learn the use of basic data types and complex data types
- 5. In-depth understanding of data type conversion and detection
Week 6 schedule
Continue to study the JS programming language in depth this week, master conditional branch statements, loop statements and arrays, and after learning this week's content, you can use concise code to achieve powerful functions.
- 1. Master the use of conditional branch statements such as if, if elseif, and switch
- 2. Master the use of for, while, do while loop statements
- 3. Master the basic use and common methods of arrays
- 4. Characteristics and applications of break and continue statements
- 5. Use array knowledge to learn basic algorithms
- 6. Use simple logic to implement complex business logic
Week 7 schedule
If you want to achieve more dazzling dynamic effects, it is very important to manipulate web page elements. By mastering function programming, DOM operations, events, and BOM objects, you can achieve typical triggering and dynamic interaction effects.
- 1. Master DOM operations and DOM events
- 2. Master the basics of functions and advanced applications of functions
- 3. Master the BOM browser object model and "dialogue" with the browser
- 4. Master function encapsulation to improve coding quality
Week 8 schedule:
Object-oriented is a very important idea in development. This week we will start to use object-oriented thinking for program development, write high-quality code, and solve enterprise-level programming collaboration problems.
- 1. Learn the rules and use of this
- 2. Master the concept of constructor and its creation, calling and use
- 3. Understand the relationship and application of prototypes and prototype chains
- 4. Closure and scope application
- 5. Familiar with object-oriented thinking for DOM programming
- 6. Master the JS modular programming method and write high-quality code
- 7. Master modular development skills and solve enterprise-level programming collaboration problems
- 8. The case of greedy snake
Week 9 schedule:
In the ninth week, you can use the e-commerce project to complete a practical development, from 0 to 1 to complete a multi-effect tourism webpage with CSS3 animation and JS special effects. Master the common webpage development methods and various special effects implementation schemes in enterprises.
In the above course, the case we gave was the website development of Jingdong;
- 1. Combining H5/CSS3/JS to complete the development of homepage special effects in the PC course
- 2. Analysis of project animation effects to help sort out ideas faster
- 3. Realize typical JS special effects: Banner carousel, back to top animation, vertical menu
- 4. Learn regular expressions and complete functional verification of common mobile phone numbers, email addresses, names, etc.
- 5. Complete the development of Jingdong website
Class Schedule:
| stage | details |
|---|---|
| JavaScript Basic Syntax | Variables, data types, operators, type transfers, functions, objects, process control, arrays, Math, built-in functions |
| WebAPI | Hosting environment, node lookup, node operation, node relationship, event, event flow, event delegation, intermittent function, higher-order function, pseudo-array, execution environment, self-executing function, namespace, sorting, delay function, regularization, form, Custom properties, redrawing, reflow, preloading, lazy clipping, life cycle; |
| JavaScriptAdvanced | Literal constructor, single object, object-oriented, prototype, class, getter, setter, currying, destructuring, arrow function, Object, Array, const, strict mode, closure |
The third month, ES6 study arrangement
To add, modular knowledge starts from episode 228 in the above link, and you can see episode 258 from episode 228 .
Week 10 schedule:
ES6 is a new syntax specification for JavaScript, which makes the code more standardized, highly readable, and easy to operate. This week will start the learning of ES6, which is a necessary step for learning the front end. After mastering ES6 related knowledge, you can write code more conveniently and improve development efficiency
- 1. ES6 Basic Grammar and Usage
- 2. Master the use and difference of variables and constants in ES6
- 3. Learn string literals that can be embedded in expressions -- template strings
- 4. Master the characteristics and applications of arrow functions
- 5. Master how to automatically parse values in arrays or objects
- 6. Master the use of parameter default values
- 7. Understand the more concise and flexible expression of object literals
Week 11 study schedule
This week, I will continue to learn the basics of ES6. By further studying the new features introduced by ES6, I will understand the new methods of ES6, master the new collection types, and have a deeper understanding of data traversal.
- 1. Learn from the comparison between the remaining parameters and the expansion operator
- 2. Understand how to reduce the use of logic or operators
- 3. Understand the new data structure in ES6
- 4. Understand the new methods in ES6
- 5. Understand the principle of traversal and learn new looping methods
- 6. Understand how to use ES6 Promise for asynchronous programming
- 7. Master the use of the basic grammar of Class
- 8. Master clearer and more convenient object inheritance methods and advanced object-oriented ideas
After writing here, I will no longer plan for you according to the week, because everyone has successfully entered the front-end after learning here. You can arrange the next study time by yourself, you only need what we need to learn next.
The fourth month, Ajax for front-end advanced learning
Web front-end necessary skills Ajax/Git/node.js/mysql/vue.js detailed tutorial
| What needs to be learned at this stage |
|---|
| The role of Ajax, native Ajax, synchronous and asynchronous, http protocol, ajax encapsulation |
| Git history, git and svn, basic use of git, branches, remote warehouses, git conflicts and solutions |
| Project initialization, front-end and back-end separation development, tool use, user registration/login/exit, etc. |
| Introduction to ES6, new syntax, built-in object extension, etc. |
| Node.js environment installation, how to use node.Js to run the code... See the course for details |
| Static and dynamic websites, use of http modules, principle of request response, HTTP protocol, processing page requests, etc. |
| The concept of MySQL, basic additions, deletions, modifications, etc., and the use of Node.js to manipulate Mysql |
| The concept of express, express installation, back-end routing, static resource hosting, etc.; |
Web front-end necessary skills Ajax/Git/node.js/mysql/vue.js detailed tutorial
| Important content |
|---|
| Git basic concepts |
| install and configure |
| basic operation |
| GitHub |
| remote warehouse |
| SSH access |
| local branch operation |
Comprehensively and systematically explain the most core and must-know concepts in Node.js, optimize project code based on modular development ideas, write efficient and robust code, and cultivate Node.js programming thinking.
Web front-end necessary skills Ajax/Git/node.js/mysql/vue.js detailed tutorial
| node basics |
|---|
| Environment configuration |
| fs module |
| path module |
| hettp module |
| Modular |
| commonJS |
| Classification of modules |
| Module scope, member sharing, loading mechanism |
Next, learn the basic usage of the database:
Web front-end necessary skills Ajax/Git/node.js/mysql/vue.js detailed tutorial
Fifth month, popular framework
Then there are popular frames:
2021最全最新版VUE2.0+VUE3.0全套教程（中部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
2021最全最新版VUE2.0+VUE3.0全套教程（下部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
| 课程亮点 |
|---|
| 工程化开发，现在市场还是直接引入 vue.js 到 html 页面， 开发中不用这个方式，我们是直接按照工程化的方式进行讲解。 |
| 案例驱动教学，精心设计的 4 大案例，保证每一位学生听得懂、写得出、能实践。 |
| 深入浅出地讲解 Vue2 / Vue3 中的指令、组件、侦听器与计算属性，以及生命周期、数据共享、动态组件、插槽、路由等核心技术点。 |
| 同时，涵盖了 axios 在 Vue 项目中的最佳实践方案；以及 Vant 组件库的主题自定制方案。 |
| 最后一天的 Vue 基础收尾案例，助力学生更加轻松的过渡到 Vue 项目课的学习。 |
Vue 3.0 官方文档(英文) | Vue 3.0 官方文档中文 |
Composition-API手册 | Vuex 4.0 | Vue3 新动态
第六个月、小程序-uni-app
了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
6.2 uni-app
理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
Last month! study arrangement
This stage is to deeply understand the idea of componentization and modular development, one of the three mainstream frameworks, to meet the job requirements in enterprise recruitment.
TypeScript Basic + Advanced
Front-end popular tutorial recommendation | Learn TypeScript from scratch in five days
Interview preparation:
Interviews are a key step to successful employment. This week includes layout basics, common test sites such as JS and ES6, and analysis of classic interview questions. It will take you to string together knowledge, master front-end interview skills, and pass basic skills interviews smoothly.
- 1. H5 semantics/CSS layout/positioning/graphic style/responsive interview problem-solving skills
- 2. Five principles of prototype and prototype chain and interview problem-solving skills
- 3. Interview problem-solving skills for variable types/calculations/constructors
- 4. Execution context of scope and closure/this interview problem-solving skills
- 5. Asynchronous and single-threaded/common built-in object interview problem-solving skills
- 6. DOM essence/node operation/BOM operation interview problem-solving skills
- 7. AJAX and event solution interview skills
Frameworks, small programs, and full-stack related content are also required for interviews. This week, I will take you to sort out the common test sites and analysis of classic interview questions, clarify the methodology of solving interview questions, and complete the last centimeter sprint.
- 1. Vue.js principle/MVVM interview problem-solving skills
- 2. Component life cycle / parent-child component value transfer interview problem-solving skills
- 3. Component asynchronous loading/caching/extracting public logic interview problem-solving skills
- 4. React basic grammar/event interview problem-solving skills
- 5. React component life cycle/parent-child component communication interview problem-solving skills
- 6. The difference between React function components and class components Interview problem-solving skills
- 7. Redux/react-router interview problem-solving skills