Haseeb Rehman’s Post

They say HTML is the skeleton of a webpage, but CSS is the soul. 💡 Today is Day 16 of my #100DaysOfCode journey as I transition deeper into full-stack web development. I focused entirely on mastering spatial layouts and user interactivity. Here are my top 2 technical takeaways today: 1️⃣ The Box Model Reality: Understanding the strict difference between Padding (internal space) and Borders (the physical wall). Miscalculating these is the #1 reason grid layouts break! 2️⃣ Zero-JS Interactivity: Leveraging the power of transform: scale() to create dynamic user experiences without relying on heavy JavaScript event listeners. To test my knowledge, I built an interactive Pokémon card grid. Using smooth CSS transitions, the cards naturally scale up and reveal data when a user hovers over them. Building practical, visual projects is solidifying these concepts faster than any tutorial could. Check out the source code for the project on my GitHub: https://lnkd.in/gwF-Efuh If you are a frontend developer, I'd love to know: what is your go-to CSS trick for making a UI feel more interactive? Let me know in the comments! 👇 #WebDevelopment #Frontend #CSS #100DaysOfCode #LearningInPublic #BlackwindCodingSchool #SoftwareEngineering

Hey Everyone!! Day 24 of #30DaysCodingChallenge Today I built a Dark & Light Theme Toggle Web Application using HTML, CSS, and JavaScript. What I Built A responsive theme toggle application that allows users to switch between Light Mode and Dark Mode. The selected theme is saved in the browser, so it remains even after refreshing the page. Purpose of the Project The goal was to strengthen my understanding of DOM manipulation, CSS variables, and browser storage while building a practical real-world feature used in modern websites. Key Features ✔ Toggle between Dark and Light mode with a single button. ✔ Dynamic button text update (Dark ↔ Light). ✔ Smooth transition effect using CSS. ✔ Persistent theme using Local Storage (remains after refresh). ✔ Clean and centered UI using Flexbox. What I Learned 🔹 How `classList.toggle()` makes theme switching simple and efficient. 🔹 How to store user preferences using `localStorage`. 🔹 How to apply conditional rendering based on saved data. 🔹 Improved understanding of combining CSS and JavaScript for better UX. Building small UI features like theme toggles helps me understand how modern applications enhance user experience while keeping code clean and maintainable. #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #CodingChallenge #BuildInPublic

Hey everyone! I’ve challenged myself to build 5 web projects to strengthen my frontend skills, and I'm excited to share : Project 1/5: A Password Generator! 🚀🔐 I built this entirely from scratch using just HTML, CSS, and Vanilla JavaScript. My main goal was to focus on UI/UX and making it feel like a modern application. Here are the main features I implemented:  ✅ A modern glassmorphism design ✅ Real-time password strength tracking ✅ Customizable length and character options (uppercase, lowercase, numbers, symbols) ✅ Instant copy-to-clipboard functionality Building this was great practice and really helped me improve in a few key areas: 💡 DOM Manipulation: Managing state and dynamic UI updates without any frameworks. 💡 CSS Styling: Working with gradients, hover effects, and responsive design. 💡 APIs: Using the browser's Clipboard API to securely copy text. You can see exactly how it works in the short video attached below! 🎥 Next up is Project 2... Code & Documentation on GitHub: 🔗 https://lnkd.in/demvBdfZ #WebDev #Frontend #JavaScript #HTML #CSS #CodingChallenge #DeveloperCommunity

🚨 𝐂𝐒𝐒 𝐢𝐬 𝐧𝐨 𝐥𝐨𝐧𝐠𝐞𝐫 𝐣𝐮𝐬𝐭 𝐬𝐭𝐲𝐥𝐢𝐧𝐠. 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

✨Today's Learning Update - Web Development Journey Today, I learned to build “Interactive Weather UI” using HTML, CSS, and JavaScript. 👉In this project, I implemented JavaScript to make the webpage dynamic — the weather result and background theme change based on the city entered by the user. 🔹 Concepts I Applied: 📌Functions to organize logic 📌DOM Manipulation using getElementById() 📌Conditional Statements (if–else) for decision making 📌String Methods (toLowerCase()) for input handling 📌innerHTML & style manipulation to update content and background dynamically 👉This project helped me understand how JavaScript connects user input with real-time output and transforms static pages into interactive applications. I would truly appreciate suggestions from experienced developers to further improve my logic and structure. Turning User Input into Dynamic Experience with JavaScript . #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #LearningJourney #InteractiveUI

Mastering HTML Input Types! Understanding the wide variety of HTML input types is essential for building user-friendly, interactive web forms. From text fields to sliders, checkboxes to date pickers—each input type serves a unique purpose in collecting user data efficiently. 📌 Here's a visual summary of commonly used input types in HTML: ✅ text, password, email, url, search ✅ date, time, month, week ✅ checkbox, radio, range, number ✅ file, color, button, submit, reset 💡 These input elements help create responsive, accessible, and intuitive user interfaces in web development. Whether you're a beginner or brushing up your skills, knowing how and when to use each type can significantly enhance your frontend development! #HTML #WebDevelopment #Frontend #FormDesign #Coding #Learning #WebDesign #Developers #JavaScript #CSS #InputTypes

Today I learned how to build and structure forms using HTML while working on the CatPhotoApp project 🐱 In this lesson, I practiced creating interactive web forms and understood how user input works in real websites. I learned how to use: ✅ Different input types (text, radio buttons, checkboxes) ✅ The form attribute and form submission ✅ Labels and fieldsets for better accessibility and structure ✅ Required inputs and default selections It’s exciting to see how simple HTML elements allow users to interact with a webpage and send data. Step by step, I’m building a stronger foundation in Frontend Development. Every small project brings me one step closer Source code -> https://lnkd.in/dUWKvhMf Live Demo -> https://lnkd.in/dGRDHte2 #HTML #WebDevelopment #FrontendDevelopment #LearningInPublic #100DaysOfCode

🚀 New Project Deployed – To-Do List Web App I recently built and deployed a To-Do List application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM manipulation and interactive UI behavior in JavaScript. You can check it out here: 🔗 [https://lnkd.in/geExcau9] github: [https://lnkd.in/gVRsq3xk] Key Features: • ➕ Add a new task instantly by pressing Enter • ✏️ Edit any task by simply double-clicking on it • ✅ Mark tasks as completed using the checkbox (with strikethrough effect) • 🗑️ Delete tasks easily using the delete button • ⚡ Smooth and simple user experience with real-time updates Building small projects like this helps me improve my JavaScript logic and front-end development skills. I’d love to hear your feedback! 🙌 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment

🚀 Built a QR Code Generator Website using HTML, CSS & JavaScript Excited to share another mini project from my learning journey — a QR Code Generator Website 📱🔳 This project allows users to instantly generate a QR code by entering any text or URL. 🔹 Tech Stack Used: ✅ HTML5 – Structure of the webpage ✅ CSS3 – Responsive and clean UI design ✅ JavaScript – Dynamic QR code generation 🔹 Key Features: ✔️ Generate QR codes instantly ✔️ Supports text, links, and other inputs ✔️ Simple and user-friendly interface ✔️ Fully responsive design for all devices Through this project, I improved my understanding of: 👉 DOM Manipulation 👉 JavaScript Event Handling 👉 API Integration 👉 Responsive UI Design Building small projects like this helps strengthen frontend development skills and improve problem-solving ability. 💡 🔗 Live Demo: https://lnkd.in/gsdAmzKE #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDeveloper #ReactDeveloper #BuildInPublic #LearningByBuilding

Even as a Full Stack Developer, CSS fundamentals matter more than we admit. Today I recreated this section pixel-perfect using CSS. Not because I didn’t know how but because sometimes revisiting the fundamentals sharpens precision. The interesting part? When you assign a fixed width to cards, alignment isn’t automatic. You need intentional layout control. In this case: 👉 margin: 0 auto; ensured proper centering. It’s a small line of CSS but details like this separate average UI from polished UI. As developers, we often focus on: Backend logic APIs Performance Architecture But clean layout, spacing, and alignment? That’s what users actually see first. This task was a reminder that: • Mastery is in the details • Fundamentals should stay fresh • Clean CSS makes a visible difference • Pixel perfection builds credibility No matter how advanced your stack is HTML & CSS still define the final experience. Do you prefer handling centering with Flexbox, Grid, or classic margin auto? -asadwaseem #FullStackDeveloper #FrontendDevelopment #CSS #WebDesign #CleanCode #UIUX #SoftwareEngineering #DeveloperMindset #TechCommunity #LinkedInTech