Hi everyone.... 💻 Day 18 of #30DaysCodeChallenge Today I built a Random Quote Generator using HTML, CSS, and JavaScript as part of my daily frontend practice. This project helped me strengthen my understanding of DOM manipulation and event handling in JavaScript while also focusing on clean and responsive UI design. ✨ Key Features of the Project: 🔹 Displays a random motivational quote each time the user clicks the "New Quote" button 🔹 Shows the author name along with the quote 🔹 Added a Copy Quote button to copy the quote directly to the clipboard 🔹 Designed a simple and clean UI using CSS with a gradient background 🧠 What I Practiced: ✔️ Working with arrays and objects in JavaScript ✔️ DOM manipulation using getElementById ✔️ Event listeners for button interactions ✔️ Generating random quotes using JavaScript logic ✔️ Using the Clipboard API Consistent practice like this helps improve problem-solving skills and builds confidence in frontend development. Looking forward to continuing this journey and learning something new every day! 🚀 #30DaysCodeChallenge #Day18 #WebDevelopment #HTML #CSS #JavaScript #FrontendDevelopment #CodingJourney

🚀 Leveling up my Frontend Game! 🕹️ I spent my day building a Neon-Themed Tic-Tac-Toe from scratch! 💻 It’s not just a game; it was a deep dive into DOM manipulation and win-logic. What I learned: State Management: Handling "X" vs "O" turns without bugs. Win Logic: Implementing the 8 winning combinations (rows, columns, diagonals). UI/UX: Using CSS pseudo-elements (::before/::after) to create those glowing neon symbols. The "Aha!" moment: Getting the draw logic to trigger perfectly only when all cells are filled and no winner is found. Check out the clean layout! It’s all built with HTML5, CSS Grid, and Vanilla JavaScript. What was your first JS project? Let's chat in the comments! 👇 #WebDevelopment #JavaScript #CodingJourney #Frontend #BuildingInPublic

🎨 Project Showcase #12 – Background Color Changer (React.js) In this project, I built a simple Background Color Changer using React.js. The application allows users to change the background color of the page by clicking buttons representing different colors. Github link- https://lnkd.in/g72wdbGn ✨ Features: 🔹 Click a color button to instantly change the background color 🔹 The color name updates dynamically on the screen 🔹 Built using React’s useState hook to manage state changes 🔹 Simple and interactive UI for quick visual feedback 💡 What I practiced in this project: 🔹Managing state using useState 🔹Handling button click events in React 🔹Updating UI dynamically based on state changes 🔹Understanding how React re-renders components when state updates Small projects like this helped me build a strong foundation in React and understand how state drives UI updates. More projects from my learning journey coming soon 🚀 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #ProjectShowcase #ReactProjects

Frameworks make things faster. But fundamentals make you better. Day 13 of rebuilding my Frontend skills with #LearningToMakeLivingOnline from Talha Tariq Today I continued practicing Flexbox and started applying it to something real — my personal portfolio website. What I worked on: • Structuring sections using Flexbox • Improving alignment and spacing • Designing sections to showcase projects and skills Right now the portfolio is very simple, but I’ll keep improving it step by step. Even though I’ve previously worked with frameworks like Next.js and Tailwind CSS, revisiting core CSS layouts makes everything much clearer. Frameworks evolve. Fundamentals stay. Developers — what do you look for first in a portfolio website? #webdevelopment #frontend #css #buildinpublic #developer #softwareengineering

Built a dynamic New Year Countdown Web App using HTML, CSS, and JavaScript 🚀 🔹 What I Implemented: • Real-time countdown timer to upcoming year • Automatic next-year detection using JavaScript Date object • Time formatting with leading zeros • Smooth loading effect before countdown display • Dynamic DOM manipulation and interval updates 🔹 Key Concepts Practiced: • Date & Time calculations in JavaScript • setInterval() and setTimeout() • DOM manipulation • Clean UI structuring This project strengthened my understanding of time-based logic and real-time UI updates. Excited to keep building interactive frontend projects as I continue my Full Stack Development journey 💻✨ #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #Projects #LearningByDoing #FullStackDeveloper

🚀 Built an Image Carousel using JavaScript! Today I worked on a small but important frontend project — an Image Carousel (Image Slider) using HTML, CSS, and JavaScript. 🔹 Key features implemented: • Display images dynamically from an array • Navigate images using Next and Previous buttons • Circular navigation (last image goes back to first) • DOM manipulation using JavaScript • Event handling with addEventListener() 💡 Concepts I practiced: • JavaScript arrays and indexing • DOM selection and manipulation • Event listeners • Writing clean and modular functions This project helped me better understand how interactive UI components work in real web applications. Every small project is a step closer to becoming a better Frontend / Full Stack Developer. 💻 #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #100DaysOfCode #LearningInPublic

Writing Performant CSS in React Global CSS works… until your app scales. Then you get: • Class name collisions • Specificity wars • Unused styles piling up • Hard-to-trace overrides Performance isn’t just bundle size. It’s predictability and maintainability. That’s why I like CSS Modules. ✔ Locally scoped by default ✔ No global leakage ✔ No runtime style injection ✔ Pure CSS, compiled at build time You write normal CSS. Your classes get unique identifiers automatically. No naming gymnastics. No surprises. Clean architecture. Minimal overhead. Scales well. What’s your go-to styling approach in React? #React #FrontendEngineering #CSSModules #WebPerformance #JavaScript

🚀 Mini Project of the Day: Password Strength Checker First, I show how it works: • Checks password strength • Animated strength bar • Show / Hide password button Then, you can see the code being written in **30x speed** (HTML + CSS + JS). Goal: to improve my frontend skills and create clean, interactive UI components. #frontend #javascript #webdevelopment #vuejs #coding #juniordeveloper #uiux #learntocode #portfolio

Most React projects don't fail because of React. They fail because of the libraries built around it. The ecosystem is vast — and choosing the wrong state management tool, UI library, or form handler in week one creates compounding technical debt that slows down every sprint after. In the guide below, we break down the 10 best React libraries and when each one actually fits. • Redux — still the gold standard for complex, shared state across large applications • MobX — reactive state management for teams that want less boilerplate • Material UI — the fastest path to a polished, consistent UI, but opinionated • React Bootstrap — familiar grid system, good for teams migrating from traditional web • Framer Motion — animation that integrates cleanly without fighting your component structure • Formik — form state and validation that scales beyond simple contact forms • React Hook Form — lighter than Formik, better performance on large forms • React Router — the default for client-side navigation, with good reason At Monocubed, we see the same pattern with engineering leads and CTOs: they do not just want a list of popular libraries. They want to know which combination will still make sense at 10x the current codebase size. If you are building or scaling a React application, this guide will help you think through your stack decisions: • Are your library choices driven by the current team's familiarity — or by what the application actually needs? • Where does your current state management approach start to break down? • Is your UI library helping you move faster, or has it become a constraint? Read the full guide and tell us in the comments: which React library has saved your team the most time? https://lnkd.in/dPSr-wVJ #Monocubed #React #WebDevelopment #JavaScript #Frontend #TechStrategy

Hey everyone! I’ve challenged myself to build 5 web projects to strengthen my frontend skills, and I'm excited to share : Project 1/5: A Password Generator! 🚀🔐 I built this entirely from scratch using just HTML, CSS, and Vanilla JavaScript. My main goal was to focus on UI/UX and making it feel like a modern application. Here are the main features I implemented:  ✅ A modern glassmorphism design ✅ Real-time password strength tracking ✅ Customizable length and character options (uppercase, lowercase, numbers, symbols) ✅ Instant copy-to-clipboard functionality Building this was great practice and really helped me improve in a few key areas: 💡 DOM Manipulation: Managing state and dynamic UI updates without any frameworks. 💡 CSS Styling: Working with gradients, hover effects, and responsive design. 💡 APIs: Using the browser's Clipboard API to securely copy text. You can see exactly how it works in the short video attached below! 🎥 Next up is Project 2... Code & Documentation on GitHub: 🔗 https://lnkd.in/demvBdfZ #WebDev #Frontend #JavaScript #HTML #CSS #CodingChallenge #DeveloperCommunity