For beginners to learn front-end, a learning roadmap is essential, and there are also [95 pages] notes on junior front-end modules!

Preface

When we first learn the front-end, we will always encounter some problems. We can see a lot of these problems about the front-end on the Internet:

How did you learn web front-end?
How to learn front-end by yourself with zero foundation?
How long does it take to learn front-end and what knowledge do you need to learn?
What skills do you need to master to become a qualified front-end engineer?
…

The following is a learning route shared with friends who are new to front-end .

learning route

The first stage: web page production

HTML : common tags, anchors, list tags, form tags, table tags, tag classification, tag semantics, comments, character entities

CSS : Introduction to CSS, global styles, inline styles, inline styles, selectors, font style values, text style values, color style values, box model, console usage, clear default styles, box model centering, margin collapse, standards Document flow, block elements, inline elements, inline block elements, various pseudo-class elements, floating, positioning

The second stage: JavaScript dynamic interaction

Elementary JavaScript : variables and operators, logic control, Math class, function, Object class, timer, Array class, String class, Date class

Advanced JavaScript : JavaScript DOM basics, this, events, event streams, JavaScript BOM basics, call&apply&bind, custom attributes, object-oriented programming

ES6/7/8/9 : Introduction to ECMAScript6, let and const, ES6+ scope, object extension, function extension, string extension, Symbol, Set&Map, Promise object, async&awiat, arrow function, template string, rest Parameter, Class, Module module

High-level JavaScript : closures, immediate execution of functions, lazy functions, plug-in development, multi-person collaboration, deep copying and shallow copying, array flattening, recursion, full solution to regular expressions, function anti-shaking, function throttling

The third stage: actual combat of mobile terminal development technology

HTML5 : Introduction to HTML5, HTML5 new syntax, HTML5 new semantic tags, HTML5 new form element attributes, HTML5 new mobile phone new event processing, HTML5 new multimedia practice, local storage, Canvas, HTML5 geographical component GeoLocation

CSS3 : New attributes of CSS3, enterprise-level solution for rounded corners, CSS3 background attributes, transition animation transition, change attribute transform, special effects carousel diagram practice, enterprise-level flex layout practice, grid layout practice

Bootstrap : Responsiveness, media queries, grid system, grid parameters, combination mode, column offset/column sorting/automatic column, column alignment/column nesting, text and color, buttons, navigation, mixed graphics and text, template status box, carousel chart

Mobile terminal development : Introduction to mobile terminal, mobile terminal viewport constraints, mobile terminal flex mobile terminal practice, rem, vw, flexible enterprise-level practice

The fourth stage: front-end and back-end separation technology and common library classes

Ajax : Introduction to AJAX, the role of AJAX, encapsulating AJAX, creating XMLhttpRquest objects, synchronous and asynchronous, AJAX paging

jQuery : jQuery introduction, jQuery chain syntax, jQuery selector, jQuery core, jQuery tools, jQuery events, jQuery event objects, jQuery special effects, jQuery callback functions, jQuery document processing, jQuery filtering, jQuery properties, jQueryCSS

Echarts : Echarts overview, Echarts usage, coordinate system, radar chart/pie chart/line chart

The fifth stage: Enterprise-level advanced WEB architecture development

Webpack : Installation and use of Webpack, project module packaging, static packaging module maker, Webpack entry, Webpack output, Webpack plug-in, webpack module

Vue : Vue usage, Vue responsiveness, Vue two-way data binding, Vue related instructions, vue-resource, axios, template options, Vue life cycle, Vue components, custom instructions, filters, computed properties, Vue-cli 2. x and 3.x scaffolding configuration, Vue-router, Vuex, Element UI

WeChat mini program : uni-app, mpvue, WeChat mini program registration, APPID application, life cycle, mini program debugging, WeChat mini program framework component, WeChat mini program layout framework, WeChat mini program conditional rendering and list rendering, media component audio, View container, network api, camera api, map api

【95 pages】Junior front-end module notes

The main content includes html, css, html5, css3, JavaScript, regular expressions, functions, BOM, DOM, jQuery, AJAX, vue, etc. If you want, you can click here to get the full version [95 pages] of junior front-end module notes and front-end learning roadmap .

html/css

html basic structure
Label attributes
event properties
text label
multimedia tags
List/Table/Form Tag
Other semantic tags
Web page structure
Module division
CSS code syntax
CSS placement
CSS inheritance
Selector type/priority
background style
Font style
text attribute
basic style
style reset
box model style
floatfloat
position position
Browser default style

html5/css3

Advantages of HTML5
HTML5 obsolete elements
HTML5 new elements
HTML5 form related elements and attributes
CSS3 new selector
CSS3 new properties
Added deformation animation properties
3D deformation properties
CSS3 transition properties
CSS3 animation properties
CSS3 adds column attributes
CSS3 new units
Flexbox model

JavaScript

JavaScript basics
JavaScript data types
Arithmetic operations
cast
Assignment operation
relational operations
logic operation
Ternary operations
branch loop
switch
while
do-while
for
break和continue
array
Array methods
Two-dimensional array
string

regular expression

Create regular expression
Metacharacters
mode modifier
regular method
Supports regular String methods

js object

Define object
Object data access
JSON
built-in objects
Math method
Date method

Object-oriented is a programming idea

Define object
Prototypes and prototype chains
prototype chain
prototype

Common JavaScript design patterns

Singleton mode
Factory pattern
Example mode

function

function definition
local variables and global variables
return value
anonymous function
self-running function
Closure

BOM

BOM overview
window method
frames [ ] frame set
history history
location positioning
navigator navigation
screen screen
document document

DOM

DOM object methods
Manipulate the relationship between DOM
DOM node properties

event

Event classification
event object
event stream
event target
Event delegation (delegate)
event listening

jQuery

jQuery selector
attribute selector
location selector
descendant selector
descendant selector
selector object
child element
DOM manipulation
jQuery events
container adaptation
Label style operations
slide
Custom animation

AJAX

working principle
XMLHttpRequest object
The difference between XML and HTML
get() and post()

HTTP

HTTP message structure
url request process

Performance optimization

JavaScript code optimization
Improve file loading speed

webpack

Features of webpack
Disadvantages of webpack
Install
webpack basic application
Getting Started with Profiles

vue

MVC pattern
MVVM pattern
basic grammar
Instance properties/methods
life cycle
Computed properties
Array update check
event object
Vue components
Routing usage
Route navigation
Nested routing
named view

Interview information

There are too many detailed explanations of interview questions and study notes in the PDF document, so I only screenshot some of the knowledge points to give a rough introduction. Each small node has more detailed content! Friends in need can help by giving 666 likes + comments, and send a private message to [Front End] to get it for free!