plug-in unit , Index file ,js Catalog , View Directory , Asset catalog ,css Catalog , Data directory ,font-awesome-4.7.0 Catalog , Image catalog .

Bootstrap frame . typeface .layer,mockjs.paging Pagination . Tree grid .treemuee.vue. Upload .z Trees .vue Pagination .


Teacher website

src Source code , static state , structure , To configure , test .

Components , Containers , Storage , style , assets , page , service , Tools .


Web Front end development evolved from web page production , There are three elements :HTML、CSS and JavaScript;
Web The number of front-end users has far exceeded the number of developers in mainstream programming languages .

Position reference :

Web Front end engineer
Front end architect
Website reconstruction Engineer
Web Production Engineer
H5 Development Engineer
Mobile Development Engineer
Four foundations of systematic learning front end html、css、js、jQuery

step 1: HTML Basics

HTML Mainly for “ Web creation and other information that can be seen in a web browser ” A markup language for design , Make the first step to build a web page structure . This stage mainly introduces HTML The grammatical basis of 、 form 、 Forms 、 Such as tag , And there are cases , To achieve the purpose of learning .

HTML Basics

HTML It's a necessary skill for making web pages , This course mainly introduces HTML Concept 、 Grammar and common basic tags

HTML form

Forms are used in web pages for data and typesetting , This course introduces the concept of tables 、 grammar 、 operation , And master knowledge through cases .

HTML Forms

Forms are used to collect user information , This course introduces the concept of forms 、 Syntax and creating forms , And master knowledge through cases .

Case building website HTML structure

This course leads you to build a web page together HTML structure , And master the knowledge and skills of network layout .

step 2: CSS Basics

CSS It's a way to define style structures like fonts 、 Color 、 The language of location, etc , Used to add effects to a page . This step mainly introduces CSS Basic grammar of 、 Selectors 、 Text 、 background 、 list 、 Box model 、 float 、 Positioning and layout of the web page .

CSS The art of choice

This course mainly introduces CSS grammar 、 Selectors 、 Inherit 、 Cascade and priority basic content .

CSS Text style

CSS For font 、 Text provides a lot of style properties , It can make our page style more colorful .

CSS Background and list

This course takes you through the background color 、 Knowledge of background pictures , And various styles of lists .

CSS Background and list

This course takes you through the background color 、 Knowledge of background pictures , And various styles of lists .

Box model

Let's learn about it css Box model of , Understand the box model , In order to better typesetting , Page layout .

float float

This course mainly introduces the function of floating , Lead you to layout the page in a better way .

CSS location (position)

This course , Will lead you to understand the knowledge of positioning , Teach you how to layout by positioning .

CSS Web layout basis

This course , We are aiming at CSS In the basic layout and classic layout to start a detailed explanation .

step 3: JavaScript Basics

JavaScript It's an interpretive scripting language , Mainly used to HTML Page add interaction behavior . This stage mainly leads you to learn JS Basic syntax 、 Flow control statement 、 function 、 object 、DOM、BOM、 Events and cases of carousels , Realize the interactive effect of the web page .

JavaScript grammar

A preliminary understanding JavaScript Language , Master its grammar 、 data type 、 Basic arithmetic and logic operations

JavaScript Flow control statement

master JavaScript The use of conditional branch statements and loop statements in , Use simple code to achieve powerful functions

JavaScript function

Master the use of functions , Learning the encapsulation of functions , Experience the process of code reuse and the convenience it brings

JavaScript Built-in objects

Learn common properties and methods of built-in objects , It's convenient for us to call , To achieve more functions

JavaScript DOM Basics

DOM Methods and properties of can get the elements in the web page , You can also set the content of the element 、 Style and effect

JavaScript DOM event

Bind keyboard or mouse events to elements in the page , So that we can trigger and achieve the interaction we want

JavaScript BOM Basics

Learn the browser object model “BOM”, Can access and operate the browser window , With browser “ dialogue

JavaScript To achieve the special effects of rotation

Comprehensive use JavaScript knowledge , Make a carousel 、tab Page switching and other practical effects

step 4: jQuery Basics

jQuery It's a fast one 、 concise JavaScript frame , The purpose of the design is “write Less,Do More”. This stage will introduce jQuery Basic grammar of 、 Selectors 、DOM、 event 、 plug-in unit 、 Waterfall case, etc .

jQuery The art of choice

The course mainly introduces jQuery The concept of 、 edition 、 Selectors , Filter 、 As well as js The difference between .

jQuery DOM operation

This course focuses on jQuery Search for elements 、 Modify the style and content of elements and other operation methods .

jQuery event

This course mainly introduces jQuery Object 0 Level event 、2 Level event , And the addition of events 、 remove 、 Trigger 、 Custom events 、 name

jQuery plug-in unit

This course mainly introduces how to find the plug-ins you need , How to use plug-ins , Introduction of several common plug-ins 、 And how to customize plug-ins .

jQuery Pop up layer case

Through the explanation of pop-up layer case , Let's use it more flexibly jQuery Properties and methods of, and encapsulation of functions .

Waterfall layout case

Waterfall flow layout , It is a popular way of web page layout at present , It loads content as the scroll bar on the page scrolls .


Three stages .

The first level , adapter . This level will be through learning HTML5 And CSS3 Realize dynamic special effects website ; Through the analysis of mobile infrastructure 、 Responsive explanation ,Get√ Skills to adapt to different mobile devices ;
The second level , build . This level will pass through to Bootstrap Explanation of the framework , Let Xiaobai graduates quickly transition from original writing to using Bootstrap Quickly build a web page structure ;
The third level , Efficient . This level will focus on CSS Preprocessing language of “Less”, because Less There will be a significant reduction in writing native CSS The amount of code work . And for the front-end siege lions , Code is easier to manage , Development efficiency is multiplied .

Bootstrap, Is based on HTML5、CSS3、JavaScript Developed , It's in jQuery On the basis of a more personalized 、 The perfection of humanity , Form a unique website style , Compatible with most jQuery plug-in unit .
Less, Expanded  CSS  Language , Added variables such as 、 blend (mixin)、 operation 、 Functions, etc . It can run on the server side (Node.js  and  Rhino  platform ) It can also run on the client side ( browser ).

Response type

Responsive in PC There are many uses for both mobile and mobile terminals , Change the style according to the size of the window , Retouch the layout as mobile devices change , No equipment can fail .


One of the most popular front-end frameworks at the moment , Simple and flexible , From grid layout 、 Module classification and layout 、 Common components, etc Bootstrap, Fast build to achieve web development .


HTML5 yes HTML Latest version , Compared to the old version , Many new features . Semantic tags 、 New properties 、 Audio video 、 Form validation and other new functions , It's easy for you to use .


CSS3 It's up to date CSS edition , There are a lot of new features , There are mainly selectors 、 Border and fillet 、 Background and gradient 、 Text and font 、 transformation 、 transition 、 Animation 、 And some layout styles and functions .

step 1:  Walk into HTML5

This stage leads you to know HTML Latest version HTML5, It mainly includes HTML5 The label changes 、 Property changes 、 Audio and video 、 And form validation . Make you right HTML5 There is a new understanding .

HTML5 Label changes

HTML5 How to define document types , What are the labels , And how to use it , On the whole HTML5

HTML5 Page layout

Traditional layout and HTML5 The difference and significance of web page layout , Explain how to use HTML5 Build a web page

HTML5 Property changes

Understand the benefits of these attributes , Deepen the understanding of labels , Will improve the efficiency of future development

HTML5 Audio and video

HTML5 There are new features in , Can achieve audio and video playback , This course leads you to learn this powerful function .

HTML5 Form validation

This course mainly introduces H5 Some new functions in form validation are added in , By setting some properties , It can control the condition .

step 2: CSS3 Detailed explanation

This stage mainly leads you to CSS3 The world of , It mainly includes CSS3 Selector 、 Frame 、 Round corners 、 background 、 The gradient 、 Text 、 typeface 、 transformation 、 transition 、 Animation 、 Multi column layout and user interface , Make you right CSS3 Have a comprehensive understanding .

CSS3 Selectors

Explain in detail CSS3 The change of , New concepts and ideas , And its CSS3 New selector

CSS3 Border and fillet

Bring magic rounded border 、 Shadow box and its picture border, etc , A new property of great practical value

CSS3 Background and gradient

The same magical background control property , And how to use color transition to achieve a beautiful gradient effect

CSS3 Text and font

CSS3 Also added in the text and font settings , Let's study together .

CSS3 transformation

Go deep into how elements twist 、 Shift or rotate , Let's be more free to decorate and deform HTML Components

CSS3 transition

Let's explore how to pass CSS3 Attribute value changes to achieve animation effect , How to trigger these animations to generate interaction

CSS3 Animation

Use animation attribute , The realization of the past needs to use Flash And other animation software to complete the cool effect

CSS3 Multi column layout

This course mainly introduces CSS3 in column-width、column-count、column-gap、column-rule、column-span、column-fill etc. .

CSS3 The user interface

stay CSS3 in , New user interface features include resizing elements 、 Box size and outline etc . Let's analyze this course carefully , How do these new user interfaces respond to

step 3:  Mobile infrastructure and responsive

The mobile terminal needs to adapt to different devices , This stage mainly leads you to the mobile terminal , Including moving the base view 、 Elastic box layout 、 Responsive layout 、 And layout cases and other courses , Lay a solid foundation for mobile development .

Mobile foundation

Through the study of this course , We can learn about the mobile terminal and PC In different places , Through the foundation of mobile terminal 、 Unit of measure 、 With the study of browser and other knowledge, we can have a great influence on the development of mobile terminal

flex Elastic layout

This course will lead you to learn the layout of mobile terminal ——flex Layout . Learn by learning the properties of scalable containers and projects , Complete the implementation of the page

Responsive layout

This course , The teacher will lead you to learn the implementation of mobile terminal responsive layout , When the screen reaches a certain width, it will have a different layout .

Mobile interface case

This course mainly explains an interface case of mobile terminal , Through the explanation of the layout , Code analysis and flex Use of layout , Let us have a comprehensive understanding of the actual development of the mobile terminal .

step 4: Bootstrap Detailed explanation

At this stage, we will mainly study Bootstrap The content of , First of all, it will Bootstrap Explain the basic knowledge of , From download configuration to component application , And then through a case to explain its use skills . Take you to the bottom of the story Bootstrap The magic of .

bootstrap Grid layout

This course mainly explains what is bootstrap The grid layout of , And how to use grid layout to complete responsive page

bootstrap Module classification and layout

Through the study of this course , We will classify the modules of the page , Typesetting the layout , And the use of bootStrap For forms 、 form 、 Button 、 Image and text styles .

bootstrap Common components

This lesson will lead you to learn bootstrap Plug ins and components , Reusable components and plug-ins improve the development efficiency and increase the user experience of the page .

bootstrap Practical cases

To study the bootstrap Basic knowledge of , In this course, we will use bootstrap Realize the layout of a web page , Experience the development process of the project to

step 5: Less Learning is learning.

In this stage, I will lead you to study together Less The content of , First of all, I will explain the basic usage , Then there will be practical applications , Yes less Do a thorough study , Only when applied to practice can we really understand .

less Basics

less Language is in css On the basis of grammar , Introduced variables ,Mixin( Mix in ), operation , And functions , It allows us to do more with less code !

less Practical cases

Passed less Basic learning , I'm sure you're right less Have a preliminary understanding of , This course leads you to complete a task with less Do the web page , Apply knowledge to the project .

web Development More articles about getting started

  1. java WEB Introduction to development

    WEB Introduction to development 1 Get into web JAVASE: standard - standard   JAVA Desktop applications GUI    SOCKET JAVAEE: Enterprises - Browser control  web 2 Software architecture C/S :client ...

  2. 【python】 web Introduction to development

    Get into Web Development Now you're done Python Ninja training , Get ready to go deeper Ptyhon Of Web Development , But the problem now is that there are many frameworks , It's very difficult to choose the best framework from them , But from a beginner's point of view ,Flask basic Web The framework will be perfect for We ...

  3. Web Developing introductory learning notes

    company web The project is finally about to start , This thought django Learning can be done in real combat , It turns out that Drupal frame , ok , Then we will PHP Walk up , Bought a book < Elaborate PHP>, I'll go over it first Web Introduction to development . HTTP Association ...

  4. day04 Java Web Introduction to development

    day04 Java Web Introduction to development 1. web Development related introduction 2. web The server 3. Tomcat Problems with server startup 4. Tomcat Directory structure 5. Web Applications ( Virtual directory mapping , default web ...

  5. Web Classic introduction to development : Use PHP6、Apache and MySQL chinese pdf Scanning version ​

    By studying this book , Readers will soon understand why PHP.Apache and MySQL Will quickly become the most popular way to develop dynamic websites , This book will help readers understand this 3 How to lay a good foundation for the core components to work independently and cooperatively , Guide readers to make full use of the various services they provide ...

  6. PHP Web Develop the introductory process

    I'm learning WEB Before development , At least one is right C Or computer programming, basic learning of any language , This will enlighten your future development . One .Web Introduction to development Recommended learning website : ...

  7. Web Introduction to development :Pycharm Easily create Flask project

    Web Introduction to development :Pycharm Easily create Flask project open Pycharm Of file, Choose to create a new project , Then the dialog box pops up , We can see that there are many cases ,Flask.Django wait , We choose to generate Fla ...

  8. web Development —— Introduction ( On )

    As a IT The younger generation of this year , At the beginning, I also experienced the internship period of ignorance , I have a deep understanding of that feeling of powerlessness . Here , I hope to use my development experience in recent years , So that you are about to enter or just entered web New people in the field of development should take fewer detours . Since this is an introductory chapter , Now I'm going from zero to big ...

  9. java web Developing an introductory example

    Learning is a skill , The key is to find the focus , Novices have a lot of holes in this area . Look at other people's tutorial and do it step by step , I come across a new knowledge point every few steps , I can't help but go deep into Baidu , Half a day passed in a flash . Some knowledge points need to be further studied , There's plenty to learn about ...

  10. Web The introduction to development has to look at the chapter

    lead Now , All kinds of Internet Web There's an endless stream of applications , So how to get started , Grow into an excellent Web Developers ? This question is not easy to answer , Almost all training institutions can't answer clearly . So for Web New beginners in development , I think ...

Random recommendation

  1. Process control block (Process Control Block, PCB)

    It is a data structure set up for the management process . It is the only sign of the existence of the system aware process . It usually contains information like :(1) Process identifier ( only )(2) The current state of the process , Usually, processes in the same state are put on the same queue :(3) The program and data address of the process (4) ...

  2. poj3126 Sieve prime number +bfs

    //Accepted 212 KB 16 ms // Sieve prime number +bfs #include <cstdio> #include <cstring> #include <iost ...

  3. Ingenious Jq Imitation QQ Game navigation interface learning

    Paste the source code first <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...

  4. Applet authorization demo

    <button wx:if="{{canIUse}}"   open-type="getUserInfo"  bindgetuserinfo=" ...

  5. utilize Underscore Finding the intersection of arrays 、 Union and subtraction

    1 Array intersection function ——intersection The intersection of arrays refers to an array containing the common elements of multiple arrays , Finding the intersection of arrays is to find out the common elements in a given array . Next, we implement a function to find the intersection of two arrays . Determine whether the array contains the specified value , ...

  6. Python3 And subprocess modular

    One . brief introduction subprocess As early as 2.4 Version to introduce . Use to generate subprocesses , And they can be piped into their input / Output / error , And get their return values . # subprocess Used to replace multiple old modules and functions os.syste ...

  7. C++_ abnormal 1- call abort()

    Anomalies are relatively new C++ function , Some older compilers may not have implemented . In addition, some compilers may turn off this feature by default , You need to use the compiler option to open it . Let's start with a basic question : 2.0 * x * y / (x+y) If y yes x Of ...

  8. LeetCode 410—— The maximum value of the split array

    1. subject 2. answer The title is Today's headline 2018 AI Camp 5 month 26 Daily online written test programming question 2 -- Minimum partition fraction . class Solution { public: // If you split the maximum value of the array ...

  9. Lucene The experiment of learning and using

    Experiment with Lucene How is it used . Reference resources : ( The example is simple ) ...

  10. UVA - 10934 Dropping water balloons (dp, Converse thinking )

    Topic link The main idea of the topic : Here you are. n A balloon of the same size and the height of a building , At least a few experiments can be carried out to find out which layer the balloon will fall on . If you want to use this question (dp[i][j]= use i A balloon measures j How many times does it take to build a high building ) As a state , Then you ...