Hand-Code Your First Website: HTML + CSS Basics
Rich From TapTapKaboom · Multi-hyphenate Artist
A genuinely hands-on beginner HTML/CSS course built around a fun one-page project, though its git-based publishing workflow adds more setup overhead than most beginners need.
This course teaches HTML and CSS from zero by having the student build a single-page fan site for a favorite cartoon character, and that project focus is its biggest strength. Rather than lecturing through a list of tags in the abstract, the instructor frames HTML as "boxes inside boxes," a simple mental model that a true beginner can actually hold onto: every element is a box, boxes contain other boxes or text or nothing, and the browser decides how each box looks based on its tag name. That framing carries through the whole course and makes later concepts, like why an image element has no closing tag or why margin and padding behave the way they do, easier to absorb.
The arc is logical: install a code editor and browser, learn what HTML is, write some, then do the same for CSS, then apply both to a planned project, then debug it, then optionally get it a real domain. Before any character-specific coding starts, the course inserts a planning lesson built around a hand-drawn "box wireframe," a rough diagram naming each section of the intended page as a box. It is a small addition, but it teaches a habit many beginner courses skip entirely: separating what the page's structure should be from the act of typing tags into an editor.
Tooling choices are a mixed bag
The course leans on Sublime Text and GitHub Desktop, and while both are reasonable choices, the setup adds friction for a true beginner. Creating a GitHub account, learning what a repository and a commit are, and publishing through GitHub Pages is real, transferable knowledge about how professional developers back up and ship code, and the course walks through it patiently with an actual signup and first push. But it is also a lot of extra machinery bolted onto what is meant to be a first taste of HTML and CSS, and a newcomer whose only goal is understanding tags and boxes may find the git workflow more overhead than payoff.
The CSS portion covers real, useful ground: element selectors, class selectors, descendant selectors like targeting a span only inside an h1, and the practice of moving styles out of an inline style block into a separate linked stylesheet so multiple pages can share one set of rules. The course also shows Google Fonts integration and basic box-model properties like max-width, margin auto centering, and padding shorthand. What it does not cover is any modern layout method. There is no mention of flexbox or grid, and the site's only layout technique is a fixed max-width with auto margins, which limits how far a student can go once they want to build anything with multiple columns or a responsive layout.
The debugging lesson is a genuine strength. Instead of treating bugs as a footnote, the instructor works through an actual broken selector, a misplaced period meant to target a class, and explains it as a normal, expected part of coding rather than a sign of failure. It also flags two real beginner traps: case-sensitive file paths on GitHub versus a case-insensitive local file system, and the classic missing dot before a class name.
The bonus lesson on absolute versus relative URLs, delivered through a home-address analogy, closes a gap that trips up a lot of new coders when links and images stop working after a file gets moved into a subfolder. Overall, this is a well-paced, project-driven intro to the basics that succeeds at demystifying code for someone who has never touched it, even if its choice of a full git-based publishing workflow and its lack of any modern CSS layout method mean a student will need a second course fairly soon to go further.
The standout
The box wireframe planning exercise, where the structure of the page is sketched as literal nested boxes before any code is written, gives beginners a concrete way to separate planning from coding instead of guessing at layout as they go.
What you will learn
- How HTML elements, tags, and attributes work using the 'boxes inside boxes' mental model
- Writing and linking an external CSS file with selectors, classes, and descendant combinators
- Using GitHub Desktop to commit code and publish a live site via GitHub Pages
- Reading and editing a page live with Chrome's DevTools element inspector
- Sketching a box wireframe to plan a page's structure before coding it
- Spotting and fixing common beginner bugs like case-sensitive file paths and missing selector periods
Best for: Complete beginners who want to understand what HTML and CSS actually are by building one small, fun project end to end rather than jumping straight into a framework.
Skip it if: Anyone who already knows basic tags and selectors, or who wants modern layout techniques like flexbox and grid and responsive design.