Hi there, I am a full-stack developer. I love sharing my knowledge of development technologies and programming in general. Subscribe to get notified anytime I publish.
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
. . .
Tools to Get Familiar With After the Basics
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.
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
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.
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.
. . .
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.
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.
. . .
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!