Advanced Responsive Web Design
Advanced Responsive Web Design is a course in adding motion and interaction to responsive websites with SVG, the Web Animations API, scroll-driven animations and view transitions, without jQuery. It suits web designers and web developers who already build responsive sites with CSS, and you leave with your own interactive landing page.
- Duration18 hours · 3 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Once a website works on every screen size, the next step is to give it character and make it a pleasure to use, with crisp icons, smooth mobile menus, scroll effects and gentle page transitions. These used to need jQuery and many plugins, but today the browser's own CSS and JavaScript can do almost all of it, so the code is lighter, loads faster and is easier to maintain.
This course builds on Basic Responsive Web Design and focuses on motion and interaction. It starts with SVG, transitions, animation and the Web Animations API, moves on to mobile navigation, sticky headers, forms, parallax with scroll-driven animations and 3D cards, and finishes with background video, view transitions, performance and accessibility, before bringing every technique together in an interactive landing page workshop. (3 days, 6 hours per day, 18 hours in total, Advanced level.)
What you’ll gain
- Plan and troubleshoot advanced responsive work systematically with DevTools
- Use SVG for crisp icons and graphics that can be recoloured with CSS
- Build advanced transitions and animations with CSS and the Web Animations API, without jQuery
- Build navigation, headers and forms that are easy to use on mobile
- Create parallax and scroll effects with scroll-driven animations and a fallback
- Use view transitions, background video and continuous content appropriately
- Look after the performance and accessibility of work with motion
Who this course is for
- Web designers and web developers who already build responsive sites with CSS
- People who have completed Basic Responsive Web Design and want to go further
- Developers who want to stop relying on jQuery and plugins for effects
- People who want distinctive websites that work well on every device
Prerequisites
- Able to build responsive sites with HTML and CSS, or have completed Basic Responsive Web Design
- Understand Flexbox, CSS Grid and media queries
- Able to read and edit basic JavaScript, such as variables, functions and events
- Comfortable with VS Code and browser DevTools
Curriculum
Course Details
This course is the 2026 edition of Advanced Responsive Web Design. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs. Advanced level. It keeps the original core of troubleshooting, slideshows, SVG, transitions, animation, smooth scrolling, mobile navigation, fixed headers, slide-out search, form validation, parallax, background video, full-screen images, 3D cards and continuous
content, but moves from jQuery and plugins to the browser's own features: the Web Animations API, scroll snap, the Popover API, the Constraint Validation API, scroll-driven animations and view transitions. It uses SVG instead of icon fonts and adds performance and accessibility. The course builds on Basic Responsive Web Design, which focuses on layout. Learners take home a lab guide and an interactive landing page template.
Day 1 Graphics, Motion and Slideshows
Section 1: Lab: Workflow and Troubleshooting
- The website you will build through the course, and planning before you code
- Check browser support with Baseline and MDN
- Troubleshoot with the DevTools Layout, Animations and Rendering tools
- Lab: a moodboard and page plan for your own landing page
Section 2: Lab: Icons and Graphics with SVG
- How SVG and icon fonts differ, and why SVG is the better choice
- Embed SVG inline, with img and as a sprite with use
- Recolour with currentColor and style or animate SVG with CSS
- Shrink files with SVGO and add text for accessibility
- Lab: an icon set and logo that change colour with the theme
Section 3: Lab: Advanced Transitions and Animation
- Easing with cubic-bezier() and linear() for natural motion
- The individual translate, rotate and scale properties
- Entry animations with @starting-style
- Lab: buttons and links with hover and press effects
Section 4: Lab: The Web Animations API Instead of jQuery
- Convert existing jQuery code to standard JavaScript
- Create animations with element.animate() and keyframes
- Control play, pause and reverse, and wait for finished
- Lab: an animated expanding panel with no library
Section 5: Lab: Modern Slideshows and Carousels
- Scroll snap for slides that can be swiped on mobile
- Navigation buttons with scrollBy and scroll-behavior
- Autoplay that can be paused, with keyboard support
- Lab: a hero slideshow without jQuery
Day 2 Menus, Forms and Scroll Effects
Section 6: Lab: Mobile Navigation
- Mobile menu patterns: menu button, off-canvas and full-screen menus
- An accessible menu button with button and aria-expanded
- Menus with the Popover API and dialog, with animation
- Lab: three navigation patterns that work with a keyboard
Section 7: Lab: Headers and Page Scrolling
- A sticky header that shrinks as the page scrolls
- Smooth scrolling to sections with scroll-behavior and scroll-margin-top
- A back-to-top button and a reading progress bar
- Lab: a long page with a menu that highlights the current section
Section 8: Lab: Mobile-friendly Forms
- A slide-out search box and compact forms
- inputmode, autocomplete and enterkeyhint for mobile keyboards
- Validation with the Constraint Validation API and :user-invalid instead of jQuery Validation
- Lab: a sign-up form with clear error messages
Section 9: Lab: Parallax and Scroll Effects
- Scroll-driven animations with animation-timeline, scroll() and view()
- Set the active range with animation-range
- Fallbacks with @supports and IntersectionObserver
- Lab: parallax and content that fades in as you scroll to it
Section 10: Lab: 3D Cards and Interaction
- perspective, transform-style and backface-visibility
- 3D flip cards and layered galleries
- Separate mouse and touch behaviour with @media (hover: hover)
- Lab: flip product cards that work with both mouse and finger
Day 3 Media, Page Transitions, Quality and Workshop
Section 11: Lab: Full-screen Heroes and Background Video
- Full-height areas on mobile with dvh and svh
- Full-screen background images with object-fit and picture
- Background video with muted, playsinline and poster
- Lab: a hero that shows a still image when users prefer reduced motion
Section 12: Lab: View Transitions and Continuous Content
- Same-document view transitions with startViewTransition()
- Cross-document page transitions with @view-transition
- Load more content continuously with IntersectionObserver and the Fetch API
- Lab: a portfolio page that opens details smoothly
Section 13: Animation Performance
- Animate only transform and opacity, and use will-change sparingly
- Core Web Vitals: LCP, CLS and INP
- Analyse with the Performance panel and Lighthouse
- Lab: find and fix what makes a page stutter
Section 14: Accessibility and Testing on Real Devices
- prefers-reduced-motion for every effect
- Visible focus with :focus-visible and keyboard order
- Remote debugging on Android phones and iPhones
- Lab: a pre-launch checklist
Section 15: Workshop: An Interactive Landing Page
- Combine the menu, hero, slideshow, parallax and 3D cards in one page
- Check every screen size, performance and accessibility
- Publish through GitHub Pages or Netlify
- Workshop: 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
What is the difference between SVG icons and icon fonts?
An icon font stores icons as characters. It is easy to use, but loads the whole set even if you use only a few, supports one colour at a time, and shows boxes or odd characters if the font fails to load. SVG is a vector image that stays sharp at any size, loads only the icons you use, can be recoloured with currentColor, supports several colours, can be animated with CSS and can carry text for screen readers. That is why inline SVG or SVG sprites are now the usual choice.
How do you build a hamburger menu for mobile?
Use a button element to open the menu, with aria-expanded to report its state. Hide the menu list on small screens with a media query and show it normally on large screens. Today the Popover API or dialog can open and close the menu, close it with Esc and manage focus with almost no JavaScript. Then add an open and close animation, and test it with a keyboard and a screen reader.
What is parallax scrolling, and how do you build it?
Parallax makes layers move at different speeds as the page scrolls, which creates a sense of depth. Today you can build it with CSS scroll-driven animations, linking an animation to scrolling through animation-timeline with scroll() or view(), without a JavaScript plugin. For browsers that do not support it yet, use @supports and IntersectionObserver as a fallback, and reduce or turn off the effect when users set prefers-reduced-motion.
Why does this course no longer use jQuery?
Work that used to need jQuery and plugins, such as slideshows, smooth scrolling, form validation and parallax, can now be done by the browser itself with scroll snap, scroll-behavior, the Constraint Validation API, the Web Animations API and scroll-driven animations. The code is lighter, loads faster and is easier to maintain. The course still shows how to convert existing jQuery code to standard JavaScript for people who maintain older sites.
Who is the Advanced Responsive Web Design course for, and what should I know beforehand?
It suits web designers and web developers who can already build responsive sites with CSS and want to add motion and interaction. You should understand Flexbox, CSS Grid and media queries and be able to read basic JavaScript. If you are not yet confident with responsive layout, start with Basic Responsive Web Design.
Can the Advanced Responsive Web Design course be run in-house for our team?
Yes. It can be run in-house for your team, with examples adapted to your own work, such as making your organisation's menus and landing pages smooth on mobile. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.