Learning is a gradual process, it is very difficult to stick to things. If you really want to learn front-end development, make up your mind! Here to share the front-end learning roadmap and basic knowledge notes, I hope to help front-end learning.

Front-end basics (HTML, CSS, JavaScript)

1, the HTML + CSS

HTML (Hypertext Markup Language) and CSS (Cascading style sheets) are two core technologies used to build Web pages. Learning HTML+CSS is the only way to get started.

HTML is called hypertext Label Language (HTML), which is a kind of identification language. It includes a set of tags that unify documents on the network and connect disparate Internet resources into a logical whole. HTML text is descriptive text composed of HTML commands that describe text, graphics, animations, sounds, tables, links, etc.

CSS cascading style sheets are a computer language for representing file styles such as HTML or XML. CSS can not only statically decorate web pages, but also dynamically format web elements with various scripting languages.

2. JavaScript basics

JavaScript is a function-first, lightweight, interpreted or just-in-time compiled programming language. JavaScript is a dynamic scripting language based on prototype programming, multiple paradigms and supports object-oriented, imperative, and declarative styles.

Main functions:

  • Embed dynamic text in HTML pages.
  • Responds to browser events.
  • Reading and writing HTML elements
  • Validate data before it is submitted to the server.
  • Detect the visitor’s browser information. Control cookies, including creation and modification.
  • Server-side programming based on Node.js technology.

Mobile development (HTML5, CSS3, Bootstrap)

1. HTML5 / CSS3

HTML5 is a language description for building Web content. HTML5 is the next generation standard for the Internet, a linguistic way to build and present web content. It is considered one of the core technologies of the Internet.

HTML5 is the specification of HTML, the core language of the Web. When users browse the Web by any means, the content they see is originally in HTML format, which is converted into identifiable information through some technical processing in the browser.

CSS3 is the upgraded version of CSS (Cascading style sheet) technology, including box model, list module, hyperlink mode, language module, background and border, text effects, multi-column layout and other modules.

2, the Bootstrap

Bootstrap is a simple, intuitive, and powerful front-end development framework based on HTML, CSS, and JavaScript, making Web development faster. Bootstrap provides elegant HTML and CSS specifications written in the dynamic CSS language Less.

The article only shows part of the learning roadmap. The complete front-end initial learning roadmap and front-end learning notes are required [click here to get them].

Front-end foundation learning notes


  • Basic HTML structure
  • Tag attributes
  • Tag attributes
  • Text labels
  • .


  • CSS weights and introduction methods
  • Draw triangles with CSS
  • Horizontal and vertical centralization of elements
  • Classification of element types
  • The box model and its understanding
  • Margin collapse and merging problems
  • Float model and method of clearing float
  • Grail layout and twin wing layout
  • Flex layout
  • The difference between px, em, rem
  • .


  • Types and differences between original and reference values
  • Common methods for determining data types
  • Class array and array distinction and conversion
  • Common APIS for arrays
  • The bind, call, the difference between the apply
  • The principle of the new
  • How to judge this correctly
  • Closures and what they do
  • Prototype and prototype chain
  • The implementation of inheritance and comparison
  • Deep and shallow copies of objects
  • Anti-shake and throttling
  • Scope and scope chain, execution context
  • .