Front-end knowledge tree structure diagram
0 Report
This template is suitable for organizing front-end knowledge systems. It breaks down front-end related content into layers using a tree structure (such as HTML basics, CSS styles and layouts, JavaScript language, browser principles and front-end engineering, etc.), helping to systematically build a front-end knowledge framework.
Related Recommendations
Other works by the author
Outline/Content
See more
HTML basics and semantics
HTML document structure and tags
HTML5 document types and basic structure
Usage scenarios of semantic tags
header、nav、main、article、section、aside、footer
figure、figcaption、mark、time、meter
Form elements and input types
Input type attributes: text, email, tel, number, date
textarea、select、datalist、output
Multimedia and graphic elements
Audio and video elements and their properties
Basic application scenarios of canvas and svg
Accessibility (ARIA)
ARIA roles and attributes
The role attribute defines the role of the element
aria-label、aria-labelledby、aria-describedby
Keyboard navigation and focus management
Use of the tabindex attribute
Focus sequence and visual indication
CSS styles and layout
CSS core concepts and selectors
Box models and visual formatting
Standard Box Model and Weird Box Model
display attributes: block, inline, inline-block, flex, grid
Selector and priority
Basic selector: element, class, ID, attribute
Combination selectors and pseudo-classes and pseudo-elements
CSS Selector Priority Calculation Rules
Modern layout plan
Flexbox flexible layout
Container properties: flex-direction, justify-content, align-items
Project attributes: flex-grow, flex-shrink, flex-basis
Grid Grid Layout
Defining grid containers and rails
Grid lines, grid areas and project placement
Use of grid-template-areas
Responsive design and media query
Mobile-first media query strategy
Viewport units and relative units
CSS animation and transformation
Transition and keyframe animation
Configuration of transition attribute
2D and 3D transformation
transform attributes: translate, rotate, scale, skew
transform-origin and transform-style
JavaScript programming language
JavaScript core syntax and data types
Variables, scopes and closures
Differences between var, let, and const
Formation principles of scope chains and closures
Data types and operators
Original type and reference type
Type conversion and comparison operators
Deconstructing assignment and extension operators
Functions and execution contexts
Function declarations, expressions, and arrow functions
Binding rules for this keyword
Call stack and execution context
DOM operations and event processing
DOM node selection and operation
document.querySelector and querySelectorAll
Node creation, insertion, deletion and replacement
Event model and event delegation
Event capture and bubbling mechanism
Common properties and methods of event objects
Optimize performance with event delegation
Asynchronous programming and network requests
Promises and asynchronous functions
Promise status and chain calls
async/await syntax sugar
AJAX and Fetch API
Use of the XMLHttpRequest object
Request and response processing for the Fetch API
Handling Cross-Domain Requests (CORS)
ES6+ New features and modularity
Classes and object-oriented programming
class syntax definition class
Inheritance and super keywords
modular development
Import and export of ES6 modules
Module loaders and packaging tools
Front-end engineering and tool chain
Package management and build tools
npm and yarn package managers
package.json file parsing
Dependency management and version control
Build tools: Webpack and Vite
Webpack core concepts: entrances, exits, loaders, plug-ins
Vite's development server and construction principles
Code quality and collaboration
Code style and static checking
ESLint configuration and rules
Prettier code formatting
Version control and Git workflow
Git basic commands: add, commit, push, pull
Branch management and consolidation strategies
Automation and CI/CD
automated build
automatic test
automatic deployment
Environment and configuration management
Multi-environment configuration (dev/test/prod)
Environmental variable management
configuration separation
Version release and deployment
Pack and release
version management
deployment process
Front-end frameworks and libraries
Core concepts of the React Framework
Components and JSX syntax
Function components and class components
JSX expressions and conditional rendering
Condition management and life cycle
useState and useEffect Hooks
Life-cycle approach to class components
Status management plan
Context API Cross-component Communication
Redux status management library
Core concepts of the Vue.js framework
Responsive systems and template syntax
Data binding and instructions
Calculate properties and listeners
Component systems and combined APIs
single file component structure
Setup functions and combined functions
Vue Router and status management
Route configuration and navigation guard
Pinia status management library
Collect
Collect
Collect
Collect
Collect
Collect
Collect
0 Comments
Next Page