Day 27 of my JavaScript journey 🚀 Built a GitHub User Finder using HTML, CSS, and JavaScript, powered by the GitHub API. This application allows users to search for any GitHub profile and view detailed information in real-time. Features: 🔍 Search GitHub users dynamically 👤 Display profile details (avatar, bio, followers, following) 📦 View latest repositories with descriptions 🌙 Responsive UI with dark theme ⚠️ Error handling for invalid users This project helped me strengthen my understanding of API integration, asynchronous JavaScript, and building real-world applications with dynamic data. 🔗 Live Demo: https://lnkd.in/gps5WPFQ 💻 GitHub Repo: https://lnkd.in/gN9jiFtX Focused on building projects that are practical, interactive, and closer to real-world applications. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #API #GitHub

Built a simple Meme Generator using HTML,CSS,JS 🎭 Features: ->Upload your own image ->Add custom text ->Instant meme preview ->Pre-made meme templates available ->Clean and simple UI This mini project helped me practice HTML structure and basic project building. Trying to stay consistent by building small projects day by day 🚀 #HTML #WebDevelopment #FrontendDevelopment #GitHub #Projects #LearningInPublic Github repo :- https://lnkd.in/gvpRuetV

🚀 Introducing GitFinder – A Modern GitHub Profile Explorer I’m excited to share my latest project, GitFinder, a sleek and responsive web application designed to make exploring GitHub profiles faster, cleaner, and more intuitive. 🔍 What it does: GitFinder allows you to instantly search for any GitHub user and explore their most recently updated repositories — all wrapped in a modern, premium UI experience. ✨ Key Highlights: • 👤 Instant GitHub profile search • 📂 View top 10 recently updated repositories • ⚡ Real-time, debounced search experience • 🌓 Dark/Light mode with persistent preferences • 🎨 Glassmorphism UI with smooth animations • 📱 Fully responsive across all devices 🛠️ Built With: •React 19 •Tailwind CSS 4 •Framer Motion •React Router 7 •Vite 8 •GitHub REST API 🌐 Live Demo: https://lnkd.in/g_Rc9CGr 💻 Source Code: https://lnkd.in/g7WZfXsG This project was a great opportunity to dive deeper into modern frontend tooling, performance optimization, and user-centric design. I’d love to hear your feedback and suggestions! 🙌 #ReactJS #WebDevelopment #Frontend #GitHub #OpenSource #JavaScript #TailwindCSS #Projects #Developer

🚀 Day 12 — Mastering Browser Fundamentals (DOM & Events) Continuing my journey of strengthening core JavaScript fundamentals, today I focused on how browsers actually work behind the scenes 🌐👇 Understanding these concepts is crucial for building interactive and efficient web applications. 🔹 Covered topics: - DOM (Document Object Model) structure & hierarchy - DOM Manipulation (content, styles, elements, attributes) - Event Handling with addEventListener - Event Bubbling & Capturing (event flow in browser) - Event Delegation (efficient event handling 🔥) 💡 Key Learning: JavaScript is powerful because it can control the browser — mastering DOM & events means mastering real frontend development. 👉 Always remember: - DOM → Browser’s representation of HTML - Bubbling → child → parent - Capturing → parent → child - Delegation → handle multiple elements with one listener 📌 Day 12 of consistent preparation — now understanding how user interactions actually work in web applications ⚡ #JavaScript #DOM #WebDevelopment #FrontendDevelopment #FullStackDeveloper #CodingJourney #MERNStack #InterviewPreparation #LearnInPublic #Developers #Consistency #100DaysOfCode #LinkedIn #Connections

🚀 Day 40 of My Full Stack Development Journey Today I stepped into one of the most exciting parts of JavaScript — the DOM (Document Object Model) 🌐⚡ Here’s what I explored today: 🔹 What is DOM? – Understanding how JavaScript interacts with HTML 🔹 DOM Manipulation – Dynamically changing web pages 🔹 Selecting Elements – By ID, Class, Tag Name & Query Selectors 🔹 Setting Content – Updating text and HTML dynamically 🔹 Manipulating Attributes & Styles – Changing appearance using JS 🔹 classList Property – Adding/removing classes easily 🔹 DOM Navigation – Traversing elements on a page 🔹 Adding & Removing Elements – Creating dynamic UI Also solved practice questions and 5 assignment problems 💻 This feels like a huge step — now I can actually make web pages interactive and dynamic! Excited to build real projects using DOM 🚀 #FullStackJourney #WebDevelopment #JavaScript #DOM #LearningInPublic #100DaysOfCode #CodingJourney

🚀 Day Progress Update: Building My Own Design System with Vanilla JavaScript Today was a solid step forward in my journey of creating a Design System from scratch (without frameworks). Instead of jumping directly into React libraries, I focused on understanding how systems like Bootstrap actually work under the hood. 🔹 What I implemented today: ✅ Advanced Button Component Solid variants → Primary, Secondary, Success, Danger, Warning, Info, Light, Dark Outline variants → .btn-outline-* (fully token-driven) Sizes → Small, Medium, Large States → Hover, Active, Focus, Disabled ✅ Design Tokens Upgrade Added active state tokens for all variants Introduced focus ring tokens (for accessibility) Improved consistency across components ✅ Better Component Architecture Tokens → Base → Utilities → Components separation Scalable and reusable CSS structure ✅ Interactive Behavior Added onClick support for buttons Proper disabled handling (pointer-events: none) Clean API-like function: createButton({ variant, size, disabled, onClick }) ✅ Component Documentation Page Sidebar navigation (with active state) Dynamic rendering of components Sections for: Solid Buttons Outline Buttons Sizes 💡 Key Learnings: Design systems are driven by tokens + states, not just styles Proper handling of hover, active, focus, disabled is critical Even with Vanilla JS, you can build a scalable component system Thinking in terms of APIs (like createButton) changes everything 🎯 What’s next: Loading buttons (spinner + async state) Input component (validation + error states) Dropdown, Modal components Eventually wrapping everything in React + TypeScript + Storybook 🔗 GitHub: https://lnkd.in/gUcdf7QW This process is helping me move from just building UI → to engineering reusable design systems. #JavaScript #FrontendDevelopment #DesignSystem #UIUX #WebDevelopment #VanillaJS #LearningInPublic #ReactJS

Day 15 of My Web Development Journey (Skill Shikshya) Today was all about mastering the DOM (Document Object Model) — the bridge between JavaScript and the web page. Here’s what I learned: ✓ Understanding the DOM as a tree structure that JavaScript can read and manipulate ✓ Using modern selectors like querySelector & querySelectorAll ✓ Working with content and attributes: textContent, innerHTML, getAttribute, dataset ✓ Dynamically styling elements using style and classList ✓ Creating and modifying elements with createElement, appendChild, insertAdjacentHTML, remove ✓ Navigating the DOM with parentElement, children, nextElementSibling, closest() ✓ Handling user interactions with addEventListener and the event object (e.target, e.preventDefault) Every day, the pieces are starting to connect more clearly. Building, breaking, and learning — that’s the process. 💻 #WebDevelopment #JavaScript #LearningJourney #100DaysOfCode #FrontendDevelopment

Class-05 'Hooks' from the Namaste React course by Akshay Saini 🚀 01. What is the diff bw Named Export, Default export and * as export? In a single file contains multiple functions and variables that wants to export, we will use 'Named' export. syntax: export const FunctionName() {}; export const VariableName; export { FunctionName/Variable }; import { FunctionName } from 'path'; Default export/import: In a file, that wants to export one main function or Variable(thing), we can use Default export keyword. export * as: It is used when we want to re-export everything from another file under one name. utils.js: export const add = (a, b) => a + b; export const sub = (a, b) => a - b; index.js: export * as utils from "./utils"; Meaning: It is like take everything from utils.js. Put it inside an object called "utils", Export that object. Importing it in another file. import { utils } from "./index"; utils.add(2, 3); utils.sub(5, 1); Without export * as: import { add, sub } from "./utils"; 02. What is the importance of config.js file? It helps in keeping the URL/any hardcoded code used in the project in a seperate file. 03. What are React Hooks? It is a normal Js utility function, react given to us. (It is pre-built) installed via 'react' package. 04. Why do we need a useState Hook? It generates and maintains state of a variable. Whenever there is a change in the state (this change can be done by second variable function) it re-renders the component. Thanks Akshay Saini 🚀 for breaking down complex concepts into small chunks for better understanding! 🙏 Please have a look at my github repo at the 'branch 05' I've shared all my assignments. #reactjs #javascript #frontend #uiux #programming #coding #js https://lnkd.in/g6Dt-SuA

I’ve been focusing on strengthening my JavaScript fundamentals and modern workflow recently. I just finished a small project called "Age Ai" to practice hand-written DOM manipulation while integrating Bootstrap 5 for a clean, responsive UI. Key features of this build: Pure JS Logic: Hand-wrote the conditional logic to handle user inputs and validation. UI/UX: Utilized Bootstrap to build a mobile-friendly, card-based interface. Version Control: Managed the project via Git and pushed it to GitHub. Deployment: Live now on GitHub Pages. Check out the live site and code here: 🔗 Live Demo: https://lnkd.in/ebtsf7WH 🔗 GitHub Repo: https://lnkd.in/erSVz7yP On to the next challenge! #WebDevelopment #JavaScript #CodingJourney #GitHub #Bootstrap #ProofOfWork #BuildingInPublic

Day 15/100 of JavaScript 🚀 Today’s topic : DOM Structure The DOM represents a web page as a tree structure where each element is a node ❕Types of nodes - Document → root of the page - Element → HTML tags ("div", "p", etc.) - Text → content inside elements - Attribute → properties like "id", "class" ❕Tree relationships - Parent → element containing another element - Child → element inside another - Siblings → elements at the same level ➡️ Example <body> <div id="parent"> <p>Child 1</p> <p>Child 2</p> </div> </body> const parent = document.getElementById("parent"); console.log(parent.children); -> HTMLCollection of children console.log(parent.firstElementChild); console.log(parent.lastElementChild); ❕Traversing DOM parent.parentElement; -> access parent parent.children; -> access children parent.nextElementSibling; ->next sibling Understanding DOM structure helps in navigating and manipulating elements efficiently #Day15 #JavaScript #100DaysOfCode