. 2 min read
Pricing pages for 2026: Layouts, structure, and decision-making design
A curated look at pricing page layouts for 2026, focusing on structure, hierarchy, comparison systems, and visual patterns that help users decide without friction.
Blog
. 3 min read
Stunning hero sections for 2026: Layouts, patterns, and visual direction
Explore stunning hero sections for 2026, featuring bold layouts, modern composition patterns, typography-led designs, and visual directions shaping the next wave of web design.
. 4 min read
40 reliable free & open-source type libraries for serious work
A no-nonsense guide to professional-grade free and open-source font libraries. Legally safe, production-ready type for web, branding, editorial design, and digital products.
. 5 min read
I built and rebuilt 24 Astro themes without reusable components. It cost me a year of my life.
I built Astro themes with Tailwind CSS without reusable components. After a year, I rewrote 24 themes to introduce shared components and upgrade to Tailwind CSS v4. Here’s the real cost of scaling without systems.
. 5 min read
How I broke my SEO and slowly fixed it
My SEO dropped from 1k daily visitors to under 500 after a refactor, canonical mistakes, cross-posting errors, and a messy subdomain setup. This is what went wrong, what I fixed, and what I won’t repeat.
. 6 min read
Best Coding Fonts for 2026, top Monospaced Fonts for Developers
A comprehensive, developer-focused guide to the best monospaced coding fonts for 2026, including modern favorites, timeless classics, and premium options optimized for long coding sessions.
. 4 min read
Best Monospaced Google Fonts for 2026 (New Fonts from 2025)
A practical, developer-focused guide to the best monospaced Google Fonts released in 2025, optimized for coding, data-heavy interfaces, and technical products in 2026.
. 6 min read
Best New Sans-Serif Google Fonts for 2026 (Released in 2025)
An in-depth, practical guide to the best new sans-serif Google Fonts released in 2025, analyzed for real-world UI design, SaaS products, and long-term use in 2026.
. 4 min read
Best New Serif Google Fonts for 2026 (Released in 2025)
An in-depth, practical guide to the best new serif Google Fonts released in 2025, evaluated for modern UI design, content platforms, and long-term digital products in 2026.
. 7 min read
How to build a full-screen navigation with Tailwind CSS and JavaScript
Learn how to create a smooth, full-screen overlay navigation menu using Tailwind CSS for styling and vanilla JavaScript for state management.
. 7 min read
How to use Geist & Geist mono stylistic sets and OpenType features in CSS, Tailwind CSS variables and Figma
A comprehensive guide to unlocking Geist font's OpenType features, stylistic sets, and tuning for UI, docs, dashboards, and code with CSS and Tailwind.
. 11 min read
How to use Inter stylistic sets and OpenType features in CSS & Tailwind CSS variables
A practical guide to using Inter font's OpenType features, stylistic sets (ss01–ss08), and character variants (cv01–cv13) in CSS for better web typography.
. 8 min read
Astro Content Collections: Real-World schemas you can steal
A production-ready Astro content config used in real client projects: blog posts, services, projects, properties, agents, legal pages, testimonials, FAQs, and recursive navigation.
. 3 min read
How to build a character limit textarea with Tailwind CSS and Alpine.js
Guide writers with a live character counter and automatic ring warning when they exceed your threshold, built with Tailwind CSS and Alpine.js.
. 6 min read
How to build a timeline with side numbers using Tailwind CSS
Design a product release timeline that shows side-aligned dates, a vertical rail, and gradient cards using pure Tailwind CSS utilities.
. 11 min read
How to build a responsive pricing table with Tailwind CSS and Alpine.js for pricing toggle.
Recreate a three-tier enterprise pricing table with a billing toggle, grouped feature lists, and a desktop-only layout using Tailwind CSS plus a sprinkle of Alpine.js.
. 3 min read
How to build a spellcheck-enabled textarea with Tailwind CSS and Alpine.js
Add an Alpine-powered spellcheck toggle to a Tailwind CSS textarea so writers can choose whether the browser should flag typos.
. 8 min read
How to build a team grid section with a cta card using Tailwind CSS
Craft a responsive team grid that mixes profile cards with a central spotlight block, complete with aspect-ratio images and inline social links—all in Tailwind CSS.
. 3 min read
How to build an emoji picker textarea with Tailwind CSS and Alpine.js
Enhance any message box with a simple emoji picker powered by Alpine.js state and Tailwind CSS styling—no external libraries required.
. 3 min read
How to build an OTP input group with Tailwind CSS and Alpine.js
Create a polished 6-digit OTP input that uses Alpine.js for caret simulation, validation, and focus styling—all wrapped in accessible Tailwind CSS markup.
. 6 min read
How to create nested checkboxes with Alpine.js
Build a nested notification preferences control with Alpine.js and Tailwind CSS, including select-all, group toggles, and accurate indeterminate states.
. 8 min read
How to build a full-width mega menu with Tailwind CSS and Alpine.js
Craft a responsive, full-width mega menu using Tailwind CSS and Alpine.js with teleportation, backdrop, and dynamic alignment for precise positioning.
. 5 min read
How to build a responsive alternating timeline with Tailwind CSS
Create a clean, alternating vertical timeline using Tailwind CSS grid and flex utilities — no JavaScript required.
. 5 min read
How to build a responsive four‑step onboarding section with Tailwind CSS
Compose a clean, four‑step onboarding section with mobile and desktop separators, number badges, and elegant cards — all with Tailwind utilities.
. 10 min read
How to build a split-screen sign-in with an overlay card using Tailwind CSS and Alpine.js
Build a responsive split-screen sign-in layout with Tailwind CSS and Alpine.js, including an absolute overlay card on top of the hero image.
. 9 min read
How to build an Alpine.js testimonial carousel with right‑edge controls
Build an accessible, horizontally scrolling testimonial carousel with Tailwind CSS and Alpine.js, and place the navigation buttons at the right edge of the layout.
. 5 min read
How to build a responsive Bento grid with Tailwind CSS
A step-by-step guide to building a modern, responsive Bento grid layout using Tailwind CSS with column and row spans that adapt across breakpoints. Copy-and-paste examples included.
. 6 min read
How to build a Tailwind CSS + Alpine.js testimonial carousel (snap scroll)
Create a responsive testimonial carousel using Tailwind CSS and Alpine.js with snap scrolling, keyboard navigation, and smooth Prev/Next controls. Includes component-level snippets and a full example.
. 9 min read
How to build a Tailwind CSS + Alpine.js gallery with lightbox
Create a responsive image gallery using Tailwind CSS and Alpine.js with a keyboard-accessible lightbox, arrows, and dot indicators. Copy‑paste example included.
. 7 min read
How to build a scrollable table with a sticky header using Tailwind CSS
Create a vertically scrollable table with a sticky header using Tailwind CSS. Includes alignment tips, zebra striping, and a full working demo.
. 6 min read
How to build a selectable table with checkboxes using Alpine.js and Tailwind CSS
Build a table with row selection, a select-all checkbox, and live counts using Alpine.js and Tailwind CSS. Includes indeterminate state for partial selection.
. 9 min read
How to build a sorting table with images using Alpine.js and Tailwind CSS
Learn how to create a sortable table with avatars, flags, and dynamic sorting using Alpine.js and Tailwind CSS.
. 9 min read
Astro vs Gatsby in 2025: A Comprehensive Comparison
A comprehensive comparison of Astro and Gatsby in 2025, covering features, performance, use cases, and which to choose for your project.
. 8 min read
Astro vs WordPress in 2025: A Comprehensive Comparison
A comprehensive comparison of Astro and WordPress in 2025, covering features, performance, use cases, and which to choose for your project.
. 7 min read
Astro vs Next.js in 2025: A Comprehensive Comparison
A comprehensive comparison of Astro and Next.js in 2025, covering features, performance, use cases, and which to choose for your project.
. 15 min read
Tailwind CSS hidden utilities you should know (Part 2)
Another batch of obscure Tailwind CSS v4 helpers—from subgrid layouts and data variants to logical spacing and selection styling—complete with use cases and snippets.
. 23 min read
Tailwind CSS hidden utilities classes you should know.(Part 1)
51 Tailwind CSS v4 utilities classes. From container queries to @starting-style—with practical explanations and copy-ready snippets.
. 4 min read
Understanding the rel='noopener noreferrer' Attribute
Learn what the rel='noopener noreferrer' attribute does in HTML links and why it's important for security and privacy.
. 5 min read
How to create a grouped checkbox tree with Alpine.js and Tailwind CSS
Learn how to build an interactive grouped checkbox tree component using Alpine.js for state management and Tailwind CSS for styling, perfect for notification preferences.
. 4 min read
How to create an update notification toast with Alpine.js and Tailwind CSS
Learn how to build an interactive update notification toast using Alpine.js for state management and Tailwind CSS for styling, perfect for app updates.
. 6 min read
How to build an Alpine.js onboarding modal with Tailwind CSS
Craft a multi-step welcome tour that works great on keyboard and touch.
. 8 min read
How to build an Alpine.js testimonial carousel with Tailwind CSS
Create a looping testimonial carousel powered by Alpine.js interactions and Tailwind CSS styling, complete with focus management and keyboard controls.
. 10 min read
How to build a responsive sidebar with Tailwind CSS and Alpine.js
Step-by-step walkthrough building an accessible, responsive sidebar using Tailwind utilities and a tiny Alpine.js state object.
. 6 min read
How to build a modern product page with Alpine.js and Tailwind CSS
A hands-on walkthrough for building a responsive product page with Alpine.js and Tailwind CSS. Includes image gallery, color and size selectors, and accessible details sections.
. 10 min read
How to build a data table with sorting and pagination using Alpine.js
Create a fully functional data table with column sorting, pagination controls, and responsive design using Alpine.js and Tailwind CSS
. 10 min read
How to build an interactive image gallery with lightbox using Alpine.js and Tailwind CSS
Create a fully accessible image gallery with lightbox modal, keyboard navigation, and smooth transitions using Alpine.js and Tailwind CSS.
. 7 min read
How to create an interactive feature section with tabs using Alpine JS and Tailwind
Create an interactive feature grid with Alpine.js tabs, Tailwind CSS styling, and accessible state management.
. 19 min read
How to create a multistep command bar with Tailwind CSS and Alpinejs
Build a three-step automation command bar with Alpine.js, including filtering, keyboard control, and dynamic forms
. 3 min read
How to create a notification with Tailwind CSS and Alpinejs
Learn how to create a notification with Tailwind CSS and Alpinejs, including how to use Alpine.js directives to add and remove notifications dynamically
. 7 min read
How to Use the `aspect-ratio` Utility in Tailwind CSS
A practical guide to using the aspect-ratio utility in Tailwind CSS for responsive images, videos, and containers. Learn best practices and real-world examples.
. 3 min read
Using `astro-seo` to Simplify SEO in Astro Projects
Learn how to install and configure the `astro-seo` component in your Astro site—streamline titles, meta tags, Open Graph and Twitter cards
. 16 min read
AI code editors and assistants for 2025
From Cursor to Gemini, here are the top AI coding tools in 2025 and what makes each one stand out.
. 4 min read
How to use PagesCMS with Astro
Learn how to integrate PagesCMS with Astro for a complete headless CMS solution. Step-by-step guide with code examples.
. 5 min read
15+ Tailwind CSS one liners that replace CSS rules
Think Tailwind CSS is just bloated markup? These 15+ utility classes will change your mind. See how single classes replace entire CSS blocks.
. 4 min read
Things I have to remind myself as a developer
The path of a developer is rarely a straight line. Here are a few reflections on the messy, frustrating, and ultimately rewarding parts of the craft.
. 6 min read
Tailwind CSS: Easy Styling for Websites
Learn how to use Tailwind CSS v4 for simple, direct styling. This guide covers the basics, making websites look good on any device, dark mode, and clever styling tricks. Perfect for building modern websites easily.
. 5 min read
A guide to Tailwind CSS backgrounds.
A tutorial on background attachments, image control, gradient text, clipping effects, and professional design patterns
. 2 min read
How to use Obsidian to write your Astro content (zero scripts)
Learn how to use Obsidian to write your Astro markdown projects using symbolic links for a powerful dual workflow that keeps your writing space clean and content perfectly synced.
. 3 min read
How to Use Gradients in Tailwind CSS v4
A concise guide to implementing stunning linear, radial, and conic gradients in Tailwind CSS v4 with practical code examples.
. 6 min read
How I created and published a VS Code theme
A hands-on walkthrough of creating a custom VS Code theme using Yo Code, customizing it, and publishing it on the Marketplace.
. 5 min read
23 GitHub commands every developer should know
A practical guide to 23 essential Git and GitHub commands for everyday development. Learn how to clone, commit, push, merge, and more.
. 2 min read
How to use GitHub admonitions ( also known as GitHub Alerts or Callouts )
Learn how to use GitHub's callout boxes like [!NOTE], [!WARNING], and [!TIP] to improve clarity in issues, PRs, and wikis. Copy-paste friendly guide included.
. 4 min read
Container Queries in Tailwind CSS
Learn how Tailwind CSS v4 supports container queries (`@container`) for component-level responsiveness using utility classes.
. 18 min read
Tailwind CSS v4.1 Cheat Sheet
A complete cheat sheet for Tailwind CSS v4.1, including layout, spacing, typography, flexbox, grid, and all core utility classes. Perfect for fast lookup and reference.
. 3 min read
Mastering Tailwind CSS `nth-child` for Dynamic Styling
Unlock powerful dynamic styling in Tailwind CSS using the `nth-child` selector. Learn how to target specific elements, create patterns, and build flexible UIs with practical examples.
. 6 min read
Dynamic Layouts: Master calc() with Astro & Tailwind CSS
Unlock responsive web design with CSS calc() in Astro and Tailwind CSS. Learn to create dynamic layouts, adaptive components, and fluid UIs with practical examples and advanced techniques.
. 5 min read
Git tags tutorial: complete guide to version control tagging
Master Git tags for better version control. Learn to create, manage, and use Git tags for releases, deployments, and project milestones. Includes commands, best practices, and real examples.
. 4 min read
Building a a multi-theme toggle with Astro and Tailwind CSS v4
Create a sleek theme switcher with default, dark, and accent modes using CSS custom properties and localStorage
. 7 min read
How to create a three-state theme toggle with JavaScript: light, dark, and system preference
Learn how to create a comprehensive theme toggle that respects user preferences with three states: light, dark, and system detection.
. 6 min read
How to add a claude help button to your website with JavaScript
Learn how to add a smart Claude button that opens Claude.ai with your page info already filled in. Simple JavaScript code for better user support.
. 6 min read
How to add an ask ChatGPT button to your documentation with JavaScript
Learn how to add a smart Ask ChatGPT button that automatically opens ChatGPT with context about your current page.
. 7 min read
How to Convert HTML to Markdown with JavaScript for Astro and Tailwind CSS Projects
Learn how to build a JavaScript HTML-to-Markdown converter perfect for Astro websites and Tailwind CSS projects. Copy webpage content as clean Markdown for AI workflows, documentation, and content migration.
. 3 min read
How to upgrade an Astro JS project from Tailwind CSS v3 to Tailwind CSS v4
A quick guide on how to upgrade an your Astro JS project from Tailwind CSS v3 to Tailwind CSS v4 ( Alpha ).
. 2 min read
Mastering tailwind CSS for perfect screen fit.
Explore Tailwind CSS utility classes for responsive design. Learn how svh, lvh, and dvh can ensure your site looks great on any device.
. 3 min read
Creating a complex responsive grid layout with Tailwind CSS
Perfect for the so called bento grids
. 4 min read
Mastering Footer Placement: Tailwind CSS and Beyond
Discover how to ensure your website's footer stays exactly where it should be, at the bottom, with Tailwind CSS techniques and additional strategies for impeccable web design.
. 2 min read
Astro.js Key Concepts and Performance Optimization Techniques
Explore how Astro.js and Tailwind CSS revolutionize web development with unmatched performance optimizations. This guide dives into practical strategies for leveraging these powerful tools to build faster, more responsive, and SEO-friendly websites. Perfect for developers seeking to elevate their projects with cutting-edge technology.
. 2 min read
A Comprehensive Guide to Astro.js and Tailwind CSS
Dive into the world of modern web development with our step-by-step guide on Astro.js and Tailwind CSS. From setting up your environment to deploying advanced, performance-optimized websites, this tutorial covers everything you need to create stunning, responsive web designs. Perfect for beginners and seasoned developers alike, learn how to harness the full potential of Astro.js and Tailwind CSS to elevate your web projects.
. 2 min read
Exploring the Hidden Gems: Uncommon Semantic HTML Tags
Dive into the world of HTML with our guide to some of the most uncommon semantic tags. From <details> to <mark>, learn how these hidden gems can improve accessibility, enhance document structure, and bring clarity to your web content.
. 3 min read
Learn how to center a div with Tailwind CSS
Learn how to center a div in Tailwind CSS using flex, grid, and margin utilities, with responsive patterns and tips to avoid common pitfalls.
. 3 min read
Lear how to center a div with CSS
Center a div with CSS using flexbox, grid, margin auto, and absolute positioning—horizontal, vertical, and responsive patterns with clear examples.
. 4 min read
The power of HTML semantic tags
Discover how semantic HTML boosts structure, accessibility, and SEO—use meaningful tags, headings, and landmarks to create cleaner, maintainable markup.