CSS background-image issues and learning frontend fundamentals

The biggest growth in my first months of coding didn’t come from learning more. It came from stopping certain habits. Here are a few things I stopped doing: • Stopped copying code without understanding it • Stopped adding libraries for small problems • Stopped avoiding complex bugs • Stopped comparing my day 1 to someone’s year 5 • Stopped chasing every new framework Once I removed the noise, progress became clear. Frontend started making more sense. Confidence became real — not fake. Sometimes growth isn’t about adding more. It’s about removing what slows you down. What’s one habit you had to drop to improve? #WebDevelopment #SoftwareEngineering #FrontendDevelopment #CareerGrowth

𝗗𝗮𝘆 𝟯/𝟮𝟭: 𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀 - 𝗟𝗼𝗴𝗶𝗰 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝘁𝗵𝗲 𝗕𝘂𝗹𝗸 ⚓ In the early days of React, managing "state" meant bulky Class components and confusing this keywords. Then came Hooks, and everything changed. Today, for #21DaysOfMERN, I’m breaking down the two hooks that do 90% of the heavy lifting. 🌟 𝗧𝗵𝗲 𝗜𝗻𝗱𝘂𝘀𝘁𝗿𝗶𝗮𝗹 𝗨𝘀𝗲: 𝗖𝗹𝗲𝗮𝗻 & 𝗥𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗟𝗼𝗴𝗶𝗰 In a professional codebase, readability is just as important as functionality. 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲: Allows us to track data that changes over time (like a user’s input or a loading spinner) within a simple function. 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁: The "Swiss Army Knife" for side effects. Whether it's fetching data from an API, setting up a subscription, or manually changing the DOM, useEffect handles it after the render. 🛠️ 𝗧𝗵𝗲 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 𝗟𝗼𝗴𝗶𝗰: 𝗧𝗵𝗲 𝗗𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗔𝗿𝗿𝗮𝘆 The most critical part of useEffect is the Dependency Array []. 𝗘𝗺𝗽𝘁𝘆 []: Runs once (like componentDidMount). 𝗪𝗶𝘁𝗵 𝘃𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 [𝗱𝗮𝘁𝗮]: Runs only when that specific data changes. 𝗡𝗼 𝗮𝗿𝗿𝗮𝘆: Runs on every single render (the fastest way to cause a performance bottleneck!). 💡𝗛𝗼𝘄 𝗬𝗼𝘂 𝗦𝗵𝗼𝘂𝗹𝗱 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁 𝗜𝘁 (𝗧𝗵𝗲 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵) When I build at Sheryians, I follow the Single Responsibility Principle: 𝟭. 𝗗𝗼𝗻'𝘁 𝗼𝘃𝗲𝗿𝘀𝘁𝘂𝗳𝗳 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁: It’s better to have three small hooks doing specific things than one massive hook trying to manage the entire app logic. 𝟮. 𝗖𝗹𝗲𝗮𝗻𝘂𝗽 𝗶𝘀 𝗸𝗲𝘆: Always return a cleanup function to prevent memory leaks (like clearing a setInterval or unsubscribing from a socket). Hooks aren't just a feature; they are a mindset shift toward functional programming. What was the most "mind-bending" hook for you to learn? For me, it was definitely useContext! Let's talk in the comments. 👇 Sheryians Coding School #MERNStack #21DaysOfMERN #ReactHooks #SheryiansCodingSchool #CleanCode #WebDevelopment #JavaScript #FrontendEngineer #ProgrammingTips #TechCommunity #FullStackDev #StateManagement

🚀 Shipping 0.3.0 of Vox taught me something important: building features is easy compared to designing what happens underneath. Going from 0.2.0 to 0.3.0 pushed me to think much deeper about: ⚡ batching updates efficiently 🧠 dependency tracking without unnecessary recomputations 🧩 keeping DOM updates predictable 📦 designing APIs that stay simple while the internals get smarter What I enjoy most about building projects like this is that every release becomes less about code written, and more about understanding how modern systems actually behave under pressure. Small projects can teach surprisingly big engineering lessons. GitHub: https://lnkd.in/dV4XsxiF #JavaScript #Frontend #SoftwareEngineering #WebDevelopment #OpenSource #Programming #React #TypeScript #Engineering #Tech

Day 14 of building in public. Starting my 21 Day Frontend Development Challenge 🚀 Today I learned about Lazy Loading images using the Intersection Observer API in JavaScript. Lazy loading is a powerful performance optimization technique where images are loaded only when they enter the user’s viewport instead of loading everything when the page first opens. This helps reduce the initial page load time and improves overall performance. The Intersection Observer API allows us to detect when an element becomes visible inside the browser viewport. When the image enters the visible area of the screen, JavaScript replaces the placeholder with the actual image source and loads it dynamically. This approach is commonly used in modern websites, blogs, and e commerce platforms to improve loading speed and user experience, especially on pages with many images. Learning how browsers handle visibility detection and resource loading helped me understand how developers build faster and more efficient web applications. Learning in public and building every day. Excited for Day 15. If you are also learning JavaScript or building projects feel free to connect. Day 14 complete 7 more days of learning and building ahead. If you are also learning JavaScript or building projects I would love to connect and learn together. #javascript #webdevelopment #frontenddevelopment #coding #programming #buildinpublic #learninpublic #devcommunity #softwaredevelopment #webdev #sheryains #sheryainscodingschool Harsh Vandana Sharma , Sheryians Coding School , Satwik Raj, Sheryians Coding School Community.

💻 Code. Chai. Consistency. Sometimes growth doesn’t happen in big conference rooms or fancy setups. It happens quietly — near a window, with a cup of chai ☕ and a laptop full of problems waiting to be solved. Every line of code is not just syntax — it’s: • Debugging your own patience • Improving logical thinking • Building something that didn’t exist before As a developer, I’ve learned that productivity isn’t about the perfect setup — it’s about focus, discipline, and showing up daily. Small daily improvements → Big long-term results. What’s your favorite coding environment? 🚀 #SoftwareDeveloper #ReactJS #WebDevelopment #Consistency #BuildInPublic #DeveloperLife #MERNStack

Is your code easy to read, or just easy to write? 🔍 I recently revisited some logic I wrote back in 2023. While it worked perfectly, But it definitely didn't pass the "eye test." I decided to refactor a standard if-else block into a ternary operator. When the logic is simple, this small shift can significantly reduce cognitive load and make your files much easier to scan. 💡Why I made the switch: - Cuts down on unnecessary lines without losing context. - It feels more natural in modern TypeScript/Angular templates. - Cleaner code is easier for the "future you" (and your team) to debug. ⚠️ Ternary operators are a tool, not a requirement. They are brilliant for simple assignments, but if you find yourself nesting them, stop! Clean code isn’t about the fewest lines; it’s about the most clarity. How do you handle simple logic? Are you Team Ternary ⚡ or Team If-Else 🛡️? Let’s discuss in the comments! 👇 #TypeScript #Angular #CleanCode #WebDevelopment #SoftwareEngineering #Frontend

🚀Day 103 of Cohort2.0 Today's class was about More on Instagram clone project with Ankur Prajapati at Sheryians Coding School In this session, I focused on integrating backend features into the frontend, ensuring a seamless connection between both layers of the application. I designed and implemented the UI for the feed, where posts from different users are displayed in a structured and user-friendly manner. Alongside this, I continued applying the four-layer architecture to maintain clean code practices to improve scalability. Additionally, I implemented the like and unlike functionality for posts, enabling users to interact with content in real time. Proper authentication checks were also incorporated, ensuring that only loggedin users can perform these actions, thereby enhancing both security and user experience, and maintain proper users data. This session further strengthened my understanding of full-stack development by bridging backend logic with frontend execution while maintaining a clean and scalable architecture. #responsiveness #responsivedesig #css #scss #html #Cohort2 #webdevelopment #Javascript #react #DOM #frontend

The Reality of Backend Dev: Focus, Frustration, and "The Fix" 💻 They say coding is 10% writing and 90% debugging. Today, I lived that 90%. We’ve all been there: Your code is structured, your logic feels solid, and then… MODULE_NOT_FOUND. Node.js crashes, and your terminal turns into a wall of red text. It’s easy to get frustrated, but these "red walls" are actually where the real learning happens. The Lesson: Focus on Architecture, Not Just Syntax As I move deeper into Express.js and MVC (Model-View-Controller), I’ve realized that most bugs don’t come from a missing semicolon. They come from a lack of focus on the Structure. By shifting my focus to professional architecture, I’m learning how to beat the "nitty-gritty" details that cause these crashes: MVC for Mental Clarity: Splitting my code into Models (Data), Views (UI), and Controllers (Logic) means when an error happens, I know exactly which "department" to check. The Power of Frameworks: I’m letting Express.js do the heavy lifting of routing and parsing, so I can focus my brainpower on the Business Logic. Organized Debugging: Instead of guessing, I’m learning to trace the Middleware Funnel. If a request doesn't reach the response, I check the next() calls in my middleware chain. My Debugging Workflow 🛠️ Breathe: A crashed server isn't a failure; it’s a hint. Trace the Path: Did the route trigger the controller? Did the controller call the model?. Verify the "Handshake": In MVC, if the Controller and Model aren't talking correctly, the View will never render. The bottom line: Professionalism in coding isn't about never having errors—it's about building an architecture so organized that debugging becomes a science, not a guessing game. #NodeJS #WebDevelopment #MVC #SoftwareEngineering #Debugging #BuildInPublic #CleanCode #ExpressJS #CodingLife

𝗜𝗳 𝘆𝗼𝘂’𝗿𝗲 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁, 𝗵𝗲𝗿𝗲’𝘀 𝘄𝗵𝗮𝘁 𝗜 𝗯𝗲𝗹𝗶𝗲𝘃𝗲 𝗶𝘀 𝘁𝗵𝗲 𝗯𝗲𝘀𝘁 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵 💡 From my experience, improvement does not come from watching more tutorials. It comes from practicing smarter. 𝗛𝗲𝗿𝗲’𝘀 𝘄𝗵𝗮𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝘀 👇 🚀 𝗕𝘂𝗶𝗹𝗱 𝘀𝗺𝗮𝗹𝗹 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀 𝗰𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝘁𝗹𝘆 Start with simple apps like a to do list, calculator, or weather app. Building forces you to think, solve problems, and truly understand the logic. 🧠 𝗠𝗮𝘀𝘁𝗲𝗿 𝘁𝗵𝗲 𝗳𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 Focus deeply on concepts like scope, closures, asynchronous behavior, promises, and DOM manipulation. Strong basics make advanced topics much easier. 📖 𝗥𝗲𝗮𝗱 𝗿𝗲𝗮𝗹 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀’ 𝗰𝗼𝗱𝗲 Explore GitHub projects. See how others structure their code, name variables, and solve real problems. This improves your thinking level. ⏳ 𝗦𝘁𝗮𝘆 𝗰𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝘁 Even one focused hour daily can completely transform your skills over a few months. Consistency beats intensity. JavaScript is not about memorizing syntax. It is about understanding how things work and applying them in real projects. If you’re on this journey, keep going. The results will come. 💪🔥 #JavaScript #WebDevelopment #Programming #SoftwareDevelopment #FrontendDevelopment #FullStackDevelopment #LearnToCode #DeveloperLife #ContinuousLearning

Did You Know? Every powerful website is built on two strong pillars — Frontend + Backend 💻⚙️ 🔹 Frontend is what users see and interact with. 🔹 Backend is what powers everything behind the scenes. Design + Logic = Complete Digital Experience. At Codeosity, we don’t just teach coding — we build real developers who understand both sides of development. If you want to master Full Stack Development, start with the fundamentals and build step by step. 🚀 #WebDevelopment #Frontend #Backend #FullStack #Java #JavaScript #Coding #Programming #Codeosity #SoftwareTraining