← Week 2
DESN 368 · Week 2

Migrating HTML from CodePen to Local Directory via VSCode

Web Design Fundamentals · Practice & Exercises

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 (or find a new image)
  9. Save the image in your week-2 folder
  10. Update your <img> tag to reference the local image file (e.g., <img src="recipe-image.jpg">)

Part 2: Previous Projects (Week 1 Folder)

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

For each file, copy the HTML content from your CodePen projects.

Verify Your Folder Structure

Your course folder should now look like this:

desn368/
├── week-1/
│   ├── newspaper.html
│   ├── lost-pet.html
│   └── favorite-band.html
└── week-2/
    ├── recipe.html
    └── [your-image-file.jpg]

Submission Requirements

Important

If you missed class, just upload the first screenshot.

Take a screenshot of your VS Code Explorer panel showing:

  1. Both week-1 and week-2 folders expanded
  2. All HTML files visible (3 files in week-1, recipe.html in week-2)
  3. Your recipe image file in week-2
  4. Clear, readable file names (widen the sidebar if needed)

If you were in class, also take a screenshot of your GitHub repo

Submission

Submit your screenshots to Canvas.