If there is such a cruel day, I accidentally drank the wrong bottle of medicine, which wiped out my more than ten years of programming experience and turned me into 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. The prerequisite is 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, and 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.
01. The first stage, environment and tool preparation
- Prepare a computer and connect to the Internet
- Download and install node, npm, webpack, webpack-cli, cnpm, configure front-end development environment
- Download and configure MySQL
- Download and install vscode
- Prepare a GitHub repository (or code cloud) to manage the front-end source code
The front end is a computer programming language. If you learn it, you don’t even have a computer. I have a child from a relative’s family who wants to learn programming, so he only reads books. He doesn’t even have a computer at home. I’m really a little drunk when he says “First lay the theoretical foundation, then practice.
If you have a computer, you have to be connected to the Internet. You will definitely encounter a lot of problems in the process of self-study. When you encounter problems, first ask the search engine and recommend Google and Bing; if there is no answer, you can also come to me and apply for technical exchange. Group, ask the big guys in the group.
Don't use Notepad to write source code. For Xiaobai, time is precious. Notepad is only suitable for big cows to pretend, not for Xiaobai to use for programming (beginner), a waste of time.
With vscode, it will be much easier to learn the source code later.
Why do you need a GitHub repository or a code cloud repository? They can be used to synchronize source code online to prevent version loss. At the end of learning, you can also form a set of your own tool library. With the wheels, your work efficiency will be much higher when you go to work. The code that can be used directly does not need to be rewritten.
02. The second stage, the introduction of front-end basics
1）HTML
- Frequently used labels
- Anchor point
- List label
- Form label
- Form label
- Label classification
- Semantic labeling
- Comment
- Character entity
2）CSS
- CSS introduction
- Global style
- Inline style
- Inline style
- Selector
- Font style value
- Text style value
- Color style value
- Box model
- Console use
- Clear the default style
- Box model centered
- float
- Positioning
- Collapsed margin
- Standard document flow
- Inline block element
- Multiple pseudo-elements
- Block element
- Elements in the line
3) javascript elementary
- Variables and operators
- Logic control
- Data type foundation
- Math class
- function
- Timer
- Array class
- String class
- Date class
- Object class
4) Advanced JavaScript
- JavaScript DOM basics
- this
- event
- Event stream
- JavaScript BOM basics
- call&apply&bind
- Custom attributes
- Object-Oriented Programming
5）ES6/7/8/9
- Introduction to ECMAScript 6
- let and const
- ES6+ scope
- Object extension
- Function extension
- String expansion
- Symbol
- Set&Map
- Promise object
- async&awiat
- Arrow function
- Template string
- rest parameter
- Class
- Module module
6) JavaScript advanced
- Closure
- Execute function immediately
- Lazy function
- Plug-in development
- Multiplayer collaboration
- Deep copy and shallow copy
- Array flattening
- Recursion
- Regular expression solution
- Function stabilization
- Function throttling
7） 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
- Canvas
- HTML5 geographic component GeoLocation
8） 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 combat
03. The third stage, front-end core technology
1）bootstrap
- Responsive
- Media query
- 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
- Enterprise-level case explanation
2) Mobile
- Introduction to Mobile
- Mobile viewport constraints
- Mobile flex mobile practice
- rem
- vw
3）Ajax
- Introduction to AJAX
- AJAX function
- Encapsulate AJAX
- Create XMLhttpRquest object
- Synchronous and asynchronous
- AJAX pagination
4）jQuery
- jQuery introduction
- jQuery chain syntax
- jQuery selector
- jQuery core
- jQuery tools
- jQuery events
- jQuery event object
- jQuery special effects
- jQuery callback function
- jQuery document processing
- jQuery filter
- jQuery attributes
- jQueryCSS
5） Echarts
- Echarts overview
- Echarts use
- Coordinate System
- Radar chart/pie chart/line chart
04. The fourth stage, advanced front-end upgrade
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
- view-resource
- axios
- template option
- Vue life cycle
- Vue components
- Custom instruction
- filter
- computed attribute
- Vue-cli 2.x and 3.x scaffolding configuration
- Vue-router
- Vuex
- Element UI
3) WeChat Mini Program
- uni-app
- mpvue
- WeChat Mini Program Registration
- APPID application
- Life cycle
- Small program debugging
- WeChat Mini Program 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) Data structure and algorithm
- 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
I am currently working in front-end development. If you want to learn front-end development technology now, and you encounter any questions about learning methods, learning routes, learning efficiency, etc. during the process of getting started learning front-end, you can apply to join my front-end Learning exchange skirt: front: 42137 back: 4697 . It gathers some beginners who are self-learning front-end, changers, and beginners. There are also some front-end book PDFs, front-end interview questions, front-end development source code tutorials and other PDF documents and book tutorials that I have compiled. .
05. In the fifth stage, life is the most important
There is no end to technology and there is no end to learning. The most important thing is to live and not be bald.
When reading a book or watching a video when getting started with zero foundation, I think adults, why bother to do multiple choice questions. 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 over-sighted, but be practical, put the learned technology into the project, solve the problem, and then further temper your own technology.
The most feared thing about self-study is the lack of self-drive. You must be self-disciplined and put an end to "three days of fishing and two days of netting" until the end is a waste of work.
While a high degree of self-discipline, you must remain patient, don't give up or give up, don't complain about yourself, give yourself a little encouragement every day, you will have a lot of motivation to learn, and you will not easily get sleepy.
After learning the skills, you must prepare a resume when you are looking for a job. Don't go to the sea to submit your resume like a headless fly. Prepare your resume well, after all, it is a stepping stone to finding a job.
After you get the interview invitation, you must be generous during the interview process and try your best to express the knowledge you have learned comfortably. Don't be self-confident because you are self-study. Give the interviewer a good impression. The chance of success in the interview is only It will be much bigger, come on, Sao Nian!