Before chatting with a friend, she and I said that the two interns in their company were recruited at the same level, but a lot has changed in one month. One of the interns is making rapid progress, while the other is making slow progress and working status. She is also getting worse. Later, she analyzed that the main gap lies in interest. Interest is happy when studying and working, and of course progress is also fast. It is the same for everyone to learn the front-end. It is especially important to understand this field and cultivate interest in learning, which means how far you can go on the front-end road.
The road has to be walked step by step, and the meal needs to be eaten bite by bite. Now let me sort out the front-end learning route for everyone.
Primary Stage
1. Getting started with Photoshop
Basic knowledge of image processing, basic knowledge of image processing, resolution, image color mode, and commonly used image file formats.
2. Basic Principles of the Internet
The basic principles of the Internet, the concept of servers, browsers, and HTTP requests.
3.HTML
Introduction to programming tools, introduction to HTML. HTML semantic tags, p tags and h series tags.
4. CSS basics and advanced skills CSS introduction, selector.
Text attributes, color attributes.
5. Static website production project
The concept of search engine optimization, common page SEO skills, and learn to make pages with style.
iconfont font icon. Some common advanced CSS techniques, such as negative margin, crimping technique, sliding door, column self-supporting technique. Learn more complex layout websites, banners, large backgrounds and other popular website production methods.
Intermediate stage
6. JavaScript basics
Statements, execution order, lexical structure, identifiers, keywords, variables, constants, alert statements and console console. Values and variables, numbers, text, boolean, null and undefined. Expressions and operators, an overview of operators.
7. JavaScript DOM programming
Event and event processing overview, event and event name, common events, event handler call, DOM event model, event flow, event object, registration and removal events. Common attributes, methods and events, and output data of document objects.
8. JQuery page special effects
jQuery object and DOM object, jQ selector, CSS operation, set and get HTML, text and value.
9. Advanced JavaScript
Namespace, object expansion, arrayization, mechanism introduced by mainstream frameworks-domReady, conflict-free handling. Language module, string extension and repair, array extension and repair, numeric value extension and repair, function extension and repair, date extension and repair, browser sniffing and feature detection, browser judgment, event support Detection and style support detection. Class factories, JavaScript's support for classes, and the realization of various class factories.
10. HTML5 and CSS3
HTML5 overview, HTML5 new features, HTML5 organization, HTML5 composition, features of HTML5 pages, HTML basis, HTML5 global attributes, HTML5 other functions, HTML5 element classification. Actual HTML5 form, new input input type.
11. Mobile web and responsive pages
Viewport, zoom, resolution, physical resolution, device pixel ratio, dppx and dpi, meta viewport. Percentage layout, flow layout, CSS3 new flow box model.
12.JavaScript object-oriented
Create objects, query and set properties, delete properties, detect properties, enumerate properties, property getters and setters, properties of properties, three properties of objects, serialized objects, and object methods. Classes and modules, classes and prototypes, classes and constructors, class extensions, classes and types, subclasses. Prototype, instantiation and prototype, object instantiation, judging objects by constructor, inheritance and prototype chain, constructor and prototype object, constructor, prototype object, [[Prototype]] attribute, using prototype object in constructor, change Prototype objects, prototype objects of built-in objects.
13. Server knowledge and introduction to PHP
The difference between the back-end language and the front-end language. Get to know the advantages of PHP, the PHP language, the new features of PHP 5, the development trend of PHP, and the application fields of PHP.
14.Ajax
Ajax overview and initial experience of Ajax, introduction to Ajax technology, detailed explanation of XMLHttpRequest objects, dynamic loading and display of data, overview of XMLHttpRequest objects, methods, attributes, sending requests, GET and POST requests, runtime cycles, using JSON responses, and packaging of Ajax utility packages.
15.Canvas and mobile games
Canvas drawing, basic knowledge, understanding canvas coordinate system, obtaining canvas environment context, understanding path, path operation API, drawing lines, drawing rectangles, drawing arcs, drawing Bezier curves, line attributes, line colors, filling, drawing status.
Later, the advanced stage will be involved. The front-end learning process is a process that gradually changes from "difficult" to "simple", and then from "simple" to "difficult". The first half is the process of getting started, and the second half is the process of becoming a big cow. In short, there are only eight words in the front end of learning: clear direction and interest dominated.
At last
Front-end learning is a long road. What we have to learn is not only the superficial technology, but also the bottom layer to understand the following principles. Only in this way can we improve our competitiveness. In today's highly competitive world Foothold in.
A journey of a thousand miles begins with a single step, I hope you and I encourage each other.
The golden three and the silver four are coming soon. I will give you a small benefit. Below are some interview questions I compiled after work, including HTML, CSS, JavaScript, server and network, Vue, browser, react, etc., totaling 657 Page PDF.
HTML version
- What is the difference between title and alt in the picture?
- What are the new features of Html5 and what elements have been removed
- How does the browser manage and load the offline storage resources of Html5?
- What are the elements in the line? What are the block-level elements? What are the void elements?
- What is the difference between setting the width and height of the canvas on the label and setting the width and height in the style
- How does the browser manage and load the offline storage resources of HTML5?
CSS articles
- The difference between link and @import in CSS:
- The similarities and differences between absolute and fixed position:
- What is the use of BFC
- Several ways to clear floats
- Css3 new pseudo-class-pseudo-element
- IE box model, W3C box model
- When will display:inline-block not show the gap?
- Does the inline element become a block-level element after float:left?
JavaScript
- The various positions of js, such as clientHeight, scrollHeight, offsetHeight, and the difference between scrollTop, offsetTop, clientTop?
- Implementation of js drag and drop function
- Asynchronously load js method
- js anti-shake
- Closures that cannot be bypassed
- Talk about your understanding of scope chain
- JavaScript prototype, prototype chain? What are the characteristics?
- Please explain what is event delegation/event delegation
- How does Javascript implement inheritance?
View
- The role of key value in vue
- Why must data in a Vue component be a function?
- What is the State characteristic of vuex?
- Introduce Vue's responsive system
- The difference between computed and watch
- Introduce the life cycle of Vue
- Why component data must be a function
- How do the components communicate
React
- Introducing Redux, what are the main problems to solve? What is the data flow? How to manage multiple components using the same state?
- React-Redux is connected to the react component
- What is Redux middleware? It accepts several parameters
- How redux request middleware handles concurrency
- How to configure React-Router
- Dynamically loaded modules for routing
- React life cycle and its own understanding, and V16's changes to the life cycle
- Why use virtual dom?
Browser
- Cross-tab communication
- Browser architecture
- Event Loop under the browser
- The process from input url to display
- Redraw and reflow
- storage
- Web Worker
- V8 garbage collection mechanism
- Memory leak
- Reflow and repaint optimization
- How to reduce redraw and reflow?
- A page is entered from the URL to the page is loaded and displayed, what happened in the process?
- Summary of the difference between localStorage and sessionStorage and cookie
