README.txt

==============================
      Frontend Projects
==============================

This folder contains a collection of frontend development projects built while learning from two major web development courses:

1. The Complete JavaScript Course by Jonas Schmedtmann  
2. The Web Development Bootcamp by Angela Yu

The projects demonstrate key concepts in modern web development using **HTML**, **CSS**, and **JavaScript**. One project (Keeper App) is built using **React.js**.



🔹 Forkify App  
→ Recipe search and bookmarking app using the Forkify API and asynchronous JavaScript.

🔹 Mapty App  
→ Workout tracking app with geolocation and interactive map (Leaflet.js).

🔹 Pig Game  
→ Simple two-player dice game demonstrating game logic and DOM manipulation.

🔹 Guess My Number  
→ A number guessing game using simple JS logic and UI updates.

🔹 Banker App  
→ A mini banking app with login, transfers, loan simulation, auto logout timer, etc.

🔹 Bankist Project  
→ A more advanced version of the banking app featuring sorting, date/timer logic, and UI transitions.

🔹 Bankist Home Page  
→ Responsive, animated landing page with smooth scrolling, sticky nav, and tabbed content.



🔹 Simon Game  
→ A memory-based game with visual and sound-based feedback.

🔹 Drum Kit  
→ A virtual drum kit played using keyboard/mouse with sound effects.

🔹 Capstone Project (Portfolio)  
→ A simple personal portfolio built using HTML/CSS and a bit of JavaScript.

🔹 Keeper App (React.js)  
→ A note-taking app inspired by Google Keep, built using React components and props.

----------------------
💡 Technologies Used:
----------------------
- HTML5
- CSS3 (Flexbox, Grid, Animations)
- JavaScript (ES6+)
- DOM Manipulation
- Events and Timers
- Fetch API & Promises
- Local Storage
- Geolocation API
- React.js (JSX, Props, Components)

----------------------
🚀 How to Run:
----------------------
Open the `index.html` file of each project in your browser to see it in action.  
For the **Keeper App (React)**, use a local development server (e.g., `npm start`) inside the project folder.

----------------------
📁 Notes:
----------------------
These projects were built to practice and reinforce concepts taught in the courses.  
They cover a wide range of frontend topics — from simple games to real-world app simulations.

Feel free to explore, customize, and build upon them!

==============================