Skip to content

Instantly share code, notes, and snippets.

@cynthiateeters

cynthiateeters/instructions.md

Last active October 4, 2025 20:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cynthiateeters/f11a66ab443463f5d2ddcf5147c3c90f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cynthiateeters/f11a66ab443463f5d2ddcf5147c3c90f to your computer and use it in GitHub Desktop.
Download ZIP
🌍 Assignment: Lighthouse Baseline Report (HTML via Netlify Drop)
Raw
instructions.md

🌍 Assignment: Lighthouse Report for "About Me"

🧭 Overview

In this assignment, you’ll measure how your “About Me” website performs using Chrome’s built-in Lighthouse tool. You’ll generate a report, publish it using Netlify Drop, and submit the public URL.

Typically, this would serve as a baseline for future improvement in performance, accessibility, and best practices. The point of this assignment is to give you experience with Lighthouse for code that you already know.

Note: Your "About Me" site deploy may have been deleted by Netlify but your GitHub repo should still be there.

✅ You need to either 1) Redo the Netlify deploy, or 2) Have an "About Me" clone on your computer opened with VS Code.

1️⃣ Run the Lighthouse Audit

  1. Open your “About Me” page (using either "Live Server" or Netlify) in Chrome Incognito Mode
    (extensions can affect results, so use a clean session).

  2. Open Chrome DevTools → Lighthouse tab

  3. Keep the following categories selected:

    • Performance
    • Accessibility
    • Best Practices

    (Do not include SEO in this report.)

  4. Choose the Mobile device profile.

  5. Click Analyze page load

  6. When the report finishes, click 3 '...' in the top-right corner and Save as HTML

  7. Save the report as index.html into an empty folder on your computer.

2️⃣ Publish with Netlify Drop (Required)

We’ll use Netlify Drop to create a temporary public link to your report.

⚠️ Note: Netlify Drop sites may expire over time. Always keep a local backup copy of your folder.

  1. Visit https://app.netlify.com/drop

  2. Drag and drop your saved folder.

  3. Wait for the upload to finish. Netlify will display a live link.

  4. Click Site Settings → Change site name

    Rename your site to:
    aboutme-lighthouse-yourlastname.netlify.app

  5. Test your new link by opening it in a browser.

  6. Copy your site’s full URL — this is what you’ll submit.

3️⃣ Reflection

In the Canvas submission comments, write 2–3 sentences about your report:

  • One strength your site scored well on
  • One opportunity or issue you’d like to learn how to improve
  • (Optional) Anything that surprised you about your Lighthouse results

4️⃣ Submission Checklist

✅ Ran Lighthouse in Incognito mode
✅ Saved the report as index.html in an empty folder
✅ Uploaded the folder using Netlify Drop
✅ Renamed the site to aboutme-lighthouse-yourlastname.netlify.app
✅ Submitted the public Netlify URL
✅ Added a short reflection in Canvas

💾 Reminder

Keep a copy of your index.html report folder on your computer.
If your Netlify Drop link expires, you can drag and drop the same folder again to regenerate your site and URL.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment