Stockio
Web DesignWeb DevelopmentTechToolsResourcesAdvertise

Web Design articles

UI DesignUX & ResearchTypography & ColourIcons & IllustrationDesign SystemsMotion & AnimationBranding & BusinessAI for Design & UX

Web Development articles

HTML & CSSJavaScript & FrameworksBackend & APIsPerformance & SEODevOps & DeploymentAccessibilityDev Tools & AI CodingAI Builders & APIs

Tech articles

Smartphones & TabletsLaptops & PCsSmart Home & GadgetsHome Wi-Fi & InternetOnline Security & ScamsStreaming & GamingWeb Hosting & ServersVPN & Online Privacy

Free tools, resources & practical articles

Everything you need to design and build better websites

Stockio is a free hub of in-browser tools, hand-picked resources and plain-English articles for people who design and build for the web — UI, UX, type, code, AI, hosting and more. No sign-up, no paywall, nothing to install.

Browse the tools Read the articlesBrowse resources

Web Design

UI, UX, type, colour, icons, design systems, motion, branding and AI for design.

All Web Design articles
AI for Design & UX

AI UX Writing: Buttons, Errors and Empty States

Draft clearer buttons, errors and empty states with AI, then verify every promise against product behaviour, accessibility requirements and real interface constraints.

Inside this article
  • Build a state brief before drafting
  • Generate alternatives with explicit trade-offs
  • Make buttons describe the actual action
  • Write errors and empty states around recovery
Maya LindqvistMaya LindqvistRead the article
UI Design

Empty State Design for First Use, No Results and Errors

Design empty states that explain what happened and offer the right next step, with distinct patterns for first use, filtered results, and failed requests.

Maya LindqvistMaya Lindqvist
Typography & Colour

Tabular Numbers in CSS: Align Prices, Timers and Data

Choose tabular, proportional, lining, and oldstyle numerals for the right reading task. Apply CSS numeric features without making every number monospace.

Jonah WeissJonah Weiss
UI Design

Sidebar UI Design: Width, Grouping and Collapsed Rails

Design application sidebars that stay legible as products grow, with practical guidance for section grouping, selected items, collapsed rails, and narrow screens.

Theo OkaforTheo Okafor

Free Web Design tools

Built-in tools that run right in your browser — no sign-up, nothing to install.

All built-in tools
Tailwind paletteTurn one brand colour into a full 50–950 Tailwind scale with ready-to-paste config.Design & UIPopularGradientsDesign linear and mesh-style gradients with angle and stop controls.Design & UIFreeSVG path scalerScale, translate and round SVG path data to fit any viewBox.Design & UIFreeCSS gridBuild grid layouts with columns, rows, gaps and spans, then copy clean CSS.Design & UIFreeAspect ratioWork out missing dimensions, aspect-ratio CSS and container max-widths for every breakpoint.Design & UIFreeBorder radiusShape organic blobs and pill buttons with 8-value border-radius controls.Design & UIFree

Web Development

HTML & CSS, TypeScript, React, APIs, performance, AI coding and builders.

All Web Development articles
AI Builders & APIs

LLM Cost Optimization: Token Budgets, Caching and Models

Set realistic LLM budgets using measured token usage, safe caching and task-based model routing, then track cost per successful workflow rather than cost per request.

Inside this article
  • Build a budget from actual workloads
  • Bound tokens before optimising prices
  • Distinguish prompt caching from answer caching
  • Route models by demonstrated task quality
Chidi NwosuChidi NwosuRead the article
HTML & CSS

Inline SVG vs img: Choosing How to Embed Icons

Choose between inline SVG, external SVG images, and data URLs by comparing styling access, reuse, naming, delivery boundaries, and practical icon requirements.

Marcus BellMarcus Bell
AI Builders & APIs

10 Best Open-Source LLMs You Can Run Locally

Explore ten widely used open-weight AI models for local computers and private servers, with practical notes on strengths, hardware demands, licensing, and choosing a fit.

Chidi NwosuChidi Nwosu
Accessibility

10 Best Accessibility Browser Extensions for Testing

Compare ten browser add-ons for spotting accessibility issues while you browse or build, from automated page scans to heading and contrast checks, plus advice for turning findings into fixes.

Theo OkaforTheo Okafor

Free Web Development tools

Built-in tools that run right in your browser — no sign-up, nothing to install.

All built-in tools
PX to REMConvert between px, rem, em and percentages using any root font size.FrontendFreeJSON to TSPaste any JSON and get typed TypeScript interfaces instantly.FrontendPopularCSS to TailwindConvert common CSS declarations into their Tailwind utility classes.FrontendFreeFavicon tagsGenerate the complete set of favicon, touch icon and manifest tags for your site.FrontendFreeBase64 imagesConvert images to Base64 data URIs and back, with size overhead shown.FrontendFreeFlexbox playgroundToggle flex direction, alignment, wrap and gap on live boxes and copy the CSS.FrontendFree

Tech

Phones, laptops, smart home, Wi-Fi, online security, streaming and gaming — plus hosting and VPNs.

All Tech articles
Streaming & Gaming

Cloud Gaming Explained: What You Need to Play

Cloud gaming runs games on remote computers and streams them to your screen. Find out what connection, controller, device, and subscription you actually need.

Inside this article
  • Understand what the subscription provides
  • Check your device and controller
  • Prioritize stability over headline speed
  • Run a realistic trial before committing
Aiko TanakaAiko TanakaRead the article
Streaming & Gaming

How to Cut the Cord and Ditch Cable TV

Replace cable without losing the shows you love. Build a realistic channel list, check your internet, and test your setup before canceling your old service.

Marcus BellMarcus Bell
Web Hosting & Servers

Shared vs Managed Cloud Hosting for Niche Publishers

Compare shared and managed cloud hosting using measured traffic, operational responsibilities, and migration tests to choose a sustainable publishing setup.

Ravi DesaiRavi Desai
Smartphones & Tablets

How to Clean a Phone Screen and Charging Port Safely

Clean fingerprints and surface dirt without damaging your phone. Learn what to use on the screen, what to keep out of charging ports, and when to get help.

Daniel KimDaniel Kim

Resources

Free icons, fonts, UI kits, illustrations, photos and templates worth bookmarking.

More resources
ScreelyTurn screenshots into clean browser-window mockups instantly, no account needed.Stock photos, video & mockupsFreeBootstrapThe original responsive front-end toolkit, still going strong with a mature grid and components.UI kits & componentsMITTremorReact components for charts and dashboards, styled with Tailwind and ready for real data.UI kits & componentsApache 2.0FontjoyGenerate balanced font pairings with deep learning, then lock and shuffle until it clicks.FontsFreeVecteezy Free VideosThousands of free stock video clips and motion backgrounds.Stock photos, video & mockupsFree with attributionCarbon Design SystemIBM's open-source system with code, Figma kits and deep guidance on patterns.UI kits & componentsApache 2.0

Put your product in front of builders

Reach web developers, designers and tech enthusiasts while they work. Sponsor a tool, a topic or the whole site — clean placements, no pop-ups, no tracking pixels.

Sponsor / Advertise