HTML Setup & Getting Started

Table of Contents +

Now that you understand what HTML is in previous post, now you will set up your development environment and create your very first HTML page!

🛠️ What You Need to Get Started

Before you start coding, you need to set up a few essential tools:

  1. A Code Editor - Where you’ll write your HTML code
  2. A Web Browser - To see your HTML pages
  3. A Folder - To organize your HTML files

💡 Good News!

You probably already have a web browser on your computer, so you’re halfway there! The setup is really simple and quick.

📝 Choosing a Code Editor

While you could write HTML in basic text editors like Notepad or any built-in editor that comes with your operating system but if you use a proper code editor it will be much more easy to write HTML code. Because code editors provide helpful features like below:

  • Syntax highlighting - Code editors automatically color different parts of your code for better readability
  • Indentation - It helps you keep your code organized and easy to read
  • Auto-completion - The editor automatically suggests HTML tags as you type in them
  • Error detection - It helps you spot mistakes before you test your page like missing end tags or unclosed quotes
  • Extensions - You can add extra features like live previews, formatting, and more in your code editor

🌟 Recommended Code Editors

  1. Visual Studio Code (VS Code) - Most Popular Choice

    • Free and made by Microsoft
    • Download from code.visualstudio.com
    • Works on Windows, Mac, and Linux
    • Has thousands of helpful extensions

  2. Sublime Text - Lightweight and Fast

    • Very fast and responsive
    • Download from sublimetext.com
    • Free to try, one-time purchase

  3. Atom - Hackable Text Editor

    • Free and open-source
    • Highly customizable
    • Download from atom.io

🎯 Our Recommendation

You’ll use Visual Studio Code throughout this course because it’s free, popular, and it comes with excellent HTML support out of the box!

🚀 Installing Visual Studio Code

Visual Studio Code (VS Code) is a powerful code editor that will help you write HTML easily. Let’s install it step by step:

  1. Download VS Code

    • Go to code.visualstudio.com
    • Click the big “Download” button
    • Choose your operating system (Windows, Mac, or Linux)

  2. Install VS Code

    • Run the downloaded installer
    • Follow the installation wizard (default settings work great)
    • On Windows, check “Add to PATH” if asked

  3. Launch VS Code

    • Open VS Code from your applications/programs menu
    • You should see a welcome screen with tips and tutorials

  4. Install HTML Extensions (Optional but Recommended)

    • Click the Extensions icon in the sidebar (looks like building blocks)
    • Search for and install:
      • “HTML CSS Support” - Better autocomplete suggestions for HTML and CSS
      • “HTML Snippets” - Provides useful HTML code snippets
      • “Live Server” - Preview your HTML pages instantly
      • “Prettier” - Automatically formats your code nicely

🌐 Choosing a Web Browser

You’ll need a modern web browser to view and test your HTML pages. Here are the best options for web development:

  • Google Chrome - Most popular, excellent developer tools
  • Mozilla Firefox - Great privacy features and developer tools
  • Microsoft Edge - Fast and modern, built-in on Windows
  • Safari - Default on Mac, good for testing

💡 Pro Tip

Most developers use Google Chrome for testing because it has the best developer tools, but it’s good to test your websites in multiple browsers to ensure they work everywhere!

📁 Creating Your Project Folder

Let’s create a dedicated folder for your HTML learning projects:

  1. Create a Main Folder

    • On your desktop or Documents folder, create a new folder
    • Name it something like html-learning

  2. Create Your First Project Folder

    • Inside your main folder, create another folder
    • Name it demo-1

  3. Open in VS Code

    • Open VS Code
    • Go to File > Open Folder
    • Select your demo-1 folder
    • Click “Select Folder” or “Open”

🎉 Creating Your First HTML Page

Now for the exciting part - let’s create your very first HTML page!

  1. Create a New File

    • In VS Code, click File > New File
    • Or use the keyboard shortcut: Ctrl+N (Windows/Linux) or Cmd+N (Mac)

  2. Save the File

    • Press Ctrl+S (Windows/Linux) or Cmd+S (Mac) to save
    • Name your file index.html
    • Make sure it ends with .html - this tells the computer it’s an HTML file

  3. Write Your First HTML Code Type this code exactly as shown:

    <!DOCTYPE html>
    <html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>Welcome to my first HTML page!</p>
        <p>I'm learning HTML and this is so exciting! 🎉</p>
    </body>
    </html>

  4. Save Your Work

    • Press Ctrl+S (Windows/Linux) or Cmd+S (Mac) to save your changes

🌟 Viewing Your Webpage

Now let’s see your creation in action!

If you installed the Live Server extension:

  1. Right-click on your index.html file in VS Code
  2. Select “Open with Live Server”
  3. Your webpage will automatically open in your default browser
  4. Any changes you make will update automatically!

Method 2: Opening Manually

  1. Find your file in your computer’s file explorer
  2. Double-click on index.html
  3. It should open in your default web browser
  4. To see changes, save your file and refresh the browser page

🎊 Congratulations!

You’ve just created and viewed your first HTML webpage! You should see a page with a big heading saying “Hello, World!” and two paragraphs below it.

🏁 What’s Next?

Now that you have your development environment set up and your first HTML page created, you’re ready to dive deeper into HTML! In the next lessons, you’ll learn about HTML elements, attributes, and how to structure your webpages effectively.

Previous Introduction to HTML Next HTML Elements and Tags

Share & Connect

Share on LinkedIn