The HTML5 and CSS3 of the Web front-end Siege Lion training Program Dynamic Web page

Source: Internet
Author: User

Step 1: First knowledge of HTML5
This phase covers HTML5 additions, deletion tags, tag attribute changes, and HTML5 layout knowledge. Through this stage of learning, you can use HTML5 tags to easily implement the Web music player and video player, skilled use of HTML5 semantic tags for static web development.

1th Lesson HTML5 label Changes
HTML5 How document types are defined, what labels are available, and how they are used, from a holistic understanding of HTML5

2nd Lesson HTML5 Page Layout
The difference between the traditional layout and the HTML5 page layout, and the case study of how to use HTML5 to build Web pages

3rd Lesson HTML5 attribute Changes
Understanding the benefits of these attributes and deepening the understanding of labels will improve future development efficiency

4th lesson HTML5 Outlook
HTML5 rapid development, it also has what powerful features, in what areas can be used, and its direction of development


Step 2: Understand CSS3
This stage covers CSS3 selectors, borders and fillets, backgrounds and gradients, transitions, transitions, animations, and more. Through this stage of learning, we will learn more precisely control the layout of the page, font, color, background and other effects, to achieve very cool CSS3 animation effects, so that the page colorful.

1th Lesson CSS3 selector
A detailed explanation of CSS3 changes, new concepts and concepts, and their CSS3 new additions to the selector

2nd Lesson CSS3 border and rounded corners
New properties that bring magical rounded borders, shaded frames and picture borders, etc.

3rd Lesson CSS3 background and gradients
Equally magical background control properties, and how to use color transitions to achieve beautiful gradient effects


4th Lesson CSS3 Conversion
In-depth explanation of how elements distort, shift, or rotate, allowing us to more freely decorate and deform HTML components

5th Lesson CSS3 Transition
Explore how to animate by changing the value of a CSS3 property, and how to trigger these animations to generate interaction

6th Lesson CSS3 Animation
Use the animation property to achieve cool effects that were previously used by Flash and other animation software

7th Lesson CSS3 picture Toggle Effect
Introduced several very beautiful picture switch effect, everybody to CSS3 's understanding will have the quality enhancement


Step 3:javascript Basics
This stage mainly covers JS basic syntax, flow control statements, functions, built-in objects, Dom basics and events, BOM basics and other knowledge. Through this stage of learning, we can not only master the basic knowledge of JS, but also learn the Web site development commonly used in the picture carousel effect.

1th lesson JavaScript syntax
Get an initial look at the JavaScript language, mastering its syntax, data types, basic arithmetic, and logical operations

Lesson 2nd JavaScript Process Control Statements
Mastering the use of conditional branching statements and looping statements in JavaScript, with simple code for powerful functions

3rd lesson JavaScript functions
Mastering the use of functions, learning the encapsulation of functions, experience the process of code reuse and the convenience it brings

4th lesson JavaScript built-in objects
Learn the common properties and methods of built-in objects to facilitate direct invocation in our development for more versatility

5th Lesson JavaScript Dom Basics
Dom's methods and properties can either get elements from a Web page, or set the content, style, and effect of an element


6th Lesson JavaScript DOM Events
Bind keyboard or mouse events to elements in a page, which can trigger and implement the interaction we want

7th Lesson JavaScript BOM Basics
Learn the Browser object model "BOM", you can access and manipulate the browser window, and the browser "dialog"

8th lesson JavaScript for Carousel Effects
Use JavaScript knowledge to make practical effects such as Carousel Diagram, TAB switch, etc.

Step 4:javascript Advanced
This stage will lead you to further explore the mysteries of JavaScript and teach you how to use debugging tools. There are variables, scopes, functions, how to use them, and how they relate to each other, and let's take a step-by-step way to uncover their veil.

1th Lesson Debugging Tools
Learn debugging tools, practice how to quickly debug code, and preview in real time to experience the process of quickly debugging code

lesson 2nd JavaScript variables, scopes
Together we explore the nature of variables and scopes, understand their definitions and how to use them.

3rd lesson JavaScript function in-depth explanation
Study the nature of functions, understand the definition, invocation, and parameters and return values of functions

4th lesson JavaScript Implementation Simple Calculator
Lead everyone to develop a simple calculator, experience the process of optimizing the code step by step, experience the code simple and not simple charm

Step 5: Project Combat
Optics do not practice false bashi, practice is the best way to consolidate knowledge, this link, lead everyone to develop cool Web pages, experience from the practice and improve the ability to solve problems.

1th Lesson H5+CSS3+JS Implementation of Cool Web page
Lead everyone to achieve real projects: "MU class mobile phone propaganda page", in the face of comprehensive needs, the time to go!

: Baidu Network Disk download

The HTML5 and CSS3 of the Web front-end Siege Lion training Program Dynamic Web page

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.