The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]

Install editor VScode

Install Chrome Google Chrome

Installation and use of VScode universal plug-in

VScode markdown and font settings

markdown grammar rules

HTTP basics

Analysis of common terms in web development

html document structure

Single label vs. double label

Front-end practical page display

Use of Live Server plug-in

Relationship between client and local server

Write markdown documents

vscode custom file icon

Let the code fly--Emmet syntax

html common attributes and default attributes

html event attributes and custom attributes

Commonly used layout semantic tags

Image-Link-List Tag

Implement graphic and text lists and navigation

Detailed explanation of html tables

Data interaction medium-form form

Form HTTP POST submission

Hide and show the form password box

radio radio button

checkboxcheckbox

Form control-drop-down menu

form button type

iframe inline element loads Baidu map

Video tag loads Douyin short video

A small practical experience with inline frames - building a skinny backend homepage

CSS programming goals

Interpret element style sources

Style reference priority issue

style inheritance

Complete explanation of basic selectors

level selector

Detailed analysis of the weight of selectors

Structural pseudo-class selector

Pseudo-class selector parameters

Pseudo class quick matching

Form pseudo-class

Use of font icons

Layout artifact--box model

css layout unit

Viewport units vh-vw

Commonly used styles of tables (pseudo-classes)

Media query--mobile layout adaptation

Positioning and positioning elements

Login modal box positioning practice

flex flexible layout--container

Properties in flex container

flex item properties

Viewport viewport (layout viewport, visual viewport, ideal viewport)

Mobile layout solution (rem+vw)

Grid container properties and project properties

Advanced gameplay of grid layout

Grid implements Holy Grail layout

Custom grid layout component

Grid layout practical case

Install Node.js to run JavaScript scripts

Members in the code and program execution flow

Reuse of variables (data) and code blocks (programs)

A brief analysis of JavaScript functions

JavaScript Scope and Scope Chain

JavaScript constants

Identifier naming convention

How anonymous functions are executed

Arrow functions and usage scenarios

...Classic use of rest parameters

function return value

JS data type--array

JS object--encapsulation of data and methods

Hidden identity and usage of JS functions

Process control--single branch and double branch

switch multi-branch process control

while entry type judgment loop

for, for-of, for-in loops

A simplified approach to object literals

Template literals and template functions

Closure: Partial function implements data partitioning

JS pure function

JS accessor properties

JS classes and objects

Class inheritance (extension)

Using accessor properties in JS classes

Destructuring assignment--array destructuring and object destructuring

JS in the browser

Get and manipulate DOM elements

Get DOM form elements

Traverse the DOM tree

Add, delete, and modify DOM elements

JS operation element content

DOM operation practice: message board

Custom properties--dataset object

JS operation class attribute--classList object

Adding and deleting events

Event bubbling and event delegation

Summary of form events

JS running mechanism: single thread + time loop

Single-threaded asynchronous demo

Commonly used APIs in strings

A complete collection of js array operations (pop, push, unshift, delete, shift methods)

Array iteration and traversal methods

Array separation, reversal, splicing and update operations

Native JS in action: tabs

Practical combat: automatic calculation of shopping cart items

Event publishing and subscription

Practical combat: 15 lines of code to implement carousel chart

Practical combat: lazy loading

Practical combat: Responsive web album manager

Detailed explanation of JSON in JS

ajax-xhr asynchronous data query

The past and present life of Promise

Promise状态：pending fulfilled rejected

Trigger different callbacks based on Promise status

Fetch API

JS modular development

Node basics

Node command executes js script

npm command to install and delete project dependencies

npm installs global dependency packages

Package version number rules

Package version checking and updating

Node plug-in installation and synchronization

The underlying design pattern CPS principle in Ndoe

Detailed explanation of Nodejs-side modular CommomJS specification

Detailed explanation of Nodejs http module

Nodejs file module

Nodejs path module

Git version control implementation principle

git local warehouse initialization

git code submission process

git checkout file restore

Configure associated remote warehouse

git ssh configuration tutorial

Summary of common git commands

vue creates dynamic pages

Mount points, vue instances, data injection, responsiveness

v-text v-html v-once directive use

Various ways of writing vue dynamic binding styles

vue input two-way delayed binding

vue event binding

v-for list rendering

vue conditional rendering

vue keyboard modifiers

Vue computed properties implement shopping cart function

vue watch data monitoring

Register vue global component

Child component receives data from parent component

Listen to child component events