HTML CSS JavaScript: Building Websites 101

🕰️ The web used to be just... text. Unstyled, black-on-gray, walls of text. Then CSS arrived and changed everything. From font tags stuffed inside HTML to Flexbox, Grid, animations, and container queries — the story of CSS is honestly wild. And understanding it makes you a better developer. I wrote the full history — including what sites actually looked like before CSS, and the mistakes developers still make today 👇 Read it now at 👉 hamidrazadev.com #css #webdev #frontend #learncss #webhistory #developers #programminglife #html #csshistory #hamidrazadev

🪝 5 CSS tricks I use every week that most developers still ignore Most developers are still writing CSS like it’s 2018. Meanwhile, the web platform has quietly evolved A LOT. Here are 5 modern CSS features that completely changed how I build UIs: 1️⃣ Container Queries   Stop designing based on the viewport.   Now your components respond to their parent container.   Reusable, flexible, actually scalable UI. 2️⃣ :has() Selector   The “impossible” parent selector is finally here.   You can style a parent based on its children.   Cleaner logic. Less JS hacks. 3️⃣ clamp() for Fluid Typography   font-size: clamp(1rem, 2.5vw, 2rem);   One line. No media queries. Perfect responsiveness. 4️⃣ Scroll-Driven Animations   Animations that react to scroll built into CSS.   No JS. No libraries. Just smooth performance. 5️⃣ Logical Properties   Write CSS that adapts to different languages automatically.   margin-inline > margin-left/right   Future-proof layouts with less effort. The web platform has evolved massively.   Most of us just haven’t caught up. Which of these are you already using? ⬇️ 📣 Follow me for weekly web dev tips that actually make you faster. 🚀 #CSS #WebDevelopment #Frontend #CSSTricks #LearnToCode #JavaScript #Developer #UIDesign #CodingTips

7 CSS Features You're Probably Sleeping On 😴 Most developers are still writing workarounds for problems CSS already solved. Here are 7 modern CSS features that should be in every frontend dev's toolkit: 1️⃣ :has() The "parent selector" we begged for for years. Style a container based on what's inside it — no JavaScript, no class toggling. Pure CSS logic. 2️⃣ clamp() clamp(min, ideal, max) — responsive typography in one line. No more @media queries just to change a font size. Fluid by default. 3️⃣ Scroll Snap Smooth, snappy carousels and sliders — entirely in CSS. Stop importing a 50kb library for something two properties can handle. 4️⃣ aspect-ratio aspect-ratio: 16 / 9 and you're done. No more padding-top percentage hacks. No more crying over responsive images. 5️⃣ subgrid Nested elements that actually align to the parent grid. The feature Grid always needed. Now it's here — use it. 6️⃣ @layer Cascade layers let you control specificity by design, not by accident. No more !important wars. No more specificity debugging at midnight. 7️⃣ content-visibility Tell the browser to skip rendering off-screen content entirely. One line. Potentially massive performance gains on long pages. 💡 The pattern here? Every one of these replaces either a JavaScript dependency, a CSS hack, or a media query you didn't need. Modern CSS is powerful. The problem is most of us learned CSS years ago and never went back. Which of these are you already using — and which one surprised you most? 👇 #CSS #Frontend #WebDevelopment #HTML #JavaScript #WebDesign #Programming

⚡ Why does your website sometimes feel laggy… even when your JavaScript is fine? 🤔 👉 The bottleneck might not be your code… It’s what the browser is doing behind the scenes. 🚀 Let’s break it down: Reflow vs Repaint 🧠 What is Reflow? (Layout) Reflow happens when changes affect the layout of the page — like size, position, or structure. 👉 It’s expensive because the browser has to: • Recalculate layout 📐 • Reposition elements • Re-render parts of the page 💥 This is computation-heavy work 🔥 Common Triggers for Reflow: • Resizing the window • Changing width, height, margin, padding • Changing font size • Adding/removing DOM elements 🎨 What is Repaint? Repaint happens when only the appearance changes — but layout stays the same. 👉 No geometry change = less work The browser just repaints pixels 🎨 ✨ Common Triggers for Repaint: • Changing color / background-color • visibility: hidden • box-shadow / outline ⚠️ Important Rule (Most Devs Miss This) 👉 Every Reflow → causes Repaint 👉 But every Repaint → does NOT cause Reflow 💡 Real Developer Insight If your app feels slow: • Too many Reflows = performance bottleneck • Optimize layout changes • Batch DOM updates • Avoid unnecessary style recalculations 🚀 Final Thought: Most developers optimize JavaScript… But great developers optimize the browser’s work. 📌 Follow for more deep dives into how the web actually works. #JavaScript #FrontendDevelopment #WebPerformance #WebDevelopment #CodingTips #Reflow #Repaint #BuildInPublic #100DaysOfCode

HTML, CSS, and JavaScript are the three core technologies used in web development: HTML (HyperText Markup Language): It creates the structure of a web page such as text, images, and buttons. CSS (Cascading Style Sheets): It is used to design and style the web page, including colors, layouts, and fonts. JavaScript: It makes the web page interactive and dynamic, such as animations, buttons, and real-time updates. Together, these three technologies build modern, responsive, and interactive websites. #WebDevelopment #HTML #CSS #JavaScript #Coding #Programming #FrontendDeveloper #WebDesign #Tech #Developer

HTML, CSS, and JavaScript are the three core technologies used in web development: HTML (HyperText Markup Language): It creates the structure of a web page such as text, images, and buttons. CSS (Cascading Style Sheets): It is used to design and style the web page, including colors, layouts, and fonts. JavaScript: It makes the web page interactive and dynamic, such as animations, buttons, and real-time updates. Together, these three technologies build modern, responsive, and interactive websites. #WebDevelopment #HTML #CSS #JavaScript #Coding #Programming #FrontendDeveloper #WebDesign #Tech #Developer

New Project Tutorial Live! I’ve just published a new HTML, CSS & JavaScript project tutorial focused on building a Coming Soon Website with a Live Countdown Timer. Link Here: https://lnkd.in/d6wAzsgt This project is designed with: • Clean and modern UI • Responsive layout • Functional countdown logic using JavaScript It’s a great practical example for anyone looking to strengthen their frontend development skills and understand how real-world landing pages are built. If you’re into web development, UI design, or building portfolio-ready projects, this one will add real value. 🎥 Check it out and share your feedback always open to thoughts and discussions! #WebDevelopment #FrontendDevelopment #HTML #CSS #JavaScript #UIDesign #100DaysOfCode #Programming

🚀 Building a Profile Card UI with HTML & CSS Today I worked on improving my frontend skills by creating a simple profile card UI 💻 🔹 What I practiced: Centering elements using Flexbox Creating a split background (blue & white card) Designing a circular profile image with double border Aligning icons and text in a single line Adding social stats (❤️ Likes | 💬 Comments | 🔗 Share) Fixing alignment issues using align-items: center 💡 One small thing I learned: Instead of manually adding separators like |, we can use CSS (::after) for a cleaner and more professional approach. 🔗Project Link: https://lnkd.in/gTtAZ4Md 📌 Still learning and improving step by step! #HTML #CSS #FrontendDevelopment #WebDevelopment #LearningJourney #UIUX #Coding

🚀 Day 3 — CSS is where things get interesting Yesterday, we built the structure with HTML. Today, we make it look good. That’s where CSS comes in. Earlier, I used to think CSS is just “colors and styling”. But it’s more than that. 👉 CSS is about how users feel when they see your app. Today I focused on: ✔ Colors & backgrounds ✔ Fonts & text styling ✔ Margins, padding & spacing ✔ Width, height & alignment And one thing I realized: Good design is not just about looks. It’s about better user experience. Still keeping it simple. No frameworks. Next → JavaScript (making things interactive) If you’re learning, don’t skip CSS. It makes your work stand out. Comment “START” if you want simple learning resources. #day3 #css #webdevelopment #learninginpublic #developers

🎯 DOM vs CSSOM vs Render Tree (This Is Where Most Devs Get It Wrong) If your UI feels slow… it’s probably not your JavaScript. Yeah, I said it. Most developers obsess over JS performance, while the real bottleneck is quietly building… trees. Let’s clear the confusion. People think: HTML → DOM CSS → Styling → Render Nice and clean. Reality inside Chromium? Not even close. Here’s what actually happens under the hood 👇 🧱 DOM (Structure) Built from HTML Represents what exists Nodes, elements, hierarchy 🎨 CSSOM (Style Intelligence) Built from CSS Decides how things should look Resolves inheritance, specificity, cascading 🌳 Render Tree (What Actually Gets Drawn) Combines DOM + CSSOM Only includes visible elements Calculates final styles per node Now here’s the part most people miss: 👉 The Render Tree is NOT a copy of the DOM. display: none? Gone. Hidden elements? Ignored. Pseudo-elements? Included. It’s a filtered, computed version of reality. And it gets even more interesting… 👉 CSS can block rendering. 👉 JavaScript can block both DOM and CSSOM construction. So your page isn’t “loading”… it’s negotiating dependencies. Example: Browser starts parsing HTML → builds DOM Hits <link rel="stylesheet"> → pauses rendering Downloads CSS → builds CSSOM JS runs → can modify DOM before render even begins Only after this dance… Blink creates the Render Tree → Layout → Paint → Composite 💥 Contrarian Insight: 👉 Faster JavaScript won’t fix a slow Render Tree. 👉 Poor CSS can hurt performance more than heavy JS. Yes. CSS. Because: Complex selectors slow CSSOM Frequent style changes trigger re-layout Layout = expensive 💡 Mental Model: DOM = Ingredients 🍅 CSSOM = Recipe 📖 Render Tree = Final Dish 🍽 You don’t eat ingredients. You eat the computed result. So next time your UI lags… don’t just open the JS profiler. Ask yourself: “Am I making the browser rebuild the dish… over and over again?” That’s where performance really lives. #WebEngine #Chromium #BrowserInternals #Performance #SoftwareEngineering #FrontendEngineering #SystemDesign