Advanced HTML5 and Modern CSS
Advanced HTML5 and Modern CSS is an in-depth course in advanced HTML5 and modern CSS, covering CSS architecture, anchor positioning, scroll-driven animations, view transitions, web components and web APIs such as IndexedDB, web workers and offline PWAs, with a focus on how the APIs work. It suits developers and IT managers who already understand HTML, CSS and JavaScript.
- Duration18 hours · 3 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
HTML and CSS can now do far more than lay out pages. Much of what once needed large JavaScript libraries, such as tooltips that stay attached to a button, scroll-linked animation, smooth page transitions or reusable components, is now built into the browser. JavaScript web APIs such as IndexedDB, web workers and service workers let websites run fast and work offline in a way that comes close to native apps.
This course goes deep into HTML5 and modern CSS at an advanced level, with a fair amount of JavaScript to understand how the web APIs work. It covers CSS architecture, anchor positioning, advanced forms, scroll-driven animations, view transitions, web components, canvas, media APIs and client-side storage, through to a PWA that genuinely works offline and checking Core Web Vitals. (3 days, 6 hours per day, 18 hours in total, Intermediate to Advanced level.)
What you’ll gain
- Structure the CSS of large websites with cascade layers, @scope and design tokens
- Use advanced CSS features such as anchor positioning, container queries, scroll-driven animations and view transitions with progressive enhancement
- Build advanced forms and reusable web components
- Use canvas and media APIs for interactive graphics, audio and video
- Store data in the browser with IndexedDB and use web workers and observer APIs
- Build a PWA that works offline and check site quality with Core Web Vitals
Who this course is for
- Front-end developers who want to use the latest HTML and CSS capabilities
- Web developers who want to rely less on large JavaScript libraries
- Developers and IT managers who look after organisational websites or web applications
- People who have completed HTML5 and Modern CSS and want to go further
Prerequisites
- A reasonable grasp of HTML5 and CSS, such as Flexbox, Grid and media queries
- Able to write JavaScript, such as functions, the DOM, events and async/await
- Understand how to install software and use the command line at a basic level
Curriculum
Course Details
This course is the 2026 edition of Advanced HTML5 and CSS3, renamed Advanced HTML5 and Modern CSS. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures alternating with labs and finishing with a workshop. Intermediate to Advanced level. Learners structure CSS with cascade layers and @scope, use anchor positioning, scroll-driven animations and view transitions, build advanced forms and web components, use canvas, media APIs, IndexedDB and web workers, then build a PWA that works offline and check Core Web Vitals. They take home the source code for every lab.
Day 1 CSS Architecture and Advanced Features
Section 1: Lab: Advanced HTML and CSS Today
- Why there is no CSS4, and checking features with Baseline status
- Progressive enhancement with @supports and feature detection in JavaScript
- Use DevTools to inspect layers, containers and animations
- Set up a project with Vite and standard CSS, without a preprocessor
- Lab: the starter project used throughout the course
Section 2: Lab: CSS Architecture
- Order reset, base, component and utility styles with @layer
- Limit style reach with @scope and donut scopes
- CSS nesting in depth and class naming conventions
- Solve specificity problems with :where() and :is()
- Lab: reorganise an existing site's stylesheet so it is easy to maintain
Section 3: Design Tokens and @property
- Design tokens for colour, spacing and typography across the system
- Register custom properties with @property so they can be animated
- Derive shades from a base colour with relative colour syntax and color-mix()
- Multiple themes and dark mode with light-dark()
- Lab: buttons and cards with smoothly animated gradients
Section 4: Lab: Anchor Positioning and Popover
- anchor-name and position-anchor to tie one element's position to another
- position-area and position-try-fallbacks near the edge of the screen
- Combine with popover for tooltips and menus without a library
- Fallbacks for browsers that do not yet support it
- Lab: tooltips and drop-down menus that never spill off the screen
Section 5: Lab: Advanced Forms
- The Constraint Validation API and setCustomValidity()
- Error messages that screen readers can announce
- Customise select with appearance: base-select as a progressive enhancement
- Submit forms with FormData and fetch without reloading the page
- Lab: a multi-step sign-up form with validation
Day 2 Layout, Motion and Components
Section 6: Advanced Layout
- Grid with named lines, subgrid and intrinsic sizing
- Size container queries and style queries
- Logical properties for multilingual sites
- Reduce layout shift with aspect-ratio and reserved space
- Lab: a dashboard whose components adapt to the space available
Section 7: Lab: Scroll-driven Animations
- animation-timeline with scroll() and view()
- Set ranges with animation-range
- CSS scroll snap for carousels
- Fallbacks and prefers-reduced-motion
- Lab: a reading progress bar and content that fades in as you scroll
Section 8: Advanced View Transitions
- document.startViewTransition() within a single page
- Cross-document view transitions with @view-transition
- view-transition-name and customising the pseudo-elements
- Different transition types by navigation direction
- Lab: a gallery that expands an image from the list to its detail page
Section 9: Lab: Web Components
- Custom elements and lifecycle callbacks
- Shadow DOM, template and slot
- Styling from outside with ::part and custom properties
- Declarative shadow DOM for server-delivered HTML
- Lab: reusable product card and review rating components
Section 10: Canvas and Advanced Graphics
- Canvas animation with requestAnimationFrame
- Pixel-level image processing with getImageData
- OffscreenCanvas for heavy drawing work
- SVG with CSS animation for icons and illustrations
- Lab: a real-time chart and a simple image editor
Day 3 Web APIs, Offline Use and Site Quality
Section 11: Lab: Media APIs
- Control video and audio with JavaScript
- Build your own video player with captions
- The Fullscreen API and picture-in-picture
- Use the camera and microphone with getUserMedia, asking for permission properly
- Lab: record a short video from the camera with MediaRecorder
Section 12: Lab: Client-side Storage
- Choose between Web Storage, cookies and IndexedDB for the job
- IndexedDB: object stores, indexes and transactions
- The File API and drag-and-drop file handling
- The Clipboard API and browser storage limits
- Lab: a note-taking app that attaches images and stores data locally
Section 13: Observers and Web Workers
- IntersectionObserver for lazy loading and infinite scroll
- ResizeObserver and MutationObserver
- Move heavy calculations to a web worker
- Communicate between tabs with BroadcastChannel
- Lab: a product list that loads more items as you reach the bottom
Section 14: Lab: A PWA That Really Works Offline
- The web app manifest and installability requirements
- The service worker lifecycle and version updates
- Cache strategies: cache first, network first and stale while revalidate
- Build a service worker with Workbox and an offline fallback page
- Lab: make the note-taking app installable and usable offline
Section 15: Workshop: An Advanced Web App with HTML, CSS and Web APIs
- Combine the features you have learned into one web app
- Measure Core Web Vitals: LCP, INP and CLS
- Check accessibility and performance with Lighthouse
- Test across browsers and check Baseline status before release
- Present your work and get feedback
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
How do Web Storage, cookies and IndexedDB differ?
Cookies hold only about 4 KB and are sent with every HTTP request, so they suit small pieces of data the server needs, such as a session. Web Storage keeps key-value data, with several megabytes per site: localStorage persists until cleared and sessionStorage disappears when the tab closes, but it stores only strings and works synchronously. IndexedDB is a database in the browser that can hold objects, files and large amounts of data, is searchable through indexes and works asynchronously, so it suits apps that must work offline.
What are the steps to draw graphics with HTML5 Canvas?
Add a canvas element with a width and height to the page, then use JavaScript to get the element and call getContext('2d') to obtain the drawing context. Set colours with fillStyle or strokeStyle, start a path with beginPath, draw with moveTo, lineTo or arc, then call fill or stroke. For animation, clear and redraw each frame with requestAnimationFrame, and heavy drawing work can be moved to an OffscreenCanvas.
What is a Web Worker and what is it used for?
A Web Worker runs JavaScript in a thread separate from the main page. It is used for heavy work such as processing large amounts of data, converting files or manipulating images, so the page does not freeze while the work runs. The page and the worker talk through postMessage and receive results through the message event, and a worker cannot access the DOM directly. A service worker is a different kind of worker that intercepts network requests and manages the cache so a site can work offline.
Who is the Advanced HTML5 and Modern CSS course for, and what should I know beforehand?
It suits front-end developers who want the latest HTML and CSS capabilities, web developers who want to rely less on large JavaScript libraries, developers and IT managers who look after organisational websites, and people who have completed HTML5 and Modern CSS. You should have a reasonable grasp of HTML5 and CSS, such as Flexbox, Grid and media queries, and be able to write JavaScript, as the course uses quite a lot of it.
What will I be able to do after the Advanced HTML5 and Modern CSS course?
You will be able to structure the CSS of large sites with cascade layers, @scope and design tokens, use anchor positioning, container queries, scroll-driven animations and view transitions with fallbacks, build advanced forms and web components, use canvas, media APIs, IndexedDB and web workers, build a PWA that works offline, and check site quality with Core Web Vitals. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Can the Advanced HTML5 and Modern CSS course be run in-house for our team?
Yes. This course can be run in-house for your team, with content adapted to your work, such as reorganising the CSS of your organisation's website, building a shared set of web components for the team, or making internal web apps usable offline. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.
Related articles
Articles are published in Thai.