Week 0: Setup & First Page — Your Digital Foundation Available

Wednesday, September 24, 2025 • 10:00 AM - 12:20 PM

First Day Reality: You'll be confused. You'll feel overwhelmed. That's completely normal and expected. Every professional developer started here.

Repository: https://github.com/DESN368/student-workspace

Theme: Foundation Building & Tool Mastery

Designer-Coder Lens

Designer Focus

Visual hierarchy in code editors, file organization as information architecture, GitHub as visual portfolio platform, choosing themes that enhance focus and productivity

Coder Focus

HTML document structure, Git version control foundations, browser developer tools introduction, understanding markup as the structural layer

The Duality: Every tag you write has both meaning (semantic structure) and potential appearance (visual hierarchy). This is why we start with HTML—it's the foundation that both designers and coders build upon.

Part 1: Welcome & Context Setting 10:00-10:30 AM

  • Welcome and introductions
  • Course philosophy: "Brick by Brick. Tag by Tag." — foundation building approach
  • Designer-Coder identity: thinking both visually AND structurally
  • Growth mindset and "coding is hard" reality check
  • Workspace evolution into portfolio explanation

Key Points:

  • Everything is public and demonstrates growth
  • Struggle is normal and expected
  • Asking for help is professional behavior

Part 2: GitHub Setup & Environment Tour 10:30-11:20 AM

👨‍🎨 Designer Moment

Your code editor is your design studio. Choose a theme that helps you focus—dark themes reduce eye strain during long sessions.

👨‍💻 Coder Moment

File organization is like information architecture. Clean folders and meaningful names make collaboration possible.

Live Demo & Follow-Along:

  1. Repository structure walkthrough
    • /setup/ folder purpose
    • /week01/ for assignments
    • README as living document
  2. GitHub web interface basics
    • Navigating files and folders
    • Understanding commit history
    • Using the pencil icon to edit

GitHub Setup Steps:

  1. Create GitHub Account
  2. Fork the Course Workspace
  3. Make Your First Edit
    • Click on README.md
    • Click pencil icon to edit
    • Add your name and save (commit)

Hands-On Exercise:

  • First README edit: Add your name
  • Write meaningful commit message
  • View commit history

Part 3: Your First HTML Page 11:20 AM-12:05 PM

Live Code-Along: About Me Page

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>About [Your Name]</title> </head> <body> <h1>Hello, I'm [Your Name]</h1> <p>I'm learning to be a designer-coder.</p> </body> </html>
Open the LiveCodes sandbox

Open in a new tab

Designer-Coder Discussion:

  • Designer perspective: Why does hierarchy matter even without CSS? How do headings create visual flow?
  • Coder perspective: How does the browser parse HTML? What makes semantic markup meaningful?
  • The Connection: Structure IS design—your HTML creates the foundation for everything visual.

Designer-Coder Intake Assignment:

Complete the intake form by editing the about-me.md file in your GitHub fork.

This is your first markdown edit and GitHub commit!

View Full Instructions in Canvas

Part 4: Manifesto — Heading Hierarchy in Practice 12:05–12:20 PM

Goal: Create a short “Designer–Coder Manifesto” using <h1> through <h6>, each followed by a paragraph. No CSS. Feel the hierarchy and the outline.

Instructions

  1. Inside the starter, add exactly one <h1> as the page title and a <p> under it explaining the manifesto’s purpose.
  2. Add one each of <h2>, <h3>, <h4>, <h5>, <h6>—each immediately followed by a <p> explaining that point.
  3. Keep levels in sensible order (don’t skip from H2 to H5).
  4. Wrap everything in a semantic container (<article> or <section>).

Connect to the Lens

  • Designer: How does heading order create visual flow even without CSS?
  • Coder: How will the browser/assistive tech outline this document?
  • Link: Structure drives meaning; meaning drives design choices.

Success Criteria

  • âś“ Exactly one <h1> + a paragraph under it
  • âś“ One each of <h2> … <h6> with a paragraph under each
  • âś“ Uses <article> or <section>
  • âś“ No skipped/illogical levels
Open the LiveCodes starter

Open in a new tab

Turn-in

Submission Instructions

  • Build your manifesto in the LiveCodes sandbox above.
  • When finished, open CodePen in a new tab.
  • Copy your finished HTML from LiveCodes and paste it into the HTML panel in CodePen.
  • Name your Pen: h1-manifesto-lastname-firstname-f25
  • Save your Pen (requires a free CodePen account).
  • Copy your Pen URL.
  • Submit that link in Canvas → Week 0 → Part 4 Submission.

Week 0 AI Policy: Foundation First

This Week: NO AI ASSISTANCE

We're building your foundation brick by brick, tag by tag. Every tool setup, every first HTML tag, every Git command needs to be understood at the foundational level.

Why No AI Yet?

  • You need to feel the friction of learning new tools
  • Problem-solving skills develop through struggle
  • Understanding comes from doing, not from having AI do it for you
  • Your foundation must be solid before AI becomes helpful

Starting Week 1: AI will be introduced as a reference tool for definitions and explanations

Submission Requirements Due End of Class

Due: End of class (12:20 PM)

Submit to Canvas:

  1. Link to your GitHub repository
  2. Screenshot of completed personal card challenge

Prep for Week 1

To Do Before Week 1:

  1. Complete Code + Design Workspace Setup
  2. Reading and Visual Notes for week 0
  3. Watch: "The Power of Believing You Can Improve" TED Talk by Carol Dweck
  4. Explore: Find 5 websites that inspire you and add them to the milanote board

Coming Next Week:

  • Monday: Internet vs Web deep dive, your first Figma exercises
  • Wednesday: Building a recipe page with semantic HTML

Resources

Troubleshooting

Can't find the Fork button?
Make sure you're logged into GitHub first.
Repository won't rename?
Go to Settings → Repository name → Rename
Confused about committing?
Think of it as "Save with a note about what you changed"
VS Code won't start?
Try restarting your computer after installation

Remember: Every professional web developer started with their first HTML page. You're now part of that journey.