Defining Grid Containers in CSS with display: grid

Day 16 of My JavaScript Journey 🚀 Today, I learned the basics of CSS (Cascading Style Sheets). CSS is used to style and design web pages controlling layout, colors, spacing, and appearance. I learned about different types of selectors, which are used to target HTML elements for styling. I was also introduced to the CSS box model, which consists of: • Content (the actual element) • Padding (It is used add space inside the element) • Border (It is used add wraps around padding) • Margin (It is used add space outside the element) Additionally, I learned that: • The universal selector (*) targets all elements on the page One key insight: Understanding the box model is essential for controlling spacing and layout. Key takeaway: CSS transforms plain HTML into visually appealing web pages. #JavaScript #CSS #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Styling File Upload Buttons (Html And Css) The default file upload button provided by HTML is notoriously difficult to style consistently across different browsers. Advanced styling involves hiding the default input element and triggering it programmatically with a custom-styled button. This can be achieved by positioning the actual file input element off-screen or with opacity set to 0, and then using JavaScript to trigger the file selection dialog when the custom button is clicked. This allows for complete control over the visual appearance of the upload button, enhancing the user experience. #HTML #CSS #WebDesign #Frontend #professional #career #development

🚀 Inline Styles: Direct CSS Application within HTML Elements Inline styles involve directly applying CSS rules within HTML elements using the `style` attribute. While it offers immediate styling, it's generally discouraged for larger projects due to maintainability issues. Inline styles override external and internal stylesheets, making it harder to manage styles consistently across a website. It's best reserved for specific, one-off styling needs where overriding existing styles is necessary. #HTML #CSS #WebDesign #Frontend #professional #career #development

Write cleaner CSS with native nesting: Before, you'd repeat the same selector again and again: button { ... } button:hover { ... } Now, with native CSS nesting, you can group related styles inside the parent block. Here’s the key syntax: selector { & :hover {   } } How it works: The & means “this same selector”... it's a placeholder for the parent. You can use it for pseudo-classes (:hover, :focus), child elements (& span), or even media queries. But what about the browser support? Well, it has over 91% global support and is growing fast. Modern Chrome, Safari, Firefox, and Edge are all on board. So, it's pretty safe to use. Anyways: New features like this are fun, but layouts are where most people get stuck. One design, 25 screen sizes… and it feels like guesswork. Flexbox and grid fix that. So I made a 112-page visual guide that shows you just that. Grab it here: [https://lnkd.in/drG7QwK6]

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

Most people think CSS is just colors, margins and making things look nice That’s how I used to see it too But the more I build, the more I realize CSS is actually way more powerful than people give it credit for Here are a few things I recently discovered You can apply logic in CSS. Using :has() you can style a parent element only if it contains something You can build fully responsive layouts with just one line using Grid. No media queries, no stress You can create fluid text that scales perfectly on any screen using clamp() You can detect user preferences like dark mode automatically You can make elements untouchable using pointer events none so clicks go through them You can create advanced visual effects like blend modes, almost like Photoshop but in CSS You can control aspect ratios without hacks. aspect ratio made things much cleaner You can even start doing scroll based animations without JavaScript The more I learn, the more I see the gap between just knowing CSS and actually understanding it CSS is not basic I just hadn’t explored it deeply enough #WebDevelopment #CSS #Frontend

🕰️ 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

🚀 7 CSS Features You’re Probably Not Using (But Should!) Level up your frontend skills with these powerful CSS features that can simplify your code and reduce JavaScript dependency: ✨ ":has()" – Style parent elements based on child conditions ✨ "clamp()" – Create responsive typography without media queries ✨ "scroll-snap" – Build smooth, swipeable layouts effortlessly ✨ "aspect-ratio" – Maintain perfect proportions with ease ✨ "subgrid" – Align nested layouts like a pro ✨ "@layer" – Manage CSS specificity cleanly ✨ "content-visibility" – Boost performance by skipping off-screen rendering 💡 Modern CSS is more powerful than ever — are you using it to its full potential? Which one are you excited to try in your next project? 👇 #FrontendDevelopment #CSS #WebDevelopment #ReactJS #UIUX #CodingTips #100DaysOfCode

YOUSSEFProject | Web Interfaces with HTML, CSS & JavaScript In this video, you’ll explore a practical graduation project, YOUSSEFProject , showcasing how HTML, CSS, and JavaScript come together to build a dynamic and engaging web interface. Perfect for students and developers eager to learn the fundamentals of professional web design, with real examples of layout, styling, and interactivity. #WebDevelopment #Frontend #HTML #CSS #JavaScript #YOUSSEFProject

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