Beginner’s Roadmap to Web Development

You can download the source code for this tutorial here.

In this beginner’s guide to web development, I’ll try to explain the basics of web development using simple examples. Before we start, let’s first talk about some fundamental concepts of the Web.

The World Wide Web, commonly known as the Web, is an information and resource sharing system consisting of servers and clients, who are connected together by hyperlinks. The documents and resources of the Web are requested by the browser and then transferred via the Hypertext Transfer Protocol (HTTP), which can then be displayed in the browser.

• Introducing the World Wide Web

Let’s start by talking about the frontend

The HyperText Markup Language (HTML) is the most fundamental component of the web. It defines the structure and content of every web page. Generally, other technologies are used alongside, CSS, for example, can be used to describe the page’s appearance, and JavaScript can be used to define the web page’s behaviour and make it more interactive with the user.

• HTML Basics #1
• HTML Basics #2
• CSS Basics #1
• CSS Basics #2
• CSS Basics #3

JavaScript is the first programming language we are going to introduce. It was created in 1995 as a way to add programs to web pages in the Netscape Navigator browser. Today the language has been adopted by all the other major web browsers.

• JavaScript Basics #1
• JavaScript Basics #2
• JavaScript Basics #3
• JavaScript Basics #4
• JavaScript Basics #5

Vue.js is a very beginner-friendly front-end JavaScript framework. It’s a good place to start if you are interested in becoming a front-end engineer. The core library of Vue focuses on the view layer only, which is the part that the users can see. That is also why the author named the framework Vue (pronounced like view).

• Vue.js for Beginners #1
• Vue.js for Beginners #2

Before we move onto the backend section of this tutorial, let’s use what we’ve learned so far, and create a portfolio website.

• Create a Portfolio Website

About the backend

Now, it is time for us to talk about the backend. You have two choices, if you prefer PHP, you can go with Laravel. A lot of people have criticisms for PHP, but regardless, it is still the dominant language in the field of web development. And I personally think Laravel is a very powerful and easy-to-use framework. However, if you are more comfortable with Python, you can follow the Django tutorial instead.

Laravel for Beginners

• Laravel for Beginners #1

• Laravel for Beginners #2

• Laravel for Beginners #3

• Laravel for Beginners #4

• Laravel for Beginners #5

Compared to Laravel, Django has both some advantages and disadvantages. For instance, Django is based on Python, a very popular programming language, which means there are a lot of different packages that perform all kinds of different tasks, and unlike Laravel, Django has a very powerful built-in admin panel, which we’ll discuss in detail later…

Django for Beginners

• Django for Beginners #1
• Django for Beginners #2
• Django for Beginners #3
• Django for Beginners #4
• Django for Beginners #5
• How to Deploy a Django Project

Join the frontend and the backend

Finally, in the last section of this tutorial, we’ll join the frontend and the backend to create a modern single-page application.

• Create a Modern Application with Django and Vue #1
• Create a Modern Application with Django and Vue #2
• Create a Modern Application with Django and Vue #3