Apply your knowledge to build something amazing!
By completing this project, you will:
:bulb:
:hammer_and_wrench:
:rocket:
:tada:
In this part, you'll brainstorm ideas, explore your interests, and select a project type that excites you. Use the prompts and idea lists below to help you plan a project that is meaningful and fun!
:warning: Warning Common Pitfall: Scope Creep
Many students start with an idea that's too ambitious! Remember:
- Start with a Minimum Viable Product (MVP)
- You can always add features later
- It's better to have a simple project that works perfectly than a complex one that's half-finished
- Focus on one core feature first, then expand
No Requirements! Create whatever inspires you:
:bulb: Pro Tip: Effective AI Brainstorming
When brainstorming with AI:
- Share your interests and skills first
- Ask for 5-10 different ideas, not just one
- Request pros and cons for each idea
- Ask AI to help you narrow down based on feasibility
- Get AI to create a feature priority list
Start with these types of prompts:
"I want to create a web project but I'm not sure what to build.
I'm interested in [your interests/hobbies]. Can you suggest some creative
project ideas that would be fun to build and useful to others?"
"Help me plan a [type of project] that would be impressive but achievable
for a student. What features should I include and how should I structure it?"
Before moving to Part 2, ensure you have:
Feeling stuck? That's normal! Ask AI: "I'm having trouble choosing between [idea 1] and [idea 2]. Can you help me decide based on learning value and achievability?"
Now that you have an idea, it's time to design and build your project! Break your project into smaller parts, use AI to help with coding, and keep improving your work step by step.
:warning: Warning Common Pitfall: Copy-Paste Without Understanding
Don't just copy-paste AI code blindly! Instead:
- Ask AI to explain each part of the code
- Test each feature as you add it
- Make small changes to understand how things work
- If something breaks, use it as a learning opportunity
Work with AI to plan your project:
"I want to create [your project idea]. Can you help me break this down
into smaller parts and suggest what features to build first?"
"What HTML, CSS, and JavaScript features would I need to learn to build
[your project]? Can you create a basic structure to get me started?"
Develop your project step by step:
"Let's start with the basic structure for [your project].
Create the HTML layout and basic styling first."
Why this works: Starting with structure ensures a solid foundation before adding complexity.
"Now add [specific feature] to my project. Make sure it works well
with what we already have."
Why this works: Building incrementally helps you understand each piece and catch errors early.
"Can you help me improve the design and make it look more professional?"
Why this works: Polish comes after functionality - make it work first, then make it beautiful!
Make your project shine:
"Add animations and interactive effects to make my project more engaging."
"Help me make this project responsive and mobile-friendly."
"Can you add error handling and improve the user experience?"
:bulb: Best Practice: Version Control Your Progress
Even before GitHub, save versions of your work:
- Save your project with version numbers (project-v1, project-v2)
- Make backups before major changes
- Test in different browsers
- Ask friends to test your project
- Keep a list of bugs to fix
When things go wrong (and they will!), try these approaches:
console.log()
statements to track what's happeningHelpful debugging prompts:
"My [feature] isn't working. Here's my code: [paste code].
Can you help me debug it and explain what's wrong?"
"I'm getting this error: [error message]. What does it mean
and how can I fix it?"
Before moving to Part 3, ensure you have:
Need encouragement? Remember, even professional developers face bugs daily. Each error is a learning opportunity!
It's time to make your project public! This part guides you through preparing your files, publishing to GitHub, and making your project live with GitHub Pages.
:warning: Warning Common Pitfall: File Path Issues
Before uploading to GitHub:
- Ensure your main file is named exactly
index.html
(notIndex.html
orindex.HTML
)- Check that all image paths are relative (use
./images/pic.jpg
notC:/Users/.../pic.jpg
)- Test that CSS and JS files are linked correctly
- Remove any absolute file paths from your code
This is the ONLY REQUIREMENT for this project - you must learn to publish your work to GitHub!
index.html
Method 1 - Web Interface (Easier):
Method 2 - Git Commands (Advanced):
# Clone your empty repository to your computer
git clone [your-repository-url]
# Navigate into the repository folder
cd [your-repository-name]
# Copy your project files into this folder
# Add all files to Git tracking
git add .
# Create a commit with a descriptive message
git commit -m "Add my creative project"
# Push your files to GitHub
git push origin main
:bulb: Pro Tip: Meaningful Commit Messages
Instead of "Add my creative project", be specific:
- "Add interactive quiz game with score tracking"
- "Add portfolio website with project gallery"
- "Add weather app with 5-day forecast feature"
Good commit messages help others (and future you) understand what you built!
https://[username].github.io/[repository-name]
If you need help with GitHub, ask AI:
"Can you explain how to upload my web project to GitHub and make it live
using GitHub Pages? I'm a beginner and need step-by-step instructions."
"I'm having trouble with [specific GitHub issue]. Can you help me troubleshoot?"
"How do I write a good README file for my GitHub project?
My project is [describe your project]."
Before moving to Part 4, ensure you have:
Troubleshooting tip: If your site isn't showing up after 10 minutes, check that your main file is named index.html
and is in the root directory!
The final step is to showcase your work! Prepare your documentation, take screenshots, and submit your project for evaluation. Reflect on your learning and be proud of your achievement.
Want to go above and beyond? Try these advanced challenges:
:bulb: Extension Strategy
Don't try to do all extensions! Pick 1-2 that:
- Align with your interests
- Add real value to your project
- Teach you something new
- You can complete in the time available
When your project is complete and published on GitHub:
:warning: Warning Pre-Submission Checklist
Before submitting, double-check:
- Your live site loads without errors
- All features work as expected online (not just locally)
- Images and assets are displaying correctly
- You've tested on at least one other device/browser
- Your repository is public (not private)
Submit Your Creative Project Here
:bulb: Screenshot Tips
For the best screenshots:
- Use your browser's built-in screenshot tool
- Capture the full page, not just a portion
- Show different states/features of your app
- Include both desktop and mobile views if responsive
- Consider creating a GIF to show interactions
Make sure to include:
https://github.com/username/project-name
)https://username.github.io/project-name
)Your project will be evaluated on:
:star2: Open Source Contributor: Add a detailed README file to your GitHub repository explaining:
Congratulations! By completing this project, you've:
Remember: This is YOUR project. Make it something you're proud to show others. The goal is to demonstrate everything you've learned about AI-assisted development while creating something uniquely yours!
:bulb: What's Next?
After completing this project:
- Add it to your portfolio or resume
- Share it with friends and family
- Continue improving it over time
- Use these skills for future projects
- Help classmates who might be stuck
Every professional developer started with their first project - and you've just completed yours!
Good luck, and enjoy the creative freedom! :rocket: