Building Full-Stack Foundation with HTML5 and CSS3

🚀 Sharing a simple Expense Tracker / Budget Planner I built while learning frontend development. This project allows users to: • Set a budget • Add expenses • View total expenses and remaining balance 🛠️ Tech Stack: HTML | CSS | JavaScript 🔗 Live Demo: https://lnkd.in/g5RgyEsX This helped me practice DOM manipulation and handling user input in JavaScript. I’m planning to improve this by adding features like local storage, edit/delete options, and data visualization. Open to feedback and suggestions! #WebDevelopment #JavaScript #Frontend

Built a Student Portal Dashboard and deployed it using GitHub Pages 🚀 A simple, clean, and fully responsive front-end project to display student data in an organized way. 🔹 Features: Responsive design Sidebar navigation Dashboard overview (Attendance, Subjects, Notifications) Subject cards Marks table with grades 🔹 Tech Stack: HTML | CSS | JavaScript 🌐 Live: https://lnkd.in/gtP5fxUi Planning to improve this further by adding more features. Feedback is welcome! #WebDevelopment #Frontend #HTML #CSS #JavaScript #ResponsiveDesign #GitHubPages

I used to spend more time configuring routes than actually building features. Today, that completely changed. Day 3 of my 30-day Next.js deep dive. Today I explored file-based routing—and honestly, it made me rethink how simple routing can be when the framework handles the heavy lifting. No extra setup. No complex configs. Just structure. Key Learnings - Routes are created automatically based on the folder/file structure - No need for external routing libraries - Nested folders = nested routes (clean and intuitive) - Dynamic routes can be handled easily with [param] naming - Encourages better project organization from the start At first, I underestimated it. I thought: “Okay, routing from files… that’s basic.” But when I started organizing routes for a real project, I realized: 👉 Good structure = less confusion later 👉 Less configuration = more focus on actual development It’s not just about simplicity—it’s about maintainability. I’m starting to value tools that reduce unnecessary complexity and improve scalability. Because in real-world remote teams, clean structure and readability matter just as much as functionality. Do you prefer file-based routing like in Next.js, or more control with custom routing setups? #NextJS #WebDevelopment #ReactJS #FullStackDeveloper #JavaScript #CleanCode #LearningInPublic #RemoteDeveloper

🚀 Built a Realtime Search Filter in Vanilla JavaScript (No Frameworks) Most modern UIs feel fast because of instant feedback — so I implemented a real-time search system from scratch focusing on performance and clean logic. 🔍 Key Highlights: - Instant filtering as users type (no reloads)   - Case-insensitive search handling   - Graceful empty state (“No users found”)   - Dynamic DOM rendering without libraries  🛠️ Tech Stack: HTML • CSS • JavaScript (Vanilla JS) 💡 What this demonstrates: - Strong fundamentals in DOM manipulation   - Writing scalable, readable JavaScript   - Handling real-world edge cases in UI logic   - Thinking in terms of user experience, not just code  🔗 Live Demo:   https://lnkd.in/gPtHDgud 📂 GitHub Repo:   https://lnkd.in/ggvDP334  🙏 Learned core JavaScript concepts from Harsh Vandana Sharma and Sheryians Coding School — highly recommend their content for building strong fundamentals. Currently looking for opportunities to apply these skills in real-world projects and grow as a Frontend Developer. #frontenddeveloper #javascript #webdevelopment #hiring #developers #coding #buildinpublic

Most online code editors feel… heavy. Too many panels. Too many features. Too much setup for something simple. So I built something different. A **browser-native code playground** where you can: → Run JavaScript instantly → Preview HTML/CSS live → Save your workspaces → Share your exact state via URL No backend. No login. No project setup. Just open → type → run. --- What I cared about most: • ⚡ Speed — feels instant, not delayed • 🧠 Clarity — no clutter, just what you need • 💾 Persistence — your work stays with you • 🔗 Shareability — send a link, same state opens --- The goal isn’t to compete with full IDEs. It’s to give developers a place to **think faster**. --- Still improving it every day. 👉 Would love your feedback: What features should I add next? What feels missing or annoying in current editors? --- Try it here: https://lnkd.in/eCEMrvZf #buildinpublic #webdev #javascript #frontend #developerexperience #indiehackers

You don’t need a new framework. You need better logic. 💻 It’s easy to get caught up in the "Library of the Week." We see a new CSS tool or a JavaScript framework and feel like we’re falling behind. I fell into that trap, too. But recently, I went back to the basics, and everything clicked. I’ve been spending my time mastering things like CSS Gradients and procedural logic before touching the "magic" of heavy frameworks. Here’s why that changed my workflow: ✅ Total Control: When you understand how a gradient or a loop actually renders, you stop fighting the code and start commanding it. ✅ Faster Debugging: 90% of bugs aren't "framework" bugs—they are logic gaps. ✅ The 5:00 AM Edge: I’ve started using my early mornings for deep-focus building. No distractions, just me and the code. The Takeaway: The best Web Developers aren't the ones who know the most tools; they’re the ones who can solve the problem with the simplest tool. What’s one "basic" skill you think every dev should master before moving to a framework? Let’s hear it in the comments! 👇 #WebDevelopment #CodingLife #HTMLCSS #JavaScript #ProgrammingLogic #BuildInPublic #SoftwareEngineering #WebDev

🚀 Day 34/100 – #100DaysOfCode Next.js Fundamentals Today I started the journey of learning NextJS. Explored the core concepts of Next.js, a powerful React framework used for building modern full-stack applications. 🔹 File-Based Routing Next.js uses a file-based routing system where each file automatically becomes a route. 📌 No need for external routing libraries. 🔹 Dynamic Routing Supports dynamic routes using folder/file naming conventions. 📌 Enables building pages like /blog/[id] easily. 🔹 Layouts & Nested Structure Reusable layouts allow sharing common UI (like navbar, footer) across pages. 📌 Helps maintain clean and scalable architecture. 🔹 Data Fetching Next.js supports multiple data fetching strategies: - Server-side - Client-side - Static generation 📌 Improves performance and flexibility. 🔹 Server vs Client Components Server components run on the server (better performance) Client components handle interactivity (useState, events) 🔹 Rendering Methods SSR (Server-Side Rendering) SSG (Static Site Generation) CSR (Client-Side Rendering) 📌 Choosing the right method is key for performance and SEO. 🔹 Optimized Navigation Using <Link> enables fast navigation without full page reloads. 🔹 API Routes (Full-Stack Capability) Next.js allows creating backend APIs inside the same project. 📌 Makes it a true full-stack framework. 📌 Overall, Next.js simplifies development by combining routing, rendering, and backend capabilities into one framework. 34 days down, 66 more to go. #Day34 #100DaysOfCode #NextJS #ReactJS #WebDevelopment #FrontendDevelopment #FullStack

I built a “W3Schools-style” web dev reference — 160 tips with live demos — in ONE single HTML file. No frameworks. No libraries. Just pure HTML, CSS, and JavaScript. Here’s what’s inside: 🎨 47 CSS tips — clamp(), scroll snap, , light-dark(), content-visibility, gradient borders, and more 📄 30 HTML tips — native popover, inert attribute, <search> element, fieldset disabled trick, meter element, and more ⚡ 33 JavaScript tips — structuredClone, Object.groupBy(), AbortController, Intl formatters, crypto.randomUUID, and more 🚀 16 Performance tips — lazy loading, preload, WebP, dynamic import, break long tasks, and more 🔧 14 DevTools tips — CORS override, monitorEvents, conditional breakpoints, and more ♿ 9 Accessibility tips — skip links, , sr-only pattern, and more 🔍 11 SEO tips — structured data, canonical, rel=sponsored, and more Every tip has a code example. Most have a live demo you can interact with directly in the browser. No login. No paywall. Completely free. 👉 https://lnkd.in/gXREqV3v Built using an AI-assisted workflow (including Claude for ideation), but fully structured, implemented, and tested manually. What’s your most underrated web dev tip? Drop it below 👇 #webdevelopment #css #javascript #html #frontend #webdev #programming #coding #softwaredevelopment #developer

🚀 JavaScript Practical Project Series – Project 4: Search Filter Excited to share my fourth project in this series! 💻 I built a Search Filter, where users can instantly filter results based on their input. This is a common feature used in many real-world applications. 🔹 Features: • Real-time search filtering 🔍 • Instant results as user types • Clean and responsive UI • Improved user experience 🔹 Tech Stack: HTML | CSS | JavaScript Through this project, I learned how to implement dynamic filtering, handle user input, and update the DOM efficiently. These hands-on projects are helping me understand how modern web applications work 🚀 More exciting projects coming soon! 🙌 🔗Live Project: https://lnkd.in/gVSttpfM 📁GitHub Repository: https://lnkd.in/gdmUqEj9 #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #Projects #SearchFilter #BuildInPublic #DeveloperLife #100DaysOfCode #TechGrowth

AI-Powered Full Stack Development Journey. Today I stopped just writing HTML and started controlling it with JavaScript. That's what the DOM is — the bridge between your code and the live page. Here's what I covered today: 🔍 Selecting Elements ▸ getElementById() — grab one element by its id ▸ getElementsByClassName() — get all elements with a class ▸ getElementsByTagName() — get all elements by tag name ▸ querySelector() — find the first match using CSS selector ▸ querySelectorAll() — find all matches using CSS selector 💻 Projects I built today: ▸ Random background color changer on button click ▸ Show / Hide password toggle — a real feature used in every login form 💡 Key insight: Before DOM, JavaScript was just logic sitting in a file. After DOM, JavaScript can READ, CHANGE, and REACT to anything on the page. That shift in thinking is what makes frontend development exciting. One concept at a time. One project at a time. 💪 #JavaScript #DOM #DreamTusk #WebDevelopment #FrontendDevelopment #LearningInPublic #CodingJourney #DreamTuskTechnologies