# Html Editors

**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 editors as its 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.

[![AD-BANNER](https://cdn.hashnode.com/res/hashnode/image/upload/v1623431084639/BwvoiOM_f.jpeg align="left")](https://res.cloudinary.com/practicaldev/image/fetch/s--c1kDWjYV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41meil9ho9yx2ulb535m.png)

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

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

**Step 2** - installation Launch the program once you have downloaded them and install it 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

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

# My First Heading

My first paragraph.

**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-clicking and choosing “open with – chrome”

Congratulations! You have created your first web page.

### Create Stunning Websites and Web Apps

Building different custom components in React for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

[![Contrast Design Boostrap](https://cdn.hashnode.com/res/hashnode/image/upload/v1623431086243/H3_p8TRHX.jpeg align="left")](https://res.cloudinary.com/practicaldev/image/fetch/s--HmPIBlKY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, a prelaunch, etc project with a clean, well-documented, well-crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro)

### **RESOURCES**

[**Introduction to CSS Animation**](https://www.devwares.com/blog/css-animations/)

[**CSS Colors, Backgrounds, Borders, Margins and Padding**](https://www.devwares.com/blog/css-colors/)

[**CSS Combinators**](https://www.devwares.com/blog/css-combinators/)

[**CSS Flexbox**](https://www.devwares.com/blog/css-flexbox/)

[**CSS Fonts**](https://www.devwares.com/blog/css-font/)

[**CSS Grid**](https://www.devwares.com/blog/css-grid/)

[**CSS Height And Width**](https://www.devwares.com/blog/css-height-and-width/)

[**Tutorial: CSS Icons**](https://www.devwares.com/blog/css-icons/)

[**Tutorial: CSS Pagination**](https://www.devwares.com/blog/css-pagination/)

[**CSS Syntax and Selector**](https://www.devwares.com/blog/css-syntax-and-selector/)

[**CSS Text and Layout**](https://www.devwares.com/blog/css-text-and-layout/)

[**Full Website Layout**](https://www.devwares.com/blog/css-website-layout/)

[**Introduction to CSS**](https://www.devwares.com/blog/css-tutorial-1/)

[**Differences Between Tailwind CSS and Bootstrap**](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

[**Differences between Tailwind CSS and SASS**](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

[All you need to know about Html Elements](https://www.devwares.com/blog/html-element/)

[HTML File path, Charset and Meta](https://www.devwares.com/blog/html-file-path)

[Html 5 Formating](https://www.devwares.com/blog/html-5-formating/)

[Html 5 Layout](https://www.devwares.com/blog/html-5-layout/)

[Html 5 Basic Tags Example](https://www.devwares.com/blog/html-basic-tags-example/)

[Html Editors](https://www.devwares.com/blog/html-editors/)

[HTML Quotations and comments](https://www.devwares.com/blog/html-quotations/)

[Including JavaScript in your HTML project.](https://www.devwares.com/blog/html-javascript/)

[HTML Forms](https://www.devwares.com/blog/html-forms/)

[Creating Responsive HTML web design](https://www.devwares.com/blog/html-responsive/)

[HTML Tables, Classes and Ids](https://www.devwares.com/blog/html-table/)

[Introducing HTML](https://www.devwares.com/blog/introduction-to-html/)