Welcome to the Real Thing
Most people live on the surface of the web—scrolling, clicking, tapping. But beneath all of that, there's structure. Logic. Craft.
In this class, you'll learn to read and write the source code that powers the modern internet. Not with drag-and-drop tools. Not through shortcuts. But with the foundational tools—HTML and CSS—the way it actually works.
You'll start from nothing. Build from scratch. And by the end, you won't just have a few websites. You'll have a lens—a way of seeing and shaping digital space that most people never access.
This isn't a bootcamp. This isn't a YouTube tutorial. This is the real thing.
Student Pledge Required
I will understand before I automate.
When I use AI, I will remain the architect.
I will review every suggestion.
I will know what my code does.
I will build with intent and intelligence."
Course Structure: 10 Weeks of Foundation
Week 1: HTML Elements
Codedex.io — Learn the building blocks of every web page
Week 2: HTML 101 — Document Structure
7-lesson series: skeleton, nesting, attributes, classes, and more
Week 3: The Cascade Begins
CSS Separation of Concerns
Week 4: <UL>TR4 L1STS, 4NCH0R P0W3R, & B0X M4G1C
Lists, Links, and the Box Model
Week 5: CSS Selector Quest
The Selector Guild — CSS selector practice in CodePen
Week 6: Tribute Page
First Complete Project
Week 7: Grid Systems
Two-dimensional Thinking
Week 8: Product Landing
Professional Product Page
Week 9: Portfolio System
Personal Brand Development (2 weeks)
Week 11: Ship It
Launch & Deploy
The "Brick by Brick" Method
Micro-Skills Architecture
Each assignment builds one tiny, specific skill that becomes the foundation for the next. You cannot proceed to Assignment B until you demonstrate mastery of Assignment A through multiple assessment gates.
Four Types of Mastery Gates
- Technical Gate - Code validates and works perfectly
- Conceptual Gate - Can explain why it works
- Debug Gate - Can fix broken code
- Teaching Gate - Can help a classmate understand
No Student Left Behind
Multiple learning pathways accommodate different learning styles:
- Visual learners: Figma integration and visual diagrams
- Kinesthetic learners: Hands-on coding from day one
- Analytical learners: Deep documentation and technical specs
- Social learners: Peer teaching and pair programming
Why This Works
Traditional courses throw everything at you at once. You memorize, you forget. This course builds muscle memory. Each micro-skill becomes automatic before you move on. By Week 11, you won't have to think about syntax—your fingers will know.
Course Philosophy: "Brick by Brick. Tag by Tag."
Most people live on the surface of the web—scrolling, clicking, tapping. But beneath all of that, there's structure. Logic. Craft.
This course teaches students to become Designer-Coders—professionals who think visually AND structurally. You'll learn to see the web through two essential lenses:
The Designer's Eye:
Typography, color, layout, hierarchy, user experience
The Coder's Mind:
Structure, syntax, logic, problem-solving, optimization
We build understanding brick by brick, tag by tag. Starting with hand-coded foundations, progressively integrating AI as a professional partner. By the end, you won't just make websites—you'll craft digital experiences with both aesthetic sensibility and technical precision.
The Journey:
- Weeks 1-3: Foundation (Hand-coding, AI as tutor)
- Weeks 4-6: Styling (Design principles, AI as validator)
- Weeks 7-9: Layout (Complex systems, AI as co-coder)
- Weeks 10-11: Portfolio (Professional work, AI as partner)
This isn't choosing between design and code. It's mastering both.
Core Principles
1. Designer-Coder Duality
- Every project balances visual design and code structure
- Learn to switch between aesthetic and technical thinking
- Understand how design decisions impact code and vice versa
- Develop fluency in both Figma and code editors
2. Build-First Learning
- Create something visible every single class
- Theory follows practice—understand by doing
- Micro-lessons (5-10 min) integrated with hands-on work
- No extended lectures or rote memorization
3. Three-Spine Integration
- Internet Literacy: Weekly micro-theory on how the web works
- Immediate Building: Projects that work from Day 1
- Design Thinking: Parallel Figma work reinforcing code concepts
- All three spines woven throughout every week
4. Progressive AI Integration
- Week 1: Setup and orientation, no AI yet
- Weeks 2-3: AI as reference ("What is a <div>?", "Explain CSS specificity")
- Weeks 4-5: AI as validator ("Is my HTML semantic?", "Check my form structure")
- Weeks 6-7: AI as suggester ("How would you style this?", "Show me flexbox options")
- Weeks 8-9: AI as co-coder (Copilot autocomplete, generating components)
- Weeks 10-11: AI as partner (Full professional workflow, prompt engineering)
5. AI as Partner, Not Replacement
- Students must understand what AI generates
- Ability to review, debug, and improve AI suggestions
- Learn when to accept, modify, or reject AI code
- Develop prompt engineering skills specific to web development