CSS and Styling with AI Assistance
Learn Tailwind CSS, responsive design, and dark mode by building a real page — with Claude Code writing the styles while you focus on what looks good.
Why CSS is hard and how AI changes that
CSS (Cascading Style Sheets) controls how web pages look — colours, fonts, spacing, layout, animations. It is notoriously frustrating because small changes can have unexpected effects, browser support varies, and centering a div has been an internet joke for decades. The traditional approach is to memorise hundreds of CSS properties and their interactions. With Claude Code, the approach is different: describe what you want and let the AI write the CSS. Instead of memorising that justify-content: center with display: flex centres horizontally, you ask Claude Code to centre the element and it chooses the right approach. Start by creating a project: mkdir styled-page && cd styled-page. Start Claude Code: claude. Ask it: Create a new HTML file with a basic landing page structure. Include a navigation bar, a hero section with a heading and subheading, a three-column feature section, and a footer. Use placeholder text. Do not add any styling yet — I want to see the unstyled version first. Open the HTML file in your browser. It will look like a plain document from the 1990s — text flowing down the page with no layout, no colours, no spacing. This is what HTML looks like without CSS. Every visual element you see on any modern website — the layouts, the rounded corners, the shadows, the animations — is CSS. The gap between this plain page and a modern website is exactly what we will bridge in this guide.
Setting up Tailwind CSS
Tailwind CSS is a utility-first CSS framework. Instead of writing CSS in a separate file, you add small utility classes directly to your HTML elements. For example, text-center centres text, bg-blue-500 adds a blue background, and p-4 adds padding. It sounds strange at first — classes like mt-8 mr-4 rounded-lg shadow-md feel like gibberish. But the pattern clicks quickly: every class does exactly one thing, and you compose them to build any design. Ask Claude Code: Set up Tailwind CSS for this project. I want the simplest possible setup — a CDN link in the HTML head is fine for now, no build tools. Then explain the naming pattern for the most common Tailwind classes: spacing, colours, typography, borders, and shadows. Claude Code will add a script tag to your HTML that loads Tailwind from the CDN. It will explain the patterns: spacing uses a scale where 1 equals 0.25rem (4px), so p-4 is 1rem of padding and m-8 is 2rem of margin. Colours follow a name-shade pattern like bg-red-500 or text-gray-700 where higher numbers are darker. Typography uses classes like text-xl, font-bold, and leading-relaxed. Borders use border, rounded-lg, and border-gray-200. Shadows use shadow-sm, shadow-md, shadow-lg. Ask Claude Code: Now add Tailwind classes to the navigation bar to make it look professional. I want a white background, subtle bottom border, the logo on the left, navigation links on the right, and comfortable padding. Refresh your browser and watch the navigation transform from plain text to a proper nav bar with a single line of class changes.
Building layouts with Flexbox and Grid
Layout is the most important CSS skill. Flexbox handles one-dimensional layouts (rows or columns). Grid handles two-dimensional layouts (rows and columns simultaneously). Ask Claude Code: Style the hero section using Flexbox. Centre everything vertically and horizontally. Make the heading large with a bold font. Add a subtle gradient background going from blue-50 to white. Add a call-to-action button with a blue background, white text, rounded corners, and a hover effect. Refresh your browser. The hero section should look like a modern landing page header. The key classes are flex flex-col items-center justify-center for centring, text-5xl font-bold for the heading, and bg-gradient-to-b from-blue-50 to-white for the gradient. Now ask Claude Code: Style the three-column features section using CSS Grid. Each feature card should have a coloured icon area at the top, a bold title, descriptive text, and a subtle border with rounded corners. Add a shadow that increases on hover. Use grid-cols-3 for the layout with a gap between cards. Refresh and you will see three professional feature cards in a row. Ask Claude Code: The three columns look great on desktop but will be too narrow on mobile. We will fix that in the responsive design section. For now, add vertical spacing between the hero section and the features section. Add padding to the features container. Style the footer with a dark background, white text, and links arranged in columns. After these changes, your page should look like a legitimate landing page. The difference between the unstyled version and this styled version demonstrates the power of CSS — same content, completely different impression.
Responsive design: mobile, tablet, desktop
Responsive design means your page looks good on every screen size — from a phone to a widescreen monitor. Tailwind makes this straightforward with breakpoint prefixes: sm: for small screens (640px+), md: for medium (768px+), lg: for large (1024px+), and xl: for extra large (1280px+). Classes without a prefix apply to all screen sizes. Ask Claude Code: Make the features section responsive. On mobile, show one card per row. On tablets (md breakpoint), show two cards per row. On desktop (lg breakpoint), show three cards per row. Also make the hero heading smaller on mobile — text-3xl by default, text-5xl on lg screens. The key change is replacing grid-cols-3 with grid-cols-1 md:grid-cols-2 lg:grid-cols-3. This reads as: 1 column by default, 2 columns at medium screens, 3 columns at large screens. For the heading: text-3xl lg:text-5xl. To test responsiveness, open your browser's developer tools (right-click, Inspect) and click the device toggle button (looks like a phone and tablet). Resize the viewport and watch your layout adapt. Ask Claude Code: Make the navigation responsive. On mobile, hide the nav links and show a hamburger menu button. On desktop, show the full nav links and hide the hamburger button. Add a simple click handler that toggles the mobile menu open and closed. This requires a small JavaScript snippet for the toggle, which Claude Code will add. Test by resizing: on desktop you see links, on mobile you see a hamburger button that opens a dropdown menu. Ask Claude Code: Review the entire page for responsive issues. Check that nothing overflows on small screens, text is readable, buttons are tappable, and spacing is appropriate at all breakpoints.
Typography and colour systems
Good design uses a consistent type scale and colour palette — not random sizes and colours. Ask Claude Code: Set up a type system for the page using Tailwind. The page should use Inter font from Google Fonts. Define a clear hierarchy: page title at text-4xl font-bold, section headings at text-2xl font-semibold, card titles at text-lg font-medium, body text at text-base with text-gray-600, and small text at text-sm text-gray-500. Apply this hierarchy consistently across the entire page. Claude Code will add the Google Fonts import and update classes throughout the page. The result should feel cohesive — headings are clearly headings, body text is clearly body text, and the visual hierarchy guides the reader's eye. Now ask Claude Code: Replace all the arbitrary colours with a consistent colour palette. The primary colour is blue-600 for buttons and links. The secondary colour is gray-100 for backgrounds. Text colours are gray-900 for headings, gray-600 for body, and gray-400 for muted text. Success is green-600, warning is yellow-600, and error is red-600. Update every colour class on the page to use only these tokens. Ask Claude Code: Add a subtle hover effect to all clickable elements — buttons should darken slightly, links should get an underline, and cards should lift with a shadow. Use Tailwind transition classes so the effects animate smoothly. The key classes are transition-all duration-200 for smooth animations, hover:bg-blue-700 for button darkening, hover:underline for links, and hover:shadow-lg hover:-translate-y-1 for card lifting. These micro-interactions make the page feel polished and professional without any custom CSS.
Dark mode implementation
Dark mode is expected on modern websites. Tailwind supports it with the dark: prefix — dark:bg-gray-900 applies a dark background only when dark mode is active. Ask Claude Code: Add dark mode support to the entire page. Every background, text colour, border, and shadow should have a dark mode variant. The dark background should be gray-900, dark card backgrounds gray-800, dark text white or gray-300, and dark borders gray-700. Add a toggle button in the navigation that switches between light and dark mode. Claude Code will add a dark mode toggle that adds or removes a dark class on the HTML element. Every colour class gets a dark: variant: bg-white dark:bg-gray-900, text-gray-900 dark:text-white, border-gray-200 dark:border-gray-700. Click the toggle button and the entire page should switch between light and dark themes. Ask Claude Code: Save the user's dark mode preference in localStorage so it persists when they refresh the page. Also respect the user's system preference — if their operating system is set to dark mode, default to dark mode. Use the prefers-color-scheme media query to detect system preference. The script should check localStorage first (user's explicit choice), then fall back to system preference. Ask Claude Code: Review the dark mode for issues. Common problems include images that look wrong on dark backgrounds, shadows that are invisible against dark surfaces, and placeholder text that disappears. Fix any issues found. Test the toggle, refresh the page to verify persistence, and switch your system theme to verify the fallback. Dark mode done well is a sign of quality — it shows attention to detail that users notice and appreciate.
Components and reusable patterns
Good CSS is reusable. Instead of styling each button individually, you define a button pattern and reuse it. Ask Claude Code: Identify all repeated styling patterns on the page and extract them into reusable components. Create a style guide section at the bottom of the page that shows all components: primary button, secondary button, outline button, feature card, stat card, nav link, section heading, and badge. Each component should show both light and dark mode versions. Claude Code will recognise patterns like buttons (several elements sharing similar padding, rounded corners, and colours), cards (bordered boxes with consistent padding and shadows), and headings (text with consistent size and weight). The style guide is a living document that shows every reusable element. Ask Claude Code: Create a component for a testimonial card that shows a quote, author name, author title, and a star rating. Create three testimonial cards and add them to the page between the features section and the footer. Use the same card styling pattern as the feature cards for consistency. Then ask: Create a pricing card component with a plan name, price, list of features with checkmarks, and a CTA button. Create three pricing cards in a row with the middle one highlighted as the recommended plan. The highlight should use the primary colour as a border and a subtle background tint. These exercises build your intuition for component-based design — thinking in reusable pieces rather than individual pages. Every modern CSS framework and design system follows this approach. The page you have built now has a consistent type system, colour palette, responsive layout, dark mode, and reusable components — the same foundations used by professional design systems.
Animations and polish
The final layer of polish is animation. Subtle motion makes interfaces feel alive without being distracting. Ask Claude Code: Add the following animations to the page. Fade in the hero section content when the page loads using a CSS keyframe animation. Add a subtle bounce to the CTA button on hover. Make the feature cards stagger their entrance — the first appears, then the second 100ms later, then the third 100ms after that. Add a smooth scroll behaviour so clicking nav links scrolls to the section instead of jumping. Claude Code will add @keyframes definitions and Tailwind's animation utilities. The hero fade-in uses animate-fade-in with a keyframe that goes from opacity 0 translate-y 10px to opacity 1 translate-y 0. The stagger effect uses animation-delay on each card. Smooth scrolling is a single class on the html element: scroll-smooth. Ask Claude Code: Add a scroll-triggered effect — when the features section scrolls into view, the cards should animate in. Use the Intersection Observer API to detect when elements enter the viewport. This is how professional landing pages create that dynamic scrolling experience. Start with the cards invisible (opacity-0 translate-y-4) and transition them to visible (opacity-100 translate-y-0) when they enter the viewport. The key principle: animations should enhance, not distract. Keep durations between 150ms and 300ms. Use ease-out for entrances and ease-in for exits. Animate opacity and transform only — these properties are GPU-accelerated and perform well. Never animate width, height, or margin — these cause expensive layout recalculations. Ask Claude Code: Do a final review of the page. Check for accessibility issues like colour contrast, focus states for keyboard navigation, and alt text for images. Add focus-visible outlines to all interactive elements. Your page is now production-ready — responsive, accessible, dark-mode-enabled, and polished.
Building Web Interfaces
This guide is hands-on and practical. The full curriculum covers the conceptual foundations in depth with structured lessons and quizzes.
Go to lesson