Getting started with front-end Xiaobai
Step 1: HTML Basics
HTML is mainly a markup language designed for "web page creation and other information that can be seen in a web browser", making the first step in building a web page structure. This stage mainly introduces the basic grammar of HTML, tables, forms, and other tags, and combines case studies to apply what you have learned.
Lesson 1
HTML Basics
HTML is an essential skill for web page production. This course mainly introduces HTML concepts, syntax and common basic tags
Lesson 2
HTML table
Tables are used for data and typesetting in web pages. This course introduces table concepts, syntax, operations, and uses cases to gain knowledge.
Lesson 3
HTML form
Forms are used to collect user information. This course introduces form concepts, syntax, and creating forms, and uses cases to gain knowledge.
Lesson 4
Case Building Webpage HTML Structure
This course will lead you to build a web page HTML structure, and master the corresponding knowledge and skills of web layout.
Step 2: CSS Basics
CSS is a language that defines style structures such as fonts, colors, positions, etc., and is used to add effects to pages. This step mainly introduces the basic syntax of CSS, selectors, text, background, list, box model, float, positioning and layout of web pages.
Lesson 1
The Art of CSS Selection
This course focuses on the basics of CSS syntax, selectors, inheritance, cascading, and precedence.
Lesson 2
CSS text styles
CSS provides a large number of style properties for fonts and text, which can make our page style more colorful.
Lesson 3
box model
Let's learn about the box model of CSS and understand the box model to better typesetting and page layout.
Lesson 4
CSS backgrounds and lists
This course guides you to learn about background colors, background images, and various styles of lists.
Lesson 5
floatfloat
This course mainly introduces the role of floating, and leads you to use a better way to layout the page.
Lesson 6
CSS positioning (position)
This course will lead you to understand the knowledge of positioning and teach you how to make layout through positioning.
Lesson 7
CSS Web Layout Basics
In this course, we will explain in detail the basic layout and classic layout in CSS.
Lesson 8
Web page layout case
This course will lead you to experience the layout style in real development through practical explanations.
Step 3: JavaScript Basics
JavaScript is an interpreted scripting language mainly used to add interactive behavior to HTML pages. This stage mainly guides you to learn the basic syntax of JS, flow control statements, functions, objects, DOM, BOM, events and cases of carousel diagrams, and realize the interactive effect of web pages.
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: jQuery Basics
jQuery is a fast and concise JavaScript framework designed to "write Less, Do More". This stage will introduce you to jQuery's basic syntax, selectors, DOM, events, plugins, waterfall flow cases, etc.
Lesson 1
The Art of jQuery Selection
The course mainly introduces the concept, version, selector, filter, and difference from jQuery of jQuery.
Lesson 2
jQuery DOM manipulation
This course mainly explains finding elements in jQuery, modifying the style and content of elements, and other operation methods.
Lesson 3
jQuery events
This course mainly introduces the 0-level events and 2-level events in the jQuery object, as well as the addition, removal, triggering, custom events, and namespaces of events.
Lesson 4
jQuery plugin
This course mainly introduces how to find the plug-in you need, how to use the plug-in, the introduction of several commonly used plug-ins, and how to customize the plug-in.
Lesson 5
jQuery popup layer case
Through the explanation of the pop-up layer case, let everyone use jQuery's properties and methods more flexibly and function encapsulation.
Lesson 6
Waterfall layout case
Waterfall flow layout is a popular web layout method at present. It will continuously load content as the page scroll bar scrolls.
Step 5: Practical Cases
Through the study of the previous steps, we have learned the basic knowledge of web development. In this stage, teachers with many years of development experience will lead you to experience the process of enterprise development, from ps cutting to the final web page completion, to accumulate project development experience.
Lesson 1
Photoshop Auxiliary Tools
Photoshop is a software for image processing. This course mainly introduces how to edit and color the graphic image.
Lesson 2
Unified registration platform case
Combine the knowledge of HTML, CSS and jQuery learned to complete the whole site development
download link: