Day 13 of my JavaScript journey 🚀 Built a Sticky Navbar using HTML, CSS, and JavaScript. The navigation bar stays fixed at the top while scrolling, improving user experience and accessibility. This project helped me practice: • Scroll events • DOM manipulation • Dynamic class toggling • Enhancing UI/UX 🔗 Live Demo: https://lnkd.in/gU_UCJh2 💻 GitHub Repo: https://lnkd.in/gU_UCJh2 https://lnkd.in/gaZvF3Qb Learning how small UI improvements can make a big difference in real-world websites. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Turning logic into seamless user experience ⚡ Working on JavaScript enhancements to make the dashboard more dynamic, responsive, and interactive. ✔️ Real-time UI updates ✔️ Cleaner event handling ✔️ Optimized performance ✔️ Better user interactions Behind every smooth UI, there’s powerful JavaScript doing the magic 💻✨ #JavaScript #WebDevelopment #Frontend #Coding #DeveloperLife #Performance #UIUX

Day 16 of my JavaScript journey 🚀 Built a Drag and Drop Interface using HTML, CSS, and JavaScript. Users can drag items and drop them into different containers with smooth interaction. This project helped me practice: • Drag and Drop API • Event handling • DOM manipulation • Building interactive UI 🔗 Live Demo: https://lnkd.in/gvWBT7tJ 💻 GitHub Repo: https://lnkd.in/gJDK4_AP Learning how to create more interactive and user-friendly web experiences. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Just launched my new personal site (roshanj.online) and managed to hit a 4x 100 Lighthouse score. 💯 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 and 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 were my main focus areas for this redesign. Here's a quick look at the stack and the tech approaches I used to keep things fast and clean: • 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟱 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿: Heavily relied on React Server Components to statically pre-render the pages and MDX blog posts, keeping the client-side JavaScript minimal. • 𝗡𝗮𝘁𝗶𝘃𝗲 𝗔𝗣𝗜𝘀 𝗼𝘃𝗲𝗿 𝗛𝗲𝗮𝘃𝘆 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀: Skipped the bloated animation packages. Styled it natively with Tailwind CSS and used the browser's raw 𝗩𝗶𝗲𝘄 𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻𝘀 𝗔𝗣𝗜 for the light/dark mode switch. • 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 (𝗔𝟭𝟭𝘆): Kept it simple but strict, semantic HTML tags, exact ARIA labels for icon buttons, and proper keyboard focus rings. • 𝗦𝗘𝗢 & 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀: Added JSON-LD structured data in the root layout and optimized the hero assets using next/image (with eager loading above the fold) to prevent layout shifts. 🤖 𝗔𝗜-𝗔𝘀𝘀𝗶𝘀𝘁𝗲𝗱 𝗪𝗼𝗿𝗸𝗳𝗹𝗼𝘄: This build was also a great experiment in modern AI pair programming. I used Claude Code (with underlying models 𝗚𝗟𝗠 𝟰.𝟳 and 𝗚𝗟𝗠 𝟱.𝟭) to lay out the heavy foundations and initial architecture, and then switched to Antigravity (models used 𝗖𝗹𝗮𝘂𝗱𝗲 𝗦𝗼𝗻𝗻𝗲𝘁-𝟰.𝟲 and 𝗚𝗲𝗺𝗶𝗻𝗶 𝟯.𝟭 𝗣𝗿𝗼) for all the granular UI touch-ups and final polish. It was an awesome exercise in getting back to web fundamentals while utilizing cutting-edge tools. Feel free to check it out and tell me what you think: https://roshanj.online/ It still needs some improvement, but I'm happy with the results it generated to release the first version of it. #𝗡𝗲𝘅𝘁𝗷𝘀 #𝗔𝗜 #𝗪𝗲𝗯𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 #𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 #𝗥𝗲𝗮𝗰𝘁 #𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱𝗖𝗦𝗦

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day50 Project: User Search Card UI What I built Today I created a User Card Search Interface where users can search profiles in real-time. As you type, the cards dynamically update based on matching names, making the UI fast and interactive. Technologies Used HTML5 Tailwind CSS JavaScript (Array Filter, DOM Manipulation, Events) Challenge I faced Implementing real-time search efficiently while updating multiple DOM elements dynamically. How I solved it Used JavaScript’s filter() method to match user input and re-rendered the UI dynamically for instant results. Live Demo: https://lnkd.in/df8N8bVT Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #TailwindCSS #WebDevelopment #100DaysOfCode #DeveloperJourney #UIUX

🚀 Just built a Real-Time Character Counter using HTML, CSS, and JavaScript. This small project tracks user input in real time and displays the number of characters typed along with the remaining limit — a feature commonly used in forms, messaging apps, and content editors. 🔧 What I practiced while building this: • DOM manipulation • JavaScript event listeners ("input" event) • Real-time UI updates • Simple and responsive front-end design Building small projects like this helps strengthen the fundamentals and understand how real user interactions work in web applications. 🔗 Live Demo: https://lnkd.in/gXjy2TSK I’m continuously building projects to improve my front-end development skills. Feedback is always welcome! #WebDevelopment #JavaScript #FrontendDevelopment #HTML #CSS #CodingProjects #LearningInPublic

🚀 Just built a Rock–Paper–Scissors Game with a Clean UI ✊📄✂️ A small project, but a great exercise to strengthen core front-end skills using only HTML, CSS, and JavaScript — no frameworks, no libraries. Features: • Clean and minimal UI • Emoji-based hand buttons • Randomized computer moves • Live score tracking (User vs Computer) • Instant result feedback • Fully responsive design Building small projects like this is one of the best ways to practice DOM manipulation, UI design, and JavaScript logic. Try the game here: https://lnkd.in/d4YMjAZj Would love to hear your feedback! 💻 #webdevelopment #javascript #frontend #html #css #coding

🚀 Mini Project of the Day: Password Strength Checker First, I show how it works: • Checks password strength • Animated strength bar • Show / Hide password button Then, you can see the code being written in **30x speed** (HTML + CSS + JS). Goal: to improve my frontend skills and create clean, interactive UI components. #frontend #javascript #webdevelopment #vuejs #coding #juniordeveloper #uiux #learntocode #portfolio

Education platforms win on clarity and structure. Many course websites lose students because the experience feels cluttered. We built Tutorlin (Next.js UI Template) to solve that problem.🤩 Clean layout, logical course flow, and performance-focused design. 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗧𝘂𝘁𝗼𝗿𝗹𝗶𝗻: https://lnkd.in/gryEBF5s . . . . . #Tutorlin #EducationWebsiteTemplate #NextJSUI #WebDesign #Elearning #UIUX #ResponsiveDesign #TemplateDesign #FrontendDevelopment #DigitalEducation #OnlineLearning #ModernUI #WebsiteDevelopment #EducationalTechnology #JavaScript #BestTemplates #NextJS #WebDevelopment #UserExperience

🚨 𝐂𝐒𝐒 𝐢𝐬 𝐧𝐨 𝐥𝐨𝐧𝐠𝐞𝐫 𝐣𝐮𝐬𝐭 𝐬𝐭𝐲𝐥𝐢𝐧𝐠. With CSS Wrapped 2025, we're seeing CSS evolve into something much closer to a UI programming language. Things that once required JavaScript can now be done natively with CSS and HTML: • 𝑩𝒖𝒊𝒍𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝒄𝒂𝒓𝒐𝒖𝒔𝒆𝒍𝒔 𝒘𝒊𝒕𝒉 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒃𝒖𝒕𝒕𝒐𝒏 𝒂𝒏𝒅 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒎𝒂𝒓𝒌𝒆𝒓 • 𝑺𝒕𝒚𝒍𝒆 𝒏𝒂𝒕𝒊𝒗𝒆 <𝒔𝒆𝒍𝒆𝒄𝒕> 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 (𝒇𝒊𝒏𝒂𝒍𝒍𝒚!) • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒉𝒐𝒗𝒆𝒓 𝒑𝒓𝒆𝒗𝒊𝒆𝒘𝒔 𝒂𝒏𝒅 𝒕𝒐𝒐𝒍𝒕𝒊𝒑𝒔 𝒘𝒊𝒕𝒉 𝒊𝒏𝒕𝒆𝒓𝒆𝒔𝒕-𝒇𝒐𝒓 • 𝑾𝒓𝒊𝒕𝒆 𝒄𝒐𝒏𝒅𝒊𝒕𝒊𝒐𝒏𝒂𝒍 𝒍𝒐𝒈𝒊𝒄 𝒖𝒔𝒊𝒏𝒈 𝒊𝒇() 𝒊𝒏 𝑪𝑺𝑺 • 𝑼𝒔𝒆 𝒄𝒐𝒏𝒕𝒂𝒊𝒏𝒆𝒓 & 𝒔𝒄𝒓𝒐𝒍𝒍 𝒔𝒕𝒂𝒕𝒆 𝒒𝒖𝒆𝒓𝒊𝒆𝒔 𝒇𝒐𝒓 𝒔𝒎𝒂𝒓𝒕𝒆𝒓 𝒍𝒂𝒚𝒐𝒖𝒕𝒔 • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒔𝒕𝒂𝒈𝒈𝒆𝒓𝒆𝒅 𝒂𝒏𝒊𝒎𝒂𝒕𝒊𝒐𝒏𝒔 𝒘𝒊𝒕𝒉 𝒔𝒊𝒃𝒍𝒊𝒏𝒈-𝒊𝒏𝒅𝒆𝒙 • 𝑹𝒆𝒐𝒓𝒅𝒆𝒓 𝑫𝑶𝑴 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝒍𝒐𝒔𝒊𝒏𝒈 𝒔𝒕𝒂𝒕𝒆 𝒖𝒔𝒊𝒏𝒈 𝒎𝒐𝒗𝒆𝑩𝒆𝒇𝒐𝒓𝒆 • 𝑩𝒖𝒊𝒍𝒅 𝒑𝒐𝒑𝒐𝒗𝒆𝒓𝒔, 𝒅𝒊𝒂𝒍𝒐𝒈𝒔, 𝒂𝒏𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝑼𝑰 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝑱𝑺 𝗜𝗻 𝘀𝗵𝗼𝗿𝘁: CSS is becoming stateful, logical, and interaction-driven. The web platform is shifting toward native UI capabilities, reducing the need for heavy JavaScript for common patterns. If you're a frontend developer, this is a moment worth paying attention to. The platform is getting seriously powerful. Explore all the features visually from official docs: https://lnkd.in/dnXM6tcR #CSS #Frontend #WebDevelopment #WebPlatform #ChromeDev #FrontendEngineering