Hey Everyone!! #Day25 of #30DaysCodingChallenge Today I built a Number Guessing Game Web Application using HTML, CSS, and JavaScript. What I Built An interactive game where users guess a number between 1 and 10. The application provides feedback on whether the guess is too high, too low, or correct, and tracks the number of attempts and the high score. Purpose of the Project The goal was to improve my understanding of JavaScript logic, DOM manipulation, and localStorage while creating a fun and engaging game. Key Features ✔ Input validation for guesses. ✔ Real-time feedback: “Too High”, “Too Low”, or “Correct! ”. ✔ Counts the number of attempts. ✔ Stores and displays the high score using Local Storage. ✔ Reset button to start a new game instantly. ✔ Clean and centered UI with intuitive design. What I Learned 🔹 How to generate random numbers with Math.random(). 🔹 How to handle user input and provide dynamic feedback. 🔹 How to track attempts and implement high score logic. 🔹 How to persist data with localStorage. 🔹 How to structure a small game logically and efficiently. Creating small games like this is helping me practice JavaScript fundamentals while building something enjoyable and interactive. #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #CodingChallenge #BuildInPublic

🚀 Learning Full-Stack Development – Project Update As part of my web development journey, I built a Basketball Scorecard using HTML, CSS, and JavaScript, guided by Per Borgen. This project helped me practice: 🏀 DOM manipulation 🏀 JavaScript event handling 🏀 Styling with CSS 🏀 Building interactive UI components 🔗 Live Demo: https://lnkd.in/g47Vc_b7 💻 GitHub Repository: https://lnkd.in/ggBPXujp I’m excited to keep learning, building projects, and improving step by step in my full-stack development journey. #WebDevelopment #FrontendDevelopment #JavaScript #LearningJourney

🎮 Excited to Share My First Interactive Web Game - Tic Tac Toe! Just launched a beautifully designed Tic Tac Toe Game built with vanilla HTML5, CSS3, and JavaScript! 🌟 Project Highlights: ✨ Modern, responsive UI with smooth animations 🎨 Interactive player turn indicator & real-time win detection 📱 Fully responsive - works seamlessly on desktop, tablet & mobile ⚡ Clean, maintainable code with proper game state management 🏆 Draw detection & game reset functionality 💭 Key Takeaway: This project reinforced an important lesson: Mastering the fundamentals is the true foundation for building strong development skills. While building this game, I focused on: 🔧 DOM manipulation & event handling 🎯 Game logic & state management 🎨 CSS animations & modern design principles ♿ Creating accessible, user-friendly experiences 🚀 What's Next? I'm excited to dive deeper into the JavaScript ecosystem! My roadmap includes: 📌 Exploring advanced JS features (Async/Await, Promises, APIs) 📌 Building more complex projects with vanilla JS 📌 Mastering React.js to build dynamic web applications The journey from basics to advanced frameworks is all about building on solid foundations. Every project teaches me something new! 🔗 Check it out on my Github: [https://lnkd.in/d5Ff4qVj] | Feel free to explore the code and share your feedback! 💬 #WebDevelopment #JavaScript #GameDevelopment #FrontendDevelopment #ReactJS #CodingJourney #Learning #100DaysOfCode

🚀 Continuing to sharpen my JavaScript skills with a Number Guessing Game project. Excited to share my beginner project "Number Guessing Game" built using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of: > JavaScript logic and conditional statements > DOM manipulation and user interaction > Basic UI design using CSS > Event handling and game flow control 🔗 My github project link: https://lnkd.in/dC-4d4hG The game generates a random number, and the user tries to guess it with feedback provided after each attempt — making it both fun and interactive. 💡 I’m continuously improving my skills in frontend development, and more projects are on the way! #WebDevelopment #JavaScript #FrontendDevelopment #BeginnerProject #CodingJourney #HTML #CSS #LearningByDoing

🎮 I recently built a Memory Matching Game completely from scratch using HTML, CSS, and jQuery. This project was part of a web development assignment given by Miss Juhinah Batool, and the goal was to create a fully working browser game without using frameworks or templates — just pure coding. 🔹 Key Features: • Smooth 3D card flip animations using CSS transforms • Game logic and state management handled with jQuery • Live move counter and timer to track gameplay • Sound effects generated with the Web Audio API (no external audio files needed) • Automatic win detection with an animated victory overlay • Organized 3-file structure: index.html, style.css, and script.js Working on this project helped me understand JavaScript logic, event handling, and DOM manipulation in a much deeper way. Building something interactive that people can actually play makes the learning process far more engaging than simply following tutorials. A big thanks to Miss Juhinah Batool for assigning such a creative and practical task. Projects like this make learning web development both challenging and fun. 🙌 📂 GitHub Repository: https://lnkd.in/dmYMpy6u If you're learning web development, try building a small game project. It’s one of the best ways to strengthen your coding skills and understand how everything connects. #WebDevelopment #JavaScript #jQuery #HTML #CSS #Programming #StudentDeveloper #GameDev #100DaysOfCode #FAST

 A fully interactive Rock Paper Scissors Game built using HTML, CSS, and JavaScript. This project focuses on strengthening core JavaScript concepts and improving logical thinking by implementing real-time game functionality. 🔹 Technologies Used: - HTML5 - CSS3 (Responsive UI & Styling) - JavaScript (Game Logic & DOM Manipulation) 🔹 Key Features: - Interactive user interface - Random computer choice generation - Real-time result display (Win / Lose / Draw) - Score tracking system - Clean and responsive design 🔹 What I Learned: - Handling click events in JavaScript - Implementing conditional logic - Using Math.random() for dynamic behavior - Updating UI dynamically using DOM - Improving problem-solving skills - Building this project helped me strengthen my JavaScript fundamentals and understand how game logic works in real-world applications. 🔗 Live Demo: https://lnkd.in/gSeDQmQw 📂 GitHub Repository: https://lnkd.in/gY-dV_bY I’m continuously learning and building more projects. Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #FrontendDeveloper #HTML #CSS #LearningJourney

Day-7/21. 🚀 Built a Classic Snake Game using HTML, CSS & JavaScript. I recently developed a fully functional Snake Game using pure HTML, CSS, and Vanilla JavaScript — focusing completely on logic building, DOM manipulation, and game mechanics. This project strengthened my fundamentals in core web development without using any frameworks. 🎮 Game Features: ✅ Smooth snake movement using 'requestAnimationFrame'. ✅ Keyboard controls (Arrow keys). ✅ Self-collision detection. ✅ Wall collision detection. ✅ Dynamic food generation at random positions. ✅ Real-time score tracking. ✅ Snake growth animation after eating food. ✅ Speed control logic. ✅ Background music integration. ✅ Food sound effect. ✅ Game over sound effect. ✅ Restart functionality after collision ✅ Grid-based responsive board using CSS Grid. ✅ Styled snake head & body with gradients. ✅ Fully playable in browser without external libraries. 🎨 Tech Stack Used: HTML (Structure). CSS (Grid layout, styling, gradients, responsiveness). JavaScript (Game logic, movement system, collision detection, DOM rendering). 💡 What I Learned: Building this project helped me understand: ✅ How real-time browser-based games work. ✅ Managing state without frameworks. ✅ Optimizing DOM updates. ✅ Writing clean and structured JavaScript logic. Sometimes the best way to grow is by mastering the basics. More advanced projects coming soon 🚀. #FrontendDevelopment #WebAnimation #SheryiansCodingSchool #UIUX #FullStackDevelopment #21DaysChallenge

🥁 Built an Interactive Drum Kit Using JavaScript DOM! I recently built a Drum Kit Web App to strengthen my understanding of DOM manipulation and event handling in JavaScript. You can play the drums by: 🎵 Clicking the buttons ⌨️ Pressing keys on your keyboard Each key triggers a unique sound along with a button animation effect. 💡 What I Practiced: 1.DOM Selection (querySelectorAll) 2.Event Listeners (Click & Keypress) 3.JavaScript Audio Object 4.Switch Statements 5.Class Manipulation 6.setTimeout() for animations 💻 GitHub Repository: 👉 https://lnkd.in/gfRUffKN This project helped me understand how JavaScript interacts with HTML & CSS in real time. Small project. Big learning. 🚀 If you're learning frontend development — build projects. That’s where real understanding happens. 💡 #JavaScript #WebDevelopment #Frontend #DOM #100DaysOfCode #LearningInPublic #FrontendDeveloper

🎲 Just Built a Dice Roll Game using HTML, CSS & JavaScript! 🌐 Live Demo: [https://lnkd.in/g6PtRh2P] 💻 GitHub Repository: [https://lnkd.in/gRDY-dE3] Excited to share my latest mini project — a Dice Roll Game that I built from scratch using core web technologies. This project helped me strengthen my understanding of DOM manipulation, event handling, and basic game logic. 🚀 Features: • Random dice generation on each roll • Dynamic UI updates using JavaScript • Clean and responsive design with CSS • Simple and interactive gameplay 💡 What I learned: Working on this project improved my problem-solving skills and gave me hands-on experience in connecting JavaScript logic with UI elements. It also reinforced how powerful vanilla JavaScript can be when building interactive applications. Feel free to check it out and share your feedback! #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #JS #Projects  ❤️

🚀 Just built my own QR Code Generator using pure HTML, CSS & JavaScript — no frameworks, no libraries! You simply type any text or URL, hit the button, and a QR code is generated instantly. ✅ 🛠️ Tools & Tech I used: • HTML5 — for the structure • CSS3 — for styling, animations & smooth transitions • Vanilla JavaScript — for logic & DOM manipulation • QR Server API — to generate QR codes on the fly ✨ Features: • Instant QR code generation from any text or URL • Smooth reveal animation when QR code appears • Input validation with a shake animation on empty submission • Clean, minimal UI with a centered card layout This project helped me understand how to work with external APIs, CSS animations, and dynamic DOM updates — all without a single framework. 🔗 Live Demo: https://lnkd.in/d_5J4Nwn Would love your feedback! Drop a comment or connect if you're on a similar learning journey. 🙌 #WebDevelopment #JavaScript #HTML #CSS #QRCode #100DaysOfCode #Frontend #Projects #Learning #OpenToWork