learn HTML Editors

Start Writing HTML Using Notepad (PC) or TextEdit (MAC) or Visual Studio Code

tip: Using Visual Studio Code is recomended!

You can create web pages using many options However, we recommend Visual Studio Code for PC or TextEdit for Mac.

But feel free to use any editor. Follow the steps below to create your first web page with Visual Studio Code Notepad or TextEdit, follow our free web development courses to learn HTML

Part 1

Open Notepad (PC)

Windows 8 or later:

Click the Start button or type notepad in search box (the window icon at the bottom left of your screen).

Type or click Notepad.

html guide basics

Windows 7 or earlier:

Start > Programs > Accessories > Notepad

Open TextEdit (Mac)

  • Open the Finder > Applications > TextEdit
  • change preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
  • under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
  • open a new document to place the code.

tip: You don't need to open notepad and visual studio code, we just explain how to use both, but choose one.

Open Visual Studio Code

download it here for free:

It is easier to learn HTML using this code editor

Visual Studio Code

Install and run the programm

Part 2

Start writing HTML (Notepad)

write HTML in notepad

html guide

Save the HTML Page

Save this file on your computer,you can select file > Save as in the Notepad menu.

call the file "index.html" , set the encoding to UTF-8 (that is the preferred encoding for HTML files).

html guide

tip: When building complex websites, for example with categories and sub categories, make folders for each HTML template page, for example index.html or .php or any extension will be home page and you can put it in folder called homepage, create another folder for About us HTML file, or folder called img for photos and so on.

Example: (our folder for 12/13/2019 version)

(this method will save you alot of time, when your website gets bigger and you have many HTML files, also that will save you time when you upload your folder to hosting company server.

html guide

View the HTML Page in Your Browser

Open the saved HTML file in your browser (double click on the file, or right-click - and choose "Open with"). Should look like this:

html guide

Start writing HTML (Visual Studio Code)

1: Download Visual Studio Code

Visual Studio Code

2: Open it

3: Create new folder in desktop

4: In visual studio code click File >> Open folder

html guide

5: Open the folder you made in desktop

html guide

6: Open file inside your folder

7: Call it Index.html.

html guide

8: Type code.

html guide

9: Save: ctrl +s

tip: Always save your file before checking it in browser ,That way you won't get confused, when nothing changed, also if your computer shut down you will not lose your hard work.

10: Enable live server extansion so you can see your code in browser LIVE.

tip: The 5 extansion in the photo are very usafull, use them.

html guide

11: Right click >> Open with live server

html guide

12: Watch your code in the browser.

html guide

Now you have all the tools to start create any website.

Follow our tips for efficient coding.

today More than before, you can learn to code for free, FreeCodeWiki main goal is to allow students to learn HTML and other programming classes for free and easily.