Name: Getting started with HTML5+CSS3 for front-end newbies
Uploaded: 2022-10-12T10:58:35+8:00
Duration: 1405 min 31 s
Description: 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.

Chapter1Course Introduction and Basic Computer Knowledge: learning route
03 minutes54 seconds; Introduction to HTML
00 minutes36 seconds; Web related concepts
07 minutes44 seconds; Common browsers and kernels
04 minutes44 seconds; web standards
07 minutes32 seconds
Chapter2HTML basic syntax and structure: Introduction to HTML tags
01 minutes01 seconds; HTML syntax specification
07 minutes11 seconds; HTML basic structure tags
07 minutes15 seconds; VSCode tool creation page
06 minutes36 seconds; DOCTYPE and lang and the role of character sets
08 minutes56 seconds
Chapter3HTML tags: tag semantics
02 minutes22 seconds; title tag
05 minutes14 seconds; Paragraph tags and line break tags
06 minutes23 seconds; Sports news case
04 minutes24 seconds; text formatting tag
07 minutes57 seconds; div and span tags
04 minutes43 seconds; Image tags (top)
09 minutes13 seconds; Image tags (below)
04 minutes14 seconds; Things to note about image tags
02 minutes47 seconds
Chapter4Relative path vs absolute path: Directory folders and root directories
06 minutes30 seconds; Relative path (top)
06 minutes07 seconds; Relative path (below)
02 minutes56 seconds; absolute path
03 minutes20 seconds
Chapter5Links and Anchors: Link tag (top)
08 minutes38 seconds; Link tags (below)
09 minutes16 seconds; anchor link
07 minutes02 seconds; Comment tags and special characters
08 minutes18 seconds
Chapter6Comprehensive case: Comprehensive Case (Part 1)
10 minutes36 seconds; Comprehensive Cases (Part 2)
05 minutes13 seconds
Chapter7HTML table: Introduction to HTML tags (Part 2)
01 minutes11 seconds; Basic use of table labels
08 minutes10 seconds; Header cell label
02 minutes30 seconds; Table related attributes (understand)
08 minutes24 seconds; Novel ranking case
09 minutes25 seconds; Table structure tag
04 minutes45 seconds; Merge Cells
08 minutes30 seconds; Table summary
03 minutes46 seconds
Chapter8HTML list: unordered list
08 minutes44 seconds; ordered list
03 minutes16 seconds; custom list
06 minutes37 seconds; List summary
02 minutes52 seconds
Chapter9HTML form: Form usage scenarios and classifications
04 minutes19 seconds; form fields
05 minutes25 seconds; Input type attribute text box and password box
06 minutes32 seconds; Input type attribute radio button and check box
04 minutes36 seconds; input name and value attributes
05 minutes49 seconds; Checked and maxlength attributes of input
03 minutes32 seconds; Classroom Questions and Answers on Usage Scenarios of Four Attributes of Input Form Elements
03 minutes03 seconds; Input type attribute submit and reset button
06 minutes27 seconds; input type attribute ordinary button and file field
04 minutes13 seconds; label label
06 minutes08 seconds; select drop-down form
05 minutes41 seconds; textarea text area label
05 minutes13 seconds; Summary of form elements
02 minutes50 seconds
Chapter10Comprehensive case: Registration page (1)
08 minutes23 seconds; Registration page (2)
08 minutes58 seconds; Registration page (3)
05 minutes23 seconds; Registration page (4)
03 minutes59 seconds; Learn to read documents
06 minutes14 seconds
Chapter11Introduction to css cascading demo table: Introduction to CSS Cascading Style Sheets
01 minutes08 seconds; Introduction to CSS
05 minutes09 seconds
Chapter12css syntax specifications and code style: Experience CSS syntax specifications
07 minutes17 seconds; CSS code style
04 minutes42 seconds
Chapter13css selector: The role of css selector
03 minutes34 seconds; tag selector
06 minutes01 seconds; class selector
10 minutes31 seconds; Draw boxes using class selectors
05 minutes17 seconds; Special use of class selector - multiple class names
08 minutes02 seconds; id selector
06 minutes23 seconds; wildcard selector
05 minutes04 seconds
Chapter14css font: font-family sets the font family
07 minutes39 seconds; font-size font size
04 minutes01 seconds; font-weight font thickness
08 minutes09 seconds; font-style font style
03 minutes06 seconds; How to write font composite attribute
07 minutes46 seconds; Summary of font attributes
03 minutes01 seconds
Chapter15csstext: text colorcolor
05 minutes57 seconds; Text alignment text-align
03 minutes06 seconds; text-decoration text-decoration
05 minutes04 seconds; text-indent text-indent
05 minutes26 seconds; Line spacing line-height
08 minutes09 seconds; Summary of css text properties
03 minutes01 seconds
Chapter16css stylesheet: internal style sheet
04 minutes25 seconds; inline style sheet
04 minutes05 seconds; external style sheet
05 minutes04 seconds; Summary of css introduction methods
02 minutes11 seconds
Chapter17Comprehensive case: news page
06 minutes03 seconds; Modify style (1)
04 minutes45 seconds; Modify style (2)
07 minutes40 seconds; Modify style (3)
03 minutes09 seconds; Use of chrome debugging tools
07 minutes04 seconds
Chapter18emmet syntax: css second day guide
01 minutes29 seconds; emmet syntax generates html tags
09 minutes57 seconds; emmet syntax to quickly generate css styles
03 minutes08 seconds; Quickly format code
05 minutes27 seconds
Chapter19compound selector: Introduction to compound selectors
01 minutes36 seconds; descendant selector
08 minutes57 seconds; Child element selector
03 minutes18 seconds; Class exercises
02 minutes54 seconds; Union selector
06 minutes14 seconds; Link pseudo-class selector (Part 1)
09 minutes39 seconds; Link pseudo-class selector (below)
05 minutes36 seconds; focus pseudo-class selector
03 minutes01 seconds; Compound selector summary
03 minutes03 seconds
Chapter20Element display mode: What is element display mode
04 minutes16 seconds; block element
06 minutes38 seconds; inline elements
05 minutes32 seconds; inline block element
03 minutes39 seconds; Summary of element display modes
03 minutes22 seconds; Display mode conversion
08 minutes12 seconds
Chapter21Sidebar small case: The use of a small tool snipaste
04 minutes44 seconds; Simple version of Xiaomi sidebar case
07 minutes29 seconds; The principle of vertical centering of single line text
07 minutes07 seconds; background color
03 minutes59 seconds; Background picture
04 minutes22 seconds; background tiling
05 minutes12 seconds; Background position-orientation noun
07 minutes29 seconds; Background location case one
06 minutes57 seconds; Background location case 2-King of Glory background picture
04 minutes57 seconds; Background position - precise units
04 minutes01 seconds; Background Position - Mixed Units
04 minutes07 seconds; background fixed
04 minutes20 seconds; Composite writing method of background attribute
03 minutes03 seconds; background color translucent
06 minutes28 seconds; Background summary
03 minutes40 seconds; Comprehensive Case Five-Color Navigation (Part 1)
07 minutes01 seconds; Comprehensive Case Five-Cai Navigation (2)
03 minutes34 seconds
Chapter22Three major features of CSS: Stackability
04 minutes18 seconds; inheritance
04 minutes40 seconds; row height inheritance
09 minutes31 seconds; priority
06 minutes31 seconds; Priority issues
07 minutes42 seconds; Overlay of CSS weights
06 minutes47 seconds; Two exercises on weights
05 minutes25 seconds
Chapter23box model: Introduction to the box model
01 minutes13 seconds; Understand the essence of web page layout
03 minutes56 seconds; Box model components
03 minutes33 seconds; box model border
07 minutes31 seconds; Composite writing of borders
07 minutes49 seconds; table thin line border
05 minutes29 seconds; Borders affect the actual size of the box
03 minutes40 seconds; Box model inner margin padding
04 minutes05 seconds; padding compound property
06 minutes02 seconds; padding will affect the actual size of the box
04 minutes45 seconds; padding application-Sina Navigation Bar (Part 1)
06 minutes09 seconds; padding application-Sina Navigation (Part 2)
05 minutes47 seconds; Xiaomi sidebar modification
02 minutes56 seconds; The padding will not hold the box open
04 minutes53 seconds; Box model margin
06 minutes31 seconds; Typical application of margins--block-level boxes are aligned horizontally and centrally
03 minutes39 seconds; Inline elements and inline-block elements are horizontally centered
02 minutes41 seconds; Margin merging - vertical margins of adjacent block elements
04 minutes14 seconds; Margin merging - nested block elements collapse
06 minutes01 seconds; clear inner and outer margins
04 minutes51 seconds
Chapter24Comprehensive case: Basic operations of ps
05 minutes36 seconds; Comprehensive case-product module layout analysis
02 minutes14 seconds; Comprehensive case-box layout
03 minutes38 seconds; Comprehensive case-picture and paragraph production
06 minutes05 seconds; Comprehensive case-evaluation and detail production
06 minutes28 seconds; Comprehensive case-vertical line details production
04 minutes11 seconds; Teacher explains
05 minutes15 seconds; Express module layout analysis
02 minutes11 seconds; Express module header production
06 minutes15 seconds; Express module list creation
07 minutes39 seconds
Chapter25rounded border: Rounded border principle
06 minutes20 seconds; Use of rounded corners
07 minutes43 seconds
Chapter26shadow: box shadow
09 minutes04 seconds; text shadow
01 minutes54 seconds
Chapter27float: Floating guide
02 minutes05 seconds; Three ways of traditional web page layout
04 minutes43 seconds; Why float is needed
05 minutes16 seconds; what is float
04 minutes46 seconds; Float Characteristics-Off-Standard
06 minutes33 seconds; Floating properties-floating elements are displayed in one line
03 minutes48 seconds; Float properties - Floated elements have inline block properties
04 minutes52 seconds; Floated elements are often paired with standard flow parent elements
03 minutes09 seconds; Floating Layout Exercise-1
04 minutes04 seconds; Floating Layout Exercise-2
09 minutes17 seconds; Floating Exercise-Mobile Phone Module (Part 1)
06 minutes05 seconds; Floating Exercise-Mobile Phone Module (Part 2)
05 minutes00 seconds; Common web page layouts
10 minutes39 seconds; Two points to note about floating
07 minutes47 seconds
Chapter28clear float: Why clear float
10 minutes17 seconds; Clear floating nature and extra label method
07 minutes51 seconds; Clear the overflow of the floating parent element
02 minutes33 seconds; Clear floating after pseudo-element
05 minutes04 seconds; Clear floating double pseudo elements
03 minutes02 seconds; clear float
02 minutes49 seconds
Chapter29ps cut picture: Common image formats
03 minutes44 seconds; Layer cutting (top)
04 minutes48 seconds; Layer cutout (below)
04 minutes59 seconds; slice tool
07 minutes19 seconds; cutterman installation
04 minutes35 seconds; Tips for using cutterman
06 minutes04 seconds
Chapter30Xuecheng Online Case: Preparation
06 minutes40 seconds; css attribute writing order (important)
04 minutes56 seconds; Overall idea of page layout
05 minutes30 seconds; Header area creation
08 minutes08 seconds; Logo area production
04 minutes40 seconds; Navigation bar nav area production (Part 1)
06 minutes24 seconds; Navigation bar nav area production (middle)
05 minutes59 seconds; Navigation bar nav area production (Part 2)
02 minutes54 seconds; Search search module input production
08 minutes36 seconds; Search search module button production
05 minutes27 seconds; User module production
04 minutes55 seconds; Banner module production
06 minutes31 seconds; Subnav module production (Part 1)
05 minutes56 seconds; Subnav module production (Part 2)
03 minutes17 seconds; Course module production (Part 1)
04 minutes29 seconds; course module production (medium)
03 minutes20 seconds; Course module production (Part 2)
07 minutes35 seconds; Premium recommendation module (Part 1)
03 minutes42 seconds; Premium recommendation module (medium)
03 minutes34 seconds; Premium recommendation module (Part 2)
04 minutes51 seconds; box-hd module production
07 minutes22 seconds; box-bd module production
05 minutes41 seconds; box module completed
05 minutes54 seconds; footer module production
04 minutes46 seconds; copyright module production
06 minutes15 seconds; links module production
04 minutes35 seconds
Chapter31position: Positioning guide
00 minutes59 seconds; Why positioning is needed
03 minutes43 seconds; Positioning composition
04 minutes11 seconds; relative positioning
08 minutes16 seconds; Absolute positioning - no parent or no parent positioning
07 minutes16 seconds; Absolute positioning - the parent has positioning status
06 minutes04 seconds; Absolute positioning that is out of standard does not occupy its original position.
02 minutes07 seconds; The origin of the son’s relationship with his father
07 minutes07 seconds; The case of son’s absolute father-hot module
07 minutes47 seconds; Fixed positioning
07 minutes26 seconds; Tips for fixed positioning - fix to the right side of the center of the page
06 minutes30 seconds; Sticky Positioning (Understand)
05 minutes10 seconds; Positioning summary
02 minutes42 seconds; Positioning stacking order
07 minutes18 seconds; Absolutely positioned box centering algorithm
07 minutes45 seconds; Special features of positioning
02 minutes47 seconds; Floating elements will not suppress the text positioning of the standard flow.
05 minutes09 seconds
Chapter32Taobao focus map: layout analysis
03 minutes07 seconds; big box production; Left arrow button production
07 minutes45 seconds; Right arrow button production; ul box module production; li small dot module production; Web page layout summary
Chapter33Potato case: display shows hidden elements
06 minutes39 seconds; visibilityshow hidden elements; overflow show hide; Potato Case (Part 1); Potato case (Part 2)
Chapter34Advanced CSS Tips: Introduction
01 minutes25 seconds; Why elf technology is needed
04 minutes57 seconds; Use of sprite charts (principle)
06 minutes18 seconds; Sprite diagram usage (code)
06 minutes30 seconds; Sprite example - spell out your name
07 minutes32 seconds; Font Icon Generation and Advantages
05 minutes10 seconds; Font icon download
05 minutes50 seconds; Use of font icons
08 minutes20 seconds; Principle of appending and loading font icons
04 minutes06 seconds; How to use CSS triangle
05 minutes14 seconds; CSS triangle application-Jingdong effect
03 minutes48 seconds; User Interface - Mouse Style; User Interface - De-outline form and prevent dragging of text fields; vertical-align implements vertical center alignment of inline blocks and text; Solution to the blank gap at the bottom of the picture; Single line text overflows ellipsis display; Multi-line text overflows ellipsis display; Layout skills - clever use of negative margins (Part 1); Layout skills - clever use of negative margins (Part 2); Layout techniques - clever use of text around floating elements; Layout techniques - clever use of inline blocks; Layout skills - clever use of CSS triangle (Part 1); Layout skills - clever use of CSS triangle (Part 2); CSS initialization
Chapter35HTML5 new: HTML5CSS3 improves navigation; Add semantic tags; Add video tag; Add audio tag; Add input form; Add new form properties
Chapter36New in CSS3: Attribute selector (top); Attribute selector (below); Structural pseudo-class selector - selects the nth element; nth-child selector (top); nth-child selector (below); The difference between nth-child and nth-of-type; Usage scenarios and origins of pseudo-element selectors; Basic use of pseudo-element selectors; Pseudo element selector usage scenarios-matching font icons; Pseudo element usage scenario-imitation potato effect; Pseudo-element selector - Pseudo-element clears floating nature; CSS3 box model border-box; CSS3 image blur processing; Calculate box width calc function; CSS3 new attribute transition (Part 1); CSS3 new attribute transition (Part 2); CSS3 transition exercises; Generalized H5 (understand)
Chapter37Pinyougou project: Introduction
00 minutes48 seconds; Website production process
05 minutes05 seconds; Pinyougou project planning; Pinyougou project construction; Pinyougou Project-Modular Development of Styles; Pinyougou project-favicon icon production; Pinyougou project-TDK three major label SEO optimization; Pinyougou homepage-quick navigation shortcut structure construction; Pinyougou Homepage-Quick Navigation Left Side Production; Pinyougou homepage-quick navigation built on the right side; Pinyougou homepage - font icon on the right side of quick navigation; Pinyougou homepage-header module construction
04 minutes30 seconds; Pinyougou homepage-logoSEO optimization (Part 1)
06 minutes54 seconds; Pinyougou homepage-logoSEO optimization (Part 2)
04 minutes21 seconds; Pinyougou homepage-search search module (Part 1)
06 minutes14 seconds; Pinyougou homepage-search search module (Part 2); Pinyougou homepage-hotwords module; Pinyougou homepage-shopcar module production; Pinyougou homepage-count shopping cart statistics module; Pinyougou homepage-nav navigation module construction; Pinyougou homepage-dropdown module production; Pinyougou homepage-Navigation detailed classification production (Part 1); Pinyougou homepage-Navigation detailed classification production (Part 2); Pinyougou homepage-navitems module production; Pinyougou homepage-footer bottom module construction; Pinyougou homepage-mod-servecie module production (Part 1); Pinyougou homepage-mod-servecie module production (Part 2); Pinyougou homepage-mod_help module production; Pinyougou homepage-mod_copyright module production; Pinyougou homepage-main main box construction; Pinyougou homepage-newsflash module; Pinyougou homepage-news-hd module production; Pinyougou homepage-new-bd module production; Pinyougou homepage-lifeservice production (Part 1)
06 minutes30 seconds; Pinyougou homepage-lifeservice production (Part 2)
07 minutes04 seconds; Pinyougou homepage-recommended module recom (Part 1); Pinyougou homepage-recommended module recom (Part 2); Pinyougou Home Page-Household Appliance Module Construction; Pinyougou Home Page-Household Appliance Module Head Production; Tab bar tab principle layout requirements; Pinyougou homepage-tab_list-item layout (Part 1); Pinyougou homepage-tab_list-item layout (middle); Pinyougou homepage-tab_list-item layout (Part 2); Product Purchase List-Structure Construction; Pinyougo list page-flash sale module production; Pinyougou list page-navigation module modification; Pinyougou list page-a small problem; Pinyougou list page-end; Pinyougou registration page-header production; Pinyougo list page - registration main module header production; Pinyougou registration page - registration subject production (Part 1); Pinyougou registration page - registration subject production (Part 2)
04 minutes45 seconds; Pinyougou registration page-security module; Pinyougo registration page-agree module and complete registration module; Pinyougou project pages jump to each other and work arrangements; what is server; Apply for free space and website upload

Getting started with HTML5+CSS3 for front-end newbies

About Instructor

php.cn