.jpg){kind=link}
.jpg){kind=link}
A modern, responsive language learning platform that connects students with native-speaking teachers from around the world.
LanguageHub is a web-based platform designed for learning and teaching languages. Students can book online lessons with qualified teachers, browse free educational resources, and manage their learning journey through an intuitive coin-based system.
- 📚 Multi-Language Support: Learn Malay, Pashto, Arabic, Thai, Hausa, English, and Nigerian Pidgin
- 👨🏫 Teacher Directory: Browse and book lessons with verified language teachers
- 💰 Coin System: Virtual currency for booking classes and accessing premium content
- 📖 Free Resources: PDFs, websites, and learning materials curated by teachers
- 📅 Class Management: Book, view, and manage your scheduled lessons
- 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- 🎨 Modern UI/UX: Smooth animations, hover effects, and accessible design
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No server required - runs as a static website
- Clone or download this repository
- Move images to the
images/folder (if not already organized) - Open
index.htmlin your web browser
languagehub/
├── index.html # Main HTML file
├── css/
│ └── styles.css # All styles with animations
├── js/
│ └── script.js # Application logic
├── images/ # (Optional) Organized images folder
├── *.jpg, *.png # Teacher photos, screenshots
├── *.pdf # Learning resources (PDFs)
└── README.md # This file
- Fade-in animations for cards and sections on page load
- Smooth hover effects on buttons, cards, and navigation
- Gradient animations on primary buttons
- Scale transitions on teacher photos and media elements
- Toast notifications with slide-in animation
- Mobile-first approach
- Hamburger menu for mobile navigation
- Adaptive grid layouts
- Touch-friendly buttons and interactions
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Focus indicators
- Screen reader friendly
| Technology | Purpose |
|---|---|
| HTML5 | Structure and semantics |
| CSS3 | Styling, animations, responsive design |
| JavaScript (ES6+) | Interactivity, routing, state management |
| LocalStorage | Persistent data (coins, bookings) |
- Welcome hero section with CTA buttons
- Featured teachers grid
- Testimonials from students
- Class screenshots gallery
- Full teacher directory
- Filter by language
- Sort by rating, price, or name
- Book lessons directly
- View booked lessons
- Join class via Google Meet link
- Cancel bookings
- Free learning materials
- Filter by language and type (PDF, Video, Website)
- Preview and download resources
- Platform information
- Contact form with Google Forms integration
- Starting Balance: 30 coins
- Purchase Rate: 100 coins = RM 5
- Payment Methods: Touch 'n Go QR, Bank Transfer
| Name | Languages | Price | Rating |
|---|---|---|---|
| Faizan | Pashto, Farsi, English | 20 coins | 4.9★ |
| Abdulkarem | Hausa, English | 18 coins | 4.8★ |
| Anas | Arabic, English | 22 coins | 4.7★ |
| Muhib | Arabic, English | 19 coins | 4.8★ |
| Arsikin | Thai, Malay | 15 coins | 4.6★ |
| Fangi | Malay, English | 25 coins | 4.9★ |
This is currently a frontend demo. Planned backend features include:
- User authentication & accounts
- Real payment integration
- Teacher dashboard
- Video calling integration
- Progress tracking
- Certificate generation
- Admin panel
This project is developed by AIU students. Contributions welcome!
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
This project is for educational purposes. © 2025 LanguageHub Team.
- Frontend Development: Student Team
- UI/UX Design: Student Team
- Backend (Coming Soon): In Development