Are you stuck wondering where to start? It is hard to find the right advice without suffering from information overload.
In this article, I have laid out all the basics you will need to learn web development. With this, you will have an understanding of the basics of web development and what skills you need. I will take you through the basics step by step. I recommend learning the basics of both the front end and back end before specializing.

. . .

Do You Have an Understanding of the Subject?

Before getting your feet wet, you will need to understand some general concepts like how websites work, the difference between the front end and back end, and the use of a code editor.

If you strip a site down to its core, you will notice that it comprises of a bunch of files stored on a computer called a server with an internet connection. You can then load that website through a browser, which is referred to as the client in this situation. So every time you are on the internet, you, the client, are loading data from the server as well as submitting data back to the server. This back-and-forth between the client and the server is the basis of the internet.

Web developer roles typically fall into front-end, back-end, and full-stack. These terms describe what part of a client-server relationship will be your specialty. Front end means that you work mainly with the client side. The back end is a part of the website that handles a lot of the logic and functionality that are necessary for the website/web app to work. Both front-end and back-end web development serve separate but critical functions.

When you build a website, one of the tools that you will use is your code editor or IDE ( integrated development environment ). This tool allows you to write the markup and code that will make up the website. There are quite a few good options out there, but currently, the most popular editor is VS Code.

. . .

Basic Front End

HTML, CSS, and JavaScript files are what make up the front end. The browser loads these files on the client side. HTML (hypertext markup language ) is the foundation of all websites. When you look at a website, the HTML file contains all the content on the page, and it uses tags to denote different types of content. For example, you can use text to create headline titles, paragraphs, bulleted lists, images etc.

HTML tags by themselves do have some styles attached but are pretty basic. CSS (cascading style sheets) lets you manipulate that HTML content so it looks more appealing to the viewer. You can add colors, custom fonts, and lay the elements of your website as you wish. People sometimes tend to gloss over CSS so they can move on to things like JavaScript, but it is good to note that there is much more depth to CSS than what meets the eye.

JavaScript is a programming language designed to run in the browser. Using JavaScript, you can make your website more interactive. For example, you can build a pop-up that shows the menu links when a user clicks it.

. . .

Tools to Get Familiar With After the Basics

Now that you know that HTML, CSS, and JavaScript are the basic building blocks of front-end web development, there are a few other tools that you will want to learn before going forward.

Package managers are online collections of mostly open source software. Each piece of software — usually referred to as a package — is available for installation and use in your projects. Think of them as plug-ins. Instead of writing everything from scratch, you can use helpful utilities that other people have already written. The most popular package manager is called NPM (node package manager). You can also use another manager called yarn. Both are good options, but as a beginner, it is probably best to start with NPM.

In addition to package managers, you will need to become familiar with module bundlers and build tools for they are another essential part of the front-end workflow for running tasks and processing files. You can use them to compile your SASS files to CSS, transpile your ES6 JavaScript files down to ES5 for better browser support, run a local web server, and many other helpful tasks. The most popular tools that you are going to come across a lot are gulp, Webpack, and parcel. You will have to choose the one best suited for your project.

The next thing to learn about in this stage is version control. Version control keeps track of every code change that you make in your project files. You can even revert to a previous change in case you make a mistake. The most popular version control system is an open source system called Git. With Git, you can store all your files and their change history in collections called repositories. You may also have heard of GitHub, which is an online hosting company owned by Microsoft, where you can store all your Git repositories.

. . .

Going a Little Deeper

At this point, you have a choice to either delve into additional front-end skills or learn about back-end web development. If you choose to go deeper into front-end, there are some more intermediate skills that you will want under your belt. I recommend that you look at SASS, responsive design, and a JavaScript framework. SASS is an extension of CSS that makes writing styles more intuitive and modular. With SASS, you can split up your CSS into multiple files for better organization, create variables to store colors and fonts, and use mixins and placeholders for reuse. Even if you utilize just some of the basic features like nesting, you’ll be able to write your styles quicker and with fewer headaches.

Responsive design ensures that your styles will look good on all devices. The core practices of responsive design include using flexible sizing for elements as well as utilizing the media queries to target styles for specific devices and widths. Building your website with responsive CSS is a must these days since mobile traffic is outpacing desktop traffic.

After getting the basics of vanilla JavaScript down, you may want to learn one of the JavaScript frameworks — especially if you are looking to be a full-stack JavaScript developer. Frameworks come with prebuilt structures and components that allow you to build apps quicker than if you started from scratch. Currently, you have three main choices: React, Angular, and Vue. React, which is technically a library, is the most popular framework right now. The truth is, there is no best framework for everything. There’s rarely a single choice that is 100% the best choice for every person in every situation. The framework you chose will depend on either your job or your comfort level.

Don’t worry too much about which framework to choose. It’s more important that you learn and understand the concepts behind them. Once you get a handle on one framework, it will be much easier to learn other ones after that.

. . .

Back End

Three main components make up the back end or server side of web development. The server, a server-side programming language, and a database. As mentioned at the very beginning, the server is a computer where all website files, the database, and other components are stored. Traditional servers run on operating systems, such as Linux or Windows, and are centralized because everything is stored all together on the server. These days, there are serverless architectures, which are a more decentralized type of setup. This type of application puts up those components and leverages third-party vendors to handle each of them. Despite the name, though, you still do need a webserver to at least store your website files. Some examples of serverless providers are AWS and Netlify.

Serverless setups are popular because they are fast, cheap, and you don’t need to worry about server maintenance. They’re great for simple static websites that don’t require a traditional server-side language. However, for very complex applications, the long-established server setup might be a better option on the server.

To write the functions and logic for your application, you need a programming language. The server will compile your code and convey the result back to the client. Popular programming languages for the web include PHP, Python, Ruby, C#, and Java. There’s also a form of service-side JavaScript, Node.js, which is a runtime environment that can run JavaScript code on the server.

Finally, you’ll need to learn about databases. Databases, as the name implies, are where you store information on your server for your website. Most databases use a language called SQL, which stands for Structured Query Language. Data resides in tables within the database, sort of like complex Excel documents on which one can write queries in SQL to create, read, update, and delete data. The database is run on the server using servers like Microsoft SQL Server on Windows servers and MYSQL for Linux.

There are also no-SQL databases that store the data in JSON files as opposed to the traditional tables. One type of no-SQL database is MongoDB, which often goes hand in hand with React, Angular, and Vue applications.

. . .

Conclusion

As a beginner, I would recommend you start your journey into web development following these steps. From here, you’ll learn different stacks should you want to go deeper down the rabbit hole. Happy coding!