HTML For Humans Course — Mayank Basena

01

Tags, Elements & Your First Webpage

HTML documents are made of tags. <tagname> opens, </tagname> closes. It's like Tupperware for text.

🧠 Note for the confused:
HTML is the skeleton of every webpage. It's not a programming language (don't let anyone tell you otherwise). It's just a way to say 'this is a heading, this is a paragraph, this is a picture of my cat.' Even your grandma could learn it.

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first website. I feel powerful.</p>
  <!-- Comments look like this -->
</body>
</html>

02

Text, Links & Images

<h1> to <h6> for headings. <a> for links. <img> for pictures. The internet's holy trinity.

🧠 Note for the confused:
HTML tags are like Tupperware lids. Every opening tag <p> needs a closing tag </p>. Forget to close a tag and your webpage looks like it was designed by a toddler on caffeine.

<h1>Big Heading</h1>
<h2>Smaller Heading</h2>
<p>A <strong>bold</strong> paragraph with <em>fancy</em> text.</p>

<!-- Links -->
<a href="https://google.com">Click me (go to Google)</a>
<a href="page2.html">Relative link</a>

<!-- Images -->
<img src="cat.jpg" alt="A cute cat">
<img src="https://placekitten.com/200/300" alt="Internet cat">

<!-- Lists -->
<ul><li>Unordered</li><li>List</li></ul>
<ol><li>Ordered</li><li>List</li></ol>

03

Divs, Spans & The Layout Lie

<div> is a box. <span> is an inline box. Web design is just putting boxes inside boxes inside boxes. It's boxes all the way down.

🧠 Note for the confused:
Links and images are what make the internet interesting. <a> takes you places. <img> shows you things. Without them, the internet is just... text. Like a library made of only dictionaries.

<div style="background: #f0f0f0; padding: 20px;">
  <h2>Profile Card</h2>
  <div style="display: flex; gap: 20px;">
    <img src="avatar.png" alt="Avatar" width="80">
    <div>
      <h3>Mayank Basena</h3>
      <p>Age: 15 <span style="color: gray;">(probably)</span></p>
      <p>Skills: HTML, CSS, <span style="font-weight: bold;">sarcasm</span></p>
    </div>
  </div>
</div>

04

Forms: How The Internet Asks Questions

<form>, <input>, <button>. This is how you get data FROM users. Sometimes they even give you real data.

🧠 Note for the confused:
Forms are how you get information FROM your users. Input fields, buttons, dropdowns. It's like asking questions and getting answers. Except sometimes the answers are 'asdfghjkl' because people are weird.

<form action="/submit" method="POST">
  <label>Name: <input type="text" name="name" placeholder="Enter name"></label><br>
  <label>Email: <input type="email" name="email" required></label><br>
  <label>Password: <input type="password" name="pass"></label><br>
  <label>Age: <input type="number" name="age" min="0" max="150"></label><br>
  <label>
    Country:
    <select name="country">
      <option value="in">India</option>
      <option value="us">USA</option>
      <option value="uk">UK</option>
    </select>
  </label><br>
  <label><input type="checkbox" name="agree"> I agree to nothing</label><br>
  <button type="submit">Send It!</button>
</form>

05

HTML5: The Future (From 2014)

Video, audio, canvas, semantic tags. HTML5 is what makes modern web apps possible. Also the reason your browser can play YouTube without Flash.

🧠 Note for the confused:
HTML5 is the modern version with all the cool toys. <video>, <audio>, <canvas>. It's like HTML went to the future and brought back souvenirs.

<!-- Semantic tags: robots can understand your page -->
<header>Site header</header>
<nav>Navigation links</nav>
<main>
  <article>
    <section>
      <h2>Chapter 1: The Button</h2>
      <p>He pressed it. Nothing happened. The end.</p>
    </section>
  </article>
  <aside>Sidebar with ads nobody clicks</aside>
</main>
<footer>Copyright me. All rights reserved (like anyone was gonna steal this)</footer>

<!-- Native video (RIP Flash) -->
<video controls width="400">
  <source src="movie.mp4" type="video/mp4">
  Your browser is from the Stone Age
</video>

<!-- Canvas: draw stuff with JS -->
<canvas id="game" width="400" height="300"></canvas>