Day 27/100 of my #100DaysOfCode Challenge 💻 Today I finally understood something that confuses many beginners in CSS — Flexbox and Grid. Think of it like this: 🔹 Flexbox is like arranging items in a single row or a single column. For example: placing buttons, menus, or cards neatly in a line. 🔹 CSS Grid is like designing a full layout with rows AND columns. Imagine building the structure of an entire webpage. So in simple terms: • Flexbox = one direction (row or column) • Grid = two directions (rows and columns) The more I learn, the more I realize that web design is like solving a puzzle with code. 27 days in… and the journey is getting more interesting every day. If you’re learning frontend too, what confused you the most when you started? #100DaysOfCode #LearnToCode #WebDevelopment #FrontendDevelopment #CSS #Flexbox #CSSGrid #CodingJourney #BuildInPublic

Revisited HTML & CSS fundamentals and built a YouTube homepage clone (for learning purposes) to strengthen my frontend basics. Focused on: • Semantic HTML structure • Flexbox & Grid layouts • Precise spacing and alignment • Clean UI replication This project helped me understand how structured layouts are built in real-world applications. 🔗 GitHub: [https://lnkd.in/giNYPaKt] 🎥 Tutorial: [https://lnkd.in/g5kYZ9mM] Open to feedback as I continue improving and moving toward JavaScript next. #HTML #CSS #FrontendDevelopment #WebDevelopment #LearningJourney

🎨 Complete CSS Cheat Sheet — From Beginner to Advanced CSS is the backbone of how the web looks and feels. But remembering all the properties, selectors, and layout rules can get overwhelming. This CSS cheat sheet is a great quick reference that covers: 🔹 CSS Basics & Syntax 🔹 Types of CSS (Inline, Internal, External) 🔹 Selectors (Element, Class, ID, Universal) 🔹 The Box Model 🔹 Display & Position properties 🔹 Text and Font styling 🔹 CSS Grid basics 🔹 Spacing & Borders 🔹 Best practices for clean and scalable CSS Whether you're just starting out or revisiting fundamentals, resources like this make learning much easier. 💡 One thing I learned while working on frontend projects: Strong CSS fundamentals make UI development much faster and cleaner. 📌 Save this for later if you’re learning frontend development. What’s the CSS concept that confused you the most when you started? 👇 #CSS #WebDevelopment #FrontendDevelopment #Programming #Coding #LearnToCode #DeveloperLife #WebDesign #100DaysOfCode #TechCommunity

Everything in the browser is a box. 📦 If your CSS layouts feel "random," it's usually because of the Box Model. Today, I’m breaking down the 4 layers I'm learning to control: 🔹 Content: The actual text or image. 🔹 Padding: Space inside the box. 🔹 Border: The wall around the content. 🔹 Margin: Space outside the box. My top takeaway today: Use box-sizing: border-box; to stop your padding from breaking your layout width. I’m documenting my 30-day journey as I build my foundations. Let me know—what’s your biggest CSS struggle? 👇 #CodeWithWajid #CSS #WebDev #LearningToCode #100DaysOfCode

🚀 Small Concept, Big Impact – Understanding File Paths in HTML & CSS Today while practise a website, I faced a simple issue — my background image wasn’t showing. After debugging, I realized the problem wasn’t Bootstrap or CSS… it was file paths! Here’s what I learned: 📌 In CSS and HTML, paths are relative to the file location, not the project root. ✅ Key concepts: • . → current folder • .. → go back one folder • ../images/img.jpg → go back → then enter images • /images/img.jpg → starts from server root (usually wrong for local projects) Example: If your CSS is inside a css folder and images are in images: Correct way: background-image: url("../images/background.jpg"); This small fix saved me a lot of debugging time 😄 💡 Lesson: Sometimes bugs aren’t complex — they’re just path mistakes. Understanding fundamentals makes development much easier. #WebDevelopment #HTML #CSS #Frontend #Bootstrap #LearningByDoing #PortfolioBuilding #StudentDeveloper

🚀 How Browsers Work Internally | Peer Class Demo Today, I recorded a 40-minute deep dive on Browser Internals for my Web Development Cohort peer class demo. As frontend developers, we write HTML and CSS daily — but understanding what happens behind the scenes completely changes how we approach development. In this session, I covered: 🔹 What is a Browser? 🔹 Core Components of a Browser 🔹 Browser Engine vs Rendering Engine 🔹 DOM Tree & CSSOM Tree 🔹 DOM vs Render Tree 🔹 Rendering Pipeline (Parse → Build → Render → Paint) 🔹 Why Semantic HTML Tags are Important 🔹 How Semantic HTML improves website performance This session reinforced one key idea for me: Frontend is not just about styling — it’s about understanding how the browser thinks. If you’re preparing for frontend interviews or want to strengthen your fundamentals, this topic is a must-know. Here’s the full video: 🔗 https://lnkd.in/gmNX-SYe Mentions : Hitesh Choudhary Piyush Garg Jay Kadlag Ansh Mishra Would love to hear your thoughts — how deeply have you explored browser internals? #WebDevelopment #FrontendDevelopment #HTML #CSS #BrowserInternals #LearningInPublic #SoftwareEngineering

🎯 CSS Popover — A Modern Way to Create Floating UI Have you heard about the new CSS Popover API? It’s a modern way to create interactive floating elements like tooltips, dropdowns, and dialogs — without heavy JavaScript libraries. ✨ With the popover attribute, you can easily build UI components that appear on demand and automatically handle: ✔ Positioning ✔ Focus management ✔ Accessibility ✔ Closing behavior 🔹 Example: <button popovertarget="infoBox">Click Me</button> <div id="infoBox" popover> This is a CSS Popover! </div> That’s it — no complex JS required 🚀 💡 Why Popover is useful: • Lightweight and fast • Native browser support • Cleaner code • Better accessibility • Perfect for tooltips & menus CSS Popover is a great step toward simpler and smarter front-end development. If you love writing clean CSS and minimal JavaScript, this feature is worth exploring. 💬 Have you tried the Popover API yet? #WebDevelopment #FrontendDevelopment #CSS #Frontend #Programming #WebDesign #ModernCSS #Developers #CodingTips #TechCommunity #UIDesign #DevCommunity

Day 12 – Built a Rock Paper Scissors Game with HTML, CSS & JavaScript Today I built a simple but fun Rock Paper Scissors game using pure HTML, CSS, and JavaScript. The game allows a user to choose Rock, Paper, or Scissors, and the bot randomly selects its move. The result is instantly displayed showing whether the player wins, the bot wins, or it’s a draw. What I practiced in this project: • DOM manipulation using JavaScript • Generating random choices for the bot • Game logic implementation • Interactive UI design with CSS • Handling user events (click interactions) Tech Stack HTML | CSS | JavaScript If you’re learning JavaScript, this is a great beginner project to understand how frontend logic works in real-time. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #BuildInPublic

I’m excited to share my latest project – a fully responsive To-Do List Application built using HTML, CSS, and JavaScript. Live demo : https://lnkd.in/gSU5UcGX 🔹 Key Features: • Add, edit, and delete tasks • Mark tasks as completed • Interactive and user-friendly UI • Responsive design for mobile & desktop • Dynamic DOM manipulation using JavaScript 🔹 What I Learned: • Working with the DOM (Document Object Model) • Event handling in JavaScript • Local storage for saving tasks • Writing clean and structured code • Improving UI with CSS styling Note:- It uses local storage for To-Do lists. #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #LearningByDoing