Week 2: From Cloud to Code — Local Development & HTML Structure Available

Monday, October 6, 2025 • 10:00 AM - 12:20 PM

This Week's Theme: Professional Development Workflow + HTML Structure Mastery. You'll bridge the gap between "playing in CodePen" and "working like a real developer."

Repository: https://code-and-design.org/

Theme: Professional Development Workflow + HTML Structure Mastery

Designer-Coder Lens

Designer Focus

Visual hierarchy and information architecture, spatial relationships (boxes within boxes, nesting), file organization as foundation of design systems, wireframing structural relationships in Figma, logo design and icon systems

Coder Focus

HTML document structure and the DOM tree, parent-child relationships in code, semantic HTML element selection, file/folder hierarchy and organization, attributes, classes, and IDs as metadata, local development workflow

Bridge Concept: "Hierarchy exists everywhere—in your file system, in your HTML structure, and in your visual design. Master one, understand them all."

Day 1: Local Development & Deployment Workflow Monday, Oct 6

Part 1: Web Evolution Discussion 10:00-10:40 AM

Web Then and Now: Group Discussion

Students discuss their "Then & Now" assignment analyzing website evolution via Wayback Machine.

Small Groups (3-4 students) - 15 min
  • Each person shares their site analysis (3-4 min per person)
  • Group identifies common patterns across different sites
Discussion Prompts:
  • What navigation patterns changed over time?
  • How did user control increase?
  • Which features reflect current web trends?
  • How has mobile affected design decisions?
  • What elements stayed consistent?
Class Debrief - 10 min
  • Each group shares one surprising finding
  • Instructor highlights common observations
  • Connect to today's lesson: "You analyzed how design evolved. Now we learn how the code structure behind these sites works."

Part 2: File Structures & Hierarchy 10:50-11:00 AM

Key Concept: Organization creates clarity. Whether organizing files, code, or visual elements, hierarchy helps users (and browsers) understand relationships.

Three Types of Hierarchy (Parallel Concepts)

1. File System Hierarchy
my-portfolio/ ├── index.html ├── week-1/ │ ├── newspaper.html │ ├── lost-pet.html │ └── favorite-band.html ├── week-2/ │ └── recipe.html └── images/ ├── logo.png └── recipe-photo.jpg
2. HTML Document Hierarchy (Parent-Child)
<body> ← parent <header> ← child of body, parent of h1 <h1>Title</h1> ← child of header </header> <main> ← child of body, sibling of header <p>Text</p> ← child of main </main> </body>
3. Visual Design Hierarchy
  • What users see first (size, color, position)
  • Grouping and relationships (proximity, similarity)
  • Information architecture (how content is organized)

Key Concept: Proper hierarchy makes projects maintainable, code understandable, and designs clear.

Part 3: Local Development Workflow 11:30 AM-12:20 PM

Step 1: VS Code Boilerplate Shortcut (5 min)

Demo & Practice:

  1. Open VS Code
  2. Create new file, save as test.html
  3. Type ! and press Tab
  4. Magic! Full HTML5 boilerplate appears
Understanding the boilerplate:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
What each part means:
  • <!DOCTYPE html> - Tells browser this is HTML5
  • <html lang="en"> - Root element, language declaration
  • <head> - Metadata (not visible on page)
  • <meta charset="UTF-8"> - Character encoding
  • <meta name="viewport"...> - Responsive design setup
  • <title> - Page title (shows in browser tab)
  • <body> - Visible content goes here

Step 2: Images in CodePen via snipboard.io (10 min)

Problem: CodePen doesn't allow direct image uploads (in free tier)
Solution: Use snipboard.io for quick image hosting

Demo:

  1. Go to https://snipboard.io
  2. Upload or paste an image
  3. Copy the generated URL
  4. In CodePen, add: <img src="[snipboard-url]" alt="description">
  5. Optionally style: <img src="..." style="width: 300px;">

Key Learning: External hosting is common for images (CDNs, cloud storage, etc.)

Step 3: Create Local HTML Files in VS Code (15 min)

Transition from CodePen to local files.

3A. Recipe Page from CodePen (8 min)
  1. Open your recipe CodePen
  2. Copy all HTML from CodePen
  3. In VS Code: Create new file recipe.html
  4. Generate boilerplate (! + Tab)
  5. Paste recipe HTML into <body>
  6. Update <title> to your recipe name
  7. Handle the image:
    • Download image from snipboard URL (or find new image)
    • Save to same folder as recipe.html
    • Update img tag: <img src="recipe-photo.jpg" alt="description">
  8. Preview: Right-click file → Open with Live Server (or browser)

Step 4: GitHub Repo Organization (15 min)

4A. Create GitHub Repository (3 min)
  1. Go to GitHub.com (logged in)
  2. Click "+" → "New repository"
  3. Repository name: code-design-workspace
  4. Description: "My DESN368 Code+Design Portfolio"
  5. Public
  6. Do NOT initialize with README (we'll add files directly)
  7. Click "Create repository"
4B. Organize with Folders via Drag & Drop (12 min)

GitHub allows folder creation through file upload:

  1. Create week-1 folder with files:
    • On repo page, click "uploading an existing file"
    • In the filename field at top, type: week-1/newspaper.html
    • This creates the week-1/ folder!
    • Upload files one at a time (GitHub limitation)
    • Repeat for lost-pet.html and favorite-band.html

Step 5: Codespaces & GitHub Copilot (10 min)

5A. Open Codespace (3 min)
  1. From GitHub repo page, click "Code" button
  2. Click "Codespaces" tab
  3. Click "Create codespace on main"
  4. Wait 1-2 minutes for environment to load
  5. VS Code opens in browser! 🎉
5B. Introduce GitHub Copilot (3 min)
What is GitHub Copilot? AI pair programmer that suggests code as you type, answers questions in chat, and helps with errors. Free for students!
Week 2 AI Level: Reference and Validator
  • Ask definitional questions
  • Request explanations
  • Validate code syntax
  • Get help with errors

Step 6: Deploy with Netlify (5 min)

Goal: Get a live URL for the portfolio

Demo & Students Follow:
  1. Go to Netlify:
  2. Import Project:
    • Click "Add new site" → "Import an existing project"
    • Choose "Deploy with GitHub"
    • Authorize Netlify to access GitHub
    • Select code-design-workspace repository
  3. Configure & Deploy:
    • Site name: auto-generated (can customize later)
    • Branch: main
    • Build command: leave empty
    • Publish directory: leave empty (we're just deploying HTML)
    • Click "Deploy site"
  4. Wait for Deployment:
    • Watch build log (usually 30-60 seconds)
    • Site goes live!
    • URL format: random-name-123.netlify.app
Key Points: Every push to GitHub automatically redeploys (continuous deployment). Custom domains possible later. Free tier sufficient for class projects. Professional deployment workflow!

Week 2 Assignments

Complete all 7 assignments to demonstrate mastery of local development workflows and semantic HTML.

📋 Lab: Repo Sync, GitHub Codespaces, and Netlify Deployment Due: Mon, Oct 13

Status: Most of this was completed in class on Oct 6. If you missed class, complete all steps below.

Overview

Organize your projects on GitHub, create an index page with AI assistance, and deploy your site live to the web.

Requirements

Your deployed site must include:

  • ✅ index.html with working navigation at the root of your repository
  • ✅ week-1 folder containing: newspaper.html, lost-pet.html, favorite-band.html
  • ✅ week-2 folder containing: recipe.html and at least one image file
  • ✅ All navigation links working correctly
  • ✅ Site accessible via your Netlify URL

To Submit

  1. Copy your full Netlify URL (e.g., https://your-site-name.netlify.app)
  2. Paste it in the Canvas submission box
  3. Click "Submit"
View Assignment in Canvas

💻 Practice: Codedex.io - Structure Due: Fri, Oct 10

Overview

Complete three HTML coding exercises in CodePen to practice web page structure and formatting fundamentals.

Instructions

Step 1: Complete exercises 8 through 12 on Codedex.io

Create three separate CodePens for:

  1. Craigslist Ad - Create a Craigslist ad for something odd in your house. Mimic the style of Craigslist.
  2. Wiki Article - Create a wiki article about one of your favorite people (dead or alive).
  3. Lorem Ipsum - Practice with Lorem Ipsum placeholder text. Add comments describing what each section class is for.

Step 2: Submit Your Links

Copy and paste the URLs for all three CodePens in the Canvas text entry box.

Format your submission like this:

Craigslist Ad: [your CodePen URL] Wiki Article: [your CodePen URL] Lorem Ipsum: [your CodePen URL]

Before You Submit:

  • ✅ Make sure each CodePen is saved
  • ✅ Test each link by opening it in a new browser tab
  • ✅ Verify you have all three URLs
View Assignment in Canvas

🔄 Practice: Migrate Codedex CodePens to GitHub Due: Mon, Oct 13

Overview

Practice migrating your CodePen projects to your GitHub repository using Codespaces. This mirrors the professional workflow we demonstrated in the Week 2 Lab.

Instructions

Step 1: Open Your Codespace

  1. Go to GitHub.com and navigate to your code-design-workspace repository
  2. Click the green "Code" button → "Codespaces" tab
  3. Click "Resume" on your existing Codespace (or "Create codespace on main" if needed)
  4. Wait for VS Code to load in your browser

Step 2: Migrate Your Three Projects

For each of your three CodePen projects (Craigslist Ad, Wiki Article, Lorem Ipsum):

  1. Create new HTML files in your week-2 folder:
    • craigslist-ad.html
    • wiki-article.html
    • lorem-ipsum.html
  2. Use the HTML boilerplate shortcut: Type ! and press Tab
  3. Copy your CodePen content and paste it into the <body> section
  4. Update the <title> tag to match your project
  5. Save the file (Ctrl+S or Cmd+S)

Step 3: Commit and Sync Your Changes

  1. Click the Source Control icon in the left sidebar
  2. In the message box, type: Add week 2 codedex.io HTML exercises
  3. Click the blue "Commit" button
  4. Click "Sync Changes" to push to GitHub

Submit: Your Netlify URL (site will auto-update with new files)

View Assignment in Canvas

🎨 Practice & Explore: Migrating HTML from CodePen to VSCode Due: Fri, Oct 10

Objective

Practice using VS Code's HTML boilerplate shortcut and migrate your CodePen projects to local development with proper file organization.

Part 1: Recipe Migration (Week 2 Folder)

  1. Open VS Code
  2. Drag and drop your desn368 folder onto VS Code
  3. Navigate to your week-2 folder
  4. Create a new file named recipe.html
  5. Use the ! + Tab shortcut to generate the HTML5 boilerplate
  6. Copy your recipe HTML content from CodePen into the <body> section
  7. Update the <title> tag to match your recipe
  8. Download your recipe image from snipboard.io
  9. Save the image in your week-2 folder
  10. Update your <img> tag to reference the local image file

Part 2: Previous Projects (Week 1 Folder)

Repeat the migration process for your three previous assignments. Create these files in your week-1 folder:

  • newspaper.html
  • lost-pet.html
  • favorite-band.html

Submission Requirements

Screenshot 1 (Required for everyone):

Take a screenshot of your VS Code Explorer panel showing:

  • Both week-1 and week-2 folders expanded
  • All HTML files visible
  • Your recipe image file in week-2
  • Clear, readable file names

Screenshot 2 (If you attended class):

Take a screenshot of your GitHub repo showing the same structure

Upload: Submit your screenshots to Canvas

View Assignment in Canvas

🎨 Practice: Figma 101 Part 3 - Logo and Icon Set Due: Fri, Oct 10

Overview

Complete the 3rd lesson in the Figma 101 course focusing on logo design and icon systems.

Learning Objectives

  • Explore the Pen tool
  • Discover the power of vector networks
  • Design a logo for an app concept
  • Begin creating a set of icons

Instructions

  1. Name your file using the format: figma-101-pt3-[last and first initial]-f25
    Example: If your name is Jane Smith: figma-101-pt3-sj-f25
  2. Place your Figma file in the Figma 101 Project folder
  3. Submit to Canvas: Submit the link to your Figma file

👨‍🎨 Designer Moment

Logo and icon systems require both creativity and systematic thinking—just like coding requires both problem-solving and structure.

View Assignment in Canvas

📝 Reflection: Weekly Visual Notes Due: Sun, Oct 12

Objective

Create hand-written visual notes that capture key concepts, ideas, and learnings from this week's content.

This Week's Focus

Read and take visual notes on this article about semantic HTML and the web development journey ahead.

Required Reading

Semantic HTML
MDN: Semantic HTML

What to Include in Your Visual Notes

  • Key definitions and concepts
  • Diagrams showing HTML structure
  • Examples of semantic vs. non-semantic markup
  • Your own observations and connections
  • Questions that arise while reading
  • Visual metaphors that help you understand

Submission

  • Scan or photograph your visual notes
  • Ensure text is legible
  • Upload to Canvas
View Assignment in Canvas

🔧 Update: Apply Semantic HTML to Week 1 Pages Due: Mon, Oct 13

Overview

Apply what you learned about semantic HTML and styling to improve your Week 1 pages.

Requirements

For newspaper.html, lost-pet.html, and favorite-band.html:

  • ✅ Replace generic <div> tags with semantic elements where appropriate:
    • Use <article> for main content
    • Use <header> for top sections
    • Use <footer> for bottom sections
    • Use <nav> if you add navigation
  • ✅ Add appropriate class and id attributes
  • ✅ Ensure proper document structure (DOCTYPE, head, body)
  • ✅ Add HTML comments explaining your structure
  • ✅ Apply styling using either inline styles or in-page styles
  • ✅ Improve visual presentation (colors, spacing, typography)

GitHub Copilot Usage

Week 2 = AI as Teacher, Not Doer
You're learning the foundation. AI helps you understand, not bypass learning.

Use GitHub Copilot for:

  • Generating HTML boilerplate structures
  • Getting suggestions for semantic element choices
  • Asking questions about HTML/CSS properties
  • Reviewing code for structural issues

Example Prompts:

  • "Create a semantic HTML structure for a blog post with header, article, and footer"
  • "Explain why this link isn't working: <a href=about.html>About</a>"
  • "Suggest semantic HTML elements for a recipe page"

NOT Allowed Yet:

  • Having AI write complete pages for you (you must understand every line)
  • Copy-pasting AI code without modification and understanding
  • Using AI instead of learning fundamentals yourself

Submission

Commit your updated files to GitHub and submit your Netlify URL (site will auto-update).

View Assignment in Canvas

Resources

Web Evolution

HTML & Semantic Elements

Tools & Services