If one day, I accidentally amnesia, forget all the programming experience, I become a little white. I want to study the front-end by myself and I want to find a job. I estimate that it will take 6 months, provided that I am in a state of efficient learning every day, and I study at least 12 hours a day.
Even so, I'm sure that the job I found will not be too good. I can barely make ends meet. After all, it is a zero-based entry.
If you want to go further and truly become an indispensable senior front-end engineer, it will take longer, two, three, five years, until the day of baldness.
Thinking about it, I felt it necessary to prepare for that day in case of emergency.
The first stage, development environment and tool preparation
- Browser (Google, FireFox,...)
- Download and install the front-end development tool vscode,
- Download and install node, npm, webpack, webpack-cli, cnpm, configure front-end development environment
- Download and configure PHP and MySQL
The second stage, front-end entry, web page production
1，HTML：
- Commonly used tags (div tags, p tags, span tags, a tags, img tags)
- Anchor point
- List tags (ordered lists, unordered lists, custom lists)
- Form label
- Form label
- Label classification
- Semantic labeling
- Comment
- Character entity
2，CSS：
-
Global style
-
Elements in the line
-
Inline element
-
Selector
(1) Basic selector (label selector, class selector, ID selector)
(2) Composite selector (descendant selector, sibling selector, adjacent element selector, intersection selector, union selector) )
(3) Selector priority -
Color style value
-
Box model (standard box model, weird box model)
-
Console use
-
Block element
-
Elements in the line
-
Inline block element
-
A variety of pseudo-elements
-
Floating
(1) Floating elements are out of the document flow
(2) The margin collapse problem
(3) N ways to clear the floating -
Positioning (relative positioning, fixed positioning, absolute positioning, z-index)
The third stage, JavaScript dynamic interaction
1. Elementary JavaScript
- Variables and operators
(1) JS usage
(2) JS writing rules
(3) built-in function use
(4) literal
(5) variable
(6) naming identifier specification
(7) variable declaration promotion
(8) operator (mathematics) Operators, comparison operators, logical operators, assignment operators)
(9) page modification (innerHTML, innerText, value) - Logic control
(1) if keyword (if...else, if...else if...else, multi-branch conditional statement, nested if statement)
(2) for keyword (for loop, double for loop)
(3) self-increment
( 4) Self-decrement
(5) switch conditional statement
(6) accumulator
(7) accumulator
(8) while (continue keyword, break keyword, while loop statement, do...while loop statement)
(9) js controls HTML Label
(10) ternary operator
(11) operator precedence - Math class
(1) Math attributes (Math.PI, Math.E,...)
(2) Math functions (round, floor, ceil,...) - Function
(1) Function without parameters
(2) Function definition
(3) Function call
(4) Scope
(5) Parameters (formal parameter, actual parameter, input parameter, output parameter)
(6) Indefinite parameter function
(7) arguments - Object class
(1) the definition of the object
(2) the use of the object - Timer
- Array class
- String class
- Date class
- Summary of JavaScript interview questions
2. Advanced JavaScript
- JavaScript DOM basics
(1) DOM element traversal
(2) DOM element search
(3) DOM element addition
(4) DOM element deletion
(5) DOM element modification
(6) DOM element cut
(7) attribute operation
(8) style operation
(9) Document fragments - this (point to this in each environment)
- Event
(1) General event review
(2) Bound event
(3) Cancel general event
(4) Unbind event
(5) Event type (keyboard event, mouse event, focus & defocus event) - Event flow
(1) Event source
(2) Event flow
(3) Event bubbling
(4) Event capture
(5) Event delegation - JavaScript BOM basics
(1) offset
(2) client
(3) scroll
(4) getBoundingClientRect()
(5) scroll event - call&apply&bind
(1) In-depth exploration of scope
(2) Use of partial functions - Custom attributes
- Object-oriented programming
(1) encapsulation
(2) construction method
(3) instanceof
(4) constructor
(5) inheritance (function inheritance, constructor inheritance, class inheritance)
(6) prototype
(7) prototype chain
(8) polymorphism
3，ES6
- Introduction to ECMAScript 6
- let and const
- The scope of ES6+
- Object extension
- Function extension
- String expansion
- Symbol
- Set&Map
- Promise object
- async&awiat
- Arrow function
- Template string
- rest parameter
- Class
- Module module
4. High-level JavaScript
- Closures
(1) Deep understanding of closures
(2) Deep understanding of the principle of closures
(3) Authoritative analysis of closure interview questions - Execute function immediately
- Lazy function
- Plug-in development
- Multi-person collaboration
- Deep copy and shallow copy
- Array flattening
- Recursion
(1) Detailed explanation of Fibonacci sequence
(2) Recursive deep copy and shallow copy
(3) Currying thought
(4) Currying and recursive interview questions authoritative analysis - Regular expression solution
- Function stabilization
- Function throttling
The fourth stage, mobile terminal development technology actual combat
1 ， HTML5
- Introduction to HTML5
- HTML5 new syntax
- HTML5 new semantic tags
- HTML5 new form element attributes
- HTML5 mobile phone terminal new event handling
- HTML5 new multimedia combat
- Local storage (cookie, localStorage, sessionStorage)
- Canvas
- HTML5 geographic component GeoLocation
2 ， CSS3
- CSS3 new properties
- Fillet production enterprise-level solution
- CSS3 background properties
- Transition animation
- Change attribute transform
- Special effects carousel map actual combat
- Enterprise-level flex layout combat
- grid layout actual combat
3，Bootstrap
- Responsive
- Media query (media types, media characteristics, media query enterprise-level applications)
- Grid system
- Raster parameters
- Combination mode
- Column offset/column sorting/automatic column
- Column alignment/column nesting
- Text and color
- Button
- navigation
- Photo-text
- Modal box
- Carousel
4. Mobile development
- Introduction to Mobile
- Mobile viewport constraints
- Mobile terminal flex mobile terminal practice
- rem
- vw
- flexible enterprise-level actual combat
The fifth stage, front-end and back-end separation technology and common class libraries
1，ajax
- Introduction to AJAX
- AJAX function
- Encapsulate AJAX
- Create an XMLhttpRquest object
- Synchronous and asynchronous
- AJAX pagination
2,JQuery
- Introduction to jQuery
- jQuery chain syntax
- jQuery selector
(1) basic selector
(2) composite selector
(3) jQuery unique selector - jQuery core
(1) jQuery core function
(2) jQuery object access
(3) data cache
(4) queue control
(5) plug-in mechanism
(6) coexistence of multiple libraries - jQuery tools
(1) browser and feature detection
(2) array and object operations
(3) function operations
(4) test operations
(5) string operations
(6) URL
(7) plugin writing - jQuery event
(1) original event
(2) creation event
(3) page loading
(4) event processing
(5) event delegation
(6) event switching
(7) event - jQuery event object
- jQuery special effects (basic, sliding, fade, custom, settings)
- jQuery callback function
- jQuery document processing (internal insertion, external insertion, wrapping, replacing, deleting, copying)
- jQuery filter (filter, find, concatenate)
- jQuery attributes (attributes, CSS classes, HTML code/text/value)
- jQueryCSS (CSS, position, size)
Echarts
- Echarts overview
- Echarts use
- Coordinate System
- Radar chart/pie chart/line chart
The sixth stage, enterprise-level advanced WEB architecture development
1，Webpack
Webpack installation and use
- Project module packaging
- Static package module
- Webpack entrance
- Webpack output
- Webpack plugin
- webpack module
2 ， View
- Vue use
- Vue responsive
- Vue two-way data binding
- Vue related instructions
(1) conditional rendering v-if
(2) v-bind instruction
(3) v-on instruction
(4) v-on modifier
(5) list rendering
(6) v-model instruction
(7) v -model detailed explanation
(8) v-cloak - view-resource
- axios
- template option
- Vue life cycle
- Vue components
(1) Prop
(2) monitoring component events
(3) slots
(4) dynamic components
(5) component communication (parent-child, child-parent, other components)
(6) functional components
(7) asynchronous components - Custom instruction
- filter
- computed attribute
- Vue-cli 2.x and 3.x scaffolding configuration
- Vue-router
(1) VueRouter basics
(2) Nested routing
(3) Route redirection
(4) Dynamic routing
(5) Routing parameters
(6) Navigation guard - Vuex（State，Getter，Mutation，Action，Module）
- Element UI
3. WeChat Mini Program
- uni-app
- mpvue
- WeChat Mini Program Registration
- APPID application
- life cycle
- Small program debugging
- WeChat applet framework components
- WeChat Mini Program Layout Framework
- Conditional rendering and list rendering of WeChat applet
- Media component audio
- View container
- Network api
- Camera api
- Map api
4, uniapp
- uniapp basics
- uniapp initial configuration
- uniapp view template usage
- uniapp life cycle
- uniapp routing jump
- Common components of uniapp
- Use of uniappScrollView
- Use uniapp-ui
- uniapp-Vuex use
After you learn the skills, you should start preparing for the interview. When you are looking for a job, you must prepare your resume. After all, the resume is the stepping stone to finding a job, and you have to do more interview questions to review and consolidate. If there is a need for an interview question document, click here to get it for free.
** Conclusion: ** There is no end to technology, and it is also endless to learn. The most important thing is to be alive and not to be bald. When reading a book or watching a video at the beginning of the zero-based entry, I think adults, why do multiple-choice questions? Both are required. If you like to read a book, you can read a book, and if you like a video, you can watch a video. The most important thing is that in the process of self-study, you must not be superior and inferior. Instead, you must put the learned techniques into the project, solve the problems, and then further temper your own skills.