Web Development Basics: The Ultimate 2023 Roadmap for Beginners

Introduction

So, you've decided to become a programmer, huh? Well, you've certainly picked an exciting field to enter! As you consider your options, you might be wondering what kind of programmer you want to be. There are many different fields to choose from, such as web, mobile, game development, data science, computer programming, and more. Additionally, there are related roles like QA, DevOps, DBA, and Data Analysts.

With so many options, it can be overwhelming. However, web development is an excellent starting point providing you with a solid foundation of programming skills. Plus, with the ever-growing importance of online presence, web development is a field that is not going away anytime soon. So let's dive into the world of web development together!

Understanding Web Development

As a web developer, your primary responsibility is to design, develop, and maintain websites and web applications. While this may seem like a straight path, it involves two distinct areas of focus: back-end and front-end development.

As a front-end developer, you'll be responsible for creating the graphical user interface based on a design, that is part of a website that users can see and interact with, using HTML, CSS, and JS. Now, these might be new terms for you, but don't worry, I'll explain them in simple words.

A graphical user interface, or GUI for short, is a fancy way of saying that you use pictures and buttons to interact with your computer or device. HTML is a special language used to define the structure of a page, sort of like the frame of a car that provides the basic form and shape. It tells the browser where to place different elements on the page, similar to how a car frame tells you where to put the engine, wheels, and seats. CSS is also a special language used to style web pages, allowing you to choose colors, fonts, and layout to make your website look attractive, just like how a car's paint job and design give it a unique style. Lastly, JavaScript is a programming language that helps make your site dynamic. It's like the engine of a car that provides power and gives the ability to move the car, JS provides the interactivity and functionality of a web page.

As a back-end developer, your job is to create and maintain the parts of a website or app that users can't see, that provides tools for requesting specific data, processing it, and returning a response. That means you'll be writing code to handle requests and responses, manage databases, write business logic, create APIs (Application Programming Interfaces), and integrate third-party APIs. You can use programming languages like PHP, JS, and Python to do all of this.

To gain a deeper understanding of these concepts, we could use a restaurant as an example. Let's imagine that you are in a restaurant, and you want to order some food. You look at the menu and decide what you want to eat. The menu is the API documentation , which tells you what kinds of food you can order from the restaurant. Once you have decided what you want to eat, you call the waiter over and give them your order (request). The waiter is the API, which takes your order and passes it onto the kitchen. The kitchen is the server, where the cooking process happens. The chef looks at your order and starts preparing your food according to the recipe. The recipe and cooking process is the business logic, which determines how the food is prepared. To make the dish, the chef needs some ingredients. The ingredients are the data that the back-end server uses to prepare the food. Just like the chef uses ingredients from the storage or fridge, the back-end server uses data from the database to fulfill your request. Once the food is prepared, the chef gives it to the waiter, who brings it to your table. The prepared dish is the response that you get from the API after making a request.

Full-stack developers are responsible for managing the entire software development process, from the front-end user interface to the back-end server-side logic and database management. However, be mindful that as you progress in your career, there is a high possibility that you may decide to specialize in a particular area. This is because, when working in larger teams, it is necessary to concentrate on a specific part of the development process.

Furthermore, it's important to note that certain responsibilities are shared by all developers. These include ensuring that the application is secure, scalable, and performant. Scalability means that an application can handle a large number of users and data without slowing down or crashing. Performance is about making sure an application loads quickly and is responsive. Security is critical to protect against unauthorized access and data breaches.

Testing and debugging are also essential steps in the software development process shared by all developers. Testing involves checking that an application works as intended and is free from bugs and errors. Developers can use automated testing tools and manual testing methods to identify issues before the application is released. Debugging is the process of finding and fixing errors that were identified during testing. It involves using debugging tools to pinpoint the source of the issue and making changes to the code to correct the problem.

The choice: Back-end vs Front-end

Now that you have a better understanding of what web development is, are you ready to choose your path? Will you join the light or dark side of the force? Let me highlight the pros and cons of each, as well as how they stack up against one another. This should help you decide which route to pursue based on your interests and preferences.

Salary

USD per year, Sources: stackoverflow, glassdoor, indeed, payscale, 2022–2023

	Back-end	Full stack	Front-end
Worldwide	$68,355	$66,372	$60,000
Europe	$87,000	$77,000	$75,000
US	$103,000	$97,000	$93,000

These figures are provided for reference purposes only and represent averages. However, they can vary significantly depending on the country, region, technologies used, and level of experience. Generally speaking, back-end developers tend to earn the highest salaries, followed by full-stack developers, with front-end developers coming in last. To obtain up-to-date, more accurate salary information based on your location and experience level, you can refer to sources such as stackoverflow, glassdoor, indeed, and payscale.

Skills

When it comes to back-end development, the focus is on problem-solving and architecting complex systems. Back-end developers need to be able to solve abstract puzzles and think critically about how to design efficient and effective systems that can handle large amounts of data. On the other hand, front-end development is more focused on the artistic and visual aspects of web development. Front-end developers need to create visually appealing websites that are easy to use and navigate. Full-stack developers need to be proficient in both.

Learning curve

You might be wondering which is harder to learn - back or front-end development. Well, the answer is a bit tricky. Traditionally, people thought back-end development was more difficult because it involves more complicated logic and programming techniques than front-end. In recent years, front-end development has also become more complex. This is because of the increasing use of mobile devices, the growing demand for responsive design, and the need for dynamically changing websites. Moreover, the emergence of new frameworks and libraries such as React and Vue has made front-end development even more sophisticated than it was before. In conclusion, back-end development is still slightly more difficult, but the difference is minor.

Demand

Based on the Bureau of Labor Statistics outlook, web developer positions are projected to increase by 23% from 2021 to 2031. In terms of the job market for back-end, front-end, and full-stack developers, there are generally more job openings available for back-end developers, followed by front-end developers, and then full-stack developers. However, it's important to note that this can vary by country, region, and the specific technologies that are in demand.

Getting started

Hardware and Software

You'll require appropriate hardware and software to start your journey. Initially, you can utilize your personal computer and the operating system you're familiar with, which is often Windows. Later on, when you feel the necessity, you can upgrade to a more robust PC and switch to either Linux or macOS. Linux is the preferred choice as the majority of servers utilize Linux- based systems, making it a valuable skill to have in the field. On the other hand, macOS is also Unix-based, similar to Linux, but with a more intuitive user interface. If you prefer to stick with Windows, an excellent option would be to use Windows Subsystem for Linux (WSL). It's a feature that allows you to execute Linux commands directly from your Windows system, giving you access to Linux tools and software without having to switch to a different operating system entirely.

Terminal

Once you've selected your operating system, it's essential to get familiar with the terminal, which is a command line interface that helps you execute various commands. The terminal allows developers to perform complex tasks quickly and efficiently. Using it, developers can write and execute commands, open programs, create files and directories, run scripts, install programs, automate repetitive tasks, and more. Think of it like ordering food, instead of looking at a menu and pointing to what you want, you tell the server what you want in words, and they bring it to you.

IDE

You will need an IDE (Integrated Development Environment) such as PhpStorm, VScode and Sublime Text, etc. An IDE is a special program that programmers use to write, test, and run their code. It's kind of like Microsoft Word, but instead of creating documents, you're creating programs. It helps you manage your code by providing features like auto-completion, syntax highlighting, debugging, and error checking. In some cases, an IDE can even take over some of the responsibilities of the terminal, making it easier to interact with your code. In my opinion, it would be beneficial to use PHPStorm for back-end development and VSCode for front-end development. These tools are tailored for their respective areas of use and can help optimize your workflow.

Browser

You will need to use a web browser for development. I'm sure you're using one to read this article unless you have the rare ability to directly absorb information from the internet fiber. If that's the case, I'm impressed and maybe a little envious. A browser is essential for testing and verifying API responses, simulating user interactions, previewing the user interface, debugging client-side issues, and ensuring cross-browser compatibility. Using multiple browsers may be necessary to ensure that an application works properly across all of them. However, among developers, Google Chrome is the preferred choice due to its useful developer tools like Chrome DevTools, and its high market share that accurately reflects the user experience.

Git

Git version control is an indispensable tool when working as a team. Think of it as a safe place where you can store your code and collaborate with other developers on the same file without the risk of overwriting each other's work. Git allows you to compare changes and see who made them, which is essential for keeping track of the progress of your project. Furthermore, it can be incredibly useful for the history of your code and allows you to revert to an older version of the code if necessary. With Git, you can rest assured that your code is organized, accessible, and up-to-date at all times.

Other skills

English

As a web developer, having strong English language skills is crucial. The majority of programming languages and tools have documentation in English, and it is the common language used for collaboration among developers, as well as in tutorials and forums. It's a safe assumption that you're already familiar with it since you're reading this article.

Hotkeys

Learning hotkeys from the start is essential for programmers. Hotkeys are shortcut keys that allow users to perform common tasks quickly and easily. These keys are available in the terminal, browser and IDE, and can help you navigate and interact with programs more efficiently. By mastering hotkeys, you can speed up your workflow, increase productivity, and ultimately become a more effective programmer. It may take some time to get used to, but once you do, you'll wonder how you ever managed without them.

Researching

Learning how to effectively use search engines like Google, or communities like Stackoverflow and Laracasts, is crucial for developers. It's a skill that will allow you to quickly and efficiently find solutions to problems you will encounter while coding. Google has a vast amount of information that developers can utilize to improve their code, troubleshoot issues, and learn new skills. By mastering the art of googling, developers can save time and effort, and become more effective in their work. It's important to know how to use search operators, filter results, and refine search queries to get the most relevant and useful results.

When it comes to community forums, it's important to be precise in your search and make use of filters to find the most relevant information. Checking for accepted answers can also help you identify the best responses. Additionally, looking for related questions and reading the comments can provide additional insights and clarifications.

Once you have exhausted your search and are still unable to find a solution to your problem, then you can post your question. It's important to be specific and provide a detailed explanation of the problem when seeking help, this will make it easier for others to understand and provide an answer.

Programming Stack

Stack refers to the technologies used to build a website or application. Here, we will list the fundamental and most important technologies for both back-end and front-end developers.

Front-end

I've already covered the basics, which include HTML, CSS, and JavaScript. However, other tools can be used, such as the JavaScript frameworks Vue and React, or the CSS framework Tailwind. React and Vue are two popular frameworks that help developers build complex web applications. Tailwind is a CSS framework that simplifies the design and styling of web pages by providing pre-built CSS classes.

Back-end

As a back-end developer, you can use PHP, Laravel, and MySQL. These technologies form the modern stack for back-end development. PHP is a popular programming language that's often used for server-side scripting, while Laravel is a framework built on top of PHP that makes it easier to develop web applications. MySQL is a powerful open-source relational database management system, which is commonly used to store data. It's important to note that while these are popular options, there are other technologies available as well. Personally, I prefer the Laravel stack due to its large infrastructure and community, as well as its ease of use.

Full stack

If you want to combine both front-end and back-end development, you will need to learn all of the technologies listed above

Setup

In nearly all courses, you'll typically encounter a setup process at the start, which involves getting all the necessary tools ready for your computer. While I won't go into too much depth, I'll provide an overview of the recommended approach for each system.

Windows

When starting with web development, I recommend using Laragon, an all-in-one solution for backend development with PHP, Laravel, MySQL, and other necessary tools for Windows. For frontend development, you generally don't need to set up anything specific as HTML, CSS, and JS run directly in the browser. As you advance, I suggest using WSL2, which offers all the advantages of a Linux operating system on your Windows PC.

Mac

For Mac users, Valet is an excellent option for local backend development, providing a fast and easy-to-use local environment with all the necessary tools. It requires installing some dependencies via Homebrew, but it's a straightforward task.

Linux

For Linux, in most cases, you will need to manually add all dependencies using apt-get or Homebrew and manage to use them together.

Docker

While Docker provides a universal approach to setup on all platforms, it's not the easiest for beginners in some cases. However, it's worth mentioning for the future as it offers several advantages, such as efficient resource utilization, portability, and the ability to isolate and manage application dependencies.

Additionally, to get started, you'll need an IDE. As I've already mentioned them, feel free to install the one that suits you best. Here are some installation links: PhpStorm, VS Code, Sublime Text.

After all of this setup, you'll be ready to write your first Hello World program, which outputs the "Hello World" text to demonstrate that it runs in PHP and/or JS. The phrase has become a standard for programmers because it's an easy way to verify that their development environment is correctly set up and functioning.

Sources to learn

Numerous resources are available to you, including official documentation, blogs, and online learning platforms such as Udemy, Coursera, w3schools, and Codecademy. However, if you prefer more specialized tutorials, I recommend checking out websites like Laracasts for PHP, MySQL, Laravel, JS, and Vue, or Kencdots and Egghead for JS, CSS, and React. Each platform offers varying types of content, so select the one that best suits your learning style and needs, and focus on one source at a time for easier concentration. I suggest starting with Laracasts' PHP for Beginner course for the back-end. For front-end development, begin with an HTML course, CSS course, and JS course.

Start with free programming resources because it provides numerous benefits. It will allow you to gain a solid understanding of programming concepts, explore different languages and tools, and assess your interest before investing in premium resources. The only scenario where paying from the beginning may be beneficial is if you are the type of individual who requires financial investment to motivate yourself to take action.

Once you've chosen your preferred learning platform, it's time to dive in. Don't worry about achieving perfection right away; it takes time and practice to become proficient in web development. It's okay to make mistakes and ask for assistance. There are many online communities and forums where you can seek guidance and connect with other learners, such as Stack Overflow and Laracasts forum.

Outro

Learning how to code is a journey that demands patience, perseverance, and dedication. It's crucial to proceed step-by-step and not be discouraged by setbacks or challenges. If you struggle with a problem for an entire day, it's important to remind yourself that you're on the right track and that solving that problem will make you one step closer to your goal.

In this post, I provided a basic introduction to web development, what it is like to be a web developer, and the things you needed to know to become one. Keep an eye on KodeKrush, as I'll be posting more about how to get started as a web developer along with some in-depth posts exploring various aspects of this exciting field.