How to Build a Website — The Show For Beginners

Episode Summary

Executive Summary: This episode is a beginner-friendly walkthrough of the core pieces of a website: HTML for structure, CSS for presentation, JavaScript for behavior, plus a preview of related concepts like the DOM, events, CSS variables, and why frameworks and inline styles can complicate learning. The hosts stress fundamentals over tooling and recommend building a first site with plain HTML/CSS/JS before reaching for frameworks or heavy abstractions.

Main Topics: HTML as the structural foundation: HTML is introduced as the bones of a website: the markup language used to define content structure with elements like paragraphs, images, divs, headers, footers, and main sections. The hosts emphasize that a basic HTML file can already be opened in a browser and function as a simple document or website. CSS for styling, layout, and the cascade: CSS is explained as the layer that controls how a site looks, including typography, layout, color, spacing, shadows, animation, and positioning. The hosts stress selectors, properties, values, specificity, the cascade, and modern layout approaches like Flexbox and Grid. How CSS is added and managed: The episode covers the three main ways to use CSS: external stylesheets, style tags, and inline styles. The hosts recommend external stylesheets for most work and warn beginners against overusing inline styles because they harm maintainability and blur content/style separation. JavaScript for interactivity and the DOM: JavaScript is framed as the language that makes websites dynamic: responding to clicks, timers, form events, adding/removing classes, creating DOM nodes, fetching data, and changing the page without reloading. The DOM is introduced as the browser’s internal model of the page that JavaScript manipulates. Avoiding premature reliance on frameworks and utilities: The hosts advise beginners to avoid CSS frameworks, bundlers, build steps, and other abstractions at first because they can obscure fundamentals. They recommend learning native HTML, CSS, and JavaScript first so developers understand what frameworks are abstracting. Modern CSS features and practical patterns: The episode touches on CSS variables/custom properties, pseudo-selectors like hover/focus/active, and naming systems such as BEM. These are presented as useful tools that improve maintainability and help developers scale from a first website to larger projects.

Key Arguments: A website’s core foundation should be learned in the order HTML, then CSS, then JavaScript, because each layer builds on the one before it. Beginners can make a real website with just plain HTML files and a linked stylesheet, without frameworks, bundlers, or compilers. CSS is powerful but difficult because of the cascade and specificity; learning those concepts early pays off long-term. Inline styles are convenient for one-offs but usually create maintainability problems and should generally be avoided by beginners. JavaScript should be understood as the layer for interaction and state changes in the browser, especially through the DOM. Frameworks like Bootstrap or Tailwind can be useful later, but they can delay understanding of actual CSS and the reasons layouts behave the way they do. Pseudo-selectors and CSS variables are useful modern tools that expand what can be done with native CSS without adding extra libraries.

Data Points: CSS properties count: 520 distinct property names - The hosts referenced a CSS-Tricks article noting the scale of CSS properties while explaining how broad CSS is. CSS sources: 66 technical reports and 66 editors’ drafts - Mentioned while discussing how many CSS properties exist. Podcast episode suggestion count: 7 episodes in a row - Stan from Norway said he listened to seven episodes consecutively before writing in with the beginner-website suggestion. Wes’s FreshBooks usage: 11 years - Wes said he has used FreshBooks for roughly 11 years to track expenses, invoices, and projects. Sentry promo: 2 months free - Listeners using the coupon code 'tasty treat' were offered two free months. Level Up Tutorials pricing offer: 25% savings - Mentioned in the outro for annual pro membership. Course/video cadence: every single month - Level Up Tutorials was described as releasing a new premium tutorial series monthly. Tony Hawk game title: 1+2 remaster - Scott’s sick pick was the Tony Hawk Pro Skater 1+2 remaster for Nintendo Switch. Mini split capacity: 14,000 BTU - Wes specified the Della mini split unit size for his office.

Pivotal Quotes: "This is a show for Absolute beginners." — Wes: Introductory framing for the episode’s purpose and audience. "HTML is standing for hypertext markup language." — Scott: Explaining HTML as the structural foundation of a website. "Just don't use important." — Scott: Strong advice against overusing CSS !important except in rare third-party override cases.

Implications: For beginners, the path into web development is clearer: learn the native trio first, understand the browser’s model of a page, and postpone frameworks until the fundamentals feel natural. This approach should improve long-term maintainability and reduce dependency on tooling.