Web Development for Absolute Beginners – Video 1 Notes

Course Context, Audience & Learning Philosophy

  • Series intended for absolute beginners; assumes zero prior experience with HTML, CSS, JavaScript or any other web-tech.
    • Advanced subscribers were advised to skip if already comfortable.
  • Each video in the series focuses on one major topic.
    • Video 1 = HTML only.
    • Later videos = CSS, JavaScript, deployment, hosting, domains, etc.
  • Instructor’s expectations and professional advice:
    • You cannot “learn HTML in 5 minutes”; be patient and enjoy continuous learning.
    • Hour-long tutorials are normal; impatience is a red flag for a developer career.
    • Even seasoned devs learn new things daily.

Tooling Requirements

  • Browser (any OS): Chrome strongly recommended; Firefox, Safari, Edge acceptable.
    • "Please, for God’s sake, don’t use Internet Explorer."
  • Text Editor: any editor with line numbers & syntax highlighting.
    • Demo uses Sublime Text 3 (cross-platform, free to try; nag screen without licence).
    • Alternatives mentioned: Atom, Visual Studio Code, Windows Notepad (discouraged).
  • Installation walkthrough: download from www.sublimetext.com, choose “Add to Explorer context menu”, install with defaults, launch.

First Local Project Setup

  • No special server needed for HTML testing.
  • File naming conventions:
    • Any HTML document ⇒ must end with .html.
    • Home page on a domain should be called index.html (default root file).
  • Exercise folder: HTML-Cheat-Sheet/ 
└─ index.html
    • Windows tip: uncheck “Hide extensions for known file types” to see .html.
  • Quick test cycle: type “Hello World” → Ctrl+S → double-click file → opens in browser.

What HTML Is / Is Not

  • HTML = HyperText Markup Language.
    • Markup, not a programming language (no logic, conditionals, loops, DB access).
    • Purpose: describe & structure content (headings, lists, images, forms…).
  • Comparison:
    • Programming languages (JavaScript, PHP, C, etc.) handle logic, databases, dynamic behaviour.
    • Importance: every website—no matter how advanced—outputs HTML to the browser.

Fundamental Document Skeleton

  • Minimal HTML5 stub (must be first line): 
  <!DOCTYPE html>
  <html>
    <head>
      <title>Page Title</title>
    </head>
    <body>
      …content…
    </body>
  </html>
  • Major regions:
    • <head>: non-visual metadata (title, meta tags, CSS links, script links).
    • <body>: visible markup rendered in the browser.
  • Historical doctypes: HTML 4 Strict/Transitional, XHTML – now obsolete; HTML5 doctype is simpler.

Tag Anatomy & Categories

  • General form: <tagname> content </tagname> (start/end pair).
    • Start = opening tag; End = closing tag; content in between.
  • Self-closing tags (no content): e.g. <br>, <img> (slash before > optional in HTML5).
  • Attributes: key-value pairs inside start tag, e.g. <a href="…" target="_blank">.
    • Quoted values; doubles quotes preferred.
  • Display types:
    • Block-level: starts on new line, stretches to full width. Examples: div, headings h1-h6, p, form, ul, table.
    • Inline: stays in current line, only as wide as content. Examples: span, a, strong, em, img.

Core Text Elements

  • Headings: h1 … h6 (descending default size).
    • Browser adds margin/padding automatically.
  • Paragraph: <p> – block element with default margin:1em 0;.
  • Line break: <br> – forces next line (inline but breaks flow).
  • Horizontal rule: <hr> – thematic break, renders a line.
  • Emphasis / semantics:
    • <strong> → bold by default (semantic importance).
    • <em> → italics by default (emphasis).
    • Replaces deprecated <b>/<i>.
  • Comments: <!-- this is a comment --> – ignored by browser.
  • Tag: <a> with href attribute.
    • Internal: href="about.html"
    • External: full URL href="http://google.com"
    • target="_blank" opens new tab/window (use for external links only).

Lists

  • Unordered list: 
  <ul>
    <li>Item 1</li>
    …
  </ul>
  • Default bullets (list-style-type:disc).
    • Ordered list: replace <ul> with <ol> → numbered items.
  • Both accept unlimited <li> children.
  • Common nav bars are styled unordered lists.

Tables (Tabular Data Only!)

  • Structure example:
  <table>
    <thead>
      <tr><th>Name</th><th>Email</th><th>Age</th></tr>
    </thead>
    <tbody>
      <tr><td>Brad</td><td>br@something.com</td><td>35</td></tr>
      …
    </tbody>
  </table>
  • Old practice of using tables for page layout is discouraged ("very 1999").
    • Modern layouts rely on CSS (Flexbox, Grid, floats, etc.).

Forms & Inputs (Presentation-only Phase)

  • <form> attributes:
    • action="process.php" – server endpoint.
    • method="post" or get – HTTP verb.
  • Common form controls:
    • Text field: <input type="text" name="firstName">
    • Email field (HTML5): <input type="email" …> provides basic validation.
    • Number: <input type="number" value="30"> with spin-buttons.
    • Date picker (HTML5): <input type="date">.
    • Textarea: <textarea name="message"></textarea> (multi-line).
    • Select list:
      html <select name="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select>
    • Submit button: <input type="submit" value="Submit">.
    • Generic clickable button (needs JavaScript): <button>Click Me</button>.
  • Placeholder attribute (HTML5) supplants old JavaScript tricks for inline hints.

Images

  • Syntax: <img src="images/sample.jpeg" alt="My sample image"> (self-closing).
    • alt text shows if file missing or for screen readers (accessibility!).
    • Optional width & height attributes (generally set via CSS for responsiveness).
    • Images are inline; line breaks may be added around them as needed.
    • You can wrap an <a> tag around <img> to make clickable thumbnails.

Quotations & Citations

  • <blockquote> – for long quotes; supports cite="URL" attribute.
  • <abbr> – abbreviation with title tooltip. Example: <abbr title="World Wide Web">WWW</abbr>.
  • <cite> – marks citation titles, automatically italics by default.

HTML5 Semantic Layout Tags

  • Purpose: add meaningful structure for browsers, devs, accessibility & SEO.
  • Key tags and typical usage:
    • <header> – site or section banner, logo, hero.
    • <nav> – primary or secondary navigation menus.
    • <section> – thematic grouping of content.
    • <article> – self-contained composition (blog post, news item).
    • <aside> – tangential or sidebar content.
    • <footer> – closing material (copyright, contact links).
  • Example scaffold (created as blog.html):
  <!DOCTYPE html>
  <html>
  <head>
    <title>My Blog</title>
    <meta name="description" content="Awesome blog by Traversy Media">
    <meta name="keywords" content="web design, blog, web dev blog">
  </head>
  <body>
    <header id="mainHeader"><h1>My Website</h1></header>

    <section>
      <article class="post">
        <h3>Blog Post 1</h3>
        <small>Posted by Brad on July 17</small>
        <p>…lorem ipsum…</p>
        <a href="post.html">Read More</a>
      </article>
      <!-- duplicate article blocks -->
    </section>

    <aside>
      <h3>Categories</h3>
      <nav>
        <ul>
          <li><a href="#">Category 1</a></li>
          …
        </ul>
      </nav>
    </aside>

    <footer id="mainFooter">
      <p>&copy; 2017 My Website</p>
    </footer>
  </body>
  </html>
  • Minimal inline CSS added (in <style> tag) for demo:
    • Centered white text on black header; padded header & footer; footer font-size adjusted.

Meta Tags & SEO Basics

  • Placed inside <head>; invisible to users, essential for search engines.
  <meta name="description" content="Awesome blog by Traversy Media">
  <meta name="keywords" content="web design, blog, web dev blog">
  • Google reads these to understand page topic; description can appear in search snippets.

Developer Tools & Workflow Tips

  • Chrome DevTools (F12):
    • Elements panel—inspect DOM, hover highlights, live-edit HTML/CSS (temporary).
    • Network, Console: advanced debugging for later learning.
  • View Source (Ctrl+U): see final HTML served to browser (useful when server languages generate HTML).
  • Sublime shortcuts: html → Tab autocompletes boilerplate; typing tagname + Tab auto-creates start/end pair.
  • Sublime lorem → Tab inserts placeholder text.

Real-World & Professional Pointers

  • Jobs strictly in HTML/CSS alone are rarer today but still exist (static business sites).
  • Mastery of HTML is non-negotiable foundation; every advanced stack compiles/renders down to HTML.
  • Good practices:
    • Use tables only for true tabular data—not for layout.
    • Prefer semantic elements & meaningful tag structure for accessibility and SEO.
    • Externalize CSS & JavaScript files for maintainability (covered in later videos).

Ethical / Accessibility / UX Notes

  • alt text benefits visually-impaired users & improves SEO.
  • target="_blank" should be used sparingly (external links) to respect user navigation expectations.
  • Placeholder text should not replace proper <label> elements (accessibility compliance).

Study Checklist / What to Practice Next

  • Install preferred editor and browser devtools.
  • Build a multi-page mini-site:
    1. index.html – heading hierarchy, paragraphs, lists.
    2. Add images with alt, experiment with width/height.
    3. Create a table of favourite movies.
    4. Add a contact <form> using text, email, textarea, select, submit.
    5. Duplicate blog.html style semantic layout.
  • Validate code via https://validator.w3.org for standards compliance.
  • Preview pages in multiple browsers to understand default styles.

Looking Ahead

  • Next video: CSS fundamentals—styling, layout, colors, typography.
  • Series will later include JavaScript basics and deployment (domains, hosting, FTP/upload).