If you want to learn web development and you are wondering how to start web development, where do you even start? It’s hard to find the right advice without suffering from information overload. That’s why I’ve created this beginner’s roadmap!
How to start Web Development
It lays out all the basics you need to learn web development we’re going to go through each step so by the end of this guide you’ll have an understanding of the basics of web development and what skills you need to learn I recommend doing steps 1 2 & 3 in order then depending on whether you want to focus on more front-end or back-end you can Additional Frontend Development skills or the backend Development.
I personally think it’s a good idea for front-end web developers to learn at least a little bit of back-end and vice versa knowing the basics of both will help you know if you like front-end or back-end web development better. Sound good! let’s dig deeper into the roadmap before you get into actual coding you’ll need to understand some general concepts as you start your journey into web development.
- How websites work
- The difference between front-end and back-end
- Using a code editor
How websites work
All websites at the most basic are just a bunch of files that are stored on a computer called a server. This server is connected to the Internet. You can then load that website through a browser like Chrome, Firefox, or Safari on your computer or on your phone. The browser is also called the client In this situation. So every time you’re 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.
Types of Web developers
Web developer roles typically fall into three categories Front end, Back end, and Full-stack. The terms front end back end and full-stack web developer describe what part of the client-server relationship that you’re working with.
Conversely, the Backend Development is the part of the website that you can’t really see but it handles a lot of the logic and functionality that is necessary for everything to work.
One way you can think about this is that front-end web development is like the front-of-house part of a restaurant. It’s a section where customers come to see and experience the restaurant, the interior decor, seating, and of course eating the food. On the other hand back-end, web development is like the back-of-house part of the restaurant. It’s where deliveries and inventory are managed and the process to create the food all happens there are a lot of things behind the scenes that the customers won’t see but they will experience and hopefully enjoy the end product.
The Code Editor
When you build a website the most essential tool that you’ll 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 code editor is VS Code. VS Code is a more lightweight version of Visual Studio (Microsoft’s main IDE). It’s fast, free, and easy to use, and you can customize it with themes and extensions. Other code editors are Sublime Text, Atom, and VIM. if you’re just getting started though, I’d recommend checking out VS Code, Which you can download from their website.
Basic Frontend Development
HTML or hypertext markup language is the foundation of all websites. It’s the main file type that is loaded in your browser 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 tags to create headline titles, paragraphs, bulleted lists, images, and so on. HTML tags by themselves do have some Styles attached but they’re pretty basic, Like what you would see in a Word document.
Learn More: What is DOCTYPE HTML What is the purpose of DOCTYPE HTML?
Learn More: What are CSS Selectors and 13 Types of CSS Selectors with examples
Package Managers are online collections of software, each piece of software is called a package and is available for you to install and use in your own projects. You can think about them as plugins. Instead of writing everything from scratch, you can use helpful utilities that other people have written already. For instance, you can simply use a slider plug-in instead of having to code it all yourself. Which could take days to figure out why to reinvent the wheel ff you don’t have to.
The most popular package manager is called NPM or Node Package Manager. You can also use another manager called Yarn. Both are good options to know and use although it’s probably best to start out with NPM. In addition to the package manager, you’ll want to become familiar with build tools.
The last tool you’ll need to learn about in this stage is Version Control. Version Control also called source control is a system that keeps track of every code change that you make in your project files. You can even revert to a previous chain if you make a mistake. It’s almost like having infinite save points for your projects and let me tell you, it can be a huge lifesaver.
The most popular version control system is an open-source system called Git. Using Git you can store all your files and then 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.
Additional Frontend Skills
At this point, you’ve learned the basics of frontend development and have a choice to either delve into additional friends skills or learn about basic backend web development. With additional front-end, there are some more intermediate skills that you will want to learn.
Responsive design ensures that your website will look good on all devices like desktops, tablets, and mobile phones. The core practices of responsive design include using flexible sizing for elements as well as utilizing media queries to target styles for specific devices and widths. For example, instead of setting your content to be a static 400 pixels wide, you can use a media query and set the content to be 50% width on desktop and 100% on mobile. Building a website with responsive CSS is a must these days. Especially as mobile traffic is outpacing desktop traffic.
React which is technically a library, was created by Facebook and is the most popular framework right now. Angular was the first big framework and it was created by Google. It’s still very popular even though it’s been surpassed by react recently and Vue is a newer framework created by a former angular developer. Well, it is smaller than react and angular but it is growing quickly and is also considered easy and fun to use.
You might be wondering now okay well which framework is the best. The truth is, they are all good and in web development, there’s almost never a single choice that is 100% the best choice for every person in every situation. Your choice will most likely be determined by your job or simply by which one you enjoy using the most.
If your end goal is to land a job at a company try researching which framework seems to be the most common in potential job listings. Don’t worry too much about which framework to choose it’s more important that you learn and understand the concepts behind them and once you learn one framework, it’ll be much easier to learn other ones after that.
Let’s move on now to our last section backend web development the backend or server-side of web development is made up of three main components the server, a server-side programming language, and the database.
As we mentioned at the very beginning, the server is the computer where all website files the database and other components are stored. Traditional servers run on operating systems such as Linux or Windows. They’re considered centralized because everything the website files back-end code and data are stored all together on the server.
Nowadays, there are also serverless architectures which is a more decentralized type of setup. This type of application splits up those components and leverages third-party vendors to handle each of them. Despite the name though you still do need some kind of webserver to at least store your website files. Some examples of service providers are AWS Amazon Web Services or Netlify.
Serverless setups are popular because they are fast and 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 traditional server setup might be a better option.
Finally, you’ll need to learn about databases. As the name implies, are where you store information on your server for your website. Most databases use a language called SQL pronounced sequel which stands for Structured Query Language.
In the database, data is stored in tables sort of like complex Excel documents. Then you can write queries in SQL in order to create, read, update and delete data. The database is run on the server meeting servers like the Microsoft sequel server on Windows servers and MySQL for Linux. There are also no sequel databases that store the data in JSON files as opposed to the traditional tables. One type of no sequel database is MongoDB, which is often used with react angular and view applications.
Some examples of how data is utilized on websites are if you have a contact form on your website you could build the form. So that every time someone submits the form their data is saved to your database. You can also store user logins on the database and write the logic in the server-side language to handle checking and authenticating the logins.
That’s how I would recommend you start your journey into web development. Share this guide on How to learn web development with your friends