What to learn to become a web developer

Hello everyone, my name is Maksym Rudnyi, and for the past 10 years, I have been involved in web development. Based on my experience, I want to share a plan of what needs to be learned to become a good Front-end developer.

This material will be interesting to beginners who aspire to connect their lives with web development. Today, learning programming is incredibly easy — any material can be googled or watched on YouTube. The most challenging part is to determine what exactly needs to be googled. I am confident that this article will answer this question and save someone a lot of time.

The list is formulated for mastering only the Front-end development direction. I will not give advice on what needs to be learned to get into international companies or FAANG companies. And so, every Front-end developer should know a little bit of Back-end, so this list will include various technologies. Our goal is to have a truly highly qualified Front-end developer.

It is essential to note that all the topics from this list do not need to be learned all at once. This is a path that will stretch over the years. After mastering one item, you can move on to the next. At the same time, even for junior specialists, it is important to know about the existence of all technologies from this list; superficial acquaintance will be enough. With the growth of your expertise in web development, knowledge in each of these items will deepen.

Recommendations are based on my work experience, mentoring, teaching on courses, and YouTube channel. If you have something to add, leave comments. I am confident that your experience and advice will be useful to others.

Setting a goal

Everything starts with a goal. What do we want to achieve? Before delving into piles of educational materials and understanding programming languages, make sure that programming is something you enjoy. Do you like solving problems and can sit for hours on monotonous tasks? Or have you only recently learned that web development can earn you good money? Depending on this, how quickly and effectively you will learn and whether you will overcome the challenges that will inevitably arise on your way.

Basic Computer Science

It’s necessary to obtain basic knowledge about how a computer, browser, and website work. This includes understanding what a program is and how it works. One can take a basic computer science course, such as one offered in school, and learn the basics of any programming language such as C, C++, or Python. This will provide an understanding of variables, language structures, and functions.

It would be useful to take the popular CS50 course.

Command line (Terminal)

Working with the console or terminal is an essential part of a programmer’s daily life. Learning basic commands such as navigating directories, creating files and folders, changing permissions, and running other programs through the console can make future work easier. One can take any course on Linux and working with the console. Popular options can be found on Udemy or any other platform.

HTML

HTML is a markup language (not programming). It is the starting point for learning web development, mastering tags and page structure, which form the framework of a website. Many materials are available for learning HTML, such as CS50 from Harvard University, specifically designed for web programming. It is more convenient to learn through courses or tutorials on websites rather than books since it’s more visual.

CSS

CSS, or Cascading Style Sheets, makes websites look beautiful and stylish. If HTML is a plain and boring framework, CSS adds visual appeal. Mastering these two technologies can help create the first projects, such as simple landing pages or personal websites. It’s important to practice and make as many pages as possible to memorize tag names and rules.

For interesting resources for learning, I recommend this or a free course from Google.

Version Control System Git

We need to store the projects we create somewhere so we can share the source code, see when we created it, and how we changed it. Git is the perfect solution, as it is the most popular version control system. We commit all our code and publish it on GitHub.

The best thing about Git is that everyone uses it. Regardless of whether you are a Back-end, Front-end, mobile developer, or even DevOps, you simply can’t do without Git.

In addition to the CS50 course, which also mentions Git, I can recommend my free course Git for beginners on YouTube. Also, on the official website, you can use the “Pro Git” book by Scott Chacon and Ben Straub for free.

JavaScript

JS is the primary programming language for the web and for front-end developers in general. Learning and practicing it will take the most time. And along with this, mastering JS core, learning any libraries, and frameworks will not pose significant problems. By mastering JS, we can add interactivity to our websites: form validation, complex animations, and effects.

There are incredibly many resources on JS. On my YouTube channel, I share my experience. There are also several books that are required reading, but not right away, only when you understand the essence of the JavaScript language and have a little practice. The books are:

• “JavaScript: The Definitive Guide” by David Flanagan.
• “JavaScript: The Good Parts” by Douglas Crockford.
• “You Don’t Know JS” by Kyle Simpson (Free on GitHub).

jQuery (for old projects)

One of the most popular libraries for JavaScript was jQuery. Although it is now less popular, it does not mean that we can skip getting familiar with it. Not all of us work with modern and cutting-edge technologies, some of us need to maintain old (legacy) code.

One significant advantage of this library is the availability of thousands of plugins and add-ons. You can create any carousel, gallery, or complex animation effect.

Ajax/Fetch API

Current and timely updates of data are essential to our projects. With Ajax, we can make asynchronous requests to the server to retrieve or send data. Fetch API is a new implementation of this approach.

CSS preprocessors

Since CSS is only style sheets, we cannot talk about variables, loops, or functions. For this purpose, we can use preprocessors like Sass, Less, or PostCSS. They allow us to use variables and mixins (something like functions). Then this code is “compiled” into regular CSS.

CSS methodologies

Anyone who has worked with CSS even a little knows how challenging it can be to maintain its organization. The proper formation of selectors and styles is a difficult task. All of this code needs to be maintained and modified. To simplify things, various methodologies have been devised: BEM, Atomic CSS, OOCSS, and many others. Essentially, this is a set of rules that describes how we name classes and use selectors.

CSS frameworks

Fortunately, we don’t have to write everything ourselves or implement a methodology on a project. We can use ready-made solutions. This is where CSS frameworks come in. The selection is vast: Bootstrap, Material, Tailwind, Compass, and countless others. They provide ready-to-use sets of components, global styles, and the ability to customize for any project.

With this knowledge and technology, we can create full-fledged websites, landing pages, and other simple multi-page websites. Of course, this is assuming we’re not writing back-end code and all the data is already prepared for us.

Regular expressions

We always have problems with regular expressions. No matter how much we learn about them, we still don’t know them well enough. The sooner we become familiar with them, the faster we will learn how to use them. They are most commonly used in front-end development for form validation.

Project deploy

When we create our first projects, it’s time to show them to the world. Here, we start mastering the simplest approaches to project deployment and making them accessible on the internet. We need to buy a domain name and hosting. They are not very expensive, but they will bring you many benefits. You will have something to showcase during interviews because you need to upload your portfolio somewhere.

The simplest way is to upload the source files via FTP to the hosting server.

SEO

We don’t need to get websites into the top 10 search results, but it’s important to understand what search engine optimization is and why it’s necessary. This includes semantic markup, optimizing page performance, working with tools like Lighthouse, Google PageSpeed, WebPageTest, and others. The amount of money your client earns depends on how you optimize their website (understanding what it is and why it’s important).

Analytics (Google Analytics)

Once our websites are accessible worldwide, we want to know who’s visiting them, what pages they’re viewing, and overall user behavior. Different analytics tools can help us with this, the simplest being Google Analytics. We can install it using Google Tag Manager and gather information. On all the projects and companies I’ve worked with, we’ve used this service, and I’ve been responsible for its setup.

Architecture patterns (MVC, MVVM)

Architecture patterns like MVC and MVVM can help us understand the principles behind building complex applications, such as how to separate logic, data, and the presentation of that data.

OOP

Object-oriented programming is a classic skill. If you miss the understanding of Inheritance, Polymorphism, and Encapsulation principles, you’ll create numerous problems when working with TypeScript or more complex programs in JS.

JS frameworks and libraries

React, Vue, and Angular are currently the most popular JS frameworks. Most job listings require knowledge of at least one of these frameworks. They are used by most outsourcing and product companies. Choose one of them and dive deeper into that direction.

State manager

In addition to frameworks, there are state managers. There are many of them now, but the most popular ones are Redux and MobX. They make working on complex projects with a lot of data easier (or harder), where data is frequently updated and all those changes need to be displayed to the user.

Webpack

The most popular bundler. What does it do? To simplify our work, we use different libraries, programming languages (such as TypeScript), and many resources (images, fonts). To optimally compile all of this and create an optimized build of the project, we use Webpack.

NodeJS

The best thing about JavaScript is that it can be used on servers too. The server version of JS is called NodeJS — it is a software platform that compiles JS into machine code. Front-end developers cannot do without it. Whether you want to or not, you need to know the basics.

Express

The most popular framework for NodeJS. It simplifies life in many cases. Even if you just need to create a simple web server, it will come in handy. The official documentation is at the link.

Package managers (npm, yarn)

Since most libraries are packaged in packages and stored in special repositories, knowledge of npm or yarn is essential. There is nothing complicated about it, you just need to know how to install the required package from npm.

Build tools

I included additional tools in this category that we need to make a quality product, such as linters or runners. The code should be clean and, at the very least, in one style. Fortunately, this can be automated with ESLint or Prettier. We also need to run our applications from the console with one command. Here, npm script, Grunt, Gulp, or the same Webpack come to our aid.

RESTful

Implementation of data exchange protocols between client and server. Even if you don’t write the back-end side, it’s important to understand the methods that can be used to make requests to the server (GET, POST, DELETE…) and the statuses that can be returned (200, 301, 404…). Each of them has its own limitations that we should keep in mind.

MongoDB

A popular document-oriented database. It comes in handy when working with NodeJS. Luckily, you don’t need to have extensive knowledge of it.

With basic knowledge of back-end (NodeJS, Express, MongoDB), we can already create a full-fledged complex project using just JavaScript. Experience shows that such knowledge is especially important for any highly qualified front-end developer.

Performance (optimization)

It’s time to improve the quality of our projects. When working with SEO, we’ve already touched on the topic of the performance of our applications. It’s time to dig deeper. Optimization of code, page loading speed, and content display speed. This is where knowledge of Webpack, Nginx, and profiling — a set of methods and techniques for finding the slowest parts of your applications — comes in handy.

Logging

It doesn’t matter whether your application is working or has crashed for some reason — everything should be logged. They will come in handy when searching for errors. You can set up notifications to find out about malfunctions in the work of your application from special monitoring systems, rather than from your clients.

Practices of clean code

Read Robert Martin and his book “Clean Code”. This book provides answers to most questions on writing clean code. You and your colleagues from the future will be incredibly grateful to you.

Testing

There are many types of testing, such as e2e, unit testing, functional, manual, and others. The most important for a programmer is unit testing. Without it, your code cannot be called clean. Writing tests reduce the number of errors, simplifies code modification, and create additional documentation for your code. The most popular frameworks for unit testing in JS are Jest, Jasmine, and Testing library.

Security

In addition to cleanliness, your code must meet security requirements. Look at the OWASP TOP-10 rules. And don’t forget to set up HTTPS protocol and check CORS.

Code review process

Since a programmer’s work is mostly teamwork, the ability to conduct code reviews is necessary. GitHub provides great opportunities and tools for code review. What are the goals and purposes of this process? What is collective code ownership and how is it achieved through review?

Design and Development principles

There are several principles of writing code that you need to master: KISS, SOLID, YAGNI, DRY. These principles are often asked in interviews — show yourself in the best light. Each of these principles also implements practices of clean code.

CI/CD

Continuous integration — regularly merge our code into the repository, after which tests, linting, builds, and any additional steps are automatically run. We are confident that our changes did not break the project.

Continuous delivery (deployment) — deploy code to production as often as possible.

The most popular tools are Jenkins and CircleCI. As a front-end developer, you don’t need to know how to set them up from scratch, but knowing how to run a job or view logs is essential. You can watch this course on YouTube about Jenkins and CI/CD.

Agile

Working in a team requires knowledge of certain techniques and practices. Scrum, Kanban, and XP come to the rescue here.

Cloud

It has become common practice to move everything to the cloud. Check out the most popular solutions: AWS, GCP, or Azure.

Docker

Part of the front-end developer’s work has been handed over to the designer, specifically part of the layout. Tools like Figma generate CSS components. On the one hand, it has become easier, but on the other hand, another technology has been added to the mix — Docker. We write the front-end in connection with the back-end, and to run it, Docker needs to be launched.

TypeScript

A great language that extends the capabilities of JS for developers, for example, by adding typing or interfaces. It is currently actively used for both back-end and front-end.

GraphQL

A query language, an alternative to REST. It allows you to retrieve only the data that is directly needed for the client. Implementations like Apollo add a myriad of additional capabilities, such as state management. We replaced Redux with Apollo, and everything works great. As a bonus, there is always up-to-date documentation for your queries.

Kaizen — “continuous improvement”

Programming is a path that has no end. To remain a skilled specialist, you need to learn every day and understand what is happening in the world of front-end development. Every day new libraries or frameworks come out, and you need to keep up with the updates. Missing out on this process even for a year can quickly lead to a loss of qualification.

Conclusion

In this list of technologies, I have completely omitted things like English language skills and soft skills. They are no less important, but they are not the subject of this article.

At first glance, the list of technologies may seem long, but did you really think that programmers get paid big bucks for nothing? It’s a challenging job that requires constant learning. And as I mentioned at the beginning, these topics and technologies are studied over the course of years, gradually.

I hope this material has provided you with answers to your questions and made the path of learning programming more understandable.