Code editors


Web pages can be created and modified by using professional code editors or a simple notepad.

I strongly recommend starting using the professional editor as soon as possible.

In this tutorial, I will show you how to download, install and use Visual Studio Code - a free and powerful code editor from Microsoft.

Note: For the purpose of this tutorial, I recommend to use Google Chrome browser. If you already use it you don't need to do anything, but if you don't - use the link below to download and install it.

Download Google Chrome

Step 1 - download

Go to official Visual Studio Code website and download the program.

Official Visual Studio Code website

Step 2 - installation

Launch the installation program and install it with all of the default settings (that means - click "next" until it gets installed :) )

Step 3 - creating the first HTML document

1. Click on the icon of the installed program and run it.

2. Close the "Welcome" tab.

3. Create a new file by clicking "File" and then "New file".

4. Copy the code below and paste it to the newly created file.


              <!DOCTYPE html>
              <html>
                <body>
              
                  <h1>My First Heading</h1>
                  <p>My first paragraph.</p>
              
                </body>
              </html>
            

5. Save the file by clickin "File" and then "Save As".

6. Name the file "Test" (or use whatever name you want) and from the options choose option "HTML". Then click "Save" button.

7. Drag the saved file to the browser window and drop it.

8. After dropping the file the browser will render the content of the HTML file.

Congratulations! You have created your first HTML document.


MDB online code editor

Apart from Visual Studio Code, you can also use MDB Online Code editor.

Let me explain what is it and how to use it.

This tutorial contains hundreds of code examples.

Like this:


                <h1>My First Heading</h1>
                <p>My first paragraph.</p>
              

You can test and modify every example on your own, by using MDB code editor.

Click on the button .

Then click

MDB code editor will be launched in the new tab.

In this area marked on the red is your source code. You can modify and play with it.

In the area marked on the blue is the result of your code - if you change your code this result will also change.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.