HTML+CSS Quick Start

• Chapter1 Understand the big front-end and prepare for learning
• 1-1 vscode installation configuration-detailed explanation of commonly used plug-ins (subtitled version)
• 1-2 If you want to do your job well, you must first sharpen your tools webStorm installation
• 1-3 Program categories that front-end programmers can develop
• 1-4 How to distinguish between H5, WEB front-end, big front-end, and WEB full stack?
• Chapter2 Commonly used tags and attributes in HTML
• 2-1 HTML Hypertext Markup Language - Where is the hyper?
• 2-2 HTML main structure and related tags
• 2-3 HTML hexadecimal color values ​​and comments
• 2-4 Use of HTML entity characters
• 2-5 Analysis of common tags in the head tag
• 2-6 Text and text format tags in body
• 2-7 H5 newly upgraded text format tags
• 2-8 Semantic tags and list layout tags
• 2-9 Path and jump issues that need to be paid attention to in a tags
• 2-10 Examples to explain multimedia tags
• 2-11 Memory skills for front-end massive tags
• 2-12 Complete explanation of markdown syntax
• 2-13 Elaborate on the table tag
• 2-14 Comprehensive analysis of elements related to form forms - Part 1
• 2-15 Comprehensive analysis of elements related to form forms-Part 2
• 2-16 Use of inline tag iframe
• Chapter3 Stop streaking and enter the world of CSS
• 3-1 Entering the world of css--several ways to reference css
• 3-2 css selector--basic selector analysis
• 3-3 css selector--hierarchical selector analysis
• 3-4 css selector--analysis of structural pseudo-class selector--Part 1
• 3-5 css selector--analysis of structural pseudo-class selector--Part 2
• 3-6 css status pseudo-class selector and selector priority
• 3-7 css-font font property
• 3-8 css-text text property
• 3-9 css--background background property
• 3-10 Class summary and chapter assignments
• Chapter4 CSS style and layout control
• 4-1 CSS width and height dimensions properties
• 4-2 CSS navigation list properties
• 4-3 CSS positioning property--fixed
• 4-4 CSS positioning property--relative positioning relative
• 4-5 The relationship between relative positioning and absolute positioning--Part 1
• 4-6 The relationship between relative positioning and absolute positioning--Part 2
• 4-7 CSS layout properties control the hiding and display of elements
• 4-8 CSS controls div to float left and right
• 4-9 Standard box model combined with floats
• 4-10 How to solve the problem of overlapping div margins
• 4-11 The relationship between box size and inner and outer margins and borders
• 4-12 The box-sizing attribute solves the problem of box wrapping
• 4-13 Flexible box model--flexible box layout
• 4-14 Telescopic box realizes multi-level navigation linkage
• Chapter5 Practical definition of layout framework file
• 5-1 In-depth analysis of flexible box model attribute settings-Part 1
• 5-2 In-depth analysis of flexible box model attribute settings-Part 2
• 5-3 Page layout analysis of corporate website
• 5-4 Define the underlying style file of the framework
• 5-5 Set the flexible layout public style of the frame
• 5-6 Set the frame's border public style
• 5-7 Set the margin public style of the frame
• 5-8 Set other public styles of the frame
• 5-9 Introducing public style rounded borders into the project
• 5-10 How to introduce iconfont font icon into the project
• 5-11 Practical combat--define the header public template file
• 5-12 Practical combat--define elegant search box style
• 5-13 Practical combat - setting the style, background and center alignment of font icons
• 5-14 Practical combat--Set the basic style of nav navigation bar
• Chapter6 Actual animation and public head
• 6-1 Text shadow and background color radial gradient
• 6-2 CSS implements box conversion and transition effects
• 6-3 Practical combat--css animation effects and animation carousel-Part 1
• 6-4 Practical combat--css animation effects and animation carousel-Part 2
• 6-5 Practical combat - css3 implements navigation underline animation effect using pseudo classes
• 6-6 Practical combat--implementing secondary menu styles and animation effects
• 6-7 Practical combat--implementing sidebar fixed effect-Part 1
• 6-8 Practical combat--implementing sidebar fixed effect-Part 2
• 6-9 Practical combat--implementing the style layout of the bottom footer
• 6-10 Practical combat--realizing the effect of product navigation on the home page
• 6-11 Practical combat - the header layout of the product display area
• 6-12 Practical combat--Style layout of product cards-Part 1
• 6-13 Practical combat--Complete the animation effect of product cards
• 6-14 Practical combat--Style layout of product cards-Part 2
• Chapter7 List page and details page of actual combat
• 7-1 Practical combat - Complete the style layout of breadcrumb navigation
• 7-2 Practical combat--complete the animation effect of product sorting-Part 1
• 7-3 Practical combat--Complete the animation effect of product sorting-Part 2
• 7-4 Practical combat--Complete the style layout of the product list page
• 7-5 Practical combat - Complete the style layout of the product basic information area
• 7-6 Practical combat - Complete the style layout of the product basic information area 02
• 7-7 Practical combat - Complete the style layout of the product basic information area 03
• 7-8 Practical combat - style layout of product details 01
• 7-9 Practical combat - style layout of product details 02
• 7-10 Practical combat-Guess you like the style layout of the area
• Chapter8 Practical shopping cart and order page
• 8-1 Mall shopping cart style layout 01
• 8-2 Mall shopping cart style layout 02
• 8-3 Mall shopping cart style layout 03
• 8-4 Order preview page--receipt information style layout
• 8-5 Order preview page--payment method style layout
• 8-6 Order preview page--Order content style layout 01
• 8-7 Order preview page--Order content style layout 02
• 8-8 Structural analysis of the mall personal center page
• 8-9 Order page and @media query-up
• 8-10 Order page and @media query - next