Mastering the DOM for Web Development

Day-29 — News App using HTML, CSS, and JavaScript Hello Everyone: News App built with HTML, CSS, and JavaScript, which fetches and displays live news headlines from a real API. This project helped me take my JavaScript skills to the next level by learning how to integrate and handle real-time data from an external source. 🧩 Project Overview The main goal of this project was to create a simple and user-friendly interface where users can read the latest news from different categories like technology, sports, business, entertainment, and health — all dynamically fetched using JavaScript. It’s not just a static page; every headline, image, and description comes live from the News API, making it feel like a mini real-world product. ⚙️ Workflow and Logic Here’s how the app works step by step: API Connection: I used the free News API (https://newsapi.org/ ) to fetch real-time news data in JSON format. The fetch() function and async/await were used to make API calls clean and readable. Data Handling: After receiving the response, I parsed the JSON data and dynamically created HTML elements using JavaScript to show the image, title, and short description for each news item. Category Filtering: I added buttons for categories like “Sports,” “Technology,” and “Business.” When a user clicks a category, a new API call fetches the relevant news instantly. Responsive Design: Using CSS Flexbox and Grid, I made sure the layout adjusts perfectly across mobile, tablet, and desktop screens. Error Handling: I added simple error messages when the API fails to fetch data or when no news is found — ensuring a better user experience. 💡 What I Learned This project was a big step forward from simple DOM projects. I learned how to: Work with APIs and real-time JSON data Use async/await for asynchronous JavaScript Handle errors gracefully Dynamically generate content using template literals and DOM manipulation Create a responsive and professional layout using modern CSS techniques This project helped me understand how frontend and backend connect in real applications. It felt like building a real product for users rather than just a static webpage. 🚀 Technologies Used HTML5 – for structure CSS3 (Flexbox, Grid) – for layout and styling JavaScript (ES6) – for logic, API handling, and interactivity News API – for real-time content git- https://lnkd.in/gg8pTMVS I’m excited to move ahead with more real-world applications and strengthen my full-stack foundation! #JavaScript #WebDevelopment #API #Frontend #CodingJourney #29day #NewsApp #LearningByBuilding #HTML #CSS #AsyncAwait #TechLearner #100DaysOfCode Saurabh Shukla

🚀 JavaScript Basics — The Foundation of Modern Web Development If you’ve ever interacted with a dynamic website — from filling out a form to seeing instant search suggestions — chances are, JavaScript (JS) is behind it. 💡 What is JavaScript? JavaScript is a scripting language that adds interactivity, logic, and dynamic behavior to web pages. It works alongside HTML (structure) and CSS (styling) to bring websites to life. ⚙ How Do We Add JavaScript to a Web Page? We use the <script> tag to write or link JavaScript code in HTML. 🔹 Inline JavaScript — written directly inside an HTML element. 🔹 Internal JavaScript — written inside <script> tags within the HTML file. <script>  console.log("Hello from internal JS"); </script> 🔹 External JavaScript — written in a separate .js file and linked to HTML. <script src="script.js"></script> ✅ Best Practice: Always use external JS for cleaner, maintainable code. 🧮 Variables in JavaScript Variables are containers for storing data values. ✅ Rules for Creating a Variable: Must start with a letter, underscore (_), or $ Cannot start with a number Are case-sensitive Should not use reserved keywords 🔑 Keywords to Declare Variables var let const 🧱 Understanding Each: 🔸 var Function-scoped or globally scoped Can be re-declared and updated Hoisted (accessible before declaration)  ⚠ Drawback: Leads to unexpected behavior due to hoisting and re-declaration. 🔸 let Block-scoped Can be updated, but not re-declared in the same scope  ⚠ Drawback: Cannot be accessed before initialization (temporal dead zone). 🔸 const Block-scoped Cannot be updated or re-declared ⚠ Drawback: The value assigned must be initialized immediately, and mutable objects can still be changed internally. 👉 Best Practice: Use const by default let when you know the value will change Avoid var in modern JS ⚙ JavaScript Operators Operators are symbols or keywords used to perform operations on values and variables. 🔹Arithmetic🔹Assignment 🔹Comparison🔹Logical 🔹TypeOf 🔹Ternary 🔹Comparison 💬 Comments in JavaScript Used to make your code readable and maintainable. Single-line comment: // This is a comment Multi-line comment: /* multi-line comment */ 🎯 String Literals (Backticks ``) Template literals allow: Multi-line strings String interpolation (embedding variables easily) Example: const name = "JavaScript"; console.log(Hello, ${name}!); 🧠 In Summary: JavaScript is the core language of the web, and understanding its basics — variables, scoping, and structure — sets the foundation for mastering advanced frameworks and tools. Thank You Ravi Siva Ram Teja Nagulavancha Sir Saketh Kallepu Sir Uppugundla Sairam Sir #JavaScript #WebDevelopment #Coding #Frontend #ProgrammingBasics #LearnToCode #TechCommunity

#10: DOM – Where JavaScript Meets the Browser 🚀 Today, I stepped into the world where JavaScript starts interacting with real web pages – the DOM (Document Object Model). This is where your code can read, update, create & delete anything on the page. 💡 📘 What is the DOM? The DOM is a tree-like representation of an HTML document, allowing JavaScript to access and manipulate elements, styles, and content. 🧠 Think of it like a family tree of your webpage → everything becomes a “node” or “element” that JS can control. 🎯 DOM Selectors (How to grab elements) 📍 getElementById() → returns a single element (not live/static applicable) 📍 getElementsByClassName() → returns an HTMLCollection ✅ Live 📍 getElementsByTagName() → returns an HTMLCollection ✅ Live 📍 querySelector() → returns the first matching element (Static) 📍 querySelectorAll() → returns a NodeList ⚠️ Static ✅ Example: const nodeList = document.querySelectorAll('p'); const htmlCollection = document.getElementsByClassName('example'); 📦 NodeList vs HTMLCollection (Interview Favorite 🎤) 🔹 NodeList ✔ Contains: nodes (can include text, comments, etc.) ✔ Live or static: ❌ Static (✅ Live in rare cases like childNodes) ✔ Methods: forEach(), entries(), values(), keys() 🔹 HTMLCollection ✔ Contains: only HTML elements ✔ Live or static: ✅ Always live (auto-updates when DOM changes) ✔ Methods: item(), namedItem() ✅ Rule of thumb: 👉 querySelectorAll() → NodeList (mostly static) 👉 getElementsByClassName() / getElementsByTagName() → Live HTMLCollection 🆚 innerHTML vs innerText vs textContent 🔹 innerHTML ✅ Reads HTML tags ✅ Parses HTML when setting ⚠ Triggers layout reflow (affects performance) 🔹 innerText ❌ Doesn't read HTML (returns only visible text) ❌ Does not parse HTML when setting (renders as plain text) ✅ Triggers layout reflow (slower) 🔹 textContent ❌ Doesn't read HTML (returns all raw text, including hidden text) ❌ Does not parse HTML tags 🚀 No layout reflow → Fastest option ✅ When to use what: ✔ Want to add/remove HTML? → innerHTML ✔ Need visible text only? → innerText ✔ Need raw text & performance? → textContent ✅ Example: console.log(box.innerHTML); // "<b>Hello</b>" console.log(box.innerText); // "Hello" console.log(box.textContent); // "Hello" ✅ Use innerHTML for tags, innerText for visible content, textContent for raw performance. 🔥 Up Next (Part #11): ✅ Create ✅ Edit ✅ Remove DOM elements ✅ Event Listeners + Bubbling vs Capturing ✅ Real-world examples & mini project 👉 Stay tuned! Would you like me to turn it into a mini DOM challenge too? 😄 #JavaScript #DOM #WebDevelopment #FrontendJourney #DOMManipulation #BrowserAPIs #HTML #WebAPIs

JavaScript — The Language That Brings Websites to Life ⚡ Every great website is built on three core layers: 🧱 HTML defines the structure, 🎨 CSS defines the style, ⚡ JavaScript brings it to life. JavaScript isn’t just a programming language — it’s the backbone of modern web interactivity. It powers everything from simple animations to full-scale applications like Google Docs, YouTube, and modern dashboards. Let’s break it down 👇 🟨 1️⃣ What JavaScript Does JavaScript turns static web pages into dynamic experiences. It handles user actions, validates forms, loads data without reloading the page, and controls animations & UI behavior. 💡 Example: Clicking “Add to Cart” on an eCommerce site — JavaScript does that instantly without refreshing the page. 🟩 2️⃣ Why JavaScript Is So Important ✅ It runs natively in every browser — no setup needed. ✅ It’s flexible: works on both front-end (React, Vue, Next.js) and back-end (Node.js). ✅ It’s fast, event-driven, and integrates easily with APIs. ✅ It’s the base for advanced frameworks that power modern web apps. JavaScript isn’t just for developers — it’s how brands deliver better UX, speed, and functionality. 🟦 3️⃣ Frameworks & Ecosystem JavaScript’s ecosystem is massive. Here are the most popular tools shaping the modern web: ⚛️ React.js → Fast, component-based UIs 🔺 Next.js → SEO-friendly, server-rendered apps 🌐 Node.js → Server-side JS for APIs & scalable systems 🎨 GSAP & Three.js → For smooth animations and 3D web effects Together, these tools make web experiences richer, faster, and smarter. 🧠 4️⃣ Why Every Developer Should Learn It If you know JavaScript, you can: ✅ Build interactive websites ✅ Create web apps ✅ Work with APIs & databases ✅ Build mobile apps (React Native) ✅ Even automate tasks using JS-based tools It’s the one skill that connects frontend, backend, and automation. 💬 In Short: HTML gives a website a body. CSS gives it style. But JavaScript gives it a soul. ⚡ Whether you’re a freelancer, designer, or startup — mastering JavaScript means mastering the web. 🌍 👉 I help businesses and startups build fast, modern, and interactive websites using JavaScript, WordPress, and Webflow — designed to perform and scale. Let’s connect if you’re ready to bring your ideas to life 🚀 #JavaScript #WebDevelopment #Frontend #Coding #WebDesign #React #NodeJS #Freelancing #TechInsights #Learning #Programming

80% of developers appearing for front-end roles get tripped up & can't answer these 43 simple questions based on JavaScript Fundamentals, CSS, HTML, and React.... Maybe you will fail to answer them, too. Study them to become better. [1] What is CSS selector specificity and how does it work? [2] Explain the concept of "hoisting" in JavaScript [3] What is the event loop in JavaScript runtimes? [4] Explain how `this` works in JavaScript [5] Describe Block Formatting Context (BFC) and how it works. [6] Describe `z-index` and how stacking context is formed. [7] What kind of things must you be wary of when designing or developing for multilingual sites? [8] Explain CSS sprites, and how you would implement them on a page or site. [9] Explain how a browser determines what elements match a CSS selector. [10] Have you ever worked with retina graphics? [11] How do you serve a page with content in multiple languages? [12] How do you serve your pages for feature-constrained browsers? [13] How is responsive design different from adaptive design? [14] How would you approach fixing browser-specific styling issues? [15] Is there any reason you’d want to use `translate()` instead of `absolute` positioning, or vice-versa? And why? [16] What does a `DOCTYPE` do? [17] What's the difference between "resetting" and "normalizing" CSS? [18] Why would you use something like the `load` event? [19] What does re-rendering mean in React? [20] What are the differences between JavaScript ES2015 classes and ES5 function constructors? [21] Why does React recommend against mutating state? [22] What is `'use strict';` in JavaScript for? [23] Explain what React hydration is [24] Explain AJAX in as much detail as possible [25] What are React Portals used for? [26] What are the advantages and disadvantages of using AJAX? [27] How do you debug React applications? [28] What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers? [29] How do you abort a web request using `AbortController` in JavaScript? [30] Explain the differences between CommonJS modules and ES modules in JavaScript [31] What are iterators and generators in JavaScript and what are they used for? [32] What are server-sent events? [33] What is virtual DOM in React? [34] How does virtual DOM in React work? What are its benefits and downsides? [35] What is React Fiber and how is it an improvement over the previous approach? [36] What tools and techniques do you use for debugging JavaScript code? [37] What is reconciliation in React? [38] How does JavaScript garbage collection work? [39] Explain how JSONP works (and how it's not really Ajax) [40] Explain the same-origin policy with regards to JavaScript [41] Explain what a single page app is and how to make one SEO-friendly [42] Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE? [43] When would you use `document.write()`?

🚀 Revising My JavaScript & React Concepts Consistency is the key to growth — and today, I revised some core concepts that build the foundation of web development 🌐✨ 💡 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐂𝐨𝐧𝐜𝐞𝐩𝐭𝐬 🔹this keyword → Refers to the object it belongs to. In the global scope, this points to the window object. var x = 10; console.log(this.x); // 10 console.log(window.x); // 10 🔹 Undefined vs Not Defined Undefined → Variable is declared but no value assigned. Not Defined → Variable doesn’t exist in memory. 👉 undefined still takes memory as a placeholder until assigned a value inside a variable environment in execution context. 🔹 Control Structures → Used to manage the flow of the program, e.g., if...else, for, while, and switch. --- ⚛ 𝐑𝐞𝐚𝐜𝐭 𝐂𝐨𝐧𝐜𝐞𝐩𝐭𝐬 🔹 Hooks → Hooks are special functions in React that let you use state and other React features inside functional components — without needing class components. They help you inherit & utilize React’s core capabilities easily. 🪝 useState Hook Adds state to functional components. Returns a state variable and a function to update it. 𝐜𝐨𝐧𝐬𝐭 [𝐜𝐨𝐮𝐧𝐭, 𝐬𝐞𝐭𝐂𝐨𝐮𝐧𝐭] = 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞(0); 👉 Keeps UI reactive — whenever state updates, component re-renders automatically. --- ⚙ useEffect Hook Helps implement side effects like fetching data, setting timers, or updating the DOM. 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭(() => { 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐄𝐟𝐟𝐞𝐜𝐭 𝐫𝐮𝐧𝐬!"); 𝐫𝐞𝐭𝐮𝐫𝐧 () => 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐂𝐥𝐞𝐚𝐧𝐮𝐩!"); }, [𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲]); //Important// Variations:  1️⃣ Runs after every render 2️⃣ Runs only once on mount 3️⃣ Runs when a specific dependency changes 4️⃣ Multiple dependencies 5️⃣ Includes cleanup (like removing event listeners) --- 🧩 Controlled & Uncontrolled Components 🔹 Controlled Component → Form input is controlled by React’s state. Data flows from state → UI. <𝐢𝐧𝐩𝐮𝐭 𝐯𝐚𝐥𝐮𝐞={𝐢𝐧𝐩𝐮𝐭𝐕𝐚𝐥𝐮𝐞} 𝐨𝐧𝐂𝐡𝐚𝐧𝐠𝐞={𝐡𝐚𝐧𝐝𝐥𝐞𝐂𝐡𝐚𝐧𝐠𝐞} /> 🔹 Uncontrolled Component → Managed by the DOM itself. Access values using ref or using DOM Event Listener --- 💻 Client-Side Rendering (CSR) The browser loads a single HTML file. React dynamically renders components using JavaScript. ✅ Faster page transitions ✅ Smooth user experience ⚡ Perfect for SPAs (Single Page Applications) --- 📖 Every small concept builds up your foundation — and revisiting basics helps strengthen your grip on modern frameworks like React. ✨ Keep learning. Keep coding. Keep growing! 💪 #JavaScript #React #WebDevelopment #LearningJourney #Consistency #Frontend

Consuming GraphQL APIs from plain JavaScript Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network).[1] Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development. Among Web professionals, "Web development" usually refers to the main non-design aspects of building Web sites: writing markup and coding.[2] Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills. For larger organizations and businesses, Web development teams can consist of hundreds of people (Web developers) and follow standard methods like Agile methodologies while developing Web sites.[1] Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a graphic designer or information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of Web developer specialization: front-end developer, back-end developer, and full-stack developer.[3] Front-end developers are responsible for behavior and visuals that run in the user browser, while back-end developers deal with the servers.[4] Since the commercialization of the Web, the industry has boomed and has become one of the most used technologies ever. Evolution of the World Wide Web and web developmentOrigin/ Web 1.0 Tim Berners-Lee created the World Wide Web in 1989 at CERN.[5] The primary goal in the development of the Web was to fulfill the automated information-sharing needs of academics affiliated with institutions and various global organizations. Consequently, HTML was developed in 1993.[6] Web 1.0 is described as the first paradigm wherein users could only view material and provide a small amount of information.[7] Core protocols of web 1.0 were HTTP, HTML and URI.[8] Web 2.0 Web 2.0, a term popularised by Dale Dougherty, then vice president of O'Reilly, during a 2004 conference with Media Live, marks a shift in internet usage, emphasizing interactivity.[9][10] Web 2.0 introduced increased user engagement and communication. It evolved from the static, read-only nature of Web 1.0 and became an integrated network for engagement and communication. It is often referred to as a user-focused, read-write online network. #snsinstitutions #snsdesignthinkers #designthinking

✨ Elevate Your React/Tailwind Workflow: Why the cn Utility is a Game-Changer In modern React and Tailwind CSS, managing conditional, conflict-free class names is often a headache. Enter the cn utility function, popularized by shadcn/ui, which offers a powerful, elegant solution. What is the cn Utility? 🛠️ cn is a simple wrapper function that combines two key libraries for intelligent class management: clsx: Handles conditional logic. It allows you to pass in strings, arrays, and objects (for true/false conditions) to generate a class string. tailwind-merge: Handles conflict resolution. It intelligently merges Tailwind classes, ensuring the most specific utility (e.g., 'p-8' wins over 'p-4') is preserved, eliminating common styling bugs. The cn function handles both conditional logic and conflict resolution simultaneously! 👎 The Problem: Standard String Concatenation When assigning classes dynamically, developers often use template literals. This quickly becomes messy in complex cases, especially for components like the React Router DOM NavLink: JavaScript // Messy & Prone to Conflicts! <NavLink className={({ isActive }) => `base-classes ${isActive ? 'active-classes' : 'inactive-classes'} ${props.className}` } > ... </NavLink> 👍 The Solution: Using cn for Clean Code With cn, your component logic becomes vastly cleaner, safer, and more readable: JavaScript import { cn } from '@/lib/utils'; <NavLink className={({ isActive }) => cn( 'base-classes transition-colors', // 1. Base styles isActive ? 'bg-primary' : 'text-gray', // 2. Conditional state props.className // 3. External customizations (safely merged!) ) } > ... </NavLink> Key Benefits of Adopting cn 💪 Zero Tailwind Class Conflicts: The most crucial benefit. cn automatically resolves conflicts (e.g., text-red-500 vs. text-blue-500), guaranteeing consistent styling. Superior Readability: Avoids complex, hard-to-read template literals and nested ternaries. Effortless Conditionality: Pass objects for simple true/false class application: cn('base', { 'hidden': !isVisible }). Robust Customization: Easily merge external className props with internal component styles without risking overrides. The cn utility is a modern best practice. It ensures your UI remains robust, consistent, and easy to extend, leading to a much more productive developer experience. If you use React and Tailwind, this pattern is a must-have for a professional codebase. #React #TailwindCSS #FrontendDevelopment #WebDev #ShadcnUI

Fundamentals of Front-end Development Front-End Development, the most essential skills you should have are #HTML, #CSS, and #JavaScript. These skills are the bare minimum to start with #Front-End #Development. Note that front-end web development is not just limited to these three skills, there are many more technologies that you will need to learn to excel as a Front-End #Developer in 2025. 1. HTML - HyperText Markup Language    #HTML stands for HyperText Markup Language. It is used to form the “skeleton”, or the base, of any website. It lays out a website’s general structure and content. The elements that you see on the screen - buttons, images, sliders, date pickers, texts, lists, etc. are all added using HTML.   2. CSS - Cascading Style Sheets  #CSS stands for Cascading Style Sheets using which you can add styles to your web pages like colors, fonts, layouts, and animations. With CSS, you can also make responsive websites that can change layout and styles according to the device resolution and orientation so that users have a seamless experience while using your website on devices of any size. CSS allows you to style multiple elements at once. 3. JavaScript Now that we have built the layout of our website using #HTML and styled it using #CSS, the next step is to add “actions” to our websites. This is done using the #JavaScript #programming language. It improves the interactivity of your website. You can also create #dynamic UI elements using JavaScript. JavaScript adds functionality to your website. 4. DOM Manipulation With HTML, you can create web pages with static layouts easily. However, you might need to build dynamic web pages that can change the layout on the fly. For example, you might want to add, remove, or edit HTML elements after the web page has been loaded or you might want to modify the CSS styles of an element only when an event occurs. Such dynamic manipulation of your web page can be done using the #Document #Object #Model (#DOM) #API, which is a set of APIs to control HTML and styling information. 5. Learn any JavaScript Framework JavaScript framework is pre-written code to support features and benefits beyond plain or vanilla JavaScript. As these frameworks are built on top of JavaScript, it is possible to achieve all the features of a framework with normal JavaScript as well. This is the reason why Front End Developers usually prefer using a framework over plain #JavaScript. #Angular, #React, #Vue.js, Meteor are some of the popular JavaScript frameworks for frontend development.  ************************************** Join our Whatsapp Group: https://lnkd.in/dd8jX6YW ************************************** #frontend #backend #coding #developer #programming #webdeveloper #webdevelopment #frontenddeveloper #webdesign #programmer #code #web #webdev #reactjs #coder #python #codinglife #php #softwaredeveloper #java #fullstack #js #backenddeveloper #dev #fullstackdeveloper #developers

Understanding event.target in JavaScript: A Complete Guide Introduction When building interactive web pages, events play a crucial role — they allow JavaScript to respond to user actions like clicks, typing, hovering, or submitting forms. One of the most useful properties in event handling is event.target, which helps you identify exactly which element triggered an event. What Is event.target? The event.target property refers to the DOM element that initiated the event. In simpler terms: event.target is the element that the user interacted with — such as the button they clicked, the input they typed into, or the image they hovered over. It’s a property of the Event object, which the browser automatically passes into event handler functions. Syntax element.addEventListener("click", function(event) {     console.log(event.target); }); event → the event object automatically created by the browser. event.target → the element that triggered the event. Example 1: Basic Usage <button>Click Me</button> <script> document.querySelector("button").addEventListener("click", function(event) {     console.log("The clicked element is:", event.target); }); </script> Output (in console): <button>Click Me</button> In this example, clicking the button logs the button element because it’s the target of the click event. Example 2: Multiple Elements and Event Delegation Let’s say you have multiple buttons inside a container: <div id="container">   <button>Save</button>   <button>Cancel</button>   <button>Delete</button> </div> <script> document.getElementById("container").addEventListener("click", function(event) {     console.log("You clicked:", event.target.textContent); }); </script> Button Clicked Console Output : Save You clicked: Save Cancel You clicked: Cancel Delete You clicked:Delete If you click on any button, the event handler logs that button’s text. Here’s what happens: The event listener is attached to the container (div), not to each button individually. When you click a button, the event bubbles up to the container. event.target identifies which specific button was clicked. This technique is called event delegation — it improves performance and code simplicity.