🌐

Web Development Basics

Sep 8, 2025

Overview

This lecture provided an introduction to HTML, CSS, and JavaScript, covering web page structure, styling, interactivity, and basic web projects including forms, tables, flexbox layouts, and simple DOM manipulation.

HTML Basics

  • HTML stands for Hypertext Markup Language and is the foundation of web page structure.
  • Tags define elements such as headings (H1-H6), paragraphs (<p>), horizontal lines (<hr>), and anchors (<a>).
  • Lists can be ordered (<ol>) or unordered (<ul>).
  • Images can be embedded with the <img> tag.
  • Forms and tables are used for user input and data display, using tags like <form>, <input>, <table>, <tr>, <td>.

CSS Essentials

  • CSS (Cascading Style Sheets) styles and formats web pages created with HTML.
  • CSS selectors target elements by tag, class (.), or id (#).
  • Properties like color, background-color, margin, padding, width, and height adjust appearance.
  • Box model controls layout with margin, border, padding, and content.
  • Responsive design uses media queries (e.g., @media screen and (max-width: 600px)) for different screen sizes.
  • Flexbox enables flexible, responsive layouts using properties like display: flex; and flex-direction.

JavaScript Fundamentals

  • JavaScript makes web pages interactive and dynamic.
  • Variables are declared with var, let, or const.
  • Data types include primitive (string, number, boolean) and non-primitive (object, array).
  • Operators (+, -, *, /, ++, --) perform calculations and logic.
  • Functions group reusable code: function name(params) { ... }.
  • Control flow includes if-else statements and loops (for, while).
  • Comments are marked with // (single line) or /* ... */ (multi-line).

DOM Manipulation

  • DOM (Document Object Model) represents HTML elements as objects.
  • Elements are selected with document.getElementById or querySelector.
  • Event listeners (e.g., onclick) trigger functions on user actions.
  • Text and attributes can be changed with element.textContent or element.setAttribute.
  • New elements can be created and inserted with createElement and appendChild.
  • Removing elements uses .remove() or parentElement.removeChild.

Example Projects

  • Event pages and e-commerce templates using HTML, CSS, and JavaScript.
  • Forms for registration with input fields and validation.
  • Product search and filter features with JavaScript.
  • Dynamic content addition and deletion (e.g., book lists).

Key Terms & Definitions

  • HTML — Hypertext Markup Language, the structure of web pages.
  • CSS — Cascading Style Sheets, styles HTML elements.
  • JavaScript — Programming language for web interactivity.
  • DOM — Document Object Model, structure for JavaScript to access and change HTML.
  • Flexbox — CSS layout model for flexible, responsive designs.
  • Media Query — CSS technique for responsive design.

Action Items / Next Steps

  • Practice creating HTML pages with headings, lists, images, tables, and forms.
  • Add CSS styling to structure and beautify your pages.
  • Implement basic JavaScript for form validation and interactive elements.
  • Experiment with DOM methods to modify content dynamically.
  • Build a small project combining HTML, CSS, and JavaScript.
  • Review the concepts of flexbox and media queries for responsive design.

Full transcript