SolarLearn is a modern, responsive educational website that helps users explore the Solar System in an interactive and visually engaging way.
The project focuses on clean design, smooth animations, and a simple authentication system to unlock extended content.
SolarLearn allows users to:
- Discover planets in order, from the Sun to Neptune
- Learn key facts about each planet in a clean article format
- Unlock additional content by creating an account
- Enjoy a responsive and modern browsing experience on all devices
This project was created as an academic and learning-focused web project, emphasizing frontend fundamentals.
- Structured Solar System exploration
- Individual planet sections with images and descriptions
- Login & Sign-up system (LocalStorage based)
- Guest vs Logged-in user content
- Fully responsive design (mobile & desktop)
- Smooth scroll & reveal animations
- Back-to-top button for long pages
- Clean navigation with persistent navbar
- HTML5
- CSS3
- Bootstrap 5
- Vanilla JavaScript
- Browser LocalStorage (authentication logic)
This project is frontend-only and does not use a backend or database.
SolarLearn uses LocalStorage to simulate user authentication:
- Users can create an account
- Login state persists across pages
- UI elements update dynamically based on login status
- Certain planet content is restricted to logged-in users
This approach was chosen to focus on JavaScript logic and DOM manipulation.
- Clone the repository:
git clone https://github.com/your-username/SolarLearn.git
- Open the project folder:
cd SolarLearn - Open the project folder: Open index.html in your browser
Practice responsive web design
Learn JavaScript DOM manipulation
Implement client-side authentication
Build a modern, educational UI
Organize a real-world frontend project
_ Moons section for each planet
_ Dwarf planets & Kuiper Belt
_ Quizzes and interactive learning
_ Backend authentication
_ Dark / Light mode toggle