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

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.

Viewing Your Work

After saving changes in VS Code, refresh your browser to see updates.
Use Chrome DevTools (Right-click → Inspect) to debug and experiment.

Practice Exercise

Create an index.html file.
Add a heading (<h1>), a paragraph (<p>), and a link (<a href="...">).
Open it in your browser and verify it works.

Additional Resources

For a structured learning path, check out the "Get to Learn Frontend Development in 180 Days" ebook:

📖 Download Here

What’s Next?

Tomorrow, we’ll dive deeper into HTML Elements and Attributes, exploring more tags and their uses.

Keep experimenting, and see you on Day 3!

(Tip: Consistency beats intensity—spend at least 30 minutes practicing today.)

CodeWithDhanian @code_2