HTML EDITORS

All you need is just a simple text editor to learn HTML. Web pages are created with this simple code editor or text editor as it's famously known. You can use Notepad or Visual Studio Code as a text editor. In this tutorial, we are going to be using visual studio as our text editor.

Note in this tutorial it will be wise to use Google Chrome to display our content. So, I suggest you download it here is if you don’t already have it.

Step 1 - Download You can visit the official visit google for the visual studio code editor here.

Step 2 - installation Launch the program once you have downloaded them and install with default settings (just keep clicking next until it says finish. Then don’t forget to click the finish).

Step 3 Creating your first HTML page

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

2. Close the “Welcome” tab

3. Create a new file by clicking “file” and “new file”

4. Write the code below on your text editor

html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

5. Save the file by clicking the “file” and “save as”

6. Give a name to your file. For example, “index” (whatever you wish to call it) and from the option choose “HTML”. Then click the “save” button.

7. Open the saved HTML file in your chrome browser by doubling clicking, or right-click and choose “open with – chrome”

Congratulations! you have created your first web page.

Conclusion

In this article, we discussed installing an Editor to write your codes in, creating and saving an HTML file, and running the newly created file in your browser.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Html 5 Basic Tag Example

HTML File path, Charset and Meta