Author: Michal Szymanski
Free live lesson
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.
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.
<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 .
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.
Previous lesson Next lesson
Spread the word: