Front-end basics to actual combat (HTML5+CSS3+ES6+NPM)-Free online video tutorial-php.cn

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Front-end basics to actual combat (HTML5+CSS3+ES6+NPM)

PHP Chinese website front-end development part learning objectives: 1. HTML5/CSS3; 2. JavaScript/ES6; 3. Node basics; 4. Vue3 basics and advanced; 5. Element Plus; 6. Front-end classic practical cases; 7. Front-end and back-end Completely separated development model...

Elementary

front end

102189 person learning

162class hour

02 days 04 hours 26 minutes 42 secondsTotal course duration

2023-07-17update

PHP中文网

Gold lecturer

A total of 51 courses Student5296 Lecturer rating5.9

认证高级PHP讲师More>>

Course Introduction Course Outline Data Download Other Courses

You will learn：

PHP Chinese website front-end development part learning objectives: 1. HTML5/CSS3; 2. JavaScript/ES6; 3. Node basics; 4. Vue3 basics and advanced; 5. Element Plus; 6. Front-end classic practical cases; 7. Front-end and back-end Completely separated development model...

Front-end basics to actual combat (HTML5+CSS3+ES6+NPM)

Chapter1 First lesson of schooltry and see
expand retract

Section1 Development environment: vscode/chrome/phpEnv -1
duration： 17 minutes 43 seconds

Section2 Development environment: vscode/chrome/phpEnv-2
duration： 19 minutes 30 seconds

Section3 Markdown common syntax demonstration
duration： 21 minutes 41 seconds

Section4 Basic knowledge of HTTP and URL01
duration： 16 minutes 46 seconds

Section5 Basic knowledge of HTTP and URL02
duration： 26 minutes 48 seconds
Chapter2 Explain in detail the basics of htmltry and see
expand retract

Section1 Review the key points of the first lesson of school 01
duration： 18 minutes 53 seconds

Section2 Review the key points of the first lesson of school 02
duration： 17 minutes 59 seconds

Section3 Elements, tags and attributes
duration： 19 minutes 06 seconds

Section4 HTML document structure, display mode and element type 01
duration： 19 minutes 51 seconds

Section5 HTML document structure, display mode and element type 02
duration： 19 minutes 50 seconds

Section6 Page Sambo and Emmet Grammar Practice 01
duration： 17 minutes 48 seconds

Section7 Page Sambo and Emmet Grammar Practice 02
duration： 19 minutes 59 seconds
Chapter3 Detailed explanation of HTML5 must-know tags-1
expand retract

Section1 Four major attribute types of html
duration： 14 minutes 42 seconds

Section2 HTML common element tags: layout class
duration： 22 minutes 01 seconds

Section3 Common html tags: images, links, lists
duration： 24 minutes 38 seconds

Section4 Describe tables and common attributes in detail
duration： 25 minutes 11 seconds

Section5 Describe the form in detail-<form> tag and attributes
duration： 23 minutes 30 seconds
Chapter4 Detailed description of form controls
expand retract

Section1 Commonly used form controls 1-1
duration： 19 minutes 54 seconds

Section2 Commonly used form controls 1-2
duration： 20 minutes 23 seconds

Section3 Commonly used form controls 1-3
duration： 20 minutes 35 seconds

Section4 Commonly used form controls 2-1
duration： 18 minutes 40 seconds

Section5 Commonly used form controls 2-2
duration： 18 minutes 48 seconds

Section6 Commonly used form controls 2-3
duration： 13 minutes 50 seconds
Chapter5 Other tags and CSS basics
expand retract

Section1 Media tags and <iframe> frame elements 01
duration： 19 minutes 30 seconds

Section2 Media tags and <iframe> frame elements 02
duration： 22 minutes 36 seconds

Section3 CSS style source and priority 01
duration： 25 minutes 24 seconds

Section4 CSS style source and priority 02
duration： 24 minutes 40 seconds

Section5 Basic CSS selectors: tags and attributes
duration： 16 minutes 54 seconds
Chapter6 A closer look at selector weights and pseudo-class selectors
expand retract

Section1 What’s new with context selectors
duration： 20 minutes 06 seconds

Section2 Describe selector weight in detail (key points) 01
duration： 18 minutes 41 seconds

Section3 Describe selector weight in detail (key points) 02
duration： 23 minutes 23 seconds

Section4 Detailed description of pseudo-class structure selector 01
duration： 16 minutes 55 seconds

Section5 Detailed description of pseudo-class structure selector 02
duration： 19 minutes 35 seconds
Chapter7 Pseudo-class combat and box model
expand retract

Section1 State Pseudo-Class Principles and Practical Cases 01
duration： 18 minutes 21 seconds

Section2 State Pseudo-Class Principles and Practical Cases 02
duration： 18 minutes 40 seconds

Section3 State Pseudo-Class Principles and Practical Cases 03
duration： 17 minutes 55 seconds

Section4 Box Model and Core Properties Lecture 01
duration： 22 minutes 57 seconds

Section5 Box Model and Core Properties Lecture 02
duration： 24 minutes 38 seconds
Chapter8 CSS common units and table styles
expand retract

Section1 Common CSS units: px, em, rem
duration： 20 minutes 03 seconds

Section2 Common CSS units: px, em, rem 02
duration： 20 minutes 10 seconds

Section3 Common CSS units: px, em, rem 03
duration： 21 minutes 11 seconds

Section4 Common CSS units: px, em, rem 04
duration： 15 minutes 08 seconds

Section5 CSS viewport unit: VW, VH and precautions 01
duration： 17 minutes 55 seconds

Section6 CSS viewport unit: VW, VH and precautions 02
duration： 14 minutes 22 seconds
Chapter9 Font icons, media queries and positioning
expand retract

Section1 Font icon 01
duration： 18 minutes 17 seconds

Section2 Font icon 02
duration： 19 minutes 37 seconds

Section3 Media Inquiries 01
duration： 15 minutes 08 seconds

Section4 Media Inquiries 02
duration： 13 minutes 30 seconds

Section5 Positioning: relative, absolute, fixed principle and implementation 01
duration： 25 minutes 36 seconds

Section6 Positioning: relative, absolute, fixed principle and implementation 02
duration： 23 minutes 50 seconds
Chapter10 Detailed explanation of positioning practice and Flex layout attributes
expand retract

Section1 Positioning practice (modal box) 01
duration： 13 minutes 28 seconds

Section2 Positioning practice (modal box) 02
duration： 20 minutes 52 seconds

Section3 Detailed explanation of common properties of flex layout 01
duration： 23 minutes 04 seconds

Section4 Detailed explanation of common properties of flex layout 02
duration： 19 minutes 45 seconds

Section5 Detailed explanation of common properties of flex layout 03
duration： 23 minutes 36 seconds
Chapter11 Flex practice and common properties of Grid layout
expand retract

Section1 Flex Practical Classic Navigation Design 01
duration： 20 minutes 30 seconds

Section2 Flex Practical Classic Navigation Design 02
duration： 12 minutes 41 seconds

Section3 Grid's explicit grid and project properties 01
duration： 08 minutes 31 seconds

Section4 Grid's explicit grid and item properties 02
duration： 18 minutes 57 seconds

Section5 grid item arrangement rules and implicit grid
duration： 12 minutes 30 seconds

Section6 Grid item alignment
duration： 21 minutes 43 seconds

Section7 Grid row and column gaps
duration： 07 minutes 57 seconds
Chapter12 Mobile terminal layout principles and practice
expand retract

Section1 Must-know terminology and implementation principles of mobile terminal layout 01
duration： 23 minutes 18 seconds

Section2 Must-know terminology and implementation principles for mobile terminal layout 02
duration： 21 minutes 40 seconds

Section3 Must-know terminology and implementation principles of mobile terminal layout 03
duration： 23 minutes 31 seconds

Section4 Taobao mobile homepage: Header layout 01
duration： 19 minutes 39 seconds

Section5 Taobao mobile homepage: header layout 02
duration： 14 minutes 48 seconds

Section6 Mobile terminal overall layout solution (supplementary entry)
duration： 06 minutes 13 seconds
Chapter13 Taobao mobile and PC layouttry and see
expand retract

Section1 Mobile footer, navigation and main part 01
duration： 19 minutes 55 seconds

Section2 Mobile footer, navigation and main part 02
duration： 19 minutes 09 seconds

Section3 Mobile footer, navigation and main part 03
duration： 23 minutes 27 seconds

Section4 Taobao PC terminal layout analysis and layout framework implementation 01
duration： 22 minutes 09 seconds

Section5 Taobao PC terminal layout analysis and layout framework implementation 02
duration： 19 minutes 01 seconds

Section6 Taobao PC terminal layout analysis and layout framework implementation 03
duration： 18 minutes 17 seconds

Section7 Taobao PC terminal layout analysis and layout framework implementation 04
duration： 12 minutes 53 seconds
Chapter14 JavaScript past and present and code members
expand retract

Section1 JS past and present, front-end development history and naming convention 01
duration： 20 minutes 52 seconds

Section2 JS past and present, front-end development history and naming conventions 02
duration： 19 minutes 55 seconds

Section3 JS past and present, front-end development history and naming convention 03
duration： 18 minutes 05 seconds

Section4 Describe console, variables, constants and function types in detail 01
duration： 20 minutes 44 seconds

Section5 Describe console, variables, constants and function types in detail 02
duration： 19 minutes 32 seconds

Section6 Describe console, variables, constants and function types in detail 03
duration： 20 minutes 19 seconds
Chapter15 Describe data types and process control in detail
expand retract

Section1 Describe data types and application scenarios in detail 01
duration： 23 minutes 13 seconds

Section2 Describe data types and application scenarios in detail 02
duration： 21 minutes 00 seconds

Section3 Describe data types and application scenarios in detail 03
duration： 22 minutes 40 seconds

Section4 Scope, object literal simplification and branch structure encyclopedia 01
duration： 20 minutes 33 seconds

Section5 Scope, object literal simplification and branch structure encyclopedia 02
duration： 21 minutes 15 seconds
Chapter16 Loops, template functions, destructuring and accessors
expand retract

Section1 Detailed explanation of loops, function parameters and return values 01
duration： 19 minutes 17 seconds

Section2 Detailed explanation of loops, function parameters and return values 02
duration： 18 minutes 38 seconds

Section3 Detailed explanation of loops, function parameters and return values 03
duration： 18 minutes 26 seconds

Section4 Template functions, destructuring and accessor properties 01
duration： 18 minutes 14 seconds

Section5 Template functions, destructuring and accessor properties 02
duration： 23 minutes 57 seconds

Section6 Template functions, destructuring and accessor properties 03
duration： 20 minutes 28 seconds
Chapter17 Comprehensive list of commonly used APIs for classes, objects, strings and arrays
expand retract

Section1 Detailed explanation of constructor and class 01
duration： 16 minutes 39 seconds

Section2 Detailed explanation of constructor and class 02
duration： 14 minutes 39 seconds

Section3 Detailed explanation of constructors and classes 03
duration： 17 minutes 13 seconds

Section4 Commonly used APIs for strings and arrays 01
duration： 20 minutes 34 seconds

Section5 Common APIs for strings and arrays 02
duration： 20 minutes 24 seconds

Section6 Commonly used APIs for strings and arrays 03
duration： 21 minutes 49 seconds
Chapter18 Common DOM operations
expand retract

Section1 Commonly used APIs for array addition and deletion operations
duration： 23 minutes 27 seconds

Section2 Browser JS and how to get DOM elements 01
duration： 14 minutes 48 seconds

Section3 Browser JS and how to get DOM elements 02
duration： 13 minutes 30 seconds

Section4 Obtaining form elements and traversing the DOM tree 01
duration： 23 minutes 39 seconds

Section5 Obtaining form elements and traversing the DOM tree 02
duration： 22 minutes 56 seconds
Chapter19 DOM addition, deletion and modification API and actual combat
expand retract

Section1 A complete list of commonly used APIs for DOM addition, deletion and modification 01
duration： 19 minutes 56 seconds

Section2 A complete list of commonly used APIs for DOM addition, deletion and modification 02
duration： 19 minutes 17 seconds

Section3 A complete list of commonly used APIs for DOM addition, deletion and modification 03
duration： 14 minutes 56 seconds

Section4 DOM practical todoList message board 01
duration： 16 minutes 24 seconds

Section5 DOM practical todoList message board 02
duration： 14 minutes 35 seconds

Section6 dataset object and CSS calculated styles
duration： 20 minutes 07 seconds
Chapter20 Describe events and event objects in detail
expand retract

Section1 classList operates element class
duration： 13 minutes 20 seconds

Section2 Commonly used event additions and deletions 01
duration： 17 minutes 07 seconds

Section3 Adding and deleting commonly used events 02
duration： 17 minutes 07 seconds

Section4 Event bubbling, event delegation and form events 01
duration： 24 minutes 53 seconds

Section5 Event bubbling, event delegation and form events 02
duration： 26 minutes 03 seconds
Chapter21 Detailed explanation of module application scenarios and modular tab practice
expand retract

Section1 Describe in detail the common syntax and usage scenarios of module export/export 01
duration： 17 minutes 57 seconds

Section2 Describe in detail the common syntax and usage scenarios of module export/export 02
duration： 20 minutes 04 seconds

Section3 Describe in detail the common syntax and usage scenarios of module export/export 03
duration： 16 minutes 21 seconds

Section4 Practical combat: Classic tab (completely implemented using modules) Important 01
duration： 21 minutes 21 seconds

Section5 Practical combat: Classic tab (completely implemented using modules) Important 02
duration： 16 minutes 06 seconds

Section6 Practical combat: Classic tab (completely implemented using modules) Important 03
duration： 26 minutes 22 seconds
Chapter22 Classic Carousel Chart in Practice and JSON
expand retract

Section1 Classic carousel chart practice (module version/key points) 01
duration： 20 minutes 42 seconds

Section2 Classic Carousel Chart in Practice (Module Version/Key Points) 02
duration： 20 minutes 21 seconds

Section3 Classic Carousel Chart in Practice (Module Version/Key Points) 03
duration： 19 minutes 32 seconds

Section4 Classic Carousel Chart in Practice (Module Version/Key Points) 04
duration： 21 minutes 39 seconds

Section5 JSON and common APIs
duration： 19 minutes 30 seconds
Chapter23 Shopping cart practice and cross-domain request practice
expand retract

Section1 Shopping cart practice (module/multi-function) 01
duration： 22 minutes 17 seconds

Section2 Shopping cart practice (module/multi-function) 02
duration： 23 minutes 46 seconds

Section3 Shopping cart practice (module/multi-function) 03
duration： 24 minutes 14 seconds

Section4 Cross-domain request solution (taking JSONP as an example) 01
duration： 20 minutes 42 seconds

Section5 Cross-domain request solution (taking JSONP as an example) 02
duration： 22 minutes 11 seconds
Chapter24 Asynchronous programming and fetch API
expand retract

Section1 Asynchronous principles and traditional XHR 01
duration： 21 minutes 05 seconds

Section2 Asynchronous principles and traditional XHR 02
duration： 23 minutes 01 seconds

Section3 Asynchronous principles and traditional XHR 03
duration： 20 minutes 03 seconds

Section4 fetch and async, await, CPS, etc. 01
duration： 20 minutes 11 seconds

Section5 fetch and async, await, CPS, etc. 02
duration： 20 minutes 06 seconds
Chapter25 Node.js Basics and NPM
expand retract

Section1 Introduction to common cases of fetch 01
duration： 18 minutes 11 seconds

Section2 Introduction to common cases of fetch 02
duration： 17 minutes 39 seconds

Section3 Introduction to node common modules and NPM common instructions 01
duration： 22 minutes 44 seconds

Section4 Introduction to node common modules and NPM common instructions 02
duration： 25 minutes 44 seconds

Section5 Introduction to node common modules and NPM common instructions 03
duration： 23 minutes 25 seconds
Chapter26 Vue terminology and common instructions
expand retract

Section1 Introduction to Vue and reference methods 01
duration： 16 minutes 45 seconds

Section2 Introduction to Vue and reference methods 02
duration： 18 minutes 14 seconds

Section3 Introduction to Vue and reference methods 03
duration： 17 minutes 18 seconds

Section4 Introduction to common terms and instructions in vue 01
duration： 18 minutes 20 seconds

Section5 Introduction to common terms and instructions in vue 02
duration： 17 minutes 52 seconds

Section6 Introduction to common terms and instructions in vue 03
duration： 20 minutes 19 seconds
Chapter27 List and conditional rendering, calculated/listening properties, etc.
expand retract

Section1 Event/Event Modifier/List Rendering Directive 01
duration： 18 minutes 56 seconds

Section2 Event/Event Modifier/List Rendering Directive 02
duration： 17 minutes 37 seconds

Section3 Event/Event Modifier/List Rendering Directive 03
duration： 21 minutes 23 seconds

Section4 Conditional rendering and keyboard modifier todolist
duration： 25 minutes 55 seconds
Chapter28 Computed properties communicate with components and components
expand retract

Section1 Computed properties, listener property principles and practice 01
duration： 17 minutes 26 seconds

Section2 Computed properties, listener property principles and practice 02
duration： 22 minutes 02 seconds

Section3 Computed properties, principles and practice of listener properties 03
duration： 14 minutes 23 seconds

Section4 Definition of components and communication principles between components 01
duration： 16 minutes 25 seconds

Section5 Definition of components and communication principles between components 02
duration： 15 minutes 46 seconds

Section6 Definition of components and communication principles between components 03
duration： 17 minutes 15 seconds
Chapter29 Front-end review and summary
expand retract

Section1 Summary of html knowledge points 01
duration： 15 minutes 23 seconds

Section2 Summary of html knowledge points 02
duration： 19 minutes 28 seconds

Section3 html knowledge point summary 03
duration： 19 minutes 01 seconds

Section4 Summary of css and js knowledge points 01
duration： 24 minutes 57 seconds

Section5 Summary of css and js knowledge points 02
duration： 25 minutes 30 seconds

Data Name operate
[must see]Front-end basics to practical courseware Download

Tool download operate
[must see]VSCode Windows 64-bit Download Download

PHP中文网 Lecturer Other Courses

Elementaryhtml5 Chinese manual

5512
Collection
ElementaryCSS 2.0 Chinese Manual

6114
Collection
ElementaryCSS 3.0 Reference Manual

3773
Collection
AdvancedPlay with CSS Flexbox layout

25145
Collection
AdvancedMake layout as fast as 5G: CSS Grid grid layout

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

157920
Collection
ElementaryBootstrap3 reference manual

3338
Collection
ElementaryFoundation5 Manual

903
Collection
ElementaryJavaScript Reference Manual

9451
Collection
ElementaryjQuery1.11 Reference Manual

9118
Collection
ElementaryjQuery1.7 Chinese manual

5732
Collection
ElementaryjQuery_API_1.4.4 Manual

4224
Collection

Start Learning

This course includes：

02 days 04 hours 26 minutes 42 seconds Watch videos anytime

1 Download Resources

Popular courses Latest courses

More>

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！