A beginner-friendly learning platform for Programming and Artificial Intelligence
AI CodeLab is a free educational website designed for beginners who want to learn programming and artificial intelligence together. It provides structured learning paths, course materials, and a community to connect with other learners.
- 🏠 Home page with AI and programming overview
- 📚 Courses page covering multiple programming languages
- 📖 Study material for self-paced learning
- 🔐 Login and Sign Up page
- 🤝 Community page to connect with other learners
- 📱 Responsive design for all devices
| Page | File | Description |
|---|---|---|
| Home | index.html |
Main landing page with AI concepts |
| Courses | courses.html |
All available programming courses |
| Study Material | study.html |
Learning resources and materials |
| Login | login.html |
User login and sign up |
| Community | join.html |
Join the learning community |
| HTML Course | codelab-html.html |
HTML learning page |
| CSS Course | codelab-css.html |
CSS learning page |
| JavaScript Course | codelab-javascript.html |
JavaScript learning page |
| Python Course | codelab-python.html |
Python learning page |
| Java Course | codelab-java.html |
Java learning page |
| C++ Course | codelab-cpp.html |
C++ learning page |
- 🐍 Python
- ☕ Java
- 🌐 JavaScript
- 🏷️ HTML
- 🎨 CSS
- ⚙️ C++
- 🧠 Machine Learning (ML)
- 💬 Natural Language Processing (NLP)
- 👁️ Computer Vision
- 🔗 Deep Learning
- 🤖 AI in Healthcare, Education, Finance and more
| Technology | Purpose |
|---|---|
| HTML5 | Structure and content |
| CSS3 | Styling and responsive design |
| JavaScript | Interactivity and functionality |
| Font Awesome | Icons |
| Google Fonts | Typography (Roboto, Poppins) |
AI CodeLab/
│
├── index.html # Home page
├── courses.html # Courses listing
├── study.html # Study materials
├── login.html # Login / Sign up
├── join.html # Join community
├── join-community.html # Community details
│
├── codelab-html.html # HTML course page
├── codelab-css.html # CSS course page
├── codelab-javascript.html # JavaScript course page
├── codelab-python.html # Python course page
├── codelab-java.html # Java course page
├── codelab-cpp.html # C++ course page
│
├── styles.css # Main stylesheet
├── style.css # Additional styles
├── main.css # Core styles
├── join-community.css # Community page styles
├── join.css # Join page styles
│
├── home.js # Home page scripts
├── script.js # Main JavaScript
└── join-community.js # Community page scripts
- Clone the repository:
git clone https://github.com/your-username/ai-codelab.git- Open the project folder:
cd ai-codelab- Open
index.htmlin your browser — that's it! No installation needed! ✅
- Go to netlify.com
- Click Add new site → Deploy manually
- Drag and drop your project folder
- Your site is live! 🎉
AI CodeLab works on all screen sizes:
| Device | Support |
|---|---|
| Desktop | ✅ |
| Tablet | ✅ |
| Mobile | ✅ |
- Add backend with Node.js + Express
- Add user authentication with JWT
- Add MongoDB database for users
- Add quiz and coding challenges
- Add progress tracking for each course
- Add dark mode
- Convert to React (MERN Stack)
Shifa Rabbani
- 🔗 LinkedIn: Shifa Rabbani
- 🐱 GitHub: ShifaRabbani
- 📸 Instagram: @master_shefu0786
- 🎵 TikTok: @computer_science786
For questions or suggestions: 📩 [email protected]
This project is open source and available for educational purposes.
⭐ If you found this project helpful, please give it a star on GitHub!
Built with ❤️ by Shifa Rabbani — Learning and teaching together!