Understanding HTML and CSS: Modern Web Fundamentals

Explore trees as a foundational concept for understanding HTML and CSS. Lay the groundwork for semantic HTML and modern CSS by examining trees.

Explore data structures as essential tools for organizing memory and enabling fast access, including linked lists, arrays, and trees, with a focus on the tree for html and css.

Explore how HTML and CSS concepts map to tree data structures, using the family tree metaphor to understand nodes, siblings, children, parent, ancestors, descendants, and the root.

Explore how tree data structures organize memory and enable efficient relations among data, contrasting them with linked lists. Learn how implementation choices influence HTML and CSS efficiency.

Learn how traversal and search in a tree move through memory locations from the root to leaves to locate data, illustrating the first step toward understanding HTML.

This lecture introduces HTML, encourages fresh eyes and resets mental models to shed bad habits, and begins exploring the M and L in HTML, with H and T coming later.

Explore how HTML treats documents as text files, and set up Visual Studio Code with a folder and a starting text resume as a reusable course project.

Explore user agents, software acting on users' behalf, and how HTML documents reach browsers and screen readers. Learn to write accessible HTML that helps user agents interpret content clearly.

Learn how markup describes content using start and end tags, marker conventions with less-than and greater-than symbols, and how this meaning is read by user agents.

Explore how a markup language creates a consistent vocabulary to convey meaning clearly in hypertext markup language, ensuring everyone uses the same markup to mean the same thing.

Explore semantics and authoring by distinguishing meaning in HTML markup, where tags convey concepts and contribute to the document's meaning and accuracy.

Explore the building blocks of markup by examining tags, attributes, and elements, and see how an attribute name, equal sign, and quoted value describe content inside an element.

Explore how elements form a tree by nesting first name and last name inside the name element, revealing root and children relationships with readable markup.

Discover how markup shapes content structure and display, from word documents to hypertext markup language, and how tags control formatting for user-facing content.

Explore how specifications govern internet technologies, learn what a specification is, and read the HTML and CSS specs to stay up to date, empowering self-guided mastery as an HTML author.

Explore the HTML specification as a living standard that defines semantics, distinguishes normative and non-normative sections, and guides authoring accessible, future-proof documents across browsers and engines.

Explore the author versus implementor roles in the HTML specification, where authors markup documents and implementers like browsers interpret meaning and ensure correctness according to the same standard.

Explore content models and kinds of content in HTML, learn what can go inside each element, and use category guidance like flow, sectioning, heading, phrasing, metadata, embedded, and interactive.

Begin authoring HTML documents by laying out the basic elements and the common structure that most HTML documents share.

Create and save index.html in Visual Studio Code, then transfer resume text into indexed HTML and mark it up, following along as you build a starting point.

Add the doctype at the top of every HTML document to signal standard modern HTML and ensure consistent browser rendering. Let editors like Visual Studio Code auto-fill this declaration.

Explore the HTML root element, its content model with head and body, and how the lang attribute specifies the document language using a valid BCP 47 tag.

Define and integrate document metadata in HTML using the head, meta, and title elements to describe the page for bookmarks and search results, with UTF-8 as the character set.

Explore the HTML document structure by placing the body after the head, and observe how the title sits in the head while the body contains page content.

Add content to your HTML document and look at how we divided document intersections. Explore document sections and how to place content within the HTML document.

Examine the article element as a self-contained composition within flow content and sectioning content, and how semantics guide its use as a complete, meaningful part of the document.

Explore the section element as a thematically grouped, semantic container and learn to distinguish it from the article, organizing content into services, skills, and testimonials.

Explore how the aside element marks tangential content within a page, its flow content model, and its placement inside article for semantic markup.

Learn how to use h1–h6 to structure a document, distinguishing implicit and explicit sections with sectioning content, and how heading rank defines sections and subsections.

Explore headers and footers in HTML, including how header wraps section headings and other flow content, and how footer targets the nearest section content ancestor with examples and practical usage.

Learn how the address element represents the contact information for the nearest article or body ancestor, not arbitrary addresses, and why semantic correctness matters for future-proof HTML.

Explore HTML elements that group things that go together, and learn how this grouping helps structure related content in a web page.

Explore the p element as a paragraph that groups one or more sentences into a topic, and apply this thematic grouping to blocks of text such as address and testimonials.

Identify the invalid markup created by adding paragraphs, examine the content models of elements and their content types, and see how this understanding aids debugging later in the course.

Learn how the HTML blockquote element handles quotes as a sectioning group, why wrapping quoted text in a paragraph matters, and where to place attribution per the specification.

Explore unordered lists and list items with ul and li elements, where order doesn't change meaning. See how lists improve clarity and convey document structure for the user agent.

Explore the ordered list element, its difference from unordered lists, and how the reversed boolean attribute and the start attribute control ordering to convey clear, meaningful sequences.

Practice marking up text according to the HTML specification, distinguishing titles from values to clarify meaning for both humans and computers. Build markup skills that surpass many web developers.

Explore association lists in html using the dl with dt and dd, defining name value groups, terms, and definitions, and ensure proper content models for semantic markup.

Explore multidimensional content via the table element and the table model, including rows, columns, and cells, the t head, t body, t foot, and the caption element.

Explore how to present multidimensional content with semantic HTML, not just the database table. Learn to prioritize user experience and appropriate HTML elements over data storage concerns.

Identify the main element as the dominant content container representing the document's primary content, with at most one main element placed inside the HTML body; use aside for non-dominant content.

Learn why the div element has no inherent meaning and why you should use semantic elements for accessibility and maintainability, reserving divs for rare, last-resort cases.

Learn how HTML elements that target the text within a document reveal that the core HTML document is text.

Open your browser to view the HTML document and explore the em element for emphasis. The em tag marks stressed text, and the browser renders it to convey meaning.

Learn how the strong element marks important or urgent text and how it differs from the b element, which signals bold visuals rather than meaning within text and headers.

Discover how the small element marks side comments in text level semantics, such as disclaimers or attribution, and how it renders with a smaller font without de-emphasizing content.

Identify the invalid markup lurking in the document and learn debugging strategies that reveal why a strange problem appears in the KSP portion of the course.

Explore how line breaks use the br element to insert thematic separations, including proper use in addresses, self-closing syntax, and how whitespace is treated between elements.

Explore author comments in HTML, notes meant for fellow authors, using the <!-- ... --> syntax, which are ignored by user agents and can impact download size if large.

Recognize that the span element is a text-level tag often misused, preserve semantics over visual tricks, and use span to add meaning or choose clearer structure for maintainable HTML.

Explore how the browser, as the user agent, works under the hood and renders our HTML into the DOM, shaping what users see.

Explore how hypertext transfer protocol enables the web, linking documents via HTTP/HTTPS, with clients requesting resources from servers and browsers rendering hypertext using HTML.

Explore the anchor tag and hypertext, focusing on the a element, href, and how links connect documents. Learn how the target attribute opens resources in new browsing contexts like tabs.

Describe how user agents, including browsers on various devices, mediate interactions between users and HTML documents by consuming markup and organizing it as a memory-resident tree.

Explore the browser as a system with networking, rendering engine, JavaScript engine, and storage, focusing on the rendering engine that transforms HTML into a visual web page.

Explore how Blink, the rendering engine behind Chromium and Chrome, transforms HTML into interactive visuals, and learn to debug and write better HTML by understanding browser code.

Explore how the browser rendering engine parses HTML character by character, recognizing opening and closing tags, storing structure in memory, and rendering a visual web page.

Explore named character references in HTML and how the parser uses an ampersand and codes to display characters like the less than and greater than signs without markup.

Explore objects as a collection of data and code in memory that represents something, using a person example with first name and last name and code that builds a string.

Explore the concept of models as representations, including object models for an online class with teacher, student, and video lecture objects that enable viewing and editing course data.

Explore the document object model, an object model that represents an HTML document and enables examining and changing it as rendered by the browser, organized as a DOM tree.

Explore how the user agent parses HTML, builds the DOM with Blink, and renders the page as a visual representation, emphasizing the DOM as the bridge between HTML and display.

Explore how modern browsers embed developer tools to edit pages on the fly and diagnose problems quickly, helping you build better websites faster.

Explore the browser inspector to view network and elements tabs, inspect and edit the DOM, and understand how HTML maps to the document object model.

Anchor tags link to internal document fragments via IDs in the DOM and use #fragment URLs, creating an unordered list menu that scrolls to sections like skills and about me.

Compare Gecko and Blink rendering engines to understand different browser code bases and bugs, and test across user agents to ensure consistent content rendering.

Explore the browser rendering engines behind the internet, focusing on WebKit, Blink, and their open source code across Safari, Chrome, and Edge.

Examine the critical topic of accessibility that many web developers overlook, and learn its essentials for building inclusive websites.

Take a conceptual aside on accessibility, defining it as the ability to be used by people in all circumstances, with HTML accessibility considerations linked to semantic decisions.

Explore screen readers as user agents that translate the DOM into non-visual formats like speech or braille, and learn to design accessible, futureproof content for diverse user agents.

Learn how semantic HTML improves accessibility for screen readers and devices by using meaningful structure. Compare semantic markup with all divs and spans and practice with headings, landmarks, and lists.

Explore ARIA, the accessible rich internet applications standard from W3C, which adds semantic attributes to HTML to aid assistive technologies. Understand how semantic information and UI behavior are conveyed.

Examine how the HTML specification enables interactivity by letting users deliver information to the user agent. Discover how interactivity in HTML connects user input with the user agent.

Learn how the nav element serves as a semantic, primary navigation block that links to pages or page sections, and when to wrap major navigation links in a nav.

Explore how forms and http requests carry user data as name value pairs through query strings in get requests and through the post body.

Learn to build forms with the form element, input types, and labels, using name attributes, for and id associations, to create a query string and submit HTTP requests.

Learn how buttons initiate HTTP requests, submit forms with query strings or post payloads, and how the user agent, name-value pairs, and server responses shape interactive web forms.

Learn to markup forms using p tags with labels and inputs, apply attributes like max length and required, leverage built-in validation for emails, and understand query strings with url encoding.

Expand your form with radio buttons and a checkbox to collect the best contact time and urgency, grouped with a fieldset and legend.