Beginner’s Roadmap to Web Development

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.

You can download the source code for this tutorial here: Download the Source Code

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 World Wide Web.

Introducing the World Wide Web

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 & CSS Basics

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

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 #1

Laravel for Beginners #2

Laravel for Beginners #3

Laravel for Beginners #4

Laravel for Beginners #5

Django for Beginners #1

Django for Beginners #2

Django for Beginners #3

Django for Beginners #4

Django for Beginners #5


comments powered by Disqus