This article will cover all that I have learnt so far as regards web development. I hope this article helps a beginner there to decide what they intend to do.

Sit back, plug in your ear pods let's cruise at the journey of web development.

Introduction

These are the lists we will cover in this article

1. What programming entails.
2. The various types of programming languages.
3. Frontend Development.
4. Backend Development.
5. Difference between Frontend and Backend.
6. Basic Tools Used for Web Development.
7. Useful resource for software specifically for web developers.

What is Programming?

According to Khan Academy,

Programming is the process of creating a set of instructions that tell a computer how to perform a task. Programming can be done using a variety of computer programming languages, such as JavaScript, Python, and C++.

To keep it short, programming is a process of writing code. Computer coding is the use of computer programming languages to give computers and machines a set of instructions on what actions to perform. A machine cannot think on its own since it is inanimate except it has been acted upon, that is, instructed to do so. These sets of instructions may be referred to by various names. Now, the collection of instructions that can be executed by a computer to perform a specific task is a computer program. A program can be anything that is written with code either websites, mobile apps, calculator etcetera.

Various types of programming languages

A programming language is a formal language comprising a set of instructions that produce various kinds of output. Programming languages are used in computer programming to implement algorithms. Most programming languages consist of instructions for computers. Programming language can be seen this way

From the illustration above, we can see how the trend is: Human Code -> Compiler -> Machine Code. Now, let me briefly explain the classification of programming languages. There are types of programming languages some say 2 some say 3, well this depends on how you see it but I'd use the 2 types of programming language to swiftly explain. These types are:

1. High-Level Language
2. Low-Level Language

High-Level Language

Examples of languages found in this category are Python, C, C++, SQL (pronounced as sequel) Java and so on. These languages are independent of hardware. It can either be translated using an interpreter or compiler. However, what makes high-level languages popular is their readability and support. JavaScript is considered a high-level language.

Low-Level Language

An example of language found here is Assembly language and Machine Code. It is translated using an assembler and translates binary code produced either by a compiler, interpreter or assembler respectively.

Now, the programmer uses for instance high-level language to write code so the computer understands. Let's use this example, you speak French and you aim to speak to an English speaking person, definitely, you need someone to interpret the French language you speak so the English speaking person could understand you that's the same case in a programmer communicating to a computer. The programmer needs to learn the language that can aid a computer to understand what has been commanded that's why you hear stuff like,

Oh boy! I have to learn PHP today.

Learning a programming language is a skill one needs to acquire 'cause the tech industry is growing day by day.

Human -> Human Code(Python) -> Compiler -> Machine Code (what the computer understands i.e 0s & 1s)

The following code illustrates the difference between a high-level language with JavaScript and a low-level language with assembly code.

const user = {
  name: "John Doe",
  age: 23,
};

console.log(user)

// console {name: "John Doe", age: 23}

area ascen,code,readonly
 entry
 code32
 adr r0,thumb+1
 bx r0
 code16
thumb
 mov r0,#00
 sub r0,r0,#01
 mov r1,#01
 mov r4,#10
 ldr r2,=0x40000000
back add r0,r1
 str r0,[r2]
 add r2,#04
 mov r3,r0
 mov r0,r1
 mov r1,r3
 sub r4,#01
 cmp r4,#00
 bne back
 end

Wow! I think I won't dream of being a web developer if there was no high-level language.

Front-end Development

The term “Frontend” means for short “client-side”. It is regarded as a frontend because it deals with what you can see on your web browser (Google Chrome, Opera, Mozilla etc). Frontend development requires the languages HTML5, CSS3 and JavaScript.

Back-end Development

The term “Backend” means for short “server-side”. It is regarded as a backend because you can’t really see, but it handles a lot of the logic and functionality that is necessary for everything to work. Backend development requires the languages PHP, Java, C++, Python and so on.

Difference between Frontend and Backend

Let take a look at it this way,

The front-end part is the beautiful part while the backend is ......(I refuse to say it). In short, the frontend is what you can see while on the backend you can't see it.

Basic Tools Used for Web Development

Just as a farmer needs his tools to cultivate likewise a developer needs his tool to develop too. The basic tools used in web development are

1. Editors
2. Browsers
3. Version Control
4. Documentation

Editors Editors are where you write your code and sometimes where you will run your code.

Reasons we need Editor

• Extensions and Integrations: These basically are additions that are specialised for web developers. They serve as additions to the already feature found in the code editor.

• Debugging: As a developer, you will be prone to errors. Debugging is one aspect of web development that can frustrate some developers including myself. In order to minimise errors, we make use of code editors.

• Syntax highlighting: Adds colours and text formatting to code, make it easier to read. Most editors allow customized syntax highlighting.

Here are some popular code editor used by web developers today

1. VS Code: Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.
2. Atom: A text editor is at the core of a developer's toolbox, but it doesn't usually work alone ... It runs on Electron, a framework for building cross-platform apps.

Browsers A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web (WWW). Many browsers come with developer tools (DevTools) that contain a set of helpful features and information to assist developers to collect and capture important insights about their application.

Here are some popular browsers used by web developers today

• Google Chrome
• Firefox Browser
• Edge

Version Control Version 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 change if you make a mistake.

The most popular version control system is an open-source system called Git. Using Git, you can store all your files and their change history in collections called repositories.

Documentation Whenever a developer tends to learn something new some go to the language's documentation to read everything about the language.

Popular Documentation on Web Development

1. Mozilla Developer Network
2. Frontend Masters

There are more. You can check them out on Google.

Useful resource for software specifically for web developers

I have compiled a list on my GitHub for beginners. I believe this repository will be of help to you.

Click here

Thanks for taking the time to read this. Kindly give me a clap for this and share it with your friends and family. On this point, I say Voila!