I hate it too when words like this are used in the same paragraph, Markdown 👇 vs. Markup 👆. Markdown - with the down at the end, is a specific type of Markup Language - with the up at the end. The particulars of the format aren't important, just know that there are multiple kinds of Markup Languages (not just HTML).

Now, if you have used Whatsapp, you would know that if you wanted to write a bold word, you start and end with an asterisk, like this:

In HTML, I would write a bold word like this: <b>bold word</b>.

Each Markup language uses its own rules to define blocks of text and assign formatting. HTML does this by using tags and elements.

What are HTML Tags?

HTML tags are special keywords surrounded by a pair of angle brackets <TAG>. Most tags come in pairs, with an opening and closing tag. The closing tag is the same as an opening tag with the addition of a forward slash. The closing bold tag looks like this: </TAG>.

Let us see how some tags affect the content in the browser.

Some tags, like the tag used to display an image, <img>, do not have a closing version. This is because you do not need to define an opening and closing to display an image, just a location of where the image can be found.

<img src="meme.gif">

The output of this would be an image, like the one shown below:

There are close to 100 HTML tags. You are not expected to remember all of them - instead, you are expected to use ChatGPT smartly. For example, I do not know how to add a heading to HTML Page. So, I can simply ask ChatGPT.

(You can also use Bard or any other AI of your choice). The point here is that you do not have to remember it all - because you can't. It is simply not possible.

What are HTML Elements?

HTML elements are individual components of HTML defined by HTML tags. At first glance, elements and tags can easily be mistaken for the same thing. But they are not. The key thing to remember is that elements are made up of tags, but tags are not made up of elements.

To help clarify, see the following examples of tags vs. elements.

Where tags are used to define the start and stop of an element, elements refer to both the opening and closing tag and everything in between. The elements that don't require a closing tag, like the <img> element, are called empty elements. In contrast, the elements that require an opening, as well as a closing tag, are known as container elements, like /p. Elements are the building blocks of a web page and are a concept that we will continue to revisit.

Till now what we have done is all work and no play.

We don't want to be dull, do we? So, from the next chapter onwards, we will not just be studying HTML, but coding in VS Code as well. See you there.

Your computer comes with what is called a text editor. A text editor is a program that edits text without adding "markup" like bold and italic. This is also known as plain text. Developers use text editors to assist in writing "code", which is plain text that describes a program.

A text editor is not the same as a word processor. A word processor, something like Microsoft Word or Open Office, adds styling to text (e.g., margins, font size, bold, italic, etc.). A text editor does not. When you write code, it's crucial that you do not use a word processor because the added styling will "corrupt" your code (it just won't work).

Technically, you could use your computer's default text editor to write code. However, because developers use their text editors so much, it shouldn't surprise you that they have developed fancy, sophisticated text editors for the sole purpose of writing code.

For this book, I am going to suggest you use the VSCode text editor. For several reasons: it's free, easy to navigate for beginners, and is a great first text editor that you can continue to use as you advance in Web Development.

You can download Visual Studio code from the URL “https://code.visualstudio.com/download” by selecting the right platform:

You can click any of the icons mentioned above, depending on the operating system for which you are planning to download the Visual Studio code editor.

Downloading VS Code in Windows

Firstly, download the Visual Studio Code installer for Windows. Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe). It will only take a minute.

Secondly, accept the agreement and click on next.

Then, click on “Create a desktop icon” so that it can be accessed from the desktop, and click on Next.

After that, click on the install button.

Finally, after installation is completed, click on the finish button, and the visual studio code will open.

By default, VS Code installs under C:\users\{username}\AppData\Local\Programs\Microsoft VS Code.

After the successful installation, let’s move to the next section to understand the various components of the User Interface of Visual Studio Code Editor.

Downloading VS Code in Mac

Follow the below steps(shown in gif file and mentioned in bullet points) to install the VS Code on macOS:

1. Download Visual Studio Code for macOS.

2. After clicking on the Mac option on the download site, it will download a zip file, as shown below:

3. Double-click on the downloaded zip to expand the contents. It will give a file, as shown below:

4. Drag “Visual Studio Code.app” to the “Applications” folder, so it is available in the “Launchpad.”

5. Double-click on the “Visual Studio Code” to open.

6. Add VS Code to your Dock by right-clicking on the icon to bring up the context menu and choosing Options => Keep in Dock.

After the successful installation, let’s move to the next section to understand the various components of the User Interface of Visual Studio Code Editor.

Components of Visual Studio Code

Visual Studio Code is a code editor at its core. Like many other code editors, VS Code adopts a standard user interface and layout of an explorer on the left, showing all of the files and folders you have access to. Additionally, it has an editor on the right, showing the content of the files you have opened. Below are a few of the most critical components of the VSCode editor:

VS Code comes with a straightforward and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse. Additionally, it allows access to the full context of your folder or project. The UI is divided into five areas, as highlighted in the above image.

1. Editor — It is the main area to edit your files. You can open as many editors as possible side by side vertically and horizontally.

2. SideBar — Contains different views like the Explorer to assist you while working on your project.

3. Status Bar — It contains the information about the opened project and the files you edit.

4. Activity Bar — It is located on the far left-hand side. It lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.

5. Panels — It displays different panels below the editor region for output or debug information, errors, and warnings, or an integrated terminal. Additionally, the panel can also move to the right for more vertical space.

VS Code opens up in the same state it was last in, every time you start it. It also preserves folders, layouts, and opened files.

This was all about Visual Studio Code. I know this chapter was a bit too boring for you. But please bear with me. The first chapter would definitely be boring, not because the concept cannot be made fun, but because it is innately easy.

But wait, what's a 'Noob' Web Developer, you ask? Hold onto your hats; this one's a hoot. 'Noob' Web Developers are a rare breed. They dive headfirst into web development with one noble goal: making a quick buck. Armed with YouTube and Udemy tutorials (no offense to our beloved YouTubers), they grasp the basics—HTML, CSS, JavaScript, and the MERN Stack—and suddenly believe they're job-ready. Reality check: Everyone and their grandmother is now mastering the MERN Stack. Companies won't be lining up to hire just another MERN enthusiast. Why? Is there a problem in the MERN Stack? Well... the problem is not in the MERN Stack itself but in the way it has been designed. MERN Stack has been designed to hide the complexities of stuff from the developer, leading to the developer doing rote learning without understanding what is going on behind the hood. What happens after is rote learning without true understanding, followed by desperate cries for help on Stack Overflow or ChatGPT whenever a challenge arises. This leads to no innovation. I am going to be very blunt - MERN Stack is killing innovation.

So how to not be a 'Noob' Web Developer? Well... the other kind of a Web Developer is a 'Sigma' Web Developer. He is passionate about technology and genuinely wants to learn. He does not delve much into frontend because ChatGPT can do that kind of stuff. He learns about the 'true' backend technologies - Spring Boot, Maven, Gradle, Docker, Prometheus, Gafana, etc. - these kinds of technologies do not hide complexities from the user. Worried it's too tough to be a 'Sigma'? Fear not! In this book, I will teach you these technologies from square one. Expect memes, real-world examples, guidance, and just a dash of humor to spice things up. By the end, you'll even conquer Data Structures and Algorithms, leaving you interview-ready.

So, what's the holdup? Let's dive in! Below, you'll find the table of contents—a roadmap to becoming a true 'Sigma' Web Developer:

The Ultimate RoadMap 👇

Section One: HTML

Chapter 1.1: The Burger Republic
Chapter 1.2: Setting up Visual Studio Code
Chapter 1.3: Actually Getting Started