Krishna Patel’s Post

What Actually Happens When You Type a URL in Your Browser? Most developers use browsers every day. But few understand the engineering pipeline behind it. Here’s what happens in milliseconds. 1️⃣ DNS Lookup The browser finds the IP address of the website. 2️⃣ HTTP Request It sends a request to the server asking for the webpage. 3️⃣ Server Response The server returns HTML, CSS, JavaScript, and assets. 4️⃣ HTML Parsing → DOM Tree The browser converts HTML into a DOM structure. 5️⃣ CSS Parsing → CSSOM Tree CSS rules are converted into a style structure. 6️⃣ Render Tree Creation DOM + CSSOM combine to create the Render Tree. 7️⃣ Layout (Reflow) The browser calculates the size and position of elements. 8️⃣ Painting & Compositing Finally, the browser converts everything into pixels on the screen. All of this happens in milliseconds. Understanding this browser rendering pipeline helps developers build: • Faster websites • Better UI performance • Optimized frontend code • Improved web performance • Efficient JavaScript execution Great developers don’t just write code. They understand how the browser works internally. If you want to learn this concept in more depth, check out this video: 🎥 https://lnkd.in/g8Jh6QtC #hiteshchoudhary #WebDevelopment #FrontendDevelopment #BrowserEngineering #JavaScript #SoftwareEngineering #FullStackDeveloper #WebPerformance #Coding #Programming #TechEducation

Performance isn’t only about JavaScript. Sometimes it’s about CSS. When teams talk about performance, they usually focus on bundle size and frameworks. But recently I found an issue caused by something much simpler. A navigation dropdown was hidden using: visibility: hidden; opacity: 0; It looked fine — but the browser still evaluated it in the layout. Images inside (even with loading="lazy") were fetched immediately. Visually hidden ≠ removed from rendering. Switching to display: none; until user interaction reduced 20+ unnecessary image requests, cut ~800KB from initial load, and improved Total Blocking Time by ~200ms. No JavaScript changes. Performance gaps often live in small details: - Mega menus - Hidden tabs - Off-screen components - Above-the-fold DOM weight Good performance engineering isn’t only about rewriting code. It’s about understanding how the browser prioritizes layout, rendering, and resources. Small CSS decisions can quietly cost hundreds of milliseconds. And small fixes can win them back. #WebPerformance #CoreWebVitals #FrontendArchitecture #Ecommerce #PerformanceOptimization

Level 1 – Task 3: Temperature Converter at Oasis Infobyte 🌡 Developed a Temperature Converter Website. Features: ✔ Celsius ↔ Fahrenheit conversion ✔ Input validation ✔ Interactive UI Implemented using HTML, CSS & JavaScript. #JavaScript #WebProjects #FrontendDevelopment #CodingPractice #OasisInfobyte GitHub Repository: https://lnkd.in/gY66mA9d

Day 3 #100DaysOfCode 💻 Today I practiced frontend styling, conditional rendering, API basics, and async/await. 1️⃣ Styled a Post Card using CSS .card { border: 1px solid #ddd; padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } 2️⃣ Displayed Todo List with a simple condition const todos = [ { title: "Learn JS", completed: true }, { title: "Build Project", completed: false } ]; todos.forEach(todo => { if (todo.completed) console.log("✅", todo.title); }); 3️⃣ API Basics: GET, POST, PUT, PATCH, DELETE Fetch data, create, update, or delete using REST API methods 4️⃣ Network Debugging Used browser Network tab to inspect API requests and responses 5️⃣ Async / Await async function loadTodos() { const res = await fetch('https://lnkd.in/gWSPGT_q'); const data = await res.json(); data.slice(0, 5).forEach(todo => { if (todo.completed) console.log("✅", todo.title); }); } loadTodos(); Reflection: Learning async operations and API handling makes websites interactive and real-world ready. Combining CSS, JS, and API integration is key for professional frontend development. #100DaysOfCode #JavaScript #WebDevelopment #Frontend #Akbiplob

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day30 🚀 Project: Advanced HSL Color Generator 📌 What I built Today I upgraded my previous HSL Color Generator project and added several new features to make it more professional and interactive. Users can dynamically adjust Hue, Saturation, and Lightness and instantly see the color update. The tool also converts the color into HSL, RGB, and HEX formats, making it useful for developers and designers. 🛠 Technologies Used HTML5 CSS3 JavaScript ✨ New Features Added • Real-time HSL → RGB conversion • HEX color generation • Random color generator button • Copy HEX color to clipboard • Responsive UI design • Dynamic background color change ⚠ Challenge I faced Converting HSL color values to RGB and HEX formats using JavaScript. ✅ How I solved it I created custom JavaScript functions to convert HSL → RGB → HEX and update the UI in real time. 💬 Open to feedback and suggestions 🚀 🔗 Project link in comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #HTML #CSS #JavaScript #WebDevelopment #UIDesign #100DaysOfCode #DeveloperIndia

Built a simple Counter Application using HTML, CSS, and JavaScript 🚀 This small project helped me understand DOM manipulation, event handling, and basic UI design.👩🏻💻 Features include increment, decrement, and reset functionality with a clean interface. The application increases the value when the increment button is clicked, decreases the value when the decrement button is clicked, and resets the value back to 0 when the reset button is pressed.💻 To make the interface more intuitive, the counter displays 0 in black, positive values in green, and negative values in red. #WebDevelopment #JavaScript #HTML #CSS #LearningByDoing #StudentDeveloper

🚀 Project Showcase: Base Converter Web Application 🔗 Live Demo: https://lnkd.in/d5_9z3Ck I’m excited to share my Base Converter, a web-based tool developed using HTML, CSS, and JavaScript. This application allows users to convert numbers between different number systems easily and instantly. ✨ Key Features: 🔹 Convert between Binary, Octal, Decimal, and Hexadecimal 🔹 Real-time and accurate conversion 🔹 Clean and modern glassmorphism user interface 🔹 Simple and user-friendly design This project helped me strengthen my understanding of number systems, JavaScript logic, DOM manipulation, and front-end development. I’m continuously building projects to improve my development skills. Feedback and suggestions are always welcome! hashtag #WebDevelopment hashtag #JavaScript hashtag #FrontendDevelopment hashtag #HTML hashtag #CSS hashtag #LearningInPublic hashtag #BTechCSE hashtag #StudentDeveloper

Here is a frontend calculator project that I made from the The Odin Project! This calculator allows the user to click numbers and make simple calculations. Features: -Buttons the user can click that will implement numbers and operators onto a screen. -A screen that will show the current calculation. -An system that will automatically make a calculation after an operator is used. -An A/C button that will clear the screen and any numbers/operators entered. Tech Stack: HTML, CSS, & Javascript Here's what I learned: -How to use javascript arrays, variables, and functions -How to implement the Document Object Model into javas What I can improve on in the future: -I can make the calculator more advanced by adding a more advanced UI with animations. -I can add more operators and functions to the calculator (ex. squared and square root) #TheOdinProject #CalculatorProject #HTML #CSS #Javascript #Frontend #Developer

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day13 🚀 Project: CSS Image Style Controller 📌 What I built Today, I built an interactive CSS Image Style Controller using HTML, CSS, and JavaScript. It allows real-time customization of an image’s appearance such as background color, scale, border-radius, padding, and blur—demonstrating the power of CSS variables with live updates. 🛠 Technologies Used HTML5 CSS3 (CSS Variables, Grid, Transitions, Glassmorphism UI) JavaScript (DOM Manipulation, Event Listeners) ⚠ Challenge I faced Synchronizing multiple input controls with CSS variables while also displaying live values without breaking responsiveness. ✅ How I solved it I used CSS custom properties (:root variables) combined with JavaScript event listeners to dynamically update styles in real time, ensuring smooth transitions and a clean UI. 💬 I’m open to feedback and suggestions 🚀 🔗 Project link in the comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #HTML #CSS #JavaScript #WebDesign #UIDesign #CSSVariables #UIUXDesign #100DaysOfCode #CodingLife #DeveloperIndia #PortfolioProject

🔴 Connect Four: From Logic to Layout🟡 I just finished building a fully functional Connect Four game using HTML, CSS, and JavaScript. 🕹️ The most exciting part of this project wasn't just the UI—it was tackling the "Gravity Logic" and designing an efficient algorithm to check for wins across horizontal, vertical, and diagonal axes. 🧮 Key Features: ✅ Responsive Grid System ✅ Dynamic Turn Management ✅ 4-way Win Detection Algorithm #WebDevelopment #JavaScript #CodingProject #Frontend #ConnectFour #Systemstron #ProgrammingLife