Skip to main content

HTML Basics

· 2 min read

Your First Step: HTML Basics​

HTML defines the structure of a webpage.

Example​

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello Frontend!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

🧪 Exercise​

  1. Create a file called index.html

  2. Add:

    • Your name as a heading
    • A short paragraph about why you want to learn frontend

  3. Open the file in your browser

🧪 Exercise - Lists​

Create a list of your favorite fruits and tasks:

<h2>My Favorite Fruits</h2>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<h2>Things to Do Today</h2>
<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Code a mini project</li>
</ol>

🧪 Exercise - Links & Images​

<h2>My Favorite Website</h2>
<a href="https://www.google.com" target="_blank">Visit Google</a>

<h2>My Favorite Pet</h2>
<img src="https://placekitten.com/200/200" alt="Cute Kitten">

🧪 Exercise - Forms & Input​

<h2>Sign Up Form</h2>
<form>
  Name: <input type="text" placeholder="Enter your name"><br><br>
  Email: <input type="email" placeholder="Enter your email"><br><br>
  <button type="submit">Submit</button>
</form>

✅ Goal: Understand how structure appears in the browser

If you want to learn other concepts in HTML, below is the link from MDN.

MDN HTML Tutorials — structured from beginner basics to advanced topics, with examples and explanations. HTML guide (MDN) https://developer.mozilla.org/en-US/docs/Web/HTML