After so many experiments and tests, instead of saying that you created all the content from scratch, how did you feel when you created the first login form on the web page? After many changes, how does it feel to assign the layout to the first Web application? How do you feel when you have successfully handled the operations of thousands of users?
Most Web developers have gone through all of the above stages, and may be frustrated with some of them at first, but when they see their website running and people using it around the world, the overall feeling is really exciting and amazing. Web developers are responsible for many tasks, from collecting requirements to designing websites, dealing with the back-end of websites, and making them serve users successfully.
Every year, new technologies and tools emerge in the industry to improve the efficiency of developers and provide users with better websites. For them, the challenge of staying on top of the Web development game is getting bigger and bigger. Today, we're going to talk about the complete map of becoming a web developer in 2020. This will be a practical guide for all developers (front-end, back-end and full stack).
1. Determine your goal or path first
We will discuss many technologies, trends and tools, but we don't want you to be at a loss, so you need to first decide what to do to become a Web developer, because it will help you choose the right tool. And learning technology. There are many reasons for becoming a Web developer. Here are some selection factors:
You want to work in a company as a web developer, which is the most common reason. You want to start your own business or agency as a free developer. You can become a consultant to other companies. You can create your own apps to make money. Coding is your hobby.
From the above areas of interest or goal, you can choose the right tools and techniques for your goal. If your goal is to become a front-end developer, you can choose front-end development tools and technologies. The same is true for backend and full stack development.
2. Basic tools and software for Web development
Computer and operating system: You cannot write code without a computer and operating system. To learn Web development, you don't need any high-end computers (if you have them, then better...). You can use any type of medium-sized laptop or desktop computer. For the operating system, you can use MacOS, Windows (the latest version) or Linux for you. Text editor/IDE: There is no doubt that VSCode is suitable for most situations and most languages. It has good performance, excellent scalability, built-in terminal functions and a large number of functions. In the 2019 StackOverFlow survey, VSCode is also the first choice for developers. You can also choose some other good options, such as Sublime Text or Atom. If we talk about IDE, then Visual Studio（ // ASP.net Or C #), Eclipse and Netbeans (Java). It's a good choice. Web browser: Most developers prefer Chrome or Firefox. Chrome is fast and uses the V8 engine (JavaScript engine). Firefox has also made great progress, some of which are not in Chrome. Both browsers have excellent development tools that can troubleshoot problems in Web development. Terminal: You will use some system commands to do a lot of work with the CLI. You can use default or third-party terminals for your Web development projects. Bash, Zsh, Powershell, Git Bash, iTerm, Hyper are all available options. Design (optional): Not everyone needs to learn. In the company, there is a special team to make images, logos or sketches, but if you are a freelancer, you may have to learn Adobe XD, Photoshop, Sketch or Figma.
3. Start with HTML and CSS
HTML and CSS are the basic building blocks of Web development. No matter how advanced your Web application is, or what framework and back-end language you use, you must use HTML and CSS to build front-end applications. Therefore, this is the first thing to learn in Web development.
HTML5 (semantic elements, attributes, document types, etc.) CSS basic knowledge Color, font, location, box model, etc. CSS Grid and Flexbox align content or create columns. CSS Custom Properties
4. Responsive layout
Your application should be viewable and usable on all types of devices (such as smartphones, tablets, desktops, iPads or any other screen size device). Therefore, it is important to understand how to create responsive designs or layouts. Let's look at some important topics.
Learn how to set different screen sizes for viewport media queries. Fluid width rem unit movement priority
5. Customize reusable CSS components
Instead of relying on large CSS frameworks (such as Bootstrap), it is better to create your own modular and reusable CSS components for use in projects. If you build your own custom design, you do not need to import the complete library. You create components that require only specific UI. The new trend has also recently emerged code that helps to write CSS code more effectively. If you already know CSS, you don't need to spend much effort on learning Saas. Saas is a CSS preprocessor that can add more functions to standard CSS and make it more efficient.
You can use variables, nesting, and conditional statements to reduce the repetition of CSS and improve its efficiency. You can also create separate Saas files for each reusable component. Sass really saves a lot of time, so you should definitely learn it in 2020.
6. CSS Framework
Learning CSS framework is not as popular as last year, but it is still very relevant or useful for developers who are not good at design. There are many popular CSS frameworks available, some of which are as follows.
Bootstrap is the most popular CSS framework. The learning bootstrapper can also help you learn about other frameworks. Tailwind CSS is another popular framework, which is almost no different from other frameworks. It is a set of utility classes, so you can create your own buttons and other things that look really different from other buttons. They are also highly customizable. Materialized Bulma
7. Front end must be in JavaScript
After learning HTML and CSS, the next thing to learn is Vanilla Javascript. It is very important for developers to master the basic knowledge of javascript. You will use a server-side language (such as PHP, Python, or // ASP.net ）A lot of javascript is used in. If you want to use it with React, Angular, NodeJS, Vue or any other javascript framework or library, you need to learn this language very much. Here are some important topics you should cover in javascript
Basic JavaScript knowledge (variables, data types, functions, conditions, etc.) DOM (document object model) JSON (JavaScript object representation) Extraction API (request/response/Ajax) If you want to move to React, Vue, Angular or other frameworks, the concept of modern JS (ES6) is very important for learning.
8. Some important tools
Some tools will be used in Web development. These tools will help you debug, improve productivity, manage code, collaborate with other developers, and the like. Let's discuss some of these tools.
Git (version control) and Github are the most popular tools you will definitely learn in 2020. Git has a lot of help in collaborating with other developers and managing code. You can also select other options, such as GitLab, Bitbucket and others. Learn how to use browser development tools. Whether it is chrome or firefox, you should know how to use different tabs, such as element tab, javascript console, network tab for request and response, application tab and other tabs for different purposes. Most IDEs or text editors have the ability to add extensions or plug-ins, which is very helpful for improving productivity and building Web applications. For example, VSCode extensions in Visual Studio code can help download extensions such as real-time servers or real-time saas compilers for use with React. Emmet is another great tool that allows you to write very fast HTML and CSS, which helps improve developer productivity. Learn to use javascript package managers, such as NPM and Yarn. If you are using Javascript frameworks or libraries (such as React), these package managers will be used a lot, but for other languages (such as Python or Php), you will use different package managers. If you want to install the NPM package on the front end, you must use Webpack or Parcel. If you want to create your own module, or bring a javascript file to another javascript file, you can't just use the browser to perform this operation by default, so you need Webpack or Parcel to bundle it. I am currently working as a front-end developer. If you want to learn front-end development technology now, and if you encounter any problems about learning methods, learning routes, learning efficiency, etc. during the process of learning the front-end, you can apply to join my front-end learning exchange skirt: front: 600 middle: 610 last: 151. There are some beginner skirt files that are self-study in the front end. There are also some front-end learning manuals, front-end interview questions, front-end development tools, PDF document books and tutorials that I sorted out during the front-end technology period. You can download them if you need.
9. Basic deployment
At this point, once you know what tools or technologies to learn for front-end development, you need to know how to deploy front-end websites on the Internet. If you are building some small applications, landing pages or personal sites for small businesses, you do not need to learn AWS or DevOps, just because they are shiny and trendy. You will make things more complicated than simple. You need to learn some deployment tools and steps in 2020.
Domain registration (Namecheap, Google, etc.) hosting (InMotion, Hostgator, Bluehost, etc.) static host (Netlify, Github page) SSL certificate. FTP and SFTP (File Transfer Protocol) are very suitable for small applications. SSH (Secure Shell) for advanced applications. CLI and Git.
So far, any tools, technical trends or steps we have discussed are part of front-end development. You don't know about the framework yet, but you can build websites for individuals and small businesses, or you can build a layout suitable for mobile devices. You can also deploy small applications or projects using the tools or techniques discussed so far. If you want to apply for a job, it would be great to learn some front-end frameworks (such as React, Vue or Angular).
10. Front end framework and state management
The framework enables you to conduct more advanced front-end development. Frameworks provide you with many advantages, such as reusable components, more organized UI or page interaction. This is better for collaboration and helps to write concise code. In addition, learn about state management. Each framework has a different approach. Here are some popular frameworks and state managers for 2020.
React: React library is the most popular learning method for Web development. Compared with other frameworks and libraries, it is quite easy. React developers still have a lot of work to do. You can use Redux and Context APIs with Hooks for state management. Vue: Vue is also becoming more and more popular, and developers prefer to learn Vue. Compared with React and Angular, Vue is the easiest to learn. VueX is a state manager built for views. Angular: This framework is usually used in large organizations. It has a rather steep learning curve. It is also good to learn TypeScript with Angular. It allows you to use optional static types and supports the functions of ES2015. NGRX and Services are good state managers that can learn this framework.
Optional learning:
If you have the knowledge of one of the three frameworks, you can also use Svelte, a JavaScript compiler that allows you to generate pure original JS code and help you easily build a user interface. Learn about server-side rendering. NextJS (React) and NuxtJS (Vue) are frameworks that allow you to run React and Vue on the server. Both have good functions, such as better SEO, file system routing, automatic code splitting, static export, CSS in JS and many other functions. Static Site Builder: Gatsby (Reactive) and Gridhome (Vue)
We have discussed all of the most front-end development tools and technologies. Now let's talk about the language and technology of being a back-end developer or a full stack developer.
11. Server language (select one)
You should know at least one server-side language. To choose a language in 2020, here are some options
NodeJS (not language, but runtime environment) Python (very suitable for beginners) Java (suitable for large organizations) Php (suitable for freelance) Ruby (less bipolar in 2020) C # Go
Note: No matter which server-side language you like to learn, make sure you understand the data structure and algorithm of the language. Data structures and algorithms will help you present data to users, and will help you optimize the code in your Web applications. In particular, we recommend that you focus on using arrays and strings (most importantly). You will use both methods.
12. Server side framework (select one)
Once you have learned a server-side language of your choice, you can use one of the language frameworks. You can choose one of the options given below
Node.js – Express, Koa, Adonis, Feather.js, Nest.jsPython: Django, Flask, Java: Spring MVC, GrailsPHP: Larvel, Symfony, Codeigniter, SlimRuby: Ruby on RailsC # on Sinatra: // ASP. NET MVCGo： Revel
13. Database (select one)
Most Web applications need a place to store data. In some cases, certain technologies or languages can be used with certain databases. For example, in the Mern stack, M represents MongoDB, while in the LAMP stack, M represents MySQL, depending on which database you want to select for the application. We will discuss some popular databases in 2020.
Relational databases: RDBMS is still the most popular database. I prefer PostgreSQL, MySQL and MS SQL. NoSQL: MongoDB, RethinkDB, CouchDB cloud database: Firebase, Azure Could DB, AWS lightweight and cache: Redis, SQLlite, NeDB
When learning database, you will also learn SQL (Structured Query Language) of RDBMS, ORM (Object Relational Mapper) or ODM (Object Data Mapper). GraphQL: (Optional) You can learn about the popular GraphQL. This is the query language of API. It has a simple syntax similar to JSON and is fairly easy to implement.
14. CMS: Content Management
You should definitely know about content management systems, especially if you are self-employed. CMS is used to add content to your website or application. The customer was able to update their content very well.
Traditional CMS: WordPress (PHP), Drupal (PHP), Keystone (Javascript), Enduro (Javascript) Other CMS: DEDECMS, Imperial CMS, PHPcms, // Prismic.io ，Strati。
15. Deployment and DevOps
Hosting full stack applications or back-end applications is more complex than just front-end applications, especially when you have a database. Make sure you know how to deploy using the CLI. Learn about the following for deploying applications.
In most companies, there are different teams working on DevOps. Therefore, having knowledge of DevOps is entirely optional. You can learn that if you are working on your own project.
SSH (security shell) Web server environment: NGINX, Apache application hosting: Linode, Heroku, AWS, Azure, Now. Virtualization: Docker, Vagrant test: load balancing, monitoring, security of unit, function, integration, etc.
All of the above technical tools are enough to make you a front-end, back-end or full stack developer. Select the right tools and technologies according to the final goal.
