HTML5 and CSS3 realize dynamic web pages
Step 1: Getting to know HTML5 for the first time
The content of this stage mainly covers H5 adding and deleting tags, tag attribute changes, and HTML5 layout knowledge. Through this stage of learning, you can use HTML5 tags to easily implement web music players and video players, and proficiently use HTML5 semantic tags to develop static web pages.
Lesson 1
HTML5 tag changes
How to define the HTML5 document type, what tags are there, and how to use it, to understand HTML5 as a whole
Lesson 2
HTML5 web layout
The difference and significance between traditional layout and HTML5 web page layout, and explain how to use HTML5 to build web pages through cases
Lesson 3
HTML5 attribute changes
Understanding the benefits of these attributes and deepening the understanding of tags will improve future development efficiency
Lesson 4
HTML5 Outlook
With the rapid development of HTML5, what other powerful functions does it have, what fields can it be used in, and its development direction
Step 2: Understand CSS3
This stage mainly covers CSS3 selectors, borders, rounded corners, backgrounds, gradients, transitions, transitions, animations and other knowledge. Through this stage of learning, you will be able to more accurately control the layout and other style effects of the page, and achieve very cool CSS3 animation effects, making the web page colorful.
Lesson 1
CSS3 selectors
Explain in detail the changes in CSS3, new concepts and concepts, and the newly added selectors in CSS3
Lesson 2
CSS3 borders and rounded corners
Bring magical rounded borders, shadow boxes and their picture borders, etc., new properties with very practical value
Lesson 3
CSS3 backgrounds and gradients
The same magical background control properties, and how to use color transitions to achieve beautiful gradient effects
Lesson 4
CSS3 transitions
In-depth explanation of how elements can be twisted, shifted or rotated, allowing us to decorate and deform HTML components more freely
Lesson 5
CSS3 transition
Let's explore together how to achieve animation effects through changes in CSS3 property values, and how to trigger these animations to produce interactions
Lesson 6
CSS3 animation
Use animation properties to achieve cool effects that used to be done with animation software such as Flash
Lesson 7
CSS3 image switching effects
Introduced several very beautiful image switching effects, everyone's understanding of CSS3 will be qualitatively improved
Step 3: JavaScript Basics
The content of this stage mainly covers js basic grammar, flow control statements, functions, built-in objects, DOM basics and events, BOM basics and other knowledge. Through this stage of learning, you can not only master the basic knowledge of js, but also learn the image carousel special effects commonly used in website development.
Lesson 1
JavaScript syntax
Preliminary understanding of the JavaScript language, master its syntax, data types, basic arithmetic and logical operations
Lesson 2
JavaScript flow control statement
Master the use of conditional branch statements and loop statements in JavaScript, and use concise code to achieve powerful functions
Lesson 3
JavaScript function
Master the use of functions, learn how to encapsulate functions, and experience the process of code reuse and the convenience it brings
Lesson 4
JavaScript built-in objects
Learn the common properties and methods of built-in objects, which are convenient for us to directly call in development, and then realize more functions
Lesson 5
JavaScript DOM Basics
The methods and properties of the DOM can not only obtain the elements in the web page, but also set the content, style and effect of the elements.
Lesson 6
JavaScript DOM events
Bind keyboard or mouse events to elements in the page, so that we can trigger and achieve the interaction we want
Lesson 7
JavaScript BOM Basics
Learn the browser object model "BOM", you can access and operate the browser window, and "talk" with the browser
Lesson 8
JavaScript implements carousel special effects
Comprehensive use of JavaScript knowledge to make practical effects such as carousel and tab page switching
Step 4: Advanced JavaScript
In this stage, we will lead you to further explore the mysteries in JavaScript and teach you how to use debugging tools. And how variables, scopes, and functions are used, and how they are related to each other, let's uncover them step by step.
Lesson 1
debugging tools
Learn debugging tools, practice how to quickly debug code, preview it in real time, and experience the process of quickly debugging code
Lesson 2
JavaScript variables, scope
Let's explore the nature of variables and scopes, understand their definitions and how to use them
Lesson 3
JavaScript functions explained in depth
Study the nature of functions, understand the definition, invocation, and parameters and return values of functions
Lesson 4
JavaScript implements a simple calculator
Lead everyone to develop a simple calculator, experience the process of optimizing code step by step, and experience the charm of code simplicity but not simplicity
Step 5: Project actual combat
Practice is the best way to consolidate knowledge. In this session, we will lead you to develop a cool dynamic web page step by step, so that you can summarize experience from practice and improve your problem-solving ability.
Lesson 1
H5+CSS3+JS realize cool web page
It's time to lead everyone to realize real projects, face comprehensive needs, and show off your skills!
download link: