Web Front end Siege Lion training program before end small white primer: Web page Layout Basics and common web effects

Source: Internet
Author: User
Tags html form

Step 1:html Basics
Hypertext Markup Language (abbreviation: HTML) is a markup language designed for "Web page creation and other information that can be seen in Web browsers," which is the first step in building a Web page structure. This stage mainly introduces the grammatical basis of HTML, forms, forms, and other tags, and has a case of combining to achieve the application of knowledge.

1th Lesson HTML Basics
HTML is a must-have skill for web authoring, which focuses on HTML concepts, syntax, and common basic tags in this course


2nd Lesson HTML Table
Tables are used in Web pages for data and typography, and this course introduces tabular concepts, syntax, operations, and knowledge through case studies.


3rd Lesson HTML Form
Forms are used to collect user information, and this course introduces the concepts, syntax, and creation of forms, and provides knowledge through cases.

The 4th lesson case constructs the Web page HTML structure
This course will lead you to build a Web page HTML structure, and master the network layout corresponding knowledge and skills.


Step 2:css Basics
CSS is a language that defines style structures such as fonts, colors, locations, etc., and is used to describe how information is formatted and realistic on a Web page. This step focuses on the basic CSS syntax, selectors, text, backgrounds, lists, box models, floats, positioning, and how the page is laid out.

1th Lesson The art of CSS selection
This course focuses on CSS syntax, selectors, inheritance, cascading, and priority-based content.

2nd Lesson CSS Text Styles
CSS for the font, text provides a lot of style attributes, you can make our page style richer and more colorful.

3rd Lesson CSS Background and list
This course takes you through the background colors, background images, and various styles of the list.


4th Lesson Box Model
We will learn the CSS box model, understand the box model, in order to better layout, page layout.

5th class float float
This course introduces the role of floating and leads you to layout pages in a better way.

6th Lesson CSS Positioning (position)
This course will guide you through the positioning of the knowledge and teach you how to layout through positioning.


7th Lesson CSS Page Layout Basics
In this course, we will explain the basic layout and the classic layout of CSS in detail.

8th Lesson Page Layout Case
This course is a real-life presentation that will lead you to experience the layout style of the actual development.


Step 3:javascript Basics
JavaScript is an explanatory scripting language that is used primarily to add interactive behavior to an HTML page. This stage will lead you to learn the basic syntax of JS, flow control statements, functions, objects, DOM, BOM, events and the case of the Carousel diagram to achieve the interactive effect of the Web page.

1th lesson JavaScript syntax
Get an initial look at the JavaScript language, mastering its syntax, data type, 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:jquery Basics
jquery is a fast, concise JavaScript framework designed to be "write Less,do more". This stage will introduce the basic syntax of jquery, selectors, DOM, events, plugins, waterfall flow cases, and so on.

1th Lesson The art of jquery choice
The course focuses on the concept, version, selector, filter, and the difference between JS and jquery.

2nd Lesson JQuery DOM Operations
This course focuses on finding elements in jquery, modifying element styles and content, and other ways to manipulate it.

3rd lesson jquery Events
This course focuses on 0-level events, Level 2 events, and event additions, removal, triggering, custom events, and namespaces in jquery objects.

4th lesson jquery Plugin
This course focuses on how to find the plug-ins you need, how to use them, how to introduce several common plugins, and how to customize plugins.

5th Lesson jquery pop-up story
With a pop-up story, you'll be more flexible with the properties and methods of jquery and the encapsulation of your functions.


Lesson 6th Waterfall Flow Layout Case
Waterfall flow layout, is a popular way of Web page layout, it will continue to load content as the page scroll bar scrolling.

Step 5: Actual cases
Through the previous steps of learning, we have learned the basic knowledge of web development, this stage will be the experience of many years of development of teachers to lead you to experience the process of enterprise development, from PS transduction to the last page to complete, accumulated project development experience.


1th lesson Photoshop Assistive Tools
Photoshop is a software for image processing, and this course focuses on how it can be edited and color-processed for graphical images.

2nd Class Unified Registration platform Case
Complete the development of the whole station with the knowledge of HTML, CSS and jquery

: Baidu Network Disk download

Web Front end Siege Lion training program before end small white primer: Web page Layout Basics and common web effects

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.