Awesome HTML (incl. A11Y, ARIA, CSS, HTML5 API's, PWA, SEO)

Master the basics of the document object model, a tree-like interface for HTML that structures and accesses elements. See a sample with head, body, h1, p, button, and color-changing script.

Explore the anatomy of an HTML document by examining the doctype, html tag, head with metadata and UTF-8 encoding, title, and the body content, plus how CSS files fit in.

Explore bold, italic, underline, highlight, and small text within paragraphs, and experiment with headings, deleted text, and live code examples to learn practical HTML formatting.

Explore the three HTML list types—ordered, unordered, and description lists—and how list items and descriptions are structured. Learn nesting differences and how HTML comments appear in code but aren’t rendered.

Explore how hyperlinks use the a tag to navigate within pages and to external sites, including href attributes, target="_blank" links, mailto:, and tel: examples.

Learn how the HTML img tag displays images using attributes like src, alt, width, and height, and how relative paths and folders affect image loading.

Create and experiment with HTML tables using table, tr, th, and td to build headers and data cells; visualize with borders and observe how removing rows changes the table.

Learn how to use the br tag for line breaks and the hr tag for horizontal rules to create clear paragraph separation and simple page styling.

Master essential HTML tags to structure web content, including headings, paragraphs, text formatting, lists, hyperlinks, images, tables, line breaks, and horizontal rules, preparing for forms and user input.

Explore text inputs, radio buttons, and checkboxes in forms, learn their attributes like type, name, id, value, and how labels and accessibility considerations connect with a practical example.

Learn to implement select menus and option elements with a semantic name, creating a dropdown of options like USA, Canada, and Germany, while noting the logic stays the same.

Explore form validation basics using native HTML attributes like required, type email, min and max, and length constraints, and observe browser-based client validation and real-world examples.

Explore advanced form features, including file uploads, date inputs, and other HTML input types. Validate forms with appropriate input types and prepare for styling in the next class.

Explore styling forms with CSS to enhance appearance, style input elements and buttons, and manage layout and responsiveness, with a forthcoming theoretical introduction on form design best practices.

Explore best practices in form design, focusing on ux, to create clear labels, logical field grouping, and flow while enforcing client and server side validation and accessible, secure forms.

learn to build a comprehensive registration form with HTML elements for name, email, password, date of birth, country, gender, interests, and terms, plus JavaScript validation and submit handling.

Create a dynamic HTML form with JavaScript that updates in real time based on user selection from a books or movies dropdown, using event listeners and DOM manipulation.

Learn to create and handle forms in HTML, enhanced with JavaScript for interaction, and make them more user friendly, recognizing forms as a central part of web development.

Explore HTML5 semantic elements and how they provide meaningful structure for web content, boosting accessibility for users and robots and improving readability for both humans and machines.

Embrace semantic markup with html5 elements as the backbone of the modern web. Improve accessibility, seo, and maintainability by giving content meaningful context and structure for humans and assistive technologies.

Explore commonly used semantic elements like article, section, nav, header, and footer, and learn their machine-readable roles for better accessibility and seo.

Learn how semantic elements boost accessibility by guiding screen readers through page structure, highlighting important text, and avoiding styling purposes; explore nesting like article, section, header, and footer.

Decide when to use semantic elements and assess browser support across modern browsers, avoiding overuse that confuses screen readers and other developers.

Explore semantic HTML in a single-page app, maintaining accessibility as content loads via JavaScript using ARIA roles. Then implement microdata for rich snippets to boost search visibility.

Explore how to build a semantic single-page application with accessible HTML structure, ARIA roles, and dynamic content loading that preserves SEO and assistive technology compatibility.

Explore how to implement microdata in HTML to create rich snippets for articles using schema.org, with itemprop and itemscope, boosting SEO and search result presentation.

Trace the evolution of HTML5 and semantic elements from basic HTML to article, section, header, and footer, emphasizing accessibility, and explore future trends in semantic enhancement and SEO.

Explore how accessibility in HTML relies on ARIA roles and attributes alongside semantic elements to enhance navigation for assistive technologies, demonstrated with VoiceOver and screen readers.

Examine how emerging web technologies use web components and custom elements to create semantic, modular widgets that enhance user interfaces while maintaining readable HTML code.

Explore the evolving role of HTML5 semantic elements with speculative machine learning and AI support in the browser, and how AI-infused markup could enhance accessibility, indexing, and personalization.

Explore how semantic HTML provides search engines with structural and meaningful content, boosting SEO and ranking; future classes will show code examples of semantic HTML for SEO.

Explore semantic HTML by building proper header, main, article, and footer structures, using h1 and h2 to organize content and boost SEO with meaningful headings and semantic navigation.

Using semantic HTML boosts readability and SEO by structuring content with semantic elements, helping search engines identify content, relationships, and keywords, and enabling rich snippets and accessible web pages.

Explore accessibility implications of semantic HTML to enhance usability for all users, especially those with disabilities, through proper headings, form labels, and nav landmarks for screen readers.

Explore semantic HTML through proper heading structure, using h1 for main headings and h2 for subheadings, and experiment with h3 and h4 to compare differences.

Learn how form labels link to inputs via for and id so screen readers announce labels on focus and aria described by connects inputs to username and password help.

Explore how the nav element creates a landmark navigation menu, helping readers identify the navigation content and providing keyboard shortcuts, with unordered lists, list items, and hyperlinks in semantic HTML.

Explore ARIA roles and attributes to enhance accessibility in web apps. Learn how accessible rich internet applications use ARIA to create live regions and sliders, with practical examples.

Explore ARIA roles and attributes for a slider, including a label tied to the slider’s id and min, max, and step values. Emphasize how aria-labels assist users with disabilities.

Explore how HTML5 semantic elements and ARIA roles improve accessibility through correct headings, labeling, and semantic structure for inclusive web apps.

Explore how semantic HTML enhances accessibility, SEO, and maintainability in a large-scale eco commerce app like Eco Shop, focusing on home page structure and product listing with semantic markup.

Implement an accessible homepage structure using semantic HTML elements like header, nav, main, sections with IDs, while highlighting dynamic data loading and the importance of semantic markup for assistive technologies.

Explore the benefits of semantic HTML for accessibility and SEO, using header, nav, main, article, and footer to improve structure and maintainability, as demonstrated by an eco shop case study.

Explore HTML5 semantic elements and their role in accessible, structured, and SEO-friendly web content, with practical examples and best practices for modern web development.

Explore multimedia integration elements with audio and video tags, controls, sources and types, including playback speed and picture-in-picture, through interactive examples.

Learn HTML5 drag and drop by making elements draggable, using ondragover and ondrop handlers with JavaScript to move the drag me text to a drop target, noting cross-browser differences.

Discover how iframes embed external content like videos, maps, or pages within a page, using the iframe tag with src and attributes such as width, height, and border, including allowfullscreen.

Explore scalable vector graphics (svg) as an xml-based format embedded in html for resolution-independent graphics. Learn core elements and attributes like circle, cx, cy, r, stroke-width, and fill.

Discover how data attributes store custom data on HTML elements, enabling JavaScript access and testing use cases. See examples like data-product-id, data-product-name, and data-price to power dynamic web applications.

Master advanced HTML features to build dynamic, multimedia-rich, and interactive web applications using canvas, geolocation, web storage, web workers, and drag-and-drop. Explore integrating CSS into HTML.

learn the basics of css, including selectors, properties, and values, and how they style html elements using type, class, and id selectors, with the box model in mind.

Explore the css box model by examining content, padding, border, and margin, and learn how padding and margins shape the box on a page.

Explore how CSS comments document code, provide context, and temporarily disable styling, denoted by two characters, and place comments above or beside code to see their effect on a paragraph.

Explore types of css with a focus on inline css, applying styles directly via the style attribute for granular control, but note its limited reusability and scalability for larger projects.

Embed internal (embedded) CSS by placing CSS rules inside a style tag in the head to style elements in the same HTML document, unlike inline CSS.

External css places styles in a separate file, reusable across html pages, linked in the head with the link element. This separation of concerns promotes consistent styling and easier maintenance.

Explore CSS frameworks like Bootstrap, Foundation, and Bulma, which provide styles and components for responsive design. Link via CDN and apply classes like container and btn-primary to ensure consistency.

Explore flexbox and grid layouts as modern CSS tools for flexible, responsive web design, covering one-dimensional flexbox concepts, container and items, and practical alignment across screens.

Explore two-dimensional grid layouts to precisely position elements in rows and columns with grid container, grid template columns, and grid gaps for complex, responsive designs that replace tables.

Learn how to integrate CSS with HTML using external, inline, and internal methods, including flexbox and grid layouts, plus frameworks and preprocessors for responsive, visually appealing web design.

Explore how to embed JavaScript in HTML using the script tag, compare inline and external scripts, and analyze the pros, cons, and maintainability for interactive web pages.

Learn to organize JavaScript with external files using a script tag with src, ensure grid method names match, and gain separation of concerns, maintainability, and faster loads through caching.

Learn DOM manipulation by using JavaScript to update HTML structure and styles via an event listener on button clicks, changing headings and text to enrich interactivity.

Explore event handling with JavaScript by using event listeners on a button fetched by id to create interactive web experiences, triggering alerts on click without onclick.

Explore advanced event handling in HTML, including delegation, event capturing and bubbling, and dynamically handling created elements with custom events and tag name checks and case sensitivity.

Integrate JavaScript with HTML to create interactive web applications using DOM manipulation and event handling, improving user experience. Master best practices to drive engagement and build modern, responsive apps.

Explore responsive design principles to help sites adapt across desktop, mobile, tablet, niche devices. Emphasize mobile first approach, flexible layouts and units, content prioritization, optimized images, and testing and iteration.

Design for mobile first to prioritize core content and performance on small screens, then progressively enhance with media queries for larger devices and better accessibility and SEO.

Explore flexible layouts that adapt pages to viewport size with a fluid grid layout. Center a 90% wide container; use 30% columns and margins for responsive balance.

Apply media queries to styles for screens wider than 768 pixels, creating responsive layouts that adapt to different screen sizes and support a mobile-first approach.

Use percentage units to define width, margins, and paddings relative to the parent container, enabling proportional layout. Understand flexbox and grid support for responsive spacing and proportional scaling.

Learn to use vw and vh to build responsive layouts, setting font sizes, widths, heights, margins, and padding relative to the viewport.

Explore viewport settings through the responsive meta tag to ensure pages adapt to device width with an initial scale of 1.0, delivering optimal viewing on mobile and desktop.

Explore how the em unit defines font sizes relative to the parent container to create flexible margins, paddings, and scalable typography, including 1.5em equals 1.5 times the parent font size.

Use flexible layouts and units to create device-agnostic, accessible designs with responsive media queries that adapt across screen sizes. Prioritize future-proofing, cross-device compatibility, performance, and easier maintenance.

Prioritize content in responsive web design to ensure the most important information appears first across devices, improving user engagement. Place the main heading above the navigation menu to guide users.

Develop content prioritization with visual hierarchy using typography, color, contrast, spacing, and heading styles like h1, h2, and p to guide attention and emphasize key content.

Explore why optimized images and media are essential for responsive web design, improving performance, loading speed, bandwidth efficiency, user experience, and search rankings through best practices and file formats.

Choose the right image file format to optimize images by balancing content type, compression, and browser compatibility, exploring JPEG, PNG, WebP, AVIF, Jp2, and TIFF with fallbacks.

Optimize image compression to reduce file sizes without quality loss using tools like Adobe Photoshop and tiny PNG, and apply modern codecs such as WebP and JPEG XL.

Discover how lazy loading with the loading attribute defers images and media until they enter the viewport, improving performance, prioritizing visible content, and reducing resource use in image-heavy pages.

Learn to serve responsive images that adapt to device pixel densities using srcset and sizes. Practice delivering the most suitable image version per device with picture element and media queries.

Discover how browser caching and cache-control headers speed up page loads by storing images and media locally, while noting HTML meta tag limits and need for server-side logic and JavaScript.

Optimize video delivery by selecting codecs and formats for cross-platform playback, using a fallback strategy and practical video attributes to test browser compatibility across mp4, webm, ogg, av1, and hevc.

Test and iterate responsive web designs across devices and browsers, using dev tools and testing platforms to optimize performance, user experience, and content prioritization.

Apply responsive design principles, including mobile-first approach and flexible layouts, fluid layouts, to prioritize content, optimize media, and test thoroughly for accessible, usable, visually attractive experiences across devices.

Explore responsive grid layouts with CSS grid, including grid containers and items, defining templates, spanning rows and columns, and creating responsive columns with min-width, fr units, and gaps.

Explore how media queries drive responsive design by adapting layouts to screen width, height, and resolution, using a max-width of 768px example to switch flex direction between column and row.

Master responsive designs by combining flexible layouts, grid systems, and media queries to deliver an optimal viewing experience across devices; use css, flexbox, and grid to build adaptable interfaces.