Day2/180 of FrontendDev-What is HTML and Setting Up Your Development Environment

#frontend #frontendchallenge #webdev

What is HTML and Setting Up Your Development Environment

Welcome to Day 2 of the 180 Days of Frontend Development Challenge. Today, we’ll introduce you to HTML (HyperText Markup Language), the foundation of every website, and guide you through setting up a simple yet efficient development environment.

What is HTML?

HTML is the standard markup language used to create the structure of web pages. It consists of a series of elements (or tags) that define different parts of a webpage, such as headings, paragraphs, links, images, and forms.

HTML Elements are written with opening (<tag>) and closing (</tag>) tags, with content in between.
Attributes provide additional information about elements (e.g., href in <a href="..."> defines a link destination).

Example of a basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Why is HTML Important?

It defines the skeleton of a webpage.
Without HTML, browsers wouldn’t know how to display content.
It works alongside CSS (for styling) and JavaScript (for interactivity).

Setting Up Your Development Environment

Before writing HTML, you need the right tools. Here’s what you’ll need:

Text Editor (Where you write code)
- VS Code (Recommended) – Free, lightweight, and packed with extensions.
- Alternatives: Sublime Text, Atom, or Notepad++ (for beginners).
Web Browser (To view your webpage)
- Google Chrome or Firefox – Best for developer tools (Inspector, Console).
File Organization
- Create a dedicated folder for your projects (e.g., Frontend-180-Days).
- Inside, make a subfolder for each day (e.g., Day-2-HTML).
Your First HTML File
- Open VS Code, create a new file, and save it as index.html.
- Type the basic HTML structure above and save.
- Open the file in Chrome by double-clicking it or dragging it into the browser.