Getting started with HTML5+CSS3 for front-end newbies
1. Web-side layout: first explain the common tags of HTML5, then explain the new features and new syntax of H5C3 added to common CSS3 styles, and finally explain the PC-end product purchase project. And CSS3 animation 2d 3d effects. 2. Mobile layout: It mainly explains the viewport, double image, drain layout, flex layout, rem layout, responsive layout, and also adds tools such as Mockup.
406172
person learning
361
class hour
2022-10-12
update time
23 Hours25 minutes31 seconds
Total course duration
有朋自远方来，虽远必诛！
You will learn
1. Web-side layout: first explain the common tags of HTML5, then explain the new features and new syntax of H5C3 added to common CSS3 styles, and finally explain the PC-end product purchase project. And CSS3 animation 2d 3d effects. 2. Mobile layout: It mainly explains the viewport, double image, drain layout, flex layout, rem layout, responsive layout, and also adds tools such as Mockup.
Getting started with HTML5+CSS3 for front-end newbies
Section1 learning route
03 minutes54 seconds
Section2 Introduction to HTML
00 minutes36 seconds
Section3 Web related concepts
07 minutes44 seconds
Section4 Common browsers and kernels
04 minutes44 seconds
Section5 web standards
07 minutes32 seconds
Chapter1 Course Introduction and Basic Computer Knowledge
Section1 Introduction to HTML tags
01 minutes01 seconds
Section2 HTML syntax specification
07 minutes11 seconds
Section3 HTML basic structure tags
07 minutes15 seconds
Section4 VSCode tool creation page
06 minutes36 seconds
Section5 DOCTYPE and lang and the role of character sets
08 minutes56 seconds
Chapter2 HTML basic syntax and structure
Section1 tag semantics
02 minutes22 seconds
Section2 title tag
05 minutes14 seconds
Section3 Paragraph tags and line break tags
06 minutes23 seconds
Section4 Sports news case
04 minutes24 seconds
Section5 text formatting tag
07 minutes57 seconds
Section6 div and span tags
04 minutes43 seconds
Section7 Image tags (top)
09 minutes13 seconds
Section8 Image tags (below)
04 minutes14 seconds
Section9 Things to note about image tags
02 minutes47 seconds
Chapter3 HTML tags
Section1 Directory folders and root directories
06 minutes30 seconds
Section2 Relative path (top)
06 minutes07 seconds
Section3 Relative path (below)
02 minutes56 seconds
Section4 absolute path
03 minutes20 seconds
Chapter4 Relative path vs absolute path
Section1 Link tag (top)
08 minutes38 seconds
Section2 Link tags (below)
09 minutes16 seconds
Section3 anchor link
07 minutes02 seconds
Section4 Comment tags and special characters
08 minutes18 seconds
Chapter5 Links and Anchors
Section1 Comprehensive Case (Part 1)
10 minutes36 seconds
Section2 Comprehensive Cases (Part 2)
05 minutes13 seconds
Chapter6 Comprehensive case
Section1 Introduction to HTML tags (Part 2)
01 minutes11 seconds
Section2 Basic use of table labels
08 minutes10 seconds
Section3 Header cell label
02 minutes30 seconds
Section4 Table related attributes (understand)
08 minutes24 seconds
Section5 Novel ranking case
09 minutes25 seconds
Section6 Table structure tag
04 minutes45 seconds
Section7 Merge Cells
08 minutes30 seconds
Section8 Table summary
03 minutes46 seconds
Chapter7 HTML table
Section1 unordered list
08 minutes44 seconds
Section2 ordered list
03 minutes16 seconds
Section3 custom list
06 minutes37 seconds
Section4 List summary
02 minutes52 seconds
Chapter8 HTML list
Section1 Form usage scenarios and classifications
04 minutes19 seconds
Section2 form fields
05 minutes25 seconds
Section3 Input type attribute text box and password box
06 minutes32 seconds
Section4 Input type attribute radio button and check box
04 minutes36 seconds
Section5 input name and value attributes
05 minutes49 seconds
Section6 Checked and maxlength attributes of input
03 minutes32 seconds
Section7 Classroom Questions and Answers on Usage Scenarios of Four Attributes of Input Form Elements
03 minutes03 seconds
Section8 Input type attribute submit and reset button
06 minutes27 seconds
Section9 input type attribute ordinary button and file field
04 minutes13 seconds
Section10 label label
06 minutes08 seconds
Section11 select drop-down form
05 minutes41 seconds
Section12 textarea text area label
05 minutes13 seconds
Section13 Summary of form elements
02 minutes50 seconds
Chapter9 HTML form
Section1 Registration page (1)
08 minutes23 seconds
Section2 Registration page (2)
08 minutes58 seconds
Section3 Registration page (3)
05 minutes23 seconds
Section4 Registration page (4)
03 minutes59 seconds
Section5 Learn to read documents
06 minutes14 seconds
Chapter10 Comprehensive case
Section1 Introduction to CSS Cascading Style Sheets
01 minutes08 seconds
Section2 Introduction to CSS
05 minutes09 seconds
Chapter11 Introduction to css cascading demo table
Section1 Experience CSS syntax specifications
07 minutes17 seconds
Section2 CSS code style
04 minutes42 seconds
Chapter12 css syntax specifications and code style
Section1 The role of css selector
03 minutes34 seconds
Section2 tag selector
06 minutes01 seconds
Section3 class selector
10 minutes31 seconds
Section4 Draw boxes using class selectors
05 minutes17 seconds
Section5 Special use of class selector - multiple class names
08 minutes02 seconds
Section6 id selector
06 minutes23 seconds
Section7 wildcard selector
05 minutes04 seconds
Chapter13 css selector
Section1 font-family sets the font family
07 minutes39 seconds
Section2 font-size font size
04 minutes01 seconds
Section3 font-weight font thickness
08 minutes09 seconds
Section4 font-style font style
03 minutes06 seconds
Section5 How to write font composite attribute
07 minutes46 seconds
Section6 Summary of font attributes
03 minutes01 seconds
Chapter14 css font
Section1 text colorcolor
05 minutes57 seconds
Section2 Text alignment text-align
03 minutes06 seconds
Section3 text-decoration text-decoration
05 minutes04 seconds
Section4 text-indent text-indent
05 minutes26 seconds
Section5 Line spacing line-height
08 minutes09 seconds
Section6 Summary of css text properties
03 minutes01 seconds
Chapter15 csstext
Section1 internal style sheet
04 minutes25 seconds
Section2 inline style sheet
04 minutes05 seconds
Section3 external style sheet
05 minutes04 seconds
Section4 Summary of css introduction methods
02 minutes11 seconds
Chapter16 css stylesheet
Section1 news page
06 minutes03 seconds
Section2 Modify style (1)
04 minutes45 seconds
Section3 Modify style (2)
07 minutes40 seconds
Section4 Modify style (3)
03 minutes09 seconds
Section5 Use of chrome debugging tools
07 minutes04 seconds
Chapter17 Comprehensive case
Section1 css second day guide
01 minutes29 seconds
Section2 emmet syntax generates html tags
09 minutes57 seconds
Section3 emmet syntax to quickly generate css styles
03 minutes08 seconds
Section4 Quickly format code
05 minutes27 seconds
Chapter18 emmet syntax
Section1 Introduction to compound selectors
01 minutes36 seconds
Section2 descendant selector
08 minutes57 seconds
Section3 Child element selector
03 minutes18 seconds
Section4 Class exercises
02 minutes54 seconds
Section5 Union selector
06 minutes14 seconds
Section6 Link pseudo-class selector (Part 1)
09 minutes39 seconds
Section7 Link pseudo-class selector (below)
05 minutes36 seconds
Section8 focus pseudo-class selector
03 minutes01 seconds
Section9 Compound selector summary
03 minutes03 seconds
Chapter19 compound selector
Section1 What is element display mode
04 minutes16 seconds
Section2 block element
06 minutes38 seconds
Section3 inline elements
05 minutes32 seconds
Section4 inline block element
03 minutes39 seconds
Section5 Summary of element display modes
03 minutes22 seconds
Section6 Display mode conversion
08 minutes12 seconds
Chapter20 Element display mode
Section1 The use of a small tool snipaste
04 minutes44 seconds
Section2 Simple version of Xiaomi sidebar case
07 minutes29 seconds
Section3 The principle of vertical centering of single line text
07 minutes07 seconds
Section4 background color
03 minutes59 seconds
Section5 Background picture
04 minutes22 seconds
Section6 background tiling
05 minutes12 seconds
Section7 Background position-orientation noun
07 minutes29 seconds
Section8 Background location case one
06 minutes57 seconds
Section9 Background location case 2-King of Glory background picture
04 minutes57 seconds
Section10 Background position - precise units
04 minutes01 seconds
Section11 Background Position - Mixed Units
04 minutes07 seconds
Section12 background fixed
04 minutes20 seconds
Section13 Composite writing method of background attribute
03 minutes03 seconds
Section14 background color translucent
06 minutes28 seconds
Section15 Background summary
03 minutes40 seconds
Section16 Comprehensive Case Five-Color Navigation (Part 1)
07 minutes01 seconds
Section17 Comprehensive Case Five-Cai Navigation (2)
03 minutes34 seconds
Chapter21 Sidebar small case
Section1 Stackability
04 minutes18 seconds
Section2 inheritance
04 minutes40 seconds
Section3 row height inheritance
09 minutes31 seconds
Section4 priority
06 minutes31 seconds
Section5 Priority issues
07 minutes42 seconds
Section6 Overlay of CSS weights
06 minutes47 seconds
Section7 Two exercises on weights
05 minutes25 seconds
Chapter22 Three major features of CSS
Section1 Introduction to the box model
01 minutes13 seconds
Section2 Understand the essence of web page layout
03 minutes56 seconds
Section3 Box model components
03 minutes33 seconds
Section4 box model border
07 minutes31 seconds
Section5 Composite writing of borders
07 minutes49 seconds
Section6 table thin line border
05 minutes29 seconds
Section7 Borders affect the actual size of the box
03 minutes40 seconds
Section8 Box model inner margin padding
04 minutes05 seconds
Section9 padding compound property
06 minutes02 seconds
Section10 padding will affect the actual size of the box
04 minutes45 seconds
Section11 padding application-Sina Navigation Bar (Part 1)
06 minutes09 seconds
Section12 padding application-Sina Navigation (Part 2)
05 minutes47 seconds
Section13 Xiaomi sidebar modification
02 minutes56 seconds
Section14 The padding will not hold the box open
04 minutes53 seconds
Section15 Box model margin
06 minutes31 seconds
Section16 Typical application of margins--block-level boxes are aligned horizontally and centrally
03 minutes39 seconds
Section17 Inline elements and inline-block elements are horizontally centered
02 minutes41 seconds
Section18 Margin merging - vertical margins of adjacent block elements
04 minutes14 seconds
Section19 Margin merging - nested block elements collapse
06 minutes01 seconds
Section20 clear inner and outer margins
04 minutes51 seconds
Chapter23 box model
Section1 Basic operations of ps
05 minutes36 seconds
Section2 Comprehensive case-product module layout analysis
02 minutes14 seconds
Section3 Comprehensive case-box layout
03 minutes38 seconds
Section4 Comprehensive case-picture and paragraph production
06 minutes05 seconds
Section5 Comprehensive case-evaluation and detail production
06 minutes28 seconds
Section6 Comprehensive case-vertical line details production
04 minutes11 seconds
Section7 Teacher explains
05 minutes15 seconds
Section8 Express module layout analysis
02 minutes11 seconds
Section9 Express module header production
06 minutes15 seconds
Section10 Express module list creation
07 minutes39 seconds
Chapter24 Comprehensive case
Section1 Rounded border principle
06 minutes20 seconds
Section2 Use of rounded corners
07 minutes43 seconds
Chapter25 rounded border
Section1 Floating guide
02 minutes05 seconds
Section2 Three ways of traditional web page layout
04 minutes43 seconds
Section3 Why float is needed
05 minutes16 seconds
Section4 what is float
04 minutes46 seconds
Section5 Float Characteristics-Off-Standard
06 minutes33 seconds
Section6 Floating properties-floating elements are displayed in one line
03 minutes48 seconds
Section7 Float properties - Floated elements have inline block properties
04 minutes52 seconds
Section8 Floated elements are often paired with standard flow parent elements
03 minutes09 seconds
Section9 Floating Layout Exercise-1
04 minutes04 seconds
Section10 Floating Layout Exercise-2
09 minutes17 seconds
Section11 Floating Exercise-Mobile Phone Module (Part 1)
06 minutes05 seconds
Section12 Floating Exercise-Mobile Phone Module (Part 2)
05 minutes00 seconds
Section13 Common web page layouts
10 minutes39 seconds
Section14 Two points to note about floating
07 minutes47 seconds
Chapter27 float
Section1 Why clear float
10 minutes17 seconds
Section2 Clear floating nature and extra label method
07 minutes51 seconds
Section3 Clear the overflow of the floating parent element
02 minutes33 seconds
Section4 Clear floating after pseudo-element
05 minutes04 seconds
Section5 Clear floating double pseudo elements
03 minutes02 seconds
Section6 clear float
02 minutes49 seconds
Chapter28 clear float
Section1 Common image formats
03 minutes44 seconds
Section2 Layer cutting (top)
04 minutes48 seconds
Section3 Layer cutout (below)
04 minutes59 seconds
Section4 slice tool
07 minutes19 seconds
Section5 cutterman installation
04 minutes35 seconds
Section6 Tips for using cutterman
06 minutes04 seconds
Chapter29 ps cut picture
Section1 Preparation
06 minutes40 seconds
Section2 css attribute writing order (important)
04 minutes56 seconds
Section3 Overall idea of page layout
05 minutes30 seconds
Section4 Header area creation
08 minutes08 seconds
Section5 Logo area production
04 minutes40 seconds
Section6 Navigation bar nav area production (Part 1)
06 minutes24 seconds
Section7 Navigation bar nav area production (middle)
05 minutes59 seconds
Section8 Navigation bar nav area production (Part 2)
02 minutes54 seconds
Section9 Search search module input production
08 minutes36 seconds
Section10 Search search module button production
05 minutes27 seconds
Section11 User module production
04 minutes55 seconds
Section12 Banner module production
06 minutes31 seconds
Section13 Subnav module production (Part 1)
05 minutes56 seconds
Section14 Subnav module production (Part 2)
03 minutes17 seconds
Section15 Course module production (Part 1)
04 minutes29 seconds
Section16 course module production (medium)
03 minutes20 seconds
Section17 Course module production (Part 2)
07 minutes35 seconds
Section18 Premium recommendation module (Part 1)
03 minutes42 seconds
Section19 Premium recommendation module (medium)
03 minutes34 seconds
Section20 Premium recommendation module (Part 2)
04 minutes51 seconds
Section21 box-hd module production
07 minutes22 seconds
Section22 box-bd module production
05 minutes41 seconds
Section23 box module completed
05 minutes54 seconds
Section24 footer module production
04 minutes46 seconds
Section25 copyright module production
06 minutes15 seconds
Section26 links module production
04 minutes35 seconds
Chapter30 Xuecheng Online Case
Section1 Positioning guide
00 minutes59 seconds
Section2 Why positioning is needed
03 minutes43 seconds
Section3 Positioning composition
04 minutes11 seconds
Section4 relative positioning
08 minutes16 seconds
Section5 Absolute positioning - no parent or no parent positioning
07 minutes16 seconds
Section6 Absolute positioning - the parent has positioning status
06 minutes04 seconds
Section7 Absolute positioning that is out of standard does not occupy its original position.
02 minutes07 seconds
Section8 The origin of the son’s relationship with his father
07 minutes07 seconds
Section9 The case of son’s absolute father-hot module
07 minutes47 seconds
Section10 Fixed positioning
07 minutes26 seconds
Section11 Tips for fixed positioning - fix to the right side of the center of the page
06 minutes30 seconds
Section12 Sticky Positioning (Understand)
05 minutes10 seconds
Section13 Positioning summary
02 minutes42 seconds
Section14 Positioning stacking order
07 minutes18 seconds
Section15 Absolutely positioned box centering algorithm
07 minutes45 seconds
Section16 Special features of positioning
02 minutes47 seconds
Section17 Floating elements will not suppress the text positioning of the standard flow.
05 minutes09 seconds
Chapter31 position
Section1 layout analysis
03 minutes07 seconds
Section2 big box production
In calculation
Section3 Left arrow button production
07 minutes45 seconds
Section4 Right arrow button production
In calculation
Section5 ul box module production
In calculation
Section6 li small dot module production
In calculation
Section7 Web page layout summary
In calculation
Chapter32 Taobao focus map
Section1 display shows hidden elements
06 minutes39 seconds
Section2 visibilityshow hidden elements
In calculation
Section3 overflow show hide
In calculation
Section4 Potato Case (Part 1)
In calculation
Section5 Potato case (Part 2)
In calculation
Chapter33 Potato case
Section1 Introduction
01 minutes25 seconds
Section2 Why elf technology is needed
04 minutes57 seconds
Section3 Use of sprite charts (principle)
06 minutes18 seconds
Section4 Sprite diagram usage (code)
06 minutes30 seconds
Section5 Sprite example - spell out your name
07 minutes32 seconds
Section6 Font Icon Generation and Advantages
05 minutes10 seconds
Section7 Font icon download
05 minutes50 seconds
Section8 Use of font icons
08 minutes20 seconds
Section9 Principle of appending and loading font icons
04 minutes06 seconds
Section10 How to use CSS triangle
05 minutes14 seconds
Section11 CSS triangle application-Jingdong effect
03 minutes48 seconds
Section12 User Interface - Mouse Style
In calculation
Section13 User Interface - De-outline form and prevent dragging of text fields
In calculation
Section14 vertical-align implements vertical center alignment of inline blocks and text
In calculation
Section15 Solution to the blank gap at the bottom of the picture
In calculation
Section16 Single line text overflows ellipsis display
In calculation
Section17 Multi-line text overflows ellipsis display
In calculation
Section18 Layout skills - clever use of negative margins (Part 1)
In calculation
Section19 Layout skills - clever use of negative margins (Part 2)
In calculation
Section20 Layout techniques - clever use of text around floating elements
In calculation
Section21 Layout techniques - clever use of inline blocks
In calculation
Section22 Layout skills - clever use of CSS triangle (Part 1)
In calculation
Section23 Layout skills - clever use of CSS triangle (Part 2)
In calculation
Section24 CSS initialization
In calculation
Chapter34 Advanced CSS Tips
Section1 HTML5CSS3 improves navigation
In calculation
Section2 Add semantic tags
In calculation
Section3 Add video tag
In calculation
Section4 Add audio tag
In calculation
Section5 Add input form
In calculation
Section6 Add new form properties
In calculation
Chapter35 HTML5 new
Section1 Attribute selector (top)
In calculation
Section2 Attribute selector (below)
In calculation
Section3 Structural pseudo-class selector - selects the nth element
In calculation
Section4 nth-child selector (top)
In calculation
Section5 nth-child selector (below)
In calculation
Section6 The difference between nth-child and nth-of-type
In calculation
Section7 Usage scenarios and origins of pseudo-element selectors
In calculation
Section8 Basic use of pseudo-element selectors
In calculation
Section9 Pseudo element selector usage scenarios-matching font icons
In calculation
Section10 Pseudo element usage scenario-imitation potato effect
In calculation
Section11 Pseudo-element selector - Pseudo-element clears floating nature
In calculation
Section12 CSS3 box model border-box
In calculation
Section13 CSS3 image blur processing
In calculation
Section14 Calculate box width calc function
In calculation
Section15 CSS3 new attribute transition (Part 1)
In calculation
Section16 CSS3 new attribute transition (Part 2)
In calculation
Section17 CSS3 transition exercises
In calculation
Section18 Generalized H5 (understand)
In calculation
Chapter36 New in CSS3
Section1 Introduction
00 minutes48 seconds
Section2 Website production process
05 minutes05 seconds
Section3 Pinyougou project planning
In calculation
Section4 Pinyougou project construction
In calculation
Section5 Pinyougou Project-Modular Development of Styles
In calculation
Section6 Pinyougou project-favicon icon production
In calculation
Section7 Pinyougou project-TDK three major label SEO optimization
In calculation
Section8 Pinyougou homepage-quick navigation shortcut structure construction
In calculation
Section9 Pinyougou Homepage-Quick Navigation Left Side Production
In calculation
Section10 Pinyougou homepage-quick navigation built on the right side
In calculation
Section11 Pinyougou homepage - font icon on the right side of quick navigation
In calculation
Section12 Pinyougou homepage-header module construction
04 minutes30 seconds
Section13 Pinyougou homepage-logoSEO optimization (Part 1)
06 minutes54 seconds
Section14 Pinyougou homepage-logoSEO optimization (Part 2)
04 minutes21 seconds
Section15 Pinyougou homepage-search search module (Part 1)
06 minutes14 seconds
Section16 Pinyougou homepage-search search module (Part 2)
In calculation
Section17 Pinyougou homepage-hotwords module
In calculation
Section18 Pinyougou homepage-shopcar module production
In calculation
Section19 Pinyougou homepage-count shopping cart statistics module
In calculation
Section20 Pinyougou homepage-nav navigation module construction
In calculation
Section21 Pinyougou homepage-dropdown module production
In calculation
Section22 Pinyougou homepage-Navigation detailed classification production (Part 1)
In calculation
Section23 Pinyougou homepage-Navigation detailed classification production (Part 2)
In calculation
Section24 Pinyougou homepage-navitems module production
In calculation
Section25 Pinyougou homepage-footer bottom module construction
In calculation
Section26 Pinyougou homepage-mod-servecie module production (Part 1)
In calculation
Section27 Pinyougou homepage-mod-servecie module production (Part 2)
In calculation
Section28 Pinyougou homepage-mod_help module production
In calculation
Section29 Pinyougou homepage-mod_copyright module production
In calculation
Section30 Pinyougou homepage-main main box construction
In calculation
Section31 Pinyougou homepage-newsflash module
In calculation
Section32 Pinyougou homepage-news-hd module production
In calculation
Section33 Pinyougou homepage-new-bd module production
In calculation
Section34 Pinyougou homepage-lifeservice production (Part 1)
06 minutes30 seconds
Section35 Pinyougou homepage-lifeservice production (Part 2)
07 minutes04 seconds
Section36 Pinyougou homepage-recommended module recom (Part 1)
In calculation
Section37 Pinyougou homepage-recommended module recom (Part 2)
In calculation
Section38 Pinyougou Home Page-Household Appliance Module Construction
In calculation
Section39 Pinyougou Home Page-Household Appliance Module Head Production
In calculation
Section40 Tab bar tab principle layout requirements
In calculation
Section41 Pinyougou homepage-tab_list-item layout (Part 1)
In calculation
Section42 Pinyougou homepage-tab_list-item layout (middle)
In calculation
Section43 Pinyougou homepage-tab_list-item layout (Part 2)
In calculation
Section44 Product Purchase List-Structure Construction
In calculation
Section45 Pinyougo list page-flash sale module production
In calculation
Section46 Pinyougou list page-navigation module modification
In calculation
Section47 Pinyougou list page-a small problem
In calculation
Section48 Pinyougou list page-end
In calculation
Section49 Pinyougou registration page-header production
In calculation
Section50 Pinyougo list page - registration main module header production
In calculation
Section51 Pinyougou registration page - registration subject production (Part 1)
In calculation
Section52 Pinyougou registration page - registration subject production (Part 2)
04 minutes45 seconds
Section53 Pinyougou registration page-security module
In calculation
Section54 Pinyougo registration page-agree module and complete registration module
In calculation
Section55 Pinyougou project pages jump to each other and work arrangements
In calculation
Section56 what is server
In calculation
Section57 Apply for free space and website upload
In calculation
Chapter37 Pinyougou project
Data Name
HTML5+CSS3 related courseware for front-end beginners with zero basic knowledge
Download
王林 Lecturer Other Courses
Popular courses
JAVA Beginner's Video Tutorial
753 class hour
2982559
Little Turtle's zero-based introduction to learning Python video tutorial
60 class hour
546667
Quick introduction to web front-end development
8 class hour
220790
Master PS video tutorials from scratch
268 class hour
1003301
Latest courses
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
[Web front-end] Node.js quick start
16 class hour
16696
Complete collection of foreign web development full-stack courses
12 class hour
13480
Go language practical GraphQL
10 class hour
11115
550W fan master learns JavaScript from scratch step by step
1 class hour
1264
