If you want to learn 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! Welcome to the new post of Terminal Stack on Web Development roadmap which lays out all the basics you need to learn. We are going through each step so by the end of this guide you will have an understanding of the basics of web development and what skills you need to learn.
I personally think it’s a good idea for front-end 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. Let’s dig deeper into the roadmap. Before you get into actual coding you will need to understand some general concepts as you start your journey into web development which is discussed below:-
- What Is Web Development
- How Website 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 which you can then load that website through a browser like Chrome, Firefox, etc. on your computer or on your phone. Your browser is also called the client in this situation so every time you are on the internet the client is 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 three categories front-end, back-end, and Full-Stack.
- Front-End and Back-end
The terms front-end, back-end, and full-stack web developers describe what part of the client-server relationship you are working with. front-end means mainly you are dealing with the client-side. It’s called front-end because it’s what you can see in the browser conversely the back-end 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 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’s a lot of things behind the scenes that the customers won’t see they will experience and hopefully enjoy the end product a delicious meal fun illustrations aside both front-end and back-end.
- 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 options out there but currently, the most popular code editor is vs code. Vs Code is a more light version of Visual Studio, Microsoft’s main IDE it’s fast free easy to use and you can customize it with themes and extensions. Other code editors are sublime text, Atom, and vim. If you are just getting started though I’d recommend checking out vs code which you can download from their website and to learn more about the advantages of using VS Code head over to this post.
We have covered some of the broader concepts of what web development is let’s get into more of the details starting with the front end.
- Basic Front-End
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 a headline, titles, paragraphs, bulleted lists, images and so on. HTML tags by themselves do have some styles attached but they are the pretty basic kind of like what you would see in a word. Document. Now you can start your web developer journey with Conquer HTML Series.
- Package Managers
Package managers are an online collection of software much of it open-source each piece of software called a package is available for you to install and use in your own projects you can think about them like 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 if 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 with NPM.
- Version Control
The last tool you will 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 infinitive 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 the 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.
To know more about version control systems read this post
- BASIC BACK-END
As I 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 are 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 the 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, cheap and you don’t need to worry about server maintenance they are 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 on the server you need to use.
- Programming Language
Finally, you will need to learn about databases. Database, as the name implies, is where you store information on your server for your website most databases use a language called SQL pronounced sequel which stands for Structures 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 updates and delete data. The database is run on the server meeting servers like Microsoft sequel server on Windows servers and my sequel 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 on to your databases 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.
For all the above steps I mentioned above I would recommend you start your journey into web development using that. I have compiled a list of resources to help you get started learning at any of these stages below.