You Know CSS… So Why Can’t You Build Anything?
The hosts of HTML All the Things podcast discuss why knowing CSS theory doesn't translate to building real-world UIs, emphasizing that practical, hands-on experience is essential for developing CSS muscle memory. They outline common pitfalls like over-nesting and overly specific selectors, and provide a practical learning framework with specific UI elements to build. The episode concludes with a four-step approach to self-directed CSS practice.
Summary
The episode opens by addressing a common frustration: developers who have learned CSS through tutorials or reference materials like W3Schools still struggle to build functional layouts. The hosts argue that textbook-style learning fails to replicate the real-world decision-making required in front-end development, such as knowing when to use fixed vs. dynamic units or when to choose CSS Grid over Flexbox.
A central theme is 'CSS muscle memory' — the ability experienced developers have to look at a UI and immediately mentally decompose it into components, layout strategies, and responsive breakpoints. The hosts argue this skill can only be developed through repeated, practical building, not passive reading. Matt describes how this intuition develops over time, using examples like navbar construction and hero sections, and Mike acknowledges his own rustiness from not practicing CSS regularly.
The hosts identify several common mistakes made by developers who lack practical experience: over-nesting with too many wrapper divs, writing overly specific CSS selectors that create redundancy and cross-browser bugs, fighting layouts with contradictory CSS rather than restructuring, and overusing position absolute with compensatory position relative wrappers. They argue these mistakes are a natural and necessary part of the learning process, and that frustration with one's own messy code is a key driver of improvement.
Specific UI elements recommended for practice include: navbars (for responsive design, semantic HTML, accessibility, and mobile toggles), hero sections (for dynamic viewport units, background media handling, and responsive breakpoints), blog content with sidebars (for styling rich text content, two-column layouts, and stacking behavior on mobile), forms (for input styling constraints, browser compatibility, and state-based styling), and CSS drawings (for exploring niche properties, pseudo-classes, and nth-child selectors in a low-stakes environment).
The hosts also address the broader industry context, noting that pure front-end developer roles are declining in favor of full-stack or design engineer positions, and that AI tools have complicated the learning landscape for juniors. They argue that building a solid CSS foundation before incorporating AI is essential so developers can catch egregious errors and understand what the tools are producing.
The episode concludes with a four-step practical learning framework: find a UI you're interested in, attempt to recreate it using your own knowledge, save your work in a directory for future reference, and optionally use version control to refactor and compare your progress over time.
About this episode
People learn CSS - but still can’t build anything. In this episode, we break down how to learn CSS through practical, real-world scenarios and actually build responsive layouts.
Key Insights
- The hosts argue that CSS muscle memory — the ability to instantly decompose a UI into layout strategies — cannot be developed through textbook or tutorial learning alone, only through repeated hands-on building.
- Matt claims that over-nesting with wrapper divs is one of the most common signs of developers who haven't done enough practical CSS work, and that the instinct to restructure rather than fight a layout only comes from frustrating real-world experience.
- The hosts argue that overly specific CSS selectors, while not catastrophic on simple sites, increase the likelihood of cross-browser rendering inconsistencies and make targeted bug fixes significantly harder.
- Matt contends that the practical understanding of when to use fixed units versus dynamic units (e.g., pixels vs. percentages vs. DVH) is something developers only internalize through trial-and-error building, not by reading about the units in isolation.
- The hosts argue that CSS drawings, while impractical for production, are a legitimate learning tool because they force developers to explore niche properties and pseudo-classes that end up having real-world applications.
- Matt suggests that simpler client websites — basic landing pages or business sites — remain valid learning environments for junior developers, drawing an analogy to contractor building codes where you only need to fix the wiring you disturb, not the whole house.
- The hosts argue that the current industry messaging around AI and CSS learning is contradictory and harmful to juniors: they're told not to use AI without understanding code, but also pressured to use AI tooling to stay competitive, with no clear on-ramp.
- Matt claims that saving practice work in a version-controlled directory and later refactoring it serves as a concrete, measurable indicator of CSS skill progression — for example, reducing a layout from 14 wrappers to 7 over a year of practice.
Topics
Transcript
People learn CSS, but they still can't build anything. We've all heard that learning on the job is the fastest way to gain new relevant skills. Textbooks, for example, are a great reference or even a good starting point, but they lack the practicality of real-world experience. So, for example, a textbook might cover a topic for an entire chapter, only to have that topic be something that someone that's actually employed in the space, they might only do that thing once a year, or they might not even do it at all. So this knowledge point reminds me of the backend developer sort of meme where backend devs can struggle so much with frontend that they work with tools…
Full transcript available for MurmurCast members
Sign Up to AccessMore from HTML All The Things - Web Development, AI, and Developer Careers
How to Prepare for a Tech Layoff
This episode discusses how to prepare for tech layoffs by identifying warning signs, building an emergency fund, maintaining updated resumes and portfolios, and cultivating professional networks. The hosts emphasize that layoffs are increasingly common across the tech industry regardless of company profitability, and that proactive preparation is essential even when employment seems secure.
Don't Just Vibe Code, Learn While You Code
Matt and Mike discuss how junior developers can learn foundational coding skills while using AI to code, arguing that understanding core concepts remains valuable despite AI automation. They identify three learner camps (vibe coders, aspiring junior devs, and job-focused developers) and debate whether manual coding knowledge is necessary for future success in an AI-driven development landscape.
Does AGI Actually Matter to You?
The hosts discuss whether GPT-6 Astra represents AGI, concluding that AGI is a moving target with different meanings for different users. They argue that rather than a universal definition, AGI should be understood through practical application—whether an AI can perform tasks equivalent to a human professional in specific domains. The conversation emphasizes that consumer-level adoption depends more on practical capability and accessibility than on achieving theoretical AGI status.
AI Agent Skills Explained: What They Are and Which Ones to Use
Agent skills are reusable text instructions packaged in markdown files that teach AI agents how to perform specific tasks or follow processes, differing from prompts and GPTs by using progressive disclosure to avoid context bloat. The hosts discuss how skills like Grill with Docs, Wayfinder, and Code Review help structure AI workflows, emphasizing the importance of avoiding skill bloat while building reproducible processes across teams.
AI Lets Me Game More - and Work Better
Two hosts discuss how to productively spend time while AI agents run tasks, arguing that taking breaks to play retro games or relax actually improves work quality and employee satisfaction rather than cramming more work into available time. They advocate for a balanced approach that values employee wellbeing alongside productivity metrics.