What is Web Development?

Quickly explained, Web Development is simply the process of creating webpages. It covers a wide variety of websites, including webapps. Webapps are just web pages enabled to function as an application.

Though with HTML, you can create the UIs of websites. Soon, as you progress, you will be able to add beauty, and functionality to website by applying CSS and JavaScript.

Which language for what?

HTML: Defines the interface of websites

CSS: Enables websites to have custom styles like colors, spacing, alignment, transitions, and a lot more.

JavaScript: Programming language. Used to add functionality to any website.

What's for me?

It greatly depends on what is your goal. If you want to get deep into web development, then you can start with HTML, and CSS and get deep into JavaScript and its libraries to create webapps.

If you just want to get some programming experience, then you can go with some HTML and directly jump onto JavaScript. Though in that case, using other programming languages might be better since JavaScript is kinda weird. You might need to get advices from other people if you are looking for programming languages. However, for me, I prefer older langauges to start with like C++, Java, etc. since they are more strict and may be more successful in teaching new concepts.

Getting started

Here are some instructions to get started with HTML, right from scratch:

Introduction to Code Editors

The software which you will need to edit and save your code. Code Editors are a personal choice. You could use something as simple as even Notepad, but that won't have any shortcuts to work with.

There's a difference between an IDE (Integraded Development Environment) and a simple code editor:

• IDE:

  An IDE is a software, which contains all related tools you need, to work with a specific development category. They aren't general purpose, and are only used for a specific category. They are bulkier but are rich in features, like:

  • Visual Studio: Used for a variety of languages like C, C++, C# and (probably) more. It is modular so it is able to be used in a variety of categories for programming.
  • Android Studio: For Android App Development.
  • IntelliJ Idea: Related to programming in Java.

• Code Editor:

  Simpler, lighter, faster, general purpose softwares built for programming. They don't come with much tools by default, but are handy for working with languages in which various tools aren't required, like HTML. A few of them are:

  • Sublime Text (ex-favourite): I've used it a lot, and recently switched over to VS Code:
  • VS Code (Visual Studio Code) (currently using)
  • And probably a lot more.

• I don't care, just tell me which one do I get:

  I've used both, Sublime, and VS Code, and can say that both are great. VS Code is actually more modular, but Sublime also doesn't stop there. Both have extension support, and have great set of shortcuts. if you are considering these two, then you can go with VS Code, but you are not limited to it; you can get any of them.

Code Editor shortcuts:

You should be aware of the shortcuts that your text editor provides at this point. They are in a large quantity, and you can never stop discovering new ones. The first shortcut that you need to know, which works in most editors, is the Ctrl + space hotkey.

This will trigger a popup box to open beside your text cursor, and will predict what you are trying to type. This is really helpful and accurate most of the time, and can also autocomplete stuff for you.

Sublime Text: If you are using Sublime Text 3, then hitting the tab key will autocomplete with the first value in the suggestion box. That means you won't need to open the suggestion box by pressing the Ctrl + space keys, when you are sure of the first option in the box.

Creating an HTML file

An oversimplified guide on how to create an HTML file. All you need to do is to create a text file and change its extension to .html. Here's how to do that:

1. Show File Name Extensions:

   First, make sure that the File Name Extensions option is turned on in the Windows Explorer:

   • Open the Windows Explorer
   • Go to the View tab on the top
   • Check the File Name Extensions option
   

2. Navigate to the desired directory, and create a text file there:

   Simple is that, open the folder, or go to the desktop if you want to start on the desktop. Then right click > New > Text Document to create a new text file.

   

3. Rename the created file accordingly:

   Now, after the dot (.) in the file name, you should see a .txt there. (If you don't, then you probably missed the first step) Replace the .txt with .html.

   For the left side of the dot, i.e. the file name, you can give it anything you like. Though, usually, the home page is called index so going with that will be a great start. i.e. change the name of the whole file name too index.html

   

4. Open the .html file:

   Now, you need this file open in both, your browser, and in your code editor.

   • For the browser: It's simple. Just double click the file and it will automatically open up.

   • For the code editor: Open your editor first. Then you can either drag the .html file and toss it into your editor, and the editor will automatically pick it up. Or you can right click on the .html file, then go to Open With > Choose another app, then select your code editor in the list (Make sure the Always use this app to open .html files is turned OFF). Your editor will open the file.

The browser window, is the output location for the code you edit. So each time you edit your code, you have to save the changes (Ctrl + S), and refresh the browser window to see the changes you made in action. You may need to repeat the last step each time you restart coding.

Writing the basic HTML Code

Now, with everything set up, it's time to write the basic HTML code. For anything you learn in HTML, you need to write the code in this guided way:

Looks overwhelming?

• Yes? Good, because it's supposed to. Not like it's hard, just that it looks big, but breaking it all down, it's absolutely simple.
• No? Then that's also fine. If you can see how simple this code is, then it would be easier for you to understand it too.

Shortcut to write this:

Type html, then open the sugggestions box by Ctrl + space, and then select the html option (html:5 option in VS Code). Then see the result. It will autocomplete with the same code as above (with some extra meta tags, which you can remove if you like).

Understanding the basic code:

Let's break down that huge pile of HTML lines into smaller parts:

• The <!DOCTYPE html> Part:

  This simply tells the browser that "Hey! I am an HTML Document, alright?". Your HTML code will work just fine without it, but behind the scenes, the browser struggles to understand what this file means, and applies stuff it understands. This can rarely result in unexpected behaviour. So, it's suggested to keep this instead of removing it.

• The html tag:

  This tag wraps all the HTML that you have to write. Simple.

  • The head part:

    A regular HTML document is made up of a head and a body. The head contains information that doesn't need to be printed into the webpage, like some metadata information, title, styles, link tags, the favicon, and more. For now, only the title tag is relevant.

    • The title tag:

      The title tag defines the title of the page. The title is visible in the browser, where the tabs are displayed, alongside the icon.

  • The body tag:

    The last tag in the list. This, being the opposite of the head tag, contains everything that needs to be displayed in the webpage. (Almost) All the HTML code that you will be taught, will go in this tag.

Now, you should be ready to type some HTML, with your cursor sitting in the body tag.