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

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
  1. HTML Basics #1: Elements and Attributes
  2. HTML Basics #2: Block and Inline Level Elements
  3. HTML Basics #3: Media Files and Graphics
  4. HTML Basics #4: Forms
  5. HTML Basics #5: Symbols and Charset
  6. CSS Basics #1: First Steps
  7. CSS Basics #2: Some Basics Components
  8. CSS Basics #3: Position, Overflow and Alignment
  9. CSS Basics #4: Grid System and Responsive Design
  10. CSS Basics #5: Some Advanced Topics

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 #1: Syntax and Program Structure
  2. JavaScript Basics #2: Functions
  3. JavaScript Basics #3: Arrays and Objects
  4. JavaScript Basics #4: Object-Oriented Programming
  5. JavaScript Basics #5: Regular Expressions
  6. JavaScript Basics #6: The Document Object Model
  7. JavaScript Basics #7: Handling Events
  8. JavaScript Basics #8: Drawing on Canvas
  9. JavaScript Basics #9: Network and HTTP
  10. JavaScript Basics #10: Node.js

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 #1: Introduction
  2. Vue.js #2: Template Syntax
  3. Vue.js #3: Event Handling, Form Input Bindings and Style Bindings
  4. Vue.js #4: Data Options and Lifecycle Hooks
  5. Vue.js #5: Components

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
  1. Create A Portfolio Website: Part One
  2. Create A Portfolio Website: Part Two
  3. Create A Portfolio Website: Part Three
  4. Create A Portfolio Website: Part Four

Now, it is time for us to talk about the back-end. 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 Tutorial #1: Setup the Project
  2. Laravel Tutorial #2: Route and Middleware
  3. Laravel Tutorial #3: Views and Blade Templates
  4. Laravel Tutorial #4: Database and Models
  5. Laravel Tutorial #5: Database Relations and Controllers
  6. Laravel Tutorial #6: Home Page
  7. Laravel Tutorial #7: Create Models and Setup Admin Panel
  8. Laravel Tutorial #8: Create Routes, Controllers and Views
  9. Laravel Tutorial #9: Wrap Things Up
  10. Laravel Tutorial #10: Deployment
• Django for Beginners
  1. Django Tutorial #1: Setup the Project
  2. Django Tutorial #2: URL Configuration
  3. Django Tutorial #3: The Model Layer
  4. Django Tutorial #4: The View Layer
  5. Django Tutorial #5: The Template Layer
  6. Django Tutorial #6: Home Page
  7. Django Tutorial #7: Models and Admin Panel
  8. Django Tutorial #8: Views and Templates
  9. Django Tutorial #9: Wrap Things Up
  10. Django Tutorial #10: Deployment