HTML5 and Modern CSS
HTML5 and Modern CSS is a course that builds on basic HTML and CSS, covering HTML5 forms with validation, audio and video, dialog and popover, and modern CSS such as :has(), container queries, animation and view transitions. It suits learners with basic HTML and CSS and front-end developers, and you leave with an interactive page built with minimal JavaScript.
- Duration18 hours · 3 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Every major browser now supports HTML and CSS features that used to need JavaScript or third-party libraries: forms that validate themselves, dialogs and popovers, styling based on what an element contains with :has(), components that adapt to the space they actually have with container queries, and animated page transitions. Yet many teams still build websites the way they learnt years ago, add plugins they do not need, and are unsure which features already work in every browser.
This course builds on basic HTML and CSS and takes learners into today's web platform. It starts with the HTML Living Standard and checking Baseline status on MDN, accessible structure, forms with validation, audio and video with captions, dialogs and popovers. It then goes deep into modern CSS, including :has(), CSS nesting, cascade layers, custom properties, oklch() colours, gradients, subgrid and container queries, before moving on to transitions, animation, view transitions, web fonts, SVG, canvas and websites that work offline. It closes with a workshop that builds an interactive page with as little JavaScript as possible. (3 days, 6 hours per day, 18 hours in total, Beginner to Intermediate level.)
What you’ll gain
- Understand the HTML Living Standard and check feature support with Baseline on MDN
- Structure pages that work for keyboard users and screen readers
- Build HTML5 forms with validation and add audio and video with captions
- Create dialogs, popovers and accordions in HTML with little or no JavaScript
- Organise styles with :has(), CSS nesting, cascade layers and custom properties
- Build self-adapting components with container queries and subgrid
- Create transitions, animations and view transitions that respect prefers-reduced-motion
- Use web fonts, SVG and canvas, and make a website work offline at a basic level
Who this course is for
- People who can already write basic HTML and CSS, or who have completed Basic HTML+CSS
- Front-end developers who want their techniques to keep up with what browsers can now do
- UI designers who want to build interactions and animation themselves without plugins
- Developers who use a framework and want a deeper understanding of the HTML and CSS underneath
- Website administrators who want to rely less on external libraries and make sites faster
Prerequisites
- Able to write basic HTML and CSS, such as semantic elements, selectors, the box model and Flexbox
- No JavaScript experience is required; starter code is provided for topics that use it
- A laptop that can run VS Code and up-to-date browsers, ideally both Chrome and Firefox
- Learners without the basics are advised to take Basic HTML+CSS first
Curriculum
Course Details
This course is the 2026 edition that replaces the previous Basic HTML5 and CSS3 course, renamed HTML5 and Modern CSS because CSS is no longer versioned as CSS3. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs, at Beginner to Intermediate level. This edition drops AppCache, which has been removed from browsers, in favour of the
Web App Manifest and service workers, and adds accessibility, dialog, popover, :has(), CSS nesting, cascade layers, container queries and view transitions. Unlike Basic HTML+CSS, which teaches the foundations from zero, this course assumes learners can already write basic HTML, CSS and Flexbox, and focuses on newer HTML5 features and modern CSS. Learners take home a lab guide, starter files, sample media and solution code for every lab.
Day 1 HTML5 Today: Structure, Forms and Media
Section 1: HTML5 and CSS Today
- What the HTML Living Standard is, and why there is no HTML6 or CSS4
- Check which features are ready with Baseline status on MDN and Can I use
- Progressive enhancement for features that are not yet supported everywhere
- A quick review of the HTML template and semantic elements
- Lab: set up the project and starter page used throughout the course
Section 2: Accessible Structure
- Landmarks, heading order and keyboard navigation
- Alt text, labels and a correct focus order
- Using ARIA only when HTML has no suitable element
- Lab: audit a page with Lighthouse and the accessibility tree in DevTools
Section 3: Lab: HTML5 Forms and Validation
- Input types: email, url, tel, number, range, color, date and datetime-local
- datalist, autocomplete and choosing the right inputmode for mobile
- required, pattern, min, max and clear error messages
- Styling invalid fields with :user-invalid and :user-valid
- Lab: a registration form that validates input without any library
Section 4: Audio and Video in HTML5
- video and audio with controls, poster and preload
- File formats and codecs that work in every browser, and multiple source files
- Captions and subtitles with track and WebVTT files
- Browser autoplay policies and media that everyone can access
- Lab: a product page with a video and Thai captions
Section 5: Lab: Dialog, Popover and Details
- Modal and non-modal dialog, closing with the Esc key
- The popover attribute for menus, tooltips and notifications
- Controlling them without JavaScript using command and commandfor
- details and summary accordions, with name for one-at-a-time behaviour
- Lab: a confirmation dialog, a menu and an FAQ with no library
Day 2 Modern CSS: Selectors, Themes and Layout
Section 6: Modern Selectors and the Cascade
- :is(), :where() and their effect on specificity
- :has() to style elements by what they contain, such as cards with images or forms with errors
- :focus-visible for keyboard users
- Native CSS nesting without Sass
- Ordering style priority with cascade layers (@layer)
Section 7: Lab: Custom Properties, Colour and Themes
- Custom properties and design tokens for the whole site
- oklch() colours and mixing colours with color-mix()
- Light and dark modes with color-scheme and light-dark()
- Checking contrast against WCAG criteria
- Lab: a colour system and theme that switches modes across the site
Section 8: Visual Effects: Rounded Corners, Shadows and Gradients
- border-radius, box-shadow and text-shadow
- Linear, radial and conic gradients, including repeating ones
- Multiple backgrounds, background-size and object-fit
- filter, backdrop-filter and mix-blend-mode
- Lab: product cards and a hero section in pure CSS
Section 9: Modern Layout
- A review of Flexbox and Grid, then subgrid
- aspect-ratio and logical properties such as margin-inline
- Multi-column layout for flowing content
- position: sticky for headers and tables of contents
- Lab: a magazine layout with cards aligned through subgrid
Section 10: Lab: Responsive Design with Container Queries
- Media queries with range syntax such as (width >= 48rem)
- Container queries and cqi units for self-adapting components
- Fluid type and spacing with clamp()
- Responsive images with srcset, sizes and picture
- Lab: one card component that works in both narrow and wide columns
Day 3 Motion, Graphics and Offline-ready Websites
Section 11: Transforms and Transitions
- Individual translate, scale and rotate properties, plus basic 3D transforms
- transition-property, duration, timing functions and delay
- Entry animations for dialogs and popovers with @starting-style
- transition-behavior: allow-discrete for showing and hiding elements
- Lab: buttons, menus and popups that move smoothly
Section 12: Lab: Keyframe Animation and View Transitions
- @keyframes and the animation properties
- Respecting users who set prefers-reduced-motion
- View transitions between pages with @view-transition
- Scroll-driven animations as progressive enhancement
- Lab: an animated transition between a product list and a product detail page
Section 13: Web Fonts, SVG and Canvas
- @font-face, WOFF2 files, font-display and variable fonts
- Choosing and loading Thai fonts so they are fast and readable
- Inline SVG for icons and images that follow the theme colours
- Canvas 2D basics: shapes, text and simple charts
- Lab: an SVG icon set and a sales chart with canvas
Section 14: Common Web APIs and Offline-ready Websites
- Web Storage and the Geolocation API, with asking users for permission
- AppCache has been removed, and what replaces it today
- The Web App Manifest for installing a website as an app
- Service worker and Cache API basics using starter code
- Lab: a page that can be installed and opened without an internet connection
Section 15: Workshop: An Interactive Page with HTML and CSS
- Workshop: a landing page with a form, video, dialog and a switchable theme
- Apply the container queries and animation covered in the course
- Check accessibility and performance with Lighthouse
- Use an AI assistant to review the code, and check Baseline status before relying on a feature
- Present the work, get feedback and plan next steps
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 is HTML5 different from earlier versions of HTML?
HTML5 added elements that describe page structure, such as header, nav, main and article, new input types that validate themselves, native audio and video without plugins, and web APIs such as canvas and geolocation. HTML is now developed continuously as the HTML Living Standard, so new features such as dialog and popover keep arriving without a separate HTML6 release.
How do I add video to a web page with HTML5?
Use the video element with controls and point to the file with source elements in formats browsers support, such as MP4 or WebM. Add a poster image, and add captions with a track element and a WebVTT file so everyone can follow it. If you want it to autoplay, it must start muted to meet browser policies.
How can I create animation with CSS and no JavaScript?
Use transitions when a value should change smoothly, for example on hover, and @keyframes with animation for multi-step motion. Use @starting-style for entry animations on dialogs and popovers, and view transitions for smooth changes between pages. Always respect users who have set prefers-reduced-motion.
Who is HTML5 and Modern CSS for, and what do I need to know first?
It suits people who can already write basic HTML and CSS, front-end developers and UI designers who want to use newer browser features. You should know semantic elements, selectors, the box model and Flexbox. JavaScript is not required. If you are starting from zero, take Basic HTML+CSS first.
What can I do after finishing HTML5 and Modern CSS?
You will be able to build self-validating forms, add captioned video, create dialogs and popovers in HTML, organise styles with :has(), nesting and cascade layers, build self-adapting components with container queries, create animation and make a website installable and usable offline, and you will know how to check which features your users' browsers support.
How does this course differ from Basic HTML+CSS?
Basic HTML+CSS teaches the foundations from zero, from page structure and the box model to Flexbox, Grid and responsive design, up to publishing a first website. HTML5 and Modern CSS goes further into newer browser features such as form validation, media, dialog, popover, :has(), cascade layers, container queries, animation and offline-ready websites, so the two can be taken in sequence without repeating content.
Related articles
Articles are published in Thai.