🌐

Web Development Basics

Jun 26, 2025

Overview

This lecture covers the fundamentals of HTML and CSS, focusing on building modern, professional-quality websites from scratch. Key topics include HTML structure, CSS styling, layout techniques, responsive design, and a step-by-step guide to recreating the visual layout of youtube.com.

Course Introduction & Setup

  • No prior coding experience needed; course starts from the basics and advances to professional-level web development.
  • Necessary software: Google Chrome (browser) and Visual Studio Code (code editor).
  • Install both programs before beginning the course.

HTML Fundamentals

  • HTML (HyperText Markup Language) is used to create the structure of websites.
  • HTML files use .html extension.
  • Basic syntax: elements are defined by opening and closing tags (e.g., <button>...</button>).
  • Common elements: <button>, <p> (paragraph), <a> (link).
  • Attributes (e.g., href, target, class) modify element behavior.
  • Syntax rules must be strictly followed for correct display.
  • Extra spaces and line breaks in HTML code are generally ignored by browsers.

CSS Basics & Styling

  • CSS (Cascading Style Sheets) styles the appearance of HTML elements.
  • CSS is written inside <style> tags or in external .css files linked with <link>.
  • Selectors target elements or classes (e.g., button, .class-name).
  • Common properties: background-color, color, height, width, border, border-radius, margin, padding.
  • Colors can be specified by names (red), RGB/RGBA, or hex values.

Layout Techniques & Containers

  • The display property defines how elements are arranged: block, inline-block, inline.
  • The <div> element is a generic container used for layout and grouping elements.
  • Layouts are constructed using "nested layouts": combining vertical and horizontal containers.
  • CSS Grid and Flexbox are advanced layout systems for creating responsive, aligned structures.

Advanced CSS Features

  • Pseudo-classes (e.g., :hover, :active) allow styling elements in specific states.
  • The transition property animates changes smoothly (e.g., color fade on hover).
  • box-shadow creates visual depth and shadows under elements.
  • The box model: margin (outside space), border, padding (inside space), and content.

Responsive Design & Media Queries

  • Media queries (@media) adapt layouts to different screen sizes for mobile-friendliness.
  • Adjust grid columns, font sizes, and spacing based on viewport width thresholds.

Chrome Dev Tools

  • Use browser Dev Tools (Inspect) to examine and edit HTML/CSS, extract styles, and test changes live.

Semantic HTML & Best Practices

  • Semantic elements (e.g., <header>, <nav>, <main>, <section>) provide meaning for accessibility and SEO.
  • Comments in HTML: <!-- comment -->; in CSS: /* comment */.
  • Inheritance: some CSS properties (e.g., color, font-family) are passed from parent to descendant elements.
  • CSS specificity: more specific selectors override more general ones.

Project: Building youtube.com Layout

  • Break down the page into containers and sections (header, sidebar, video grid).
  • Use Flexbox for header alignment and Grid for video layout.
  • Sidebar and header use position: fixed for sticky behavior.
  • Tooltips and overlays use position: absolute inside position: relative containers.

Key Terms & Definitions

  • Element — A basic unit in HTML (e.g., <p>, <button>, <div>).
  • Tag — The syntactic markers (e.g., <div>, </div>) that define an HTML element.
  • Attribute — Extra information inside a tag (e.g., href, class).
  • Selector — CSS pattern that matches elements to style (e.g., .class, #id).
  • Box Model — The layout model including margin, border, padding, and content.
  • Media Query — CSS rule that applies styles based on screen size (@media).
  • Responsive Design — Design approach that makes websites look good on all device sizes.
  • Semantic Element — HTML elements that provide meaning/structure (e.g., <nav>, <main>).
  • Flexbox — A CSS layout mode for flexible, responsive arrangement of items.
  • Grid — A CSS layout mode for two-dimensional layouts with rows and columns.
  • Pseudo-class — CSS selector for element state (:hover, :active).
  • Specificity — The rules that determine which CSS selector wins when multiple apply.

Action Items / Next Steps

  • Ensure Chrome and VS Code are installed.
  • Complete all exercises, especially adding video times, notification badges, and tooltips.
  • Swap out images, icons, and text in final project for practice.
  • Review and experiment with Chrome Dev Tools.
  • Explore more CSS specificity and inheritance.
  • Proceed to learning JavaScript for interactive websites.

Full transcript