


Front-end programmer: monthly salary of 5K to 50,000, what did I do?
Front-end programmer: The monthly salary is 5K to 50,000. What did I do? How can I find the job I want in such a sophisticated technical field as front-end development? Realize your career dream of being promoted and getting a raise, buying a house and a car, marrying Bai Fumei and reaching the pinnacle of life by just typing code while drinking coffee in a cafe? This article "Theory of Evolution: From 0 to 100, the history of spiritual fodder for the thriving growth of protozoans" will definitely give you the power to accelerate your career.
Front-end development work has become more and more complex. Just making a learning list of front-end development is already a difficult task. It used to be that being able to write HTML, CSS, and Javascript was all that was required to get a front-end development job. Now, web development is much more than simple coding. Because we have more content on the Internet, and because more people and more devices can access the Internet, there are more web front-end development skills. There are many issues we need to consider now, such as loading time, performance, different screen sizes, different input methods, build systems, deployment strategies, and how to organize our code.
Is this still imaginary front-end development? Well, actually, as long as you have the passion, these are still very interesting. Now let’s take a closer look, what exactly do you need to prepare for a front-end development job?
Start the industry: 5 major hardware
Please prepare the following things
1 A human brain: IQ is above the average level
A strong desire: my code must be able to run on any device with a browser.
A laptop: It doesn’t need to cost a lot of money, as long as it can run Windows, Mac OS X, or Linux. Of course you can also just use a desktop computer, but then you can't take it with you to sit in a cafe...
A text editor: Recommended ones include Atom, Visual Studio Code, TextMate, they are all available on Mac OS, Windows The free version, what else is Sublime, WebStorm? Ah, those are very popular, but they require a cost of no less than 70 US dollars...
1. Junior qualification requirements
Some professional foundation. You need to learn the three major languages that the browser can understand: HTML, CSS, Javascript – the holy trinity!
A very important point is that you must understand these three major languages before learning others. Make sure you know how to arrange your web pages on various screen sizes and how to do something after a button is pressed!
Some Very useful learning resource.
Codeacademy: interactive, code-along tutorials (this site is the bomb btw)
Web Development for Beginners: article from webplatform.org.
MDN: https://developer.mozilla.org/en-US/docs/Web
2. Intermediate advanced path
Once you have mastered the three major languages, you can start learning the professional development process:
Command line: OK, you may know the command line, but you must master the most basic operations and be familiar with how to configure your environment , and those weird shell scripts, because you'll be using them a lot.
CSS is no longer enough, we have CSS preprocessing: Sass, LESS.
Know how to build a build system: build task scripters such as Gulp or Grunt, compile LESS into CSS, concatenating Javascript, minify compress static resources, choose an asynchronous or synchronous way to load them, and then a good build system must be able to Do that automatically, including a local web server for testing code.
Code version management, git.
Share your code on github!
Deploy! Get your website online. You can find a free service provider, such as heroku.com, https://pages.github.com
These are almost the tools and technologies used by modern front-end developers. Well, you can now become a front-end development engineer .
Advanced explosive equipment. You've been able to build a website for your friend's business, with simple layout and large high-definition photos. You've succeeded and it even looks great on your phone. So what else is there to learn?
Integrate your website with a content management system (CMS). A CMS allows you to add, delete, modify, and organize your content through a user interface without any coding. This is how those blog sites work. For example, free WordPress, it will be very useful to get familiar with an open source CMS.
Learning how to build a CMS means that you need to be familiar with a server-side language, such as Node.js, or PHP, and then you also want to know how to deal with a database, such as MySql or MongoDB.
Let’s get familiar with a Javascript framework so that you can really build a web application with excellent interaction, which is really important, such as Angular, React, and Ember. Just pick one you like, but be sure to master it.
Javascript design patterns, does javascript also have design patterns? Yes, read it.
The ultimate move that breaks through the sky. Communication skills! You need to communicate with your friends. They are your coder partners, your boss, your users, your...stackoverflow.com. If you have any questions, go to stackoverflow, expand your network, go to meetup.com, blog Write some of your learning experience and contribute your Pull request on Gitgub.
Interface design and user experience design UI/UX design, front-end development partners need to have basic UI/UX design knowledge. Search optimization, you need to know how to improve the search ranking of your website to make it easier for people to search. CSS transition effects, write a hover CSS animation for your button, and your navigation menu that slides in from the right also needs a smooth animation.
Regarding performance, make your website load as quickly as possible, reduce DOM reflow and repaint operations, prevent scrolling performance bottlenecks, optimize Javascript, read this google web developer fundamentals.
Use some testing frameworks to implement Javascript unit testing, such as Jasmine and QUnit. Continuous integration (CI), knowing how to configure a set of automated testing and deployment tools for use with partners, such as CircleCI, Travis CI, Jenkins.
Other super useful bonus skills.
↓↓↓These are not required, but can help you stand out:
Use CSS3, SVG, Canvas API to implement animations.
Backend Development, Node.js
Finally: Get a job!
Having skills is not enough, you need to be able to show them. What you can also do is:
Build a small website, make your gitub code base public, make sure your code and documentation are clear and beautiful, and have a README
Go to meetup. com Find your boss or investor, start a blog, apply for a LinkedIn account
Because web technology is always changing, in the end, even if you find a satisfactory job, you still need to stay motivated. You need to go to the following places from time to time Check out: CSS Tricks, SitePoint, Smashing Magazine
Of course, there are also Chinese communities like CSDN. In short, if you encounter any problems, there are always people in the community who are willing to help. Keep a good professional attitude: Stay humble, and build cool shit.
Brotherhood Gao Luofeng recruits disciples for free: http://www.hdb.com/party/lzcw-comm.html
Receive LAMP Brothers’ original PHP video tutorial CD/"Explain PHP in detail" free of charge. For details, please contact the official website customer service:
http://www.lampbrother.net
【Brothers IT Education】Learn PHP, Linux, HTML5, UI, Android and other video tutorials (courseware + notes + videos)!
Network disk tutorial download: http://pan.baidu.com/s/1sjOJiAL
The above introduces the front-end programmer: monthly salary of 5K to 50,000, what I do, including aspects of the content, I hope it will be helpful to friends who are interested in PHP tutorials.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
