Website Design with Refactoring UI is a course in making web pages look better and easier to use with techniques from a developer's point of view, covering visual hierarchy, spacing systems, type scales, HSL and OKLCH colour palettes, shadows and CSS design tokens, with no artistic background needed. It suits people who build their own websites, frontend developers and UX/UI designers.
Many developers build web pages that work perfectly well yet still look cluttered, hard to read or untrustworthy, and they are not sure what to fix. The Refactoring UI approach closes this gap with practical techniques from a developer's point of view, such as creating hierarchy with font weight and colour rather than size alone, defining spacing and type scales in advance, and choosing colours from a prepared set of shades, so you can make pages look better and easier to use without any artistic training.
This course practises those principles with current CSS: hierarchy, spacing and layout with Grid and Flexbox, a fluid type scale with clamp(), and design tokens with CSS custom properties, through to building palettes with HSL and OKLCH, checking contrast against WCAG 2.2, dark mode with light-dark(), creating depth with shadows, working with images and finishing details. It closes with a before-and-after workshop on a real web page.
Course Details
This course is the 2026 edition of Website Design with Refactoring UI, rewritten to spend all its time on UI design principles and current CSS. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs on a starter HTML and CSS project, at Beginner to Intermediate level. Day one practises hierarchy, spacing and layout, typography and design tokens. Day two covers HSL and OKLCH palettes, WCAG 2.2 contrast, dark mode, shadows, images and finishing details. The course draws on the ideas in the book Refactoring UI with newly written exercises, and is not an official course from its authors. Learners take home the reworked project, a tokens.css file and a page review checklist.
Section 1: Lab: The Refactoring UI Way of Thinking
Section 2: Lab: Information Hierarchy
Section 3: Lab: Spacing Systems and Layout
Section 4: Lab: Designing Text
Section 5: Lab: Design Tokens with CSS Custom Properties
Section 6: Lab: Building Palettes with HSL and OKLCH
Section 7: Lab: Contrast, Accessibility and Dark Mode
Section 8: Lab: Creating Depth with Light and Shadow
Section 9: Lab: Images and Finishing Details
Section 10: Workshop: A Before-and-After Page Rework
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
Refactoring UI is an approach to interface design from the book by Adam Wathan and Steve Schoger, built on practical techniques rather than art theory. Examples include defining spacing and type scales in advance, creating hierarchy with font weight and colour rather than size, using light and shadow for depth, and picking colours from a prepared set of shades. It lets developers make pages tidier and easier to use without artistic training. This course builds new exercises on those ideas with current CSS.
Start with a limited set of spacing values, such as 4, 8, 12, 16, 24, 32, 48 and 64 pixels, and use only those rather than choosing values one at a time. Then define a type scale of sizes for headings, body text and secondary text, use clamp() so headings adapt to screen width, and declare both as CSS custom properties so they are reused across the site. Space between groups should be larger than space within a group, so users can see what belongs together.
HSL splits a colour into hue, saturation and lightness, so you can see what colour it is at a glance and make it lighter or darker by changing one value. OKLCH, supported by current browsers, has a lightness value much closer to human perception, so shades stay more consistent when you change the base colour. To build a palette, put the base colour in the middle, create around 9 to 10 lighter and darker shades, do the same for greys, and check text contrast against WCAG.
This course teaches the design principles: what to change and why, such as hierarchy, spacing, typography, colour and shadow, practised with standard CSS that works with any framework. The Tailwind CSS course focuses on utility classes and the Figma course on the design tool itself. The design tokens you create here can be turned straight into a Tailwind theme or Figma variables.
It suits people who build their own websites, frontend developers, UX/UI designers, students and IT staff who want their sites to look better. You should be able to write basic HTML and CSS, such as selectors, the box model and Flexbox, but no artistic training is needed. If you have never written HTML and CSS, take Basic HTML+CSS first.
Yes. It can be run in-house for your team, with examples adapted to your own work, such as reworking pages or systems your team already maintains. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.
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…
Every website we open today, whatever tool or framework built it, ends up in the browser as HTML and CSS. People who understand these two languages can edit pages, adapt templates and talk to development teams with confidence. Yet many beginners learn from…
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.…
