Mary Ojoblog.maryojo.me·Feb 2, 202510 useful CSS tools for Developers1. CSS layout generator: https://layout.bradwoods.io/ Useful for: Anyone who wants to level up their CSS layout skills (flexbox and grids) This website is all about helping developers get better at CSS layouts in a fun, hands-on way. It’s like a play...CSS
Ashish sahweb-deve.hashnode.dev·Jan 29, 2025CSS Grid Basics: Creating Complex Layouts with EaseWhen designing modern web layouts, CSS provides two powerful tools: Flexbox and CSS Grid. While Flexbox is great for one-dimensional layouts (either row or column), CSS Grid is best suited for two-dimensional layouts (both rows and columns). In this ...ChaiCode
Ender Wigginsjinno.hashnode.dev·Jan 23, 2025Jinno — IDE extension I made to preview React componentsI built Jinno because I often found myself juggling between my code editor and browser to preview React components during development. It was frustrating and time-consuming, breaking my workflow and focus. With Jinno, I can now see live previews of R...React
Manish Mandalcss-specificity-alg.hashnode.dev·Jan 22, 2025Understanding CSS Specificity Algorithms: Mastering the Art of Style PrioritizationCSS (Cascading Style Sheets) is a cornerstone technology for web development, enabling developers to style web pages with precision and creativity. However, as projects grow in complexity, managing conflicting styles becomes a challenge. This is wher...10 likesChaiCode
Payal Porwalcodeswithpayal.hashnode.dev·Jan 7, 2025Understanding CSS Pseudo-Classes and Pseudo-Elements: A Detailed GuideCSS pseudo-classes and pseudo-elements are advanced selectors that allow you to style specific parts or states of elements without modifying the HTML structure. In this guide, we'll dive deep into these concepts, with examples and a complete UI examp...52 readsCSS
Kelvin Okuroemixylophone.hashnode.dev·Jan 6, 2025A Sneak Peek at the View Transition APIPre-requisite Basic understanding of HTML, CSS, and Javascript. Good grasp of the Document Object Model (DOM). An Updated Browser, preferably Chrome. Introduction Creating smooth transitions on the web is a complex task, and calling it challengi...Modern Web DevFrontend Development
Payal Porwalcodeswithpayal.hashnode.dev·Jan 3, 2025Media Query example for the Web Page in CSSHTML and CSS for the Web Page HTML (index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Web Page</title> <link rel="styles...CSS
Shivam barthwalshivamcoder.hashnode.dev·Jan 2, 2025Styling with CSS: Building Beautiful and Responsive DesignsCascading Style Sheets (CSS) is what transforms plain HTML into visually engaging and responsive web pages. It controls the layout, colors, fonts, and responsiveness of a webpage. In this post, we’ll cover key CSS concepts, including the box model, F...Frontend Unlocked: From Basics to BrillianceCSS
Payal Porwalcodeswithpayal.hashnode.dev·Dec 31, 2024Comprehensive Guide to Media Queries in CSSMedia queries are a cornerstone of responsive web design. They enable developers to create websites that adapt to different screen sizes, resolutions, and device capabilities. In this article, we'll explore every aspect of media queries in detail, ma...30 readsmedia queries
Ibrahim Bellodacodenexus.hashnode.dev·Dec 30, 2024Master Eye Tracking on Your Website/Software Using CSSIntroduction: In this tutorial, you’ll learn how to create a fun and interactive eye-tracking animation using HTML, CSS, and a touch of creativity. This project features two buttons designed to look like eyes, complete with pupils that follow the mov...11 likes·39 readsCSS