Home / Schedule / Mini Project 1: Website for Someone Else

Mini Project 1: Website for Someone Else

The Challenge

Build a website for a real person or group who actually needs one.

This is the most important skill in web development: understanding what someone else needs and building it for them. Before you write any HTML, talk to your client, understand what they want, and write it down.

Start Here: Create Your Project Repo

Your first step, before any planning or code, is to create a new, separate public GitHub repo for this project. Do not put it inside your oim3690 repo or your username.github.io repo. Everything for this project lives here: your proposal, your sketch, your HTML, your images. You will deploy the site from this repo with GitHub Pages, so your live URL becomes username.github.io/repo-name. Name the repo in lowercase with hyphens, after the project or client (for example, jane-bakery-site). Once it exists, add a link to it from your oim3690 repo README.

Suggested Timeline

  • As early as you can: have your proposal and client brief ready, so you can spend your time building instead of planning. We shared client work and gave each other feedback in class on 6/3.
  • By Friday 6/12: final version deployed. The MP1 Showcase is the following Monday (6/15).

Start looking for your client now. The interview takes time to schedule.

Find Your "Client"

Your client can be anyone who could use a website. Here are some ideas:

  • A friend who needs a personal portfolio or resume site
  • A student club at Babson (consulting club, dance team, entrepreneurship org)
  • A family member's business (bakery, tutoring service, landscaping, consulting)
  • A local shop or restaurant near campus that has no website or a bad one
  • Someone planning an event (birthday party, fundraiser, wedding, hackathon)
  • A classmate who wants a redesigned personal site
  • A non-profit or volunteer group you care about
  • A professor who needs a simple course or research page

The rules:

  • It can't be for yourself
  • The person must be real and available for at least 2 conversations (initial interview + feedback)
  • You need their permission to build this

Examples of what students have built:

  • A portfolio site for a friend studying graphic design, with an image gallery and contact form
  • A landing page for a Babson club's annual event, with schedule, speakers, and registration link
  • A menu and hours page for a family member's food truck
  • A personal site for a classmate, with their resume, projects, and a blog section

The Interview Process

Interview your client before you write any code.

Before the Interview

  • Research your client. If it's a business, look at their social media. If it's a club, read their existing materials.
  • Find 3-5 websites in the same category (other portfolios, other restaurant sites, other club pages). Take screenshots of ones you think are good. You'll show these during the interview.

The Interview (15-20 minutes)

Have a real conversation. Take notes (on paper, in a doc, whatever works). Ask these questions:

About the purpose:

  • What is this website for? What problem does it solve?
  • Who will visit this site? What do they need to find?
  • What's the single most important thing a visitor should do? (contact you? see the menu? read your work? sign up?)

About the content:

  • What pages or sections do you need?
  • What text, images, and links should be included?
  • Do you have a logo, brand colors, or style preferences?

About their taste:

  • (Show them the 3-5 websites you found) What do you like about each of these? What don't you like?
  • Are there any websites you love the look and feel of?
  • Anything you definitely do NOT want?

After the Interview

Write up your notes as a client brief. This becomes part of your PROPOSAL.md:

## Client Brief

**Client:** [Name, who they are]
**Purpose:** [What the website is for, in one sentence]
**Audience:** [Who will visit and what they need]
**Key action:** [The #1 thing visitors should do]

**Pages/sections needed:**
- [list them]

**Content status:** [What content do you have? What do you still need from the client?]

**Style preferences:** [Colors, fonts, vibe - based on what they told you]

**Inspiration sites:**
- [Site 1] - what they liked about it
- [Site 2] - what they liked about it

## Layout Plan

- A hand-drawn or Figma sketch of the layout, committed to your repo (required)
- Optionally, a reference site you want to emulate, with notes on what you will keep or change
- The written description of the layout you gave to AI as your starting prompt

This brief is graded. Vague answers mean you skipped the conversation.

Requirements (Base)

  • At least 3 pages with consistent navigation
  • Semantic HTML (<header>, <nav>, <main>, <footer>, <section>)
  • External CSS stylesheet
  • Layout using CSS Grid or Flexbox
  • Responsive design (looks reasonable on mobile)
  • Favicon
  • Deployed on GitHub Pages with a live URL

Extensions

Push further if you want:

  • CSS animations or transitions
  • Google Fonts or custom typography
  • A contact form (HTML form with validation attributes)
  • Dark mode toggle
  • Lighthouse Accessibility score above 90
  • Open Graph meta tags

Iteration Plan

Milestone 0: Proposal and Client Brief

Goal: Understand what your client needs before you write any code.

Tasks:

  • Find your client and get their permission
  • Conduct the interview (see interview process above)
  • Write up the client brief
  • Commit PROPOSAL.md to your project repo
  • Required: Turn your proposal into a PRD with AI. Paste your proposal in and ask it to interview you: "Here is my project proposal. Act as a product manager. Ask me clarifying questions one at a time to help turn this into a detailed PRD." In the industry this is called a Product Requirements Document (PRD). Read the result, make sure it matches what you actually want, and save it as PRD.md in your project repo. When you use AI to build features, point it to this file: "Read PRD.md and implement the first feature."

Iteration 1: Structure, Content, and Styling

Goal: Build the site with real content and basic styling. Get it in front of your client early.

Tasks:

  • Required: sketch your layout before you let AI design anything. Draw it by hand and snap a photo, or use a tool like Figma, then commit the image to your repo. Hand that sketch to AI together with your PRD. The point is to have your own intent before any code exists. If AI invents your layout and your colors, the result is not really yours. A reference site you want to emulate can help, but the starting design should come from you.
  • Create the HTML structure based on your client brief. Use semantic HTML from the start.
  • Get real content from your client (text, images, links). Do NOT use placeholder text.
  • Add your CSS stylesheet: layout, colors, fonts, spacing. Make it responsive (test in DevTools device mode).
  • You can use AI to help, but review everything it suggests. Understand every HTML tag and CSS property.
  • Deploy to GitHub Pages and share the live URL with your client for early feedback.

Write about this in your weekly log: What surprised you about your client's answers? If you used AI to generate code, what did it get right? What did you have to change to match the client's needs? What CSS properties did you learn?

Iteration 2: Feedback and Polish

Goal: Show your client, get feedback, and refine.

Tasks:

  • Show the deployed site to your client (share the GitHub Pages URL)
  • Write down their feedback. What do they like? What do they want changed?
  • Make the changes
  • Run a Lighthouse audit. Aim for 80+ on accessibility.
  • Test on mobile (use DevTools device mode)

Write about this in your weekly log: What feedback did your client give? What was the hardest change to make? What's one thing you'd do differently next time?

Submission

  • Create a new, separate public GitHub repo for this project (do NOT put it inside your oim3690 repo or your username.github.io repo)
  • Deploy on GitHub Pages (your live URL will be username.github.io/repo-name)
  • On Canvas, submit your repo URL on the Mini Project 1 assignment, not the live username.github.io/... link. The repo is the artifact I review, and your live site is reachable from it.
  • Put the live URL in the repo's About box. On the repo page, open About (the gear, top right) and check "Use your GitHub Pages website" so the live link shows at the top of the repo. (Anyone who opens your repo can then click straight through to the running site.)
  • Include in your repo:
    • PROPOSAL.md with your client brief (all sections filled in)
    • PRD.md generated from your proposal with AI
    • Your layout sketch (a photo of a hand drawing, or a Figma export)
    • README.md with:
      • Who your client is (first name is fine)
      • Brief description of the site
      • Link to live site
      • What you learned
  • Link from your oim3690 repo README
  • Weekly log entries covering your project work

This project is reviewed as part of your checkpoints.

Tips

  • Interview first, code later. The brief is the foundation. A clean, well-structured page that meets the client's needs beats a flashy page that ignores what they asked for.
  • Ask your client for content early. Waiting until the last minute for text and images is the #1 reason projects stall.
  • Use AI to learn, not just to generate. When Copilot suggests a CSS property you don't know, look it up on MDN.
  • Show your client the live site, not a screenshot. Send them the GitHub Pages URL and ask them to look on their own phone/laptop.
  • Commit often. Each meaningful change should be a commit.

Due Friday, 6/12

Last updated: Saturday, 6/13/2026