https://github.com/ozematt/little_learners_vanilla_js
Little Learners App | Built with Vanilla JavaScript & Sass
https://github.com/ozematt/little_learners_vanilla_js
eslint netlify pexels-api prettier sass typescript vanilla-javascript
Last synced: 5 months ago
JSON representation
Little Learners App | Built with Vanilla JavaScript & Sass
- Host: GitHub
- URL: https://github.com/ozematt/little_learners_vanilla_js
- Owner: ozematt
- Created: 2025-04-25T13:24:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-28T14:21:54.000Z (10 months ago)
- Last Synced: 2025-08-28T17:20:34.553Z (10 months ago)
- Topics: eslint, netlify, pexels-api, prettier, sass, typescript, vanilla-javascript
- Language: HTML
- Homepage:
- Size: 2.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧒 Little Learners 🎒
**Little Learners** is a responsive, multi-page website built with plain TypeScript (Vanilla JS) and styled using Sass. The project is based on a [Figma design](https://www.figma.com/design/mhDBCW795qtJ5e8sAwseLA/School-Education-Website-UI-Template---Light-Theme--Neubrutalism----FREE-Editable--Community-?node-id=164-34417&t=ZzSGOjTN7nlbGYrM-0) and was intentionally developed without frameworks to refresh and strengthen my understanding of core JavaScript concepts.
The code is modular and maintainable, with encapsulated logic written using classes. Sass was used to organize styles into reusable, scalable components. The website includes difrent sections and a mobile-first layout.
## 🌍 Live Demo
The application is available online on Netlify:
🔗 [Little Learners – Live Preview](https://littlelearnersvanillajs.netlify.app/)
## 🛠️ Technologies
- **TypeScript** – improved code organization and type safety
- **SASS** – quick and modular component styling
- **Vite** – fast development server and optimized build system
- **ESLint & Prettier** – consistent code style and error prevention
- **Pexels API** – dynamic image gallery powered by external data
- **Figma** – design reference for layout and UI
- **Netlify** – hosting and automatic deployment
## 🎯 Project Goals
✅ Practice core JavaScript concepts
✅ Strengthen code quality using TypeScript
✅ Build a responsive website based on a Figma design
✅ Apply modular styling with Sass
✅ Automate deployment using Netlify
## 📂 Running the Project Locally
To install and run the project locally, follow these steps:
1. **Clone the repository:**
Fork the repository to your GitHub account, and then clone it locally.
```sh
git clone https://github.com/ozematt/Little_Learners_vanilla_JS
```
2. **Navigate to the project directory:**
```sh
cd Little_Learners_vanilla_JS
```
3. **Install dependencies:**
```sh
npm install
```
4. **Run the application:**
```sh
npm run dev
```
4. **Open in your browser:**
```sh
http://localhost:5174/
```
## 📌 Features
- 🗂️ Multi-page website structure
- 📱 Responsive design (mobile, tablet, desktop)
- 🖼️ Image gallery powered by the Pexels API
- 🧱 Modular JavaScript using classes
- 🎨 Clean and scalable Sass styling
- ♿ Semantic HTML and accessible form labels for better accessibility
## 🚧 Features in progress
- 🖼️ Enhancing the image gallery and improved loading performance
- ✔️ Adding more robust form validation with user-friendly error messages
## 📜 License
This project is for educational purposes only. Feel free to explore, learn from, and modify the code.
Thank you for visiting the repository! 😊