🎮 Project Showcase – Snake Game Recently, I built a classic Snake Game using HTML, CSS, and JavaScript, focusing not only on functionality but also on real-world, production-level practices. 🔹 Project Highlights: Built with vanilla HTML, CSS, and JavaScript Fully responsive for both desktop and mobile devices Used Local Storage to save and persist the high score Smooth gameplay with clean and structured logic Production-level CSS for a polished and scalable UI Well-structured and maintainable JavaScript code 🧠 What I learned: Implementing game logic and managing game state Building responsive layouts for real users Practical use of Local Storage in web applications Writing clean, reusable, and maintainable frontend code This project helped me understand that even basic web technologies can be powerful when used correctly. More projects coming soon 🚀 Project Link - https://lnkd.in/dDwXY7Dm https://lnkd.in/dDwXY7Dm #HTML #CSS #JavaScript #FrontendDevelopment #GameDevelopment #WebProjects #LearningByBuilding #DeveloperJourney @Sheryians Coding School Mentors @Sarthak Sharma

Today, I created a Snake Game from scratch using HTML, CSS, and JavaScript. What I added in this game: - Snake moves using Arrow Keys (⬆️ ⬇️ ⬅️ ➡️) - A grid-based board - When the snake eats food, its length increases by +1 - Score system - Sound effects: - Background music 🎵 1. Food eating sound 🔊 2. Game over sound ❌ This project helped me understand: - How simple games work using JavaScript logic - How to handle keyboard events - How to manage game state using arrays - How movement and collision detection work I also wrote a detailed Notion post explaining the complete approach step by step: 👉 https://lnkd.in/gK5s6dtg Building projects like this really helps me learn better and improve my skills. More projects coming soon 🚀 #JavaScript #HTML #CSS #WebDevelopment #LearningByBuilding #Projects #Frontend #CodingJourney

If anyone is interested in developing their skills in React three fiber, a quick thought based on my experience that might be helpful. 💬 Here are some tips for developing this skill: • Start with plain Three.js before React Three Fiber. Once you understand cameras, lights, geometry, and the render loop, R3F feels much more intuitive instead of “magic”. • Build small scenes again and again. A rotating cube, custom lighting, simple interactions. Repeating the basics taught me more than jumping straight into complex 3D websites. • Don’t chase visuals first. Focus on performance, scene structure, and how React state affects the 3D world. Clean logic makes good visuals easier later. • Read the docs and inspect other people’s code. Real projects on GitHub helped me understand patterns that tutorials don’t explain. Still learning every day, but this approach helped me grow faster and with more clarity #ReactJS #ThreeJS #ReactThreeFiber #WebDevelopment #FrontendDeveloper #JavaScript #CreativeCoding #3DWeb #WebGL #LearningInPublic

 Fluidity is the new standard. 💧 Static websites are dead. Users demand interaction, motion, and life. We recently deployed this project for Fro & Co, focusing heavily on micro-interactions and smooth scrolling physics. The goal was to keep the user engaged from the Hero section all the way to the "Contact" button. Tech Stack: ⚡ React + Vite 🎨 Tailwind CSS ✨ Custom CSS Animations Proud of the Onyx & Code team for polishing every pixel. What do you think of the scroll transitions? Let me know in the comments! 👇 #FrontendDev #WebDevelopment #DesignInspiration #MonaghanBusiness #LuxuryWebDesign

I recently built a Simon Memory Game using HTML, CSS, and JavaScript to sharpen my understanding of JavaScript logic, event handling, and state management. This project helped me practice: ●Working with arrays and sequences ●Handling user interactions and game flow ●DOM manipulation and real-time feedback ●Building an interactive UI with responsive gameplay 🔹 How it works: ●Press any key (on desktop) or tap anywhere (on mobile) to start ●The system flashes one color ●You must click the same color ●Each new level adds one more color to the sequence ●You must repeat the full sequence in the correct order ●The game ends when an incorrect color is selected ●Working on this was a fun way to improve my JavaScript fundamentals and logic. 👉 Live Demo: https://lnkd.in/g4pnXm4M 👉 Source Code: https://lnkd.in/gWABrJ-h Play and let me know your highest score! 🎮 #Javascript#WebDevelopment#FrontendDevelopment#HTML#CSS#CodingProjects#JavaScriptProjects#LearningByBuilding#StudentDeveloper#SoftwareEngineering

🚀 Just Built: Simon Says Game with HTML, CSS & JavaScript! 🟢🔴🔵🟡 I’m excited to share my latest project — a classic Simon Says game recreated using HTML, CSS, and JavaScript! 🎮 What this project does: ✔️ Implements interactive gameplay logic ✔️ Tests memory skills level by level ✔️ Provides interactive feedback ✔️ Uses JavaScript for game logic and DOM manipulation 💻 Technologies Used: ✨ HTML for structure 🎨 CSS for styling 🧠 JavaScript for game logic and interaction Check it out, explore the code, or build on it yourself 👉 GitHub: 🔗 https://lnkd.in/gXgdC-z9 #javascript #webdevelopment #html #css #coding #opensource #frontend 

Muhammad Osama Aqleem orakzai Abdul Musavir S Tatheer Hussain® ABDULLAH . The Pig Game (Pure JS Edition) Thrilled to share my latest web development project! 🚀 What started as a simple dice game turned into a deep dive into DOM manipulation and Responsive Design. The "Switching" Headache The hardest part? Managing the Player Switching Logic. 🤯 I struggled with keeping the state consistent—resetting the current score, toggling the active player's background, and ensuring the logic didn't break when a player rolled a '1'. After several refactors, I mastered using State Variables and Class Toggling to create a seamless transition between players. It was a "Eureka" moment in my JavaScript journey! 📱 Truly Responsive (Side-by-Side Layout) Most mobile games stack elements vertically, but I wanted to keep the Desktop Aesthetic even on small screens. Implemented custom Media Queries to scale the entire UI. Used Fixed Pixel Units for the "Current Score" boxes to prevent text overflow on mobile. Ensured Touch Targets (buttons) are perfectly sized for mobile users. 🛠️ Key Features: Dynamic UI: Backgrounds and text colors change based on the active player and game state. Winning Logic: A dedicated "Winner State" where the winner's name highlights in white for a premium feel. Performance: Lightweight, fast, and built with zero external libraries—just HTML5, CSS3, and Vanilla JavaScript. Check out the live game here: https://lnkd.in/dcKWPjTh #WebDevelopment #JavaScript #CodingJourney #FrontendDeveloper #ResponsiveDesign #ProgrammingLife ab yeh check kar

🔁 React Rendering Cycle – Explained in Simple Words Ever wondered why your component re-renders even when you didn’t expect it? 🤔 Understanding React’s rendering cycle clears 90% of confusion. Let’s break it down 👇 🔹 When Does React Re-render? ✔ State changes ✔ Props change ✔ Parent component re-renders 🔹 What Happens During Render? 🧠 React: 1️⃣ Calls your component function 2️⃣ Compares Virtual DOM (diffing) 3️⃣ Updates only the changed parts in real DOM 🔹 Important Truth 👉 Re-render ≠ DOM update React is smart enough to update only what changed. 💡 Common Misunderstanding ❌ “Re-render is expensive” ✅ Unnecessary DOM updates are expensive (React avoids them) 📌 Why This Matters ✔ Better performance decisions ✔ Less over-optimization ✔ Cleaner mental model 📸 Daily React tips & visuals: 👉 https://lnkd.in/g7QgUPWX 💬 What caused your last unexpected re-render? 👍 Like | 🔁 Repost | 💭 Comment #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactPerformance #DeveloperLife

Task 3 – Tic Tac Toe Game 🎮 Developed an interactive Tic Tac Toe game using HTML, CSS, and JavaScript. The game handles player turns (X & O), win detection, and game restart functionality with a clean and responsive UI. This task enhanced my understanding of JavaScript game logic, condition handling, and DOM manipulation. link - https://lnkd.in/dJCvvysX

I’m excited to share one of my recent practice projects — a Hangman Game built using vanilla web technologies to strengthen my JavaScript fundamentals and UI logic. 🔗 Live Demo: 👉 https://lnkd.in/enVU8Z8z 💻 GitHub Repository: 👉 https://lnkd.in/eYnXwWBC ✨ Project Highlights 🎮 Classic Hangman gameplay with multiple word categories ⌨️ User input support via both keyboard and on-screen clicks 🧠 Score system to track player performance 😂 Fun win & lose states: Meme image displayed Meme audio played for better user engagement 🎨 Simple & friendly UI focused on clarity and usability 🛠️ Tools & Technologies HTML CSS JavaScript (ES5) 🔮 Planned Improvements 📱 Make the game fully responsive 🎯 Add levels & difficulty progression This project helped me practice DOM manipulation, event handling, game logic, and user interaction without relying on any frameworks. I’d really appreciate any feedback or suggestions 🙌 Feel free to check it out and share your thoughts! #WebDevelopment #JavaScript #HTML #CSS #Frontend #LearningByBuilding #Projects #HangmanGame