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: 11 Weeks of Foundation
Week 0: S3tup & 0nb04rd1ng
Environment Configuration - Dev tools mastery
Week 1: HTML Fundamentals & Internet Basics
Understanding the Internet & HTML Foundations
Week 2: D0cum3nt 4rch1t3ctur3
Structure Before Style - Valid HTML foundations
Week 3: Th3 C4sc4d3 B3g1n5
CSS Separation of Concerns
Week 4: F0rm5 & 1nput5
User Interaction Patterns
Week 5: Fl3xb0x M45t3ry
One-dimensional Layouts
Week 6: Tr1but3 P4g3
First Complete Project
Week 7: Gr1d Sy5t3m5
Two-dimensional Thinking
Week 8: Pr0duct L4nd1ng
Professional Product Page
Week 9: P0rtf0l10 Sy5t3m
Personal Brand Development (2 weeks)
Week 11: Sh1p 1t
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