The Project Brief: A Road Map Before You Write Any Code

Hello! 👋

We are approaching the finish line. Your final assignment is to build your own website (a one-pager or landing page). The technology is up to you — plain HTML/CSS, WordPress, or Next.js if you are feeling ambitious.

But before you dive into VS Code, we need to talk about how to organise the work.

The most common failure story? You sit down at the computer, you type <nav>, and then you stare at the screen for an hour thinking: "Hmm, what background colour should I use, and what exactly goes in this section?"

Today we step into the shoes of a digital agency. Imagine that you are the contractor and that you (or your invented business) are the client. No agency starts work without a document called a BRIEF.

---

🛑 Why you need to do this

Coding is only translating ideas into a language a machine understands. If you have no idea, you have nothing to translate. A good brief means:

1. Saved time: you do not change the concept halfway through.
2. Clean code: you know which sections you need, so you know which components to use.
3. Better design: you pick colours and fonts that serve the goal instead of guessing.

---

📋 The task: your project brief

Below is a template I have prepared for you. Think of it as the project's medical chart. Your task is to copy the outline into a notepad and fill it in BEFORE you start coding.

This is your battle plan for the final project.

---

📄 WEBSITE BRIEF TEMPLATE (copy from here)

1. Project details

• Project name: (e.g. "Anna's Coffee House" / "John Smith's Portfolio")
• Goal of the site: (What should the visitor do? e.g. "Sign up for the newsletter", "Buy the e-book", "Call me")
• Target audience: (Who will read it? e.g. "Students looking for cheap coffee", "IT recruiters")

2. Visual identity (look and feel)

• Primary colour: (e.g. navy #1e3a8a — reads as trust)
• Accent colour (CTA): (e.g. orange #f97316 — for buttons)
• Style: (Pick one: minimalist / modern-tech / classic-elegant / brutalist)
• Inspiration: (Paste two links to sites you like visually)

3. Content structure (the one-pager's sections)

List what goes on the page, top to bottom.

1. Navbar: (e.g. logo + links: About, Services, Contact)
2. Hero section:
   • Headline (H1): (e.g. "The Best Coffee in Town")
   • Subheading: (e.g. "We roast the beans on site. Come and see.")
   • Button (CTA): (e.g. "See the Menu")
3. Section 2 (e.g. About us / Features): (What goes here? Three cards with icons?)
4. Section 3 (social proof): (Customer reviews / Instagram photos / technology logos)
5. Section 4 (the main action or form): (Where does the visitor complete the goal?)
6. Footer: (Copyright, social media links)

4. Technology stack

• Technology: (e.g. HTML + Tailwind / WordPress + InstaWP / Next.js + Shadcn)
• Hosting: (Where will you put it? e.g. GitHub Pages / Vercel / TasteWP)

---

💡 How to work with it

Remember the lesson on prompting? A completed brief is perfect input for an AI model.

Once you have filled in the template above, you can paste it into a chat (ChatGPT/Claude) with a note along these lines:

"Act as a senior web developer. Based on the brief above, prepare the HTML file structure and the copy for the page. Suggest Tailwind CSS classes that match the chosen colour scheme."

In five minutes you get a finished skeleton that would normally take two hours.

---

🎯 What is being graded?

I am not grading your artistic taste — art school is for that. I am grading:

1. Coherence: does the page deliver the goal from the brief?
2. Execution: do the links work? Do the images load?
3. Responsiveness: does the page hold together on a phone?

Take the template, fill it in and get to work. A good plan is half the job done. Good luck! 🚀