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
What Happens When Physical Games Disappear?
The speakers discuss Sony's decision to end physical disc production for PlayStation games by 2028, exploring the cultural impact beyond ownership and preservation concerns. They debate whether eliminating physical media removes an important part of gaming culture that supports both collectors and the broader gaming industry, using an audiophile-to-consumer market analogy.
AI Safety: From Narrow AI to Superintelligence
This podcast episode explores AI safety from narrow AI through superintelligence, discussing how current AI systems are progressing toward artificial general intelligence (AGI) and potentially superintelligence (ASI). The hosts examine the risks, alignment challenges, and governance issues that arise at each stage, while acknowledging both the theoretical nature of these predictions and the need for proactive safety measures.
Web News: Consumer Electronics Are Getting Gutted
The hosts discuss how the consumer electronics market is being severely impacted by AI chip demand and component shortages, causing significant price increases across gaming consoles, PCs, and phones. They analyze the Steam Machine's pricing as an indicator of broader market trends and advise consumers to prepare for sustained high prices rather than hoping for relief.
Get Found: SEO, Social Media, and Building an Audience with Matt Diamante
Matt Diamante, founder of Hey Tony digital marketing agency, discusses his journey building an SEO-focused business without paid ads or funding, his social media growth strategy of posting daily content, and how SEO is evolving in the era of AI overviews and conversational search. He emphasizes that successful businesses need to focus on selling a product or service and building human connections rather than gaming algorithms.
The $2 Trillion AI Panic: Is SaaS Really Dead?
The hosts discuss the $2 trillion drop in SaaS stock valuations driven by AI panic, arguing that while AI-generated demos are impressive, the actual business reality of maintaining complex software systems with integrations, support, and data migration makes wholesale SaaS replacement unlikely. They conclude that SaaS fatigue was already present before AI, and the market is overreacting to disruption fears that will play out gradually over years rather than immediately.