Getting started with HTML5+CSS3 for front-end newbies

• Chapter1 Course Introduction and Basic Computer Knowledge
• 1-1 learning route
• 1-2 Introduction to HTML
• 1-3 Web related concepts
• 1-4 Common browsers and kernels
• 1-5 web standards
• Chapter2 HTML basic syntax and structure
• 2-1 Introduction to HTML tags
• 2-2 HTML syntax specification
• 2-3 HTML basic structure tags
• 2-4 VSCode tool creation page
• 2-5 DOCTYPE and lang and the role of character sets
• Chapter3 HTML tags
• 3-1 tag semantics
• 3-2 title tag
• 3-3 Paragraph tags and line break tags
• 3-4 Sports news case
• 3-5 text formatting tag
• 3-6 div and span tags
• 3-7 Image tags (top)
• 3-8 Image tags (below)
• 3-9 Things to note about image tags
• Chapter4 Relative path vs absolute path
• 4-1 Directory folders and root directories
• 4-2 Relative path (top)
• 4-3 Relative path (below)
• 4-4 absolute path
• Chapter5 Links and Anchors
• 5-1 Link tag (top)
• 5-2 Link tags (below)
• 5-3 anchor link
• 5-4 Comment tags and special characters
• Chapter6 Comprehensive case
• 6-1 Comprehensive Case (Part 1)
• 6-2 Comprehensive Cases (Part 2)
• Chapter7 HTML table
• 7-1 Introduction to HTML tags (Part 2)
• 7-2 Basic use of table labels
• 7-3 Header cell label
• 7-4 Table related attributes (understand)
• 7-5 Novel ranking case
• 7-6 Table structure tag
• 7-7 Merge Cells
• 7-8 Table summary
• Chapter8 HTML list
• 8-1 unordered list
• 8-2 ordered list
• 8-3 custom list
• 8-4 List summary
• Chapter9 HTML form
• 9-1 Form usage scenarios and classifications
• 9-2 form fields
• 9-3 Input type attribute text box and password box
• 9-4 Input type attribute radio button and check box
• 9-5 input name and value attributes
• 9-6 Checked and maxlength attributes of input
• 9-7 Classroom Questions and Answers on Usage Scenarios of Four Attributes of Input Form Elements
• 9-8 Input type attribute submit and reset button
• 9-9 input type attribute ordinary button and file field
• 9-10 label label
• 9-11 select drop-down form
• 9-12 textarea text area label
• 9-13 Summary of form elements
• Chapter10 Comprehensive case
• 10-1 Registration page (1)
• 10-2 Registration page (2)
• 10-3 Registration page (3)
• 10-4 Registration page (4)
• 10-5 Learn to read documents
• Chapter11 Introduction to css cascading demo table
• 11-1 Introduction to CSS Cascading Style Sheets
• 11-2 Introduction to CSS
• Chapter12 css syntax specifications and code style
• 12-1 Experience CSS syntax specifications
• 12-2 CSS code style
• Chapter13 css selector
• 13-1 The role of css selector
• 13-2 tag selector
• 13-3 class selector
• 13-4 Draw boxes using class selectors
• 13-5 Special use of class selector - multiple class names
• 13-6 id selector
• 13-7 wildcard selector
• Chapter14 css font
• 14-1 font-family sets the font family
• 14-2 font-size font size
• 14-3 font-weight font thickness
• 14-4 font-style font style
• 14-5 How to write font composite attribute
• 14-6 Summary of font attributes
• Chapter15 csstext
• 15-1 text colorcolor
• 15-2 Text alignment text-align
• 15-3 text-decoration text-decoration
• 15-4 text-indent text-indent
• 15-5 Line spacing line-height
• 15-6 Summary of css text properties
• Chapter16 css stylesheet
• 16-1 internal style sheet
• 16-2 inline style sheet
• 16-3 external style sheet
• 16-4 Summary of css introduction methods
• Chapter17 Comprehensive case
• 17-1 news page
• 17-2 Modify style (1)
• 17-3 Modify style (2)
• 17-4 Modify style (3)
• 17-5 Use of chrome debugging tools
• Chapter18 emmet syntax
• 18-1 css second day guide
• 18-2 emmet syntax generates html tags
• 18-3 emmet syntax to quickly generate css styles
• 18-4 Quickly format code
• Chapter19 compound selector
• 19-1 Introduction to compound selectors
• 19-2 descendant selector
• 19-3 Child element selector
• 19-4 Class exercises
• 19-5 Union selector
• 19-6 Link pseudo-class selector (Part 1)
• 19-7 Link pseudo-class selector (below)
• 19-8 focus pseudo-class selector
• 19-9 Compound selector summary
• Chapter20 Element display mode
• 20-1 What is element display mode
• 20-2 block element
• 20-3 inline elements
• 20-4 inline block element
• 20-5 Summary of element display modes
• 20-6 Display mode conversion
• Chapter21 Sidebar small case
• 21-1 The use of a small tool snipaste
• 21-2 Simple version of Xiaomi sidebar case
• 21-3 The principle of vertical centering of single line text
• 21-4 background color
• 21-5 Background picture
• 21-6 background tiling
• 21-7 Background position-orientation noun
• 21-8 Background location case one
• 21-9 Background location case 2-King of Glory background picture
• 21-10 Background position - precise units
• 21-11 Background Position - Mixed Units
• 21-12 background fixed
• 21-13 Composite writing method of background attribute
• 21-14 background color translucent
• 21-15 Background summary
• 21-16 Comprehensive Case Five-Color Navigation (Part 1)
• 21-17 Comprehensive Case Five-Cai Navigation (2)
• Chapter22 Three major features of CSS
• 22-1 Stackability
• 22-2 inheritance
• 22-3 row height inheritance
• 22-4 priority
• 22-5 Priority issues
• 22-6 Overlay of CSS weights
• 22-7 Two exercises on weights
• Chapter23 box model
• 23-1 Introduction to the box model
• 23-2 Understand the essence of web page layout
• 23-3 Box model components
• 23-4 box model border
• 23-5 Composite writing of borders
• 23-6 table thin line border
• 23-7 Borders affect the actual size of the box
• 23-8 Box model inner margin padding
• 23-9 padding compound property
• 23-10 padding will affect the actual size of the box
• 23-11 padding application-Sina Navigation Bar (Part 1)
• 23-12 padding application-Sina Navigation (Part 2)
• 23-13 Xiaomi sidebar modification
• 23-14 The padding will not hold the box open
• 23-15 Box model margin
• 23-16 Typical application of margins--block-level boxes are aligned horizontally and centrally
• 23-17 Inline elements and inline-block elements are horizontally centered
• 23-18 Margin merging - vertical margins of adjacent block elements
• 23-19 Margin merging - nested block elements collapse
• 23-20 clear inner and outer margins
• Chapter24 Comprehensive case
• 24-1 Basic operations of ps
• 24-2 Comprehensive case-product module layout analysis
• 24-3 Comprehensive case-box layout
• 24-4 Comprehensive case-picture and paragraph production
• 24-5 Comprehensive case-evaluation and detail production
• 24-6 Comprehensive case-vertical line details production
• 24-7 Teacher explains
• 24-8 Express module layout analysis
• 24-9 Express module header production
• 24-10 Express module list creation
• Chapter25 rounded border
• 25-1 Rounded border principle
• 25-2 Use of rounded corners
• Chapter26 shadow
• 26-1 box shadow
• 26-2 text shadow
• Chapter27 float
• 27-1 Floating guide
• 27-2 Three ways of traditional web page layout
• 27-3 Why float is needed
• 27-4 what is float
• 27-5 Float Characteristics-Off-Standard
• 27-6 Floating properties-floating elements are displayed in one line
• 27-7 Float properties - Floated elements have inline block properties
• 27-8 Floated elements are often paired with standard flow parent elements
• 27-9 Floating Layout Exercise-1
• 27-10 Floating Layout Exercise-2
• 27-11 Floating Exercise-Mobile Phone Module (Part 1)
• 27-12 Floating Exercise-Mobile Phone Module (Part 2)
• 27-13 Common web page layouts
• 27-14 Two points to note about floating
• Chapter28 clear float
• 28-1 Why clear float
• 28-2 Clear floating nature and extra label method
• 28-3 Clear the overflow of the floating parent element
• 28-4 Clear floating after pseudo-element
• 28-5 Clear floating double pseudo elements
• 28-6 clear float
• Chapter29 ps cut picture
• 29-1 Common image formats
• 29-2 Layer cutting (top)
• 29-3 Layer cutout (below)
• 29-4 slice tool
• 29-5 cutterman installation
• 29-6 Tips for using cutterman
• Chapter30 Xuecheng Online Case
• 30-1 Preparation
• 30-2 css attribute writing order (important)
• 30-3 Overall idea of ​​page layout
• 30-4 Header area creation
• 30-5 Logo area production
• 30-6 Navigation bar nav area production (Part 1)
• 30-7 Navigation bar nav area production (middle)
• 30-8 Navigation bar nav area production (Part 2)
• 30-9 Search search module input production
• 30-10 Search search module button production
• 30-11 User module production
• 30-12 Banner module production
• 30-13 Subnav module production (Part 1)
• 30-14 Subnav module production (Part 2)
• 30-15 Course module production (Part 1)
• 30-16 course module production (medium)
• 30-17 Course module production (Part 2)
• 30-18 Premium recommendation module (Part 1)
• 30-19 Premium recommendation module (medium)
• 30-20 Premium recommendation module (Part 2)
• 30-21 box-hd module production
• 30-22 box-bd module production
• 30-23 box module completed
• 30-24 footer module production
• 30-25 copyright module production
• 30-26 links module production
• Chapter31 position
• 31-1 Positioning guide
• 31-2 Why positioning is needed
• 31-3 Positioning composition
• 31-4 relative positioning
• 31-5 Absolute positioning - no parent or no parent positioning
• 31-6 Absolute positioning - the parent has positioning status
• 31-7 Absolute positioning that is out of standard does not occupy its original position.
• 31-8 The origin of the son’s relationship with his father
• 31-9 The case of son’s absolute father-hot module
• 31-10 Fixed positioning
• 31-11 Tips for fixed positioning - fix to the right side of the center of the page
• 31-12 Sticky Positioning (Understand)
• 31-13 Positioning summary
• 31-14 Positioning stacking order
• 31-15 Absolutely positioned box centering algorithm
• 31-16 Special features of positioning
• 31-17 Floating elements will not suppress the text positioning of the standard flow.
• Chapter32 Taobao focus map
• 32-1 layout analysis
• 32-2 big box production
• 32-3 Left arrow button production
• 32-4 Right arrow button production
• 32-5 ul box module production
• 32-6 li small dot module production
• 32-7 Web page layout summary
• Chapter33 Potato case
• 33-1 display shows hidden elements
• 33-2 visibilityshow hidden elements
• 33-3 overflow show hide
• 33-4 Potato Case (Part 1)
• 33-5 Potato case (Part 2)
• Chapter34 Advanced CSS Tips
• 34-1 Introduction
• 34-2 Why elf technology is needed
• 34-3 Use of sprite charts (principle)
• 34-4 Sprite diagram usage (code)
• 34-5 Sprite example - spell out your name
• 34-6 Font Icon Generation and Advantages
• 34-7 Font icon download
• 34-8 Use of font icons
• 34-9 Principle of appending and loading font icons
• 34-10 How to use CSS triangle
• 34-11 CSS triangle application-Jingdong effect
• 34-12 User Interface - Mouse Style
• 34-13 User Interface - De-outline form and prevent dragging of text fields
• 34-14 vertical-align implements vertical center alignment of inline blocks and text
• 34-15 Solution to the blank gap at the bottom of the picture
• 34-16 Single line text overflows ellipsis display
• 34-17 Multi-line text overflows ellipsis display
• 34-18 Layout skills - clever use of negative margins (Part 1)
• 34-19 Layout skills - clever use of negative margins (Part 2)
• 34-20 Layout techniques - clever use of text around floating elements
• 34-21 Layout techniques - clever use of inline blocks
• 34-22 Layout skills - clever use of CSS triangle (Part 1)
• 34-23 Layout skills - clever use of CSS triangle (Part 2)
• 34-24 CSS initialization
• Chapter35 HTML5 new
• 35-1 HTML5CSS3 improves navigation
• 35-2 Add semantic tags
• 35-3 Add video tag
• 35-4 Add audio tag
• 35-5 Add input form
• 35-6 Add new form properties
• Chapter36 New in CSS3
• 36-1 Attribute selector (top)
• 36-2 Attribute selector (below)
• 36-3 Structural pseudo-class selector - selects the nth element
• 36-4 nth-child selector (top)
• 36-5 nth-child selector (below)
• 36-6 The difference between nth-child and nth-of-type
• 36-7 Usage scenarios and origins of pseudo-element selectors
• 36-8 Basic use of pseudo-element selectors
• 36-9 Pseudo element selector usage scenarios-matching font icons
• 36-10 Pseudo element usage scenario-imitation potato effect
• 36-11 Pseudo-element selector - Pseudo-element clears floating nature
• 36-12 CSS3 box model border-box
• 36-13 CSS3 image blur processing
• 36-14 Calculate box width calc function
• 36-15 CSS3 new attribute transition (Part 1)
• 36-16 CSS3 new attribute transition (Part 2)
• 36-17 CSS3 transition exercises
• 36-18 Generalized H5 (understand)
• Chapter37 Pinyougou project
• 37-1 Introduction
• 37-2 Website production process
• 37-3 Pinyougou project planning
• 37-4 Pinyougou project construction
• 37-5 Pinyougou Project-Modular Development of Styles
• 37-6 Pinyougou project-favicon icon production
• 37-7 Pinyougou project-TDK three major label SEO optimization
• 37-8 Pinyougou homepage-quick navigation shortcut structure construction
• 37-9 Pinyougou Homepage-Quick Navigation Left Side Production
• 37-10 Pinyougou homepage-quick navigation built on the right side
• 37-11 Pinyougou homepage - font icon on the right side of quick navigation
• 37-12 Pinyougou homepage-header module construction
• 37-13 Pinyougou homepage-logoSEO optimization (Part 1)
• 37-14 Pinyougou homepage-logoSEO optimization (Part 2)
• 37-15 Pinyougou homepage-search search module (Part 1)
• 37-16 Pinyougou homepage-search search module (Part 2)
• 37-17 Pinyougou homepage-hotwords module
• 37-18 Pinyougou homepage-shopcar module production
• 37-19 Pinyougou homepage-count shopping cart statistics module
• 37-20 Pinyougou homepage-nav navigation module construction
• 37-21 Pinyougou homepage-dropdown module production
• 37-22 Pinyougou homepage-Navigation detailed classification production (Part 1)
• 37-23 Pinyougou homepage-Navigation detailed classification production (Part 2)
• 37-24 Pinyougou homepage-navitems module production
• 37-25 Pinyougou homepage-footer bottom module construction
• 37-26 Pinyougou homepage-mod-servecie module production (Part 1)
• 37-27 Pinyougou homepage-mod-servecie module production (Part 2)
• 37-28 Pinyougou homepage-mod_help module production
• 37-29 Pinyougou homepage-mod_copyright module production
• 37-30 Pinyougou homepage-main main box construction
• 37-31 Pinyougou homepage-newsflash module
• 37-32 Pinyougou homepage-news-hd module production
• 37-33 Pinyougou homepage-new-bd module production
• 37-34 Pinyougou homepage-lifeservice production (Part 1)
• 37-35 Pinyougou homepage-lifeservice production (Part 2)
• 37-36 Pinyougou homepage-recommended module recom (Part 1)
• 37-37 Pinyougou homepage-recommended module recom (Part 2)
• 37-38 Pinyougou Home Page-Household Appliance Module Construction
• 37-39 Pinyougou Home Page-Household Appliance Module Head Production
• 37-40 Tab bar tab principle layout requirements
• 37-41 Pinyougou homepage-tab_list-item layout (Part 1)
• 37-42 Pinyougou homepage-tab_list-item layout (middle)
• 37-43 Pinyougou homepage-tab_list-item layout (Part 2)
• 37-44 Product Purchase List-Structure Construction
• 37-45 Pinyougo list page-flash sale module production
• 37-46 Pinyougou list page-navigation module modification
• 37-47 Pinyougou list page-a small problem
• 37-48 Pinyougou list page-end
• 37-49 Pinyougou registration page-header production
• 37-50 Pinyougo list page - registration main module header production
• 37-51 Pinyougou registration page - registration subject production (Part 1)
• 37-52 Pinyougou registration page - registration subject production (Part 2)
• 37-53 Pinyougou registration page-security module
• 37-54 Pinyougo registration page-agree module and complete registration module
• 37-55 Pinyougou project pages jump to each other and work arrangements
• 37-56 what is server
• 37-57 Apply for free space and website upload