Basic Responsive Web Design
Basic Responsive Web Design is a course in designing websites that display well on every screen size with current HTML and CSS, covering mobile-first design, media queries, Flexbox, CSS Grid, container queries and responsive images. It suits web designers, web developers and anyone who has built sites with CSS, and you leave able to build and publish your own responsive website.
- Duration12 hours · 2 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Most people switch between phones, tablets and computer screens of many sizes throughout the day, so a good website must stay easy to read and use on every screen. Responsive web design is the set of ideas and techniques that lets a single page stretch, shrink and rearrange itself to fit the space available, without building a separate site for each device.
This course teaches responsive principles and techniques with the HTML and CSS that browsers support today, from mobile-first thinking, the viewport, media queries, fluid layouts, Flexbox and CSS Grid to container queries, flexible typography, images, tables and mobile navigation. Learners also check accessibility and performance, and finish by building a real responsive website. (2 days, 6 hours per day, 12 hours in total, Basic level.)
What you’ll gain
- Understand how responsive web design and mobile-first design work
- Use the viewport, media queries and feature queries correctly
- Build responsive layouts with fluid layouts, Flexbox, CSS Grid and container queries
- Make text, images, tables and menus display well on mobile devices
- Check display, accessibility and performance across screen sizes
- Build and publish a responsive website independently
Who this course is for
- People who have built websites with HTML and CSS
- Web designers who want pages that work on every screen size
- Web developers who want responsive layouts in plain CSS without a framework
- People maintaining company websites who want existing sites to work well on mobile
Prerequisites
- Basic computer and internet skills
- Basic HTML, such as headings, lists, links and images
- Basic CSS, such as selectors, colours, fonts and the box model
- No JavaScript knowledge is required
Curriculum
Course Details
This course is the 2026 edition of Basic Responsive Web Design. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs. Basic level. It keeps the original core of a CSS refresher, responsive versus adaptive design, the viewport, media queries, the box model, fixed, fluid and elastic layouts, Flexbox, Grid, multi-column layout, and responsive images
and tables, and moves older techniques to CSS that browsers support today: feature queries instead of Modernizr, range syntax media queries, container queries, clamp(), and WebP and AVIF images. It also adds accessibility and Core Web Vitals checks. The course focuses on plain CSS, unlike Basic HTML+CSS and Basic Responsive Web Design with Bootstrap 5. Learners take home a lab guide and a responsive website template.
Day 1 Responsive Principles and Layout
Section 1: Lab: Introducing Responsive Web Design
- What responsive web design is and why every site needs it
- How responsive, adaptive and server-side device detection differ
- Mobile-first thinking and progressive enhancement
- Lab: analyse real sites with Device Mode in DevTools
Section 2: A CSS Refresher for Responsive Work
- Common selectors, the cascade and specificity
- box-sizing, CSS resets and browser defaults
- Absolute and relative units such as px, %, rem, vw and dvh
- Custom properties for site-wide colours and spacing
Section 3: The Viewport, Media Queries and Feature Queries
- The viewport meta tag and viewport width on mobile
- Range syntax media queries such as (width >= 48rem)
- Choose breakpoints from content rather than device models
- Check browser support with @supports instead of Modernizr
- Lab: a page that changes layout with screen size
Section 4: Lab: Fluid Layouts
- Fixed, fluid, elastic and adaptive layouts and their trade-offs
- Containers limited with max-width
- min(), max() and clamp() for flexible sizes
- Lab: an article layout that reads well on every screen
Section 5: Lab: Responsive Flexbox
- Flex containers, flex items and alignment
- flex-wrap, flex-basis and gap for rows that wrap by themselves
- Change order and direction by screen size
- Lab: a menu bar and card row that collapse with the screen
Section 6: Lab: Responsive CSS Grid
- grid-template-columns, the fr unit and gap
- repeat(), auto-fit and minmax() for grids without media queries
- Change grid-template-areas at each breakpoint
- Lab: a full page layout with header, sidebar and footer
Day 2 Components, Media, Quality and Workshop
Section 7: Lab: Container Queries
- How media queries and container queries differ
- container-type and @container
- cqi units for sizes based on the container
- Lab: one card that works in both narrow and wide columns
Section 8: Flexible Typography and Spacing
- Fluid font sizes with clamp()
- Comfortable line length and line height for Thai text
- A consistent spacing scale with custom properties
- Multi-column layout for long content
Section 9: Lab: Responsive Images and Media
- Images that resize with max-width, aspect-ratio and object-fit
- Choose files by screen size with srcset and sizes
- Change image cropping by screen with picture
- WebP and AVIF files, loading="lazy" and responsive video
- Lab: a fast-loading hero banner and gallery
Section 10: Lab: Tables and Navigation on Mobile
- Horizontally scrolling tables and tables that become cards on small screens
- Mobile menu patterns such as a menu button and collapsible menus
- Sticky headers and buttons that are easy to tap
- Lab: a site menu and pricing table that work on every screen
Section 11: Accessibility and Performance
- Support zooming and users who enlarge text
- Contrast, focus and prefers-reduced-motion
- Core Web Vitals: LCP, CLS and INP
- Lab: find and fix issues with Lighthouse
Section 12: Workshop: A Responsive Website from Scratch
- Plan a mobile-first wireframe for small and large screens
- Build the pages with every technique from the course
- Test on real phones and several browsers
- Publish through GitHub Pages or Netlify
- Workshop: present your own website 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 responsive and adaptive design?
Responsive design uses a single page that stretches and shrinks continuously with the space available, using flexible layouts, media queries and container queries, so it works on every screen size, including devices that do not exist yet. Adaptive design prepares several fixed layouts for set screen sizes and shows the closest one. Most sites today are responsive at their core and use adaptive ideas only where needed.
How do you write a media query in CSS?
First add the viewport meta tag to the HTML page, then write @media followed by a condition, for example @media (width >= 48rem) { ... } for screens 48rem wide or more. This range syntax is easier to read than the older min-width form and is supported by current browsers. With a mobile-first approach, write small-screen styles as the default, add media queries for wider screens, and choose breakpoints where the content starts to look wrong rather than by device model.
How do you make images responsive?
Start with max-width: 100% and height: auto so images resize with their space, and use aspect-ratio and object-fit to keep proportions. Then use srcset with sizes so the browser picks a file that fits the screen, use the picture element when you need different crops on mobile and large screens, choose smaller WebP or AVIF files, and add loading="lazy" to images further down the page.
What are container queries, and how do they differ from media queries?
Media queries check the size of the whole screen, while container queries check the size of the box that wraps a component. You set container-type on the parent and write conditions with @container, so the same component adapts to the space it gets, such as a card placed in both a narrow and a wide column on one page. Major browsers support them, and the course includes a hands-on lab.
Who is the Basic Responsive Web Design course for, and what should I know beforehand?
It suits people who have built sites with HTML and CSS, web designers and developers who want sites that work on every screen with plain CSS and no framework, and people maintaining company sites who want them to work well on mobile. You should know basic HTML and CSS; JavaScript is not needed. If you are new to HTML and CSS, start with Basic HTML+CSS.
What can I do after completing Basic Responsive Web Design?
You can design and build websites that work well on phones, tablets and large screens, lay out pages with Flexbox and CSS Grid, build components that adapt with container queries, handle images, tables and mobile menus, check accessibility and speed with Lighthouse, and publish through GitHub Pages or Netlify, with a template ready for your next project.