Ideal video tutorial website front-end page video tutorial

• Chapter1 html and xhtml
• 1-1 HTML structure
• 1-2 HTML syntax
• 1-3 HTML tags
• 1-4 HTML attributes
• 1-5 XHTML structure
• 1-6 XHTML type
• 1-7 DTD analysis
• 1-8 namespace
• Chapter2 html5 introduction
• 2-1 HTML5 syntax
• 2-2 HTML5 elements
• 2-3 HTML5 attributes
• 2-4 HTML5 global attributes
• 2-5 HTML5 other features
• 2-6 Understand HTML5 document structure
• 2-7 HTML5 element classification
• 2-8 Identify articles
• 2-9 Segment content
• 2-10 Design navigation information
• 2-11 Design support information
• 2-12 Design microformats
• 2-13 Add release date
• 2-14 Add title block
• 2-15 Group titles
• 2-16 Add footnote block
• 2-17 Add contact information
• 2-18 design outline
• 2-19 design style
• Chapter3 Example application
• 3-1 Email type applications
• 3-2 url type application
• 3-3 Number type applications
• 3-4 Range type applications
• 3-5 Date checker type application
• 3-6 search type applications
• 3-7 tel type application
• 3-8 color type applications
• Chapter4 New content
• 4-1 New autocomplete attribute
• 4-2 New autofocus attribute
• 4-3 New form attribute
• 4-4 New form override properties
• 4-5 New height and width attributes
• 4-6 New list attribute
• 4-7 New min, max and step attributes
• 4-8 New multiple attribute
• 4-9 New pattern attribute
• 4-10 New placeholder attribute
• 4-11 New required attribute
• 4-12 New datalist element
• 4-13 New keygen element
• 4-14 New output element
• 4-15 New autocomplete attribute
• 4-16 New novalidate attribute
• Chapter5 canvas drawing
• 5-1 Add canvas element to page
• 5-2 How Canvas draws graphics
• 5-3 Understanding Canvas coordinates
• 5-4 When not to use Canvas
• 5-5 If the browser does not support Canvas
• 5-6 Check browser support
• 5-7 Draw a straight line
• 5-8 Draw a rectangle
• 5-9 Draw a circle
• 5-10 draw triangle
• 5-11 Clear canvas
• 5-12 Draw a quadratic Bezier curve
• 5-13 Draw cubic Bezier curve
• 5-14 Save and restore Canvas state
• 5-15 Move coordinate space
• 5-16 Rotate coordinate space
• 5-17 Rotate coordinate space
• 5-18 Zoom graphics
• 5-19 matrix transformation
• 5-20 combination of graphics
• 5-21 clipping path
• 5-22 Apply different line styles
• 5-23 Draw a linear gradient
• 5-24 Draw a radial gradient
• 5-25 draw patterns
• 5-26 Set the transparency of graphics
• 5-27 Create shadow
• 5-28 Draw filler text
• 5-29 Draw outline text
• 5-30 Measure text width
• 5-31 Import images into Canvas
• 5-32 Change image size
• 5-33 Create image slices
• Chapter6 audio and video
• 6-1 Detect audio format support with JavaScript
• 6-2 Detect video format support with JavaScript
• 6-3 Understand audio elements
• 6-4 Play audio
• 6-5 Understanding video elements
• 6-6 play video
• 6-7 Audio and video related properties
• 6-8 Audio and video related methods
• 6-9 Audio and video related methods
• 6-10 Audio and video related events
• 6-11 Control music playback with script
• 6-12 View video frames
• Chapter7 Web browser application
• 7-1 Check browser support
• 7-2 Set and get data
• 7-3 Prevent data leakage
• 7-4 Other uses of Web Storage
• 7-5 Web Storage event monitoring
• 7-6 Example 1: Design web skin
• 7-7 Example 2: Tracking localStorage data
• 7-8 Example 3: Design counter
• 7-9 Comprehensive application: real-time tracking of web application projects
• 7-10 Using a Web SQL database
• 7-11 Example 1: Create a simple local database
• 7-12 Example 2: Store local data in batches
• 7-13 Comprehensive application: mixed development of Web Storage and Web SQL
• 7-14 Practical Combat 1: Caching the Home Page
• 7-15 Practical combat 2: Edit content offline
• 7-16 Practical Combat 3: Offline Tracking
• 7-17 Check browser support
• 7-18 Create Web Workers
• 7-19 Communicate with Web Workers
• 7-20 Hands-on practice using Web Workers
• Chapter8 Multi-threaded application
• 8-1 Use multi-threading to implement background operations
• 8-2 Filter values in the background
• 8-3 Multi-tasking concurrent processing
• 8-4 Communicate between multiple threads
• 8-5 Calculate Fibonacci series using threading technology
• 8-6 Using multithreading for drawing
• 8-7 Write application main page
• 8-8 Writing Worker js
• 8-9 Communicate with Web Workers
• Chapter9 Detailed explanation of CSS3 knowledge points
• 9-1 Overview of CSS1.0 and CSS2.0
• 9-2 The relationship between CSS and DIV tags
• 9-3 CSS coding standards
• 9-4 attribute selector
• 9-5 RGBA transparency
• 9-6 multi-column layout
• 9-7 Multiple background images
• 9-8 String overflow
• 9-9 Block shadows and rounded shadows
• 9-10 rounded corners
• 9-11 Border picture
• 9-12 deformation
• 9-13 Application scope of CSS 3
• 9-14 Browsers that currently support CSS 3
• 9-15 Case practice: Design beautiful forms
• 9-16 Understanding attribute selectors
• 9-17 Case practice
• 9-18 Understanding structural pseudo-class selectors
• 9-19 Case practice
• 9-20 Understand common UI pseudo-class selectors
• 9-21 Case practice
• 9-22 Other selectors
• 9-23 Define text-shadow property
• 9-24 Apply shadow effect
• 9-25 Comprehensive practice: designing the homepage of a hacker website
• 9-26 overflow text
• 9-27 text wrap
• 9-28 Use RGBA color values
• 9-29 Use HSL color values
• 9-30 Use HSLA color values
• 9-31 Define opacity attribute
• 9-32 Define transparent color value
• 9-33 Detailed usage explanation
• 9-34 Case practice
• 9-35 Detailed usage explanation
• 9-36 Case practice
• 9-37 Detailed usage explanation
• 9-38 Case practice: Designing elliptical graphics
• 9-39 Detailed usage explanation
• 9-40 Case practice: Designing the interface effect of Windows 7
• 9-41 Define background coordinates
• 9-42 Define background cropping area
• 9-43 Define background image size
• 9-44 Define how the background image loops
• 9-45 Define multiple background images
• 9-46 Get to know transform
• 9-47 Rotation animation
• 9-48 Zoom animation
• 9-49 moving animation
• 9-50 Tilt animation
• 9-51 Transform animation
• 9-52 Case practice: Designing a graffiti wall
• 9-53 Custom transformation
• 9-54 Define complex deformations
• 9-55 Define transition properties
• 9-56 Define transition time
• 9-57 Define transition delay time
• 9-58 Define transition effects
• 9-59 Case practice: Designing OS Navigator
• 9-60 Case practice: Designing picture flipping effects
• 9-61 Designing Webkit Gradient
• 9-62 Webkit case practice
• 9-63 Designing Webkit Gradient
• 9-64 Webkit case practice
• 9-65 Design Gecko Gradient
• 9-66 Gecko case practice
• 9-67 Designing IE Gradient
• 9-68 Designing W3C Gradient
• 9-69 Design gift box
• 9-70 Design folding panels
• 9-71 design can
• 9-72 Design disc sliding animation
• 9-73 Design drop-down menu
• 9-74 Exquisitely designed buttons
• Chapter10 layout
• 10-1 Design a multi-column layout
• 10-2 Define column width
• 10-3 Define the number of columns
• 10-4 Define column spacing
• 10-5 Define column border style
• 10-6 Define display across columns
• 10-7 Define column height
• 10-8 Design box layout
• 10-9 Define adaptive width ok
• 10-10 Define column display order
• 10-11 Define column arrangement direction
• 10-12 Define module size adaptation
• 10-13 Eliminate white space
• 10-14 Define alignment
• 10-15 Comprehensive practice: designing multi-column web pages
• 10-16 Change the way the box model is composed
• 10-17 Adjust element size
• 10-18 Define outline
• 10-19 Define contour displacement
• 10-20 Define navigation order
• 10-21 Define the direction key control sequence
• 10-22 Add display content
• 10-23 Cancel element style
• 10-24 Be careful when using initial
• 10-25 Overflow handling
• 10-26 Use @font-face rules
• 10-27 Meet the Media Queries module
• 10-28 Know the @media rules
• 10-29 Use @media rules
• 10-30 Apply @media rules to your site
• 10-31 Add voice function
• 10-32 design reflection