Markdown: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

🌐 Beginner Website Project Plan

🎯 Goal

Having fun and learn how to build a landing page / one-pager and pass the assignment.

---

🛠 Tools

• Figma → for wireframes & moodboard (colors, fonts, inspiration) /
• GitHub → to store and share the website code
• VS Code → code editor
• Browser → test the website
• Moodboard → Dribbble/Behance/Mobb/Pinterest

---

👩‍👩‍👧 Collaboration

• Share Figma file link for quick feedback https://www.figma.com/design/0S3IjsG0xrQO3QLyY0qu97/Untitled?node-id=0-1&t=u7ximMXjPgM1BnCN-1
• Use comments in Figma to discuss design ideas
• Keep a moodboard page in Figma with:
  • Colors (brand palette)
  • Fonts (heading & body)
  • Example websites for inspiration

---

🧩 Roles

• Designer → Together – Creates wireframes, moodboard, picks fonts/colors
• Developer → Mob: Together - Builds HTML files, tests in browser
• Content Writer → Together – Prepares text (About, Welcome, Links, etc.)
• Project Lead → Together – Keeps track of plan, deadlines, and shares updates

(In a solo project, you just “wear all the hats” yourself 👒)

---

📂 Website Structure

• index.html (Home / About us)
• style.css (Styling)
• main.js (Functionality)
• images/ (Profile picture, assets)

---

✅ Steps

1. Gather inspiration → make a moodboard in Figma
2. Draft a wireframe (layout) → Figma
3. Write short text content → In maybe content.md
4. Generate images and assets with AI (comic strip)
5. Build index.html → add heading, text, image, link
6. Review together → feedback in Figma/Docs
7. Add improvements (extra page, CSS styling)

---

🚀 Future Ideas