🚀 Day 28/100 – #100DaysOfCode Core Web Concepts: Rendering & Architecture 🔹 Single Page Application (SPA) vs Multiple Page Application (MPA) SPA: Loads a single HTML page and dynamically updates content without reloading. MPA: Loads a new page from the server on every request. -Use SPA for fast, interactive apps (dashboards, SaaS). -Use MPA for SEO-heavy or content-driven sites (blogs, news). 🔹 What is Rendering? Rendering is the process of converting code (HTML, CSS, JS) into a visible UI in the browser. -It happens when the browser builds the DOM and paints it on the screen. 🔹 Rendering vs Re-rendering Rendering: Initial display of UI Re-rendering: Updating the UI when state or data changes -Efficient re-rendering is key for performance in frameworks like React.| 🔹 What is Reactivity? Reactivity means the UI automatically updates when data changes. -You change the state → UI updates automatically (no manual DOM manipulation). 🔹 Server-Side Rendering (SSR) vs Client-Side Rendering (CSR) SSR: HTML is generated on the server and sent to the browser CSR: Browser builds the UI using JavaScript Use SSR for: -Better SEO -Faster initial load Use CSR for: -Highly interactive apps -Faster navigation after load 28 days down, 72 more to go. #Day28 #100DaysOfCode #WebDevelopment #ReactJS #JavaScript #FrontendDevelopment #MERN

Hey everyone! I’m excited to share my latest front-end project: Nostra, a fully responsive, multi-page e-commerce web store. Making the jump from visual structure (HTML/CSS) to actual logic has definitely been a steep learning curve. JavaScript is not easy! But putting the theory into practice and seeing the webpage actually react to user input has been incredibly rewarding. For this project, I focused heavily on core Vanilla JavaScript to bring the store to life. Key Features: Dynamic Category Filtering: Built a custom filter system to sort products using if-else logic and exact matching (squashed a few fun bugs along the way!). Real-Time Search: Implemented a live search bar that filters the product grid as you type, complete with a dynamic results counter. Responsive UI: Ensured a seamless shopping experience across desktop, tablet, and mobile devices using CSS Grid and Flexbox. Getting the hang of DOM manipulation, forEach loops, and event listeners is finally starting to click. Check out the code on my GitHub! https://lnkd.in/grvznDZD Live Link : https://lnkd.in/gyXMx55u I'd love to hear your thoughts—feedback is always appreciated as I continue to learn and build! 💻🚀 #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #LearningToCode #WebDesign #errormakesclever

The default behaviour of a JavaScript bundler is: put everything in one file. The default behaviour of a user is: only visit one part of your app at a time. Lazy loading bridges the gap between these two realities. What to lazy load: → Components that are not visible on initial render → Heavy third-party libraries used only in specific sections → Routes that users may never visit in a session → Modals, drawers, and overlays (they're hidden until triggered) What NOT to lazy load: → Navigation and layout components (needed on every render) → Content above the fold (lazy loading it creates visible delay) → Error boundaries (need to be ready before errors occur) For instance, a user who visits the dashboard never downloads the settings module. Or a user who never opens the editor never downloads the rich text library. Everyone gets exactly the code they need for their current journey. Lazy loading is not an optimisation. It is the correct default that eager loading overrides. What's the heaviest component you've successfully lazy loaded? #performance #WebOptimisation #web #react #next

Staying organized sounds simple—until tasks start piling up. I built this To-Do List Web App to explore how everyday productivity tools can be implemented using core web technologies. The application allows users to: • Add and delete tasks • Mark tasks as completed • See updates instantly without page reload ⚙️ Built using: • HTML • CSS • JavaScript (DOM manipulation & event handling) What made this project interesting was working with real-time DOM updates and ensuring a smooth user experience without relying on any frameworks. Handling dynamic UI updates while keeping the interface responsive and consistent was a key challenge. 🎯 The goal wasn’t just to build a task manager, but to create something simple, fast, and intuitive to use. 🔗 Try it here: https://lnkd.in/g96bhxem This project reflects my focus on building strong fundamentals and translating them into practical, user-focused applications. #WebDevelopment #JavaScript #FrontendDevelopment #Projects #Learning

Just wrapped up my latest web development project: a dynamic Weather Dashboard! ⛅ I wanted to build something that wasn't just functional, but actually felt like a modern app. I integrated the OpenWeatherMap API to fetch real-time data and focused heavily on the user interface. Here are a few of the features I implemented: 🔹 Live API Integration: Used AJAX & jQuery to fetch and parse JSON weather data asynchronously. 🔹 Dynamic UI Elements: The background automatically shifts gradients based on the current weather condition (Sunny, Rainy, Cloudy). 🔹 Dark/Light Mode: Added a seamless theme toggle for better accessibility. 🔹 Search Memory: Built a responsive search history list so users can quickly revisit previous locations. Built with Vanilla JavaScript, jQuery, and Bootstrap 5. Every new project is a step forward in my CS journey, and getting the DOM to react perfectly to live API data was a great challenge to solve. Check out the screenshots below! #WebDevelopment #JavaScript #Bootstrap #FrontEnd #CodingJourney #APIIntegration

🚀 New Project Deployed – To-Do List Web App I recently built and deployed a To-Do List application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM manipulation and interactive UI behavior in JavaScript. You can check it out here: 🔗 [https://lnkd.in/geExcau9] github: [https://lnkd.in/gVRsq3xk] Key Features: • ➕ Add a new task instantly by pressing Enter • ✏️ Edit any task by simply double-clicking on it • ✅ Mark tasks as completed using the checkbox (with strikethrough effect) • 🗑️ Delete tasks easily using the delete button • ⚡ Smooth and simple user experience with real-time updates Building small projects like this helps me improve my JavaScript logic and front-end development skills. I’d love to hear your feedback! 🙌 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment

🚀 New Project Alert: Calculator Web App I recently built a Calculator Web Application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of: • DOM Manipulation • JavaScript Event Handling • Responsive UI Design 🔧 Tech Stack: HTML | CSS | JavaScript You can check out the project here: 🔗 GitHub Repository: https://lnkd.in/gFYUSwTx #WebDevelopment #JavaScript #FrontendDevelopment

🚀 Day 23 of My 30 Days Web Development Challenge Consistency check ✅ — showing up every day and building real projects. Today I built a ⌨️ Typing Speed Test Web App using HTML, CSS & JavaScript This project was fun because it involved real-time interaction and logic, making it feel more like a real product. ✨ Features: ⌨️ Real-time typing test 🎯 Random text generation ⏱️ Live timer 🟢 Correct typing highlight 🔴 Incorrect typing highlight 📊 Words Per Minute (WPM) calculation 🎯 Accuracy calculation 📱 Fully responsive design 🎨 Clean UI with background image 💡 What I learned: • Handling real-time user input • DOM manipulation & event handling • Working with timers (setInterval) • Calculating WPM and accuracy • Building interactive UI features • Improving responsiveness and layout 🛠️ Tech Stack: HTML | CSS | JavaScript 🔗 Live Demo: https://lnkd.in/g53mDTQ6 💻 GitHub: https://lnkd.in/g9vBBQz3 Still learning, still building, and staying consistent 🔥 #WebDevelopment #JavaScript #FrontendDeveloper #CodingJourney #BuildInPublic #100DaysOfCode #HTML #CSS #WebDevProjects #LearnInPublic #Consistency #DeveloperJourney

Day 20 – Notes App with Categories 📝 Today I built a fully functional Notes Application with category-based filtering using HTML, CSS, and JavaScript. ✨ Key Features: 📂 Category-wise filtering (Work, Personal, Study, Ideas) 🔍 Real-time search to quickly find specific notes 💾 LocalStorage integration to keep data persistent 🎨 Modern UI with a clean, responsive masonry grid 🗑️ Easy management with one-click delete functionality.

PEP TASK-4 Forms are where the magic happens in web development! ✨ Today I focused on building a robust User Application Form. While it looks like a simple layout, the goal was to master the different ways we collect data from users—from dropdowns and date pickers to multi-select checkboxes. Key takeaways from this build: 📝 Ensuring accessibility by linking labels to inputs correctly. 📝 Structuring data fields for intuitive user flow. 📝 Managing different CSS styles for varying input types. Every field added is a step closer to building full-scale, production-ready applications. Next up: Adding custom JavaScript validation! 🚀 Source code: https://lnkd.in/gvPxcr_b #HTML #CSS #WebDesign #Frontend