# W3Tweaks

> Free frontend development tutorials covering CSS, JavaScript, HTML, and AI-powered frontend — with copy-ready code, live demos, and honest comparisons of the tools developers actually use.

W3Tweaks publishes deep-dive tutorials for frontend developers who want to ship better code. Every article includes a working live demo, runnable code samples, and links to authoritative references. Recent focus areas include AI integration (OpenAI API, Ollama, chatbot widgets), modern CSS (container queries, view transitions, skeleton loading), and prompt engineering for developers.

## Featured tutorials

- [Promise.try & Promise.withResolvers: Cleaner Async (Live Demos)](https://www.w3tweaks.com/javascript/javascript-promise-try-withresolvers/) — Two small ES2026 promise utilities fix two long-standing annoyances. Promise.try runs any function — sync or async — and funnels a synchron…
- [The Viewport Meta Tag — Mobile-First, Safe Areas & dvh](https://www.w3tweaks.com/html/viewport-meta-tag-mobile-first/) — One line of HTML decides whether your site renders at phone width or as a zoomed-out desktop page nobody can read. This guide covers the vi…
- [CSS color-mix(): Native Color Blending That Retires Your Sass Pipeline](https://www.w3tweaks.com/css/css-color-mix-explained/) — color-mix() blends two colors natively, at runtime, in the color space you choose — replacing Sass lighten(), darken(), mix(), rgba() and e…
- [Array.fromAsync: Async Iterables to Arrays (With Live Race Demo)](https://www.w3tweaks.com/javascript/javascript-array-fromasync/) — Array.fromAsync turns any async iterable — an async generator, a stream, a paginated API, an OpenAI/Anthropic streaming response — into an…
- [CSS Subgrid: Nested Grids That Actually Align (The Card Fix)](https://www.w3tweaks.com/css/css-subgrid-explained/) — For a decade, aligning content across sibling cards meant min-height hacks or JavaScript equalizers — nested grids can't see each other's t…
- [Web App Manifest — Make Your Site an Installable PWA](https://www.w3tweaks.com/html/web-app-manifest-installable-pwa/) — A single JSON file turns your website into an installable app with its own icon, splash screen, and standalone window. This guide covers th…
- [Resource Hints — preload, prefetch, preconnect & Speculation Rules](https://www.w3tweaks.com/html/resource-hints-preload-prefetch-preconnect/) — One line of HTML can tell the browser to resolve a DNS lookup, warm a connection, or fetch a critical file before the parser even finds it.…
- [JavaScript Iterator Helpers: Lazy map/filter/take (With Live Tracer)](https://www.w3tweaks.com/javascript/javascript-iterator-helpers/) — Chaining .map().filter() on an array processes every element and builds a throwaway array at each step. Iterator helpers do it lazily — the…

## Categories

- [CSS (85 tutorials)](https://www.w3tweaks.com/css/) — Modern CSS techniques — flexbox, grid, container queries, animations, custom properties, and copy-ready components.
- [JavaScript (58 tutorials)](https://www.w3tweaks.com/javascript/) — JavaScript tutorials covering ES features, DOM, async, the Fetch API, and AI-powered frontend patterns.
- [HTML (30 tutorials)](https://www.w3tweaks.com/html/) — Semantic HTML, forms, media tags, and accessibility patterns for the modern web.
- [Guide (31 tutorials)](https://www.w3tweaks.com/guide/) — Step-by-step frontend guides, debugging tips, AI tool comparisons, and developer workflow advice.

## Full article index

### CSS

- [403 Forbidden Page: SVG eye illustration and CSS animation](https://www.w3tweaks.com/css/403-forbidden-page-svg-eye-illustration-and-css-animation/)
- [500 Error: Log File / Stack Trace Animation](https://www.w3tweaks.com/css/500-error-log-file-stack-trace-animation/)
- [Animated Stacked Slider with jQuery and Slick.js plugin](https://www.w3tweaks.com/css/animated-stacked-slider-with-jquery-and-slick-js-plugin/)
- [24 Best Free CSS Responsive Infographics](https://www.w3tweaks.com/css/best-free-css-responsive-infographics/)
- [Bootstrap Year Calendar](https://www.w3tweaks.com/css/bootstrap-year-calendar/)
- [Contact form Validation using Bootstrap 3](https://www.w3tweaks.com/css/contact-form-validation-using-bootstrap-3/)
- [CSS Advent Calendar](https://www.w3tweaks.com/css/css-advent-calendar/)
- [13 Free HTML & CSS Dashboard Template Designs](https://www.w3tweaks.com/css/css-and-html-dashboard-templates/)
- [CSS Animated Modal Window](https://www.w3tweaks.com/css/css-animated-modal-window/)
- [CSS aspect-ratio Property: Complete Guide With Live Visualiser](https://www.w3tweaks.com/css/css-aspect-ratio-explained/)
- [42 Cool CSS Avatars For Better UI](https://www.w3tweaks.com/css/css-avatars/)
- [CSS ::before and ::after Pseudo-Elements Explained](https://www.w3tweaks.com/css/css-before-after-pseudo-elements-explained/)
- [12 CSS Best practices](https://www.w3tweaks.com/css/css-best-practices/)
- [CSS Button Flip Animation](https://www.w3tweaks.com/css/css-button-flip-animation/)
- [59 Free CSS Buttons](https://www.w3tweaks.com/css/css-buttons/)
- [CSS calc() Explained: Dynamic Values Without JS](https://www.w3tweaks.com/css/css-calc-explained/)
- [131 CSS Cards Collections: Free Code + Demos](https://www.w3tweaks.com/css/css-cards/)
- [CSS @layer: Cascade Layers That End the Specificity Wars](https://www.w3tweaks.com/css/css-cascade-layers-explained/)
- [CSS Cascading text effects using Splitting.js and ScrollOut](https://www.w3tweaks.com/css/css-cascading-text-effects-using-splitting-js-and-scrollout/)
- [CSS clamp(): Fluid Typography, Spacing & Layouts in One Line](https://www.w3tweaks.com/css/css-clamp-explained/)
- [CSS clip-path: Create Any Shape — The Complete Guide](https://www.w3tweaks.com/css/css-clip-path-explained/)
- [CSS color-mix(): Native Color Blending That Retires Your Sass Pipeline](https://www.w3tweaks.com/css/css-color-mix-explained/)
- [CSS Container Queries: Components That Respond to Their Space](https://www.w3tweaks.com/css/css-container-queries-explained/)
- [CSS Dark Mode: prefers-color-scheme, light-dark, OKLCH](https://www.w3tweaks.com/css/css-dark-mode-prefers-color-scheme/)
- [13 Cool CSS Emoji Rating](https://www.w3tweaks.com/css/css-emoji-rating/)
- [CSS filter & backdrop-filter: The Complete Visual Guide](https://www.w3tweaks.com/css/css-filter-backdrop-filter/)
- [34 CSS Flip Cards](https://www.w3tweaks.com/css/css-flip-cards/)
- [CSS :focus-visible: Keyboard Focus, WCAG & inert](https://www.w3tweaks.com/css/css-focus-visible-explained/)
- [CSS @font-face: The Complete Guide to Loading Custom Fonts Right](https://www.w3tweaks.com/css/css-font-face-explained/)
- [CSS :has() Selector: The Parent Selector, Explained With Live Demos](https://www.w3tweaks.com/css/css-has-selector-explained/)
- [Get 28 CSS loaders](https://www.w3tweaks.com/css/css-loaders-spinners/)
- [10 CSS Logo Designs](https://www.w3tweaks.com/css/css-logo-designs/)
- [CSS mask: Fade, Reveal & Shape Elements (Complete Guide)](https://www.w3tweaks.com/css/css-mask-property-explained/)
- [CSS Masonry Grid Layouts: An Overview](https://www.w3tweaks.com/css/css-masonry-grid-layouts-an-overview/)
- [CSS mix-blend-mode: Blend Text, Images & Colors Like Photoshop](https://www.w3tweaks.com/css/css-mix-blend-mode-explained/)
- [Native CSS Nesting: Sass Syntax With No Build Step (And One Big Trap)](https://www.w3tweaks.com/css/css-nesting-explained/)
- [CSS Neumorphic Toggle](https://www.w3tweaks.com/css/css-neumorphic-toggle/)
- [CSS object-fit & object-position: Stop Stretching](https://www.w3tweaks.com/css/css-object-fit-object-position/)
- [CSS pointer-events: inert, Click-Through, disabled & SVG](https://www.w3tweaks.com/css/css-pointer-events-explained/)
- [CSS position: sticky — How It Really Works](https://www.w3tweaks.com/css/css-position-sticky-explained/)
- [CSS Positioning: A Beginner's Guide to Mastering the Position Property](https://www.w3tweaks.com/css/css-positioning/)
- [CSS Potato 500 Error page](https://www.w3tweaks.com/css/css-potato-500-error-page/)
- [8 CSS Re-sizable Panes](https://www.w3tweaks.com/css/css-re-sizable-panes/)
- [CSS Scroll-Driven Animations: scroll(), view() & Zero JavaScript](https://www.w3tweaks.com/css/css-scroll-driven-animations-explained/)
- [CSS scroll-snap: Build a CSS Carousel Without JavaScript](https://www.w3tweaks.com/css/css-scroll-snap-explained/)
- [CSS Selectors You're Not Using (But Should Be)](https://www.w3tweaks.com/css/css-selectors-guide/)
- [11 CSS Shopping Cart UI/UX](https://www.w3tweaks.com/css/css-shopping-cart-ui-ux/)
- [CSS Skeleton Loading Screens with Shimmer Animation](https://www.w3tweaks.com/css/css-skeleton-loading-screens/)
- [40 CSS Slideshows](https://www.w3tweaks.com/css/css-slideshows/)
- [CSS Specificity Explained: The Complete Cascade Guide](https://www.w3tweaks.com/css/css-specificity-explained/)
- [CSS Subgrid: Nested Grids That Actually Align (The Card Fix)](https://www.w3tweaks.com/css/css-subgrid-explained/)
- [CSS @supports: Feature Detection & Progressive Enhancement](https://www.w3tweaks.com/css/css-supports-feature-detection/)
- [49 CSS Tables](https://www.w3tweaks.com/css/css-tables/)
- [19 CSS Thumbnails](https://www.w3tweaks.com/css/css-thumbnails/)
- [10 Free CSS Toast/Notification](https://www.w3tweaks.com/css/css-toast-notification/)
- [CSS Transform Origin illustration Example](https://www.w3tweaks.com/css/css-transform-origin-illustration-example/)
- [CSS Transition: The Basics Explained](https://www.w3tweaks.com/css/css-transition-the-basics-explained/)
- [CSS View Transitions API: Animate Pages Without Libraries](https://www.w3tweaks.com/css/css-view-transitions-api/)
- [CSS z-index & Stacking Contexts Explained](https://www.w3tweaks.com/css/css-z-index-stacking-contexts-explained/)
- [CSS3 3D Button Effects](https://www.w3tweaks.com/css/css3-3d-button-effects/)
- [Desktop diagonal media block using CSS and HTML](https://www.w3tweaks.com/css/desktop-diagonal-media-block-using-css-and-html/)
- [Easy customizable simple CSS buttons](https://www.w3tweaks.com/css/easy-customizable-simple-css-buttons/)
- [Flexbox responsive calendar](https://www.w3tweaks.com/css/flexbox-responsive-calendar/)
- [36 Free CSS 3D Text Effects](https://www.w3tweaks.com/css/free-css-3d-text-effects/)
- [25 Free CSS Search Bars with Expanding Functionalities](https://www.w3tweaks.com/css/free-css-expanding-search-bar/)
- [24 Free CSS Tab Bars](https://www.w3tweaks.com/css/free-css-tab-bars/)
- [Google-style Loading Animation using css keyframers](https://www.w3tweaks.com/css/google-style-loading-animation-using-css-keyframers/)
- [67 CSS Gallery](https://www.w3tweaks.com/css/hand-picked-css-gallery/)
- [15 CSS Sliders](https://www.w3tweaks.com/css/hand-picked-free-css-sliders-collections/)
- [19 Handy Credit Card UI/UX for Web Designers](https://www.w3tweaks.com/css/handy-credit-card-ui-ux-for-web-designers/)
- [20 HTML & CSS Pricing Tables](https://www.w3tweaks.com/css/html-and-css-pricing-tables/)
- [HTML Audio Player](https://www.w3tweaks.com/css/html-audio-player/)
- [Interactive Calendar App](https://www.w3tweaks.com/css/interactive-calendar-app/)
- [Interactive HTML5 Resume template](https://www.w3tweaks.com/css/interactive-html5-resume-template/)
- [47 jQuery Gallery plugins](https://www.w3tweaks.com/css/jquery-gallery-plugins/)
- [38 CSS Calendars](https://www.w3tweaks.com/css/list-css-calendars/)
- [29 Hand-Picked CSS Carousels](https://www.w3tweaks.com/css/list-css-carousels/)
- [43 Hand-Picked CSS Clocks](https://www.w3tweaks.com/css/list-css-clocks/)
- [76 Hand Picked CSS Music Players](https://www.w3tweaks.com/css/list-music-players/)
- [Mastering CSS Hover Effects With Demo](https://www.w3tweaks.com/css/mastering-css-hover-effects-with-demo/)
- [React and Redux Simple Multi-page Form](https://www.w3tweaks.com/css/react-and-redux-simple-multi-page-form/)
- [Simple calendar with notes panel](https://www.w3tweaks.com/css/simple-calendar-with-notes-panel/)
- [Simple Music Player with previous and next song options](https://www.w3tweaks.com/css/simple-music-player-with-previous-and-next-song-options/)
- [Smooth Wyre Payment Like loader using pure CSS](https://www.w3tweaks.com/css/smooth-wyre-payment-like-loader-using-pure-css/)
- [Tab switching using pure CSS](https://www.w3tweaks.com/css/tab-switching-using-pure-css/)

### JavaScript

- [Build a Chatbot Widget with HTML, CSS & JavaScript](https://www.w3tweaks.com/javascript/add-chatbot-widget-website-html-css-javascript/)
- [Angularjs and JSON list infinite scroll](https://www.w3tweaks.com/javascript/angularjs-and-json-list-infinite-scroll/)
- [Angularjs - How to use or inject the custom filter in to Angular js controller?](https://www.w3tweaks.com/javascript/angularjs-how-to-use-or-inject-the-custom-filter-in-to-angular-js-controller/)
- [AngularJS with CanvasJS Charts](https://www.w3tweaks.com/javascript/angularjs-with-canvasjs-charts/)
- [Build an AI Color Palette Generator with JavaScript](https://www.w3tweaks.com/javascript/build-ai-color-palette-generator-javascript/)
- [Build a JavaScript AI Agent From Scratch (No Framework)](https://www.w3tweaks.com/javascript/build-javascript-ai-agent/)
- [Build a RAG App in the Browser with JavaScript](https://www.w3tweaks.com/javascript/build-rag-app-browser-javascript/)
- [9 D3.js Patterns & Templates](https://www.w3tweaks.com/javascript/d3-js-patterns-and-templates/)
- [Simple Dynamic Menus from JSON REST API using backbone.js](https://www.w3tweaks.com/javascript/dynamic-menus-from-json-rest-api-using-backbone-js/)
- [Enable and Disable drop down box using angularjs ngDisabled](https://www.w3tweaks.com/javascript/enable-and-disable-drop-down-box-using-angularjs-ng-disabled/)
- [Google ads in Angular js app](https://www.w3tweaks.com/javascript/google-ads-in-angular-js-app/)
- [Build a ChatGPT-Style Streaming Text Effect in JavaScript](https://www.w3tweaks.com/javascript/how-to-build-chatgpt-streaming-text-effect-javascript/)
- [Call the OpenAI API from Vanilla JavaScript (No Backend)](https://www.w3tweaks.com/javascript/how-to-call-openai-api-vanilla-javascript/)
- [Implement Internationalization (i18n) using Backbone.js and handlebars.js](https://www.w3tweaks.com/javascript/implement-internationalization-i18n-using-backbone-js-and-handlebars-js/)
- [Implementing Syntax Highlighter using Codemirror framework](https://www.w3tweaks.com/javascript/implementing-syntax-highlighter-using-codemirror-framework/)
- [Iterate javascript object keys using angularjs ngRepeat](https://www.w3tweaks.com/javascript/iterate-javascript-object-key-using-angularjs-ngrepeat/)
- [AbortController: Cancel Fetch Properly (With Live Demo)](https://www.w3tweaks.com/javascript/javascript-abortcontroller-cancel-fetch/)
- [AI That Reads PDFs in JavaScript — Three Strategies](https://www.w3tweaks.com/javascript/javascript-ai-read-pdf/)
- [JavaScript API Call: fetch, Axios, TanStack Query & ky](https://www.w3tweaks.com/javascript/javascript-api-call-fetch-axios-tanstack-query/)
- [Array.fromAsync: Async Iterables to Arrays (With Live Race Demo)](https://www.w3tweaks.com/javascript/javascript-array-fromasync/)
- [JavaScript async/await Not Working? 12 Mistakes That Break Your Code](https://www.w3tweaks.com/javascript/javascript-async-await-not-working/)
- [JavaScript Closures: Every Use Case Explained (Live Demos)](https://www.w3tweaks.com/javascript/javascript-closures-explained/)
- [JavaScript Conditional Statements: A Guide to Writing Better Code](https://www.w3tweaks.com/javascript/javascript-conditional-statements/)
- [JavaScript Debounce vs Throttle: Real Difference With Live Numbers](https://www.w3tweaks.com/javascript/javascript-debounce-vs-throttle/)
- [JavaScript Event Loop Explained — Visual Interactive Demo](https://www.w3tweaks.com/javascript/javascript-event-loop-explained/)
- [IndexedDB Tutorial: idb, Cursors, Bulk Insert & Sync](https://www.w3tweaks.com/javascript/javascript-indexeddb-complete-guide/)
- [JavaScript Iterator Helpers: Lazy map/filter/take (With Live Tracer)](https://www.w3tweaks.com/javascript/javascript-iterator-helpers/)
- [JavaScript Memory Leak Fix: 6 Patterns + DevTools Walkthrough](https://www.w3tweaks.com/javascript/javascript-memory-leak-fix/)
- [Polling vs WebSockets vs SSE: The Real-Time Guide](https://www.w3tweaks.com/javascript/javascript-polling-websockets-sse/)
- [Promise.all vs allSettled vs race vs any: Complete Guide](https://www.w3tweaks.com/javascript/javascript-promise-all-allsettled-race-any/)
- [Promise.try & Promise.withResolvers: Cleaner Async (Live Demos)](https://www.w3tweaks.com/javascript/javascript-promise-try-withresolvers/)
- [requestAnimationFrame: Smooth 60fps Animation (With Live FPS Demo)](https://www.w3tweaks.com/javascript/javascript-requestanimationframe-60fps/)
- [JavaScript Short Circuiting: What It Is and How To Use It](https://www.w3tweaks.com/javascript/javascript-short-circuiting-what-it-is-and-how-to-use-it/)
- [25 JavaScript String Methods](https://www.w3tweaks.com/javascript/javascript-string-methods/)
- [structuredClone: JavaScript Deep Copy (Stop JSON.parse)](https://www.w3tweaks.com/javascript/javascript-structuredclone-deep-copy/)
- [The Temporal API: Finally Fixing JavaScript Dates (With Live Playground)](https://www.w3tweaks.com/javascript/javascript-temporal-api/)
- [Why this Is Undefined in JavaScript: The 4 Binding Rules](https://www.w3tweaks.com/javascript/javascript-this-is-undefined/)
- [Web Speech API: Build a Voice Command UI in JavaScript](https://www.w3tweaks.com/javascript/javascript-web-speech-api-voice-command-ui/)
- [JavaScript Web Workers: Keep the UI Smooth While Running Heavy Code](https://www.w3tweaks.com/javascript/javascript-web-workers/)
- [JavaScript Primitive and Non-Primitive Data Types](https://www.w3tweaks.com/javascript/js-primitive-and-non-primitive-data-types/)
- [Learn how to extract phone numbers from string in JavaScript](https://www.w3tweaks.com/javascript/learn-how-to-extract-phone-numbers-from-string-in-javascript/)
- [24 Most important JavaScript methods](https://www.w3tweaks.com/javascript/most-important-javascript-methods/)
- [Navigator.sendBeacon() is great method in JavaScript](https://www.w3tweaks.com/javascript/navigator-sendbeacon-method-in-javascript/)
- [null and undefined check in javascript](https://www.w3tweaks.com/javascript/null-and-undefined-check-in-javascript/)
- [Open Dynamic Youtube Videos in Fancybox or Modal window or Lightbox](https://www.w3tweaks.com/javascript/open-dynamic-youtube-videos-in-fancybox-or-modal-window-or-lightbox/)
- [OpenAI Function Calling in JavaScript (Vanilla JS Guide)](https://www.w3tweaks.com/javascript/openai-function-calling-javascript/)
- [Resize div box horizontally using jquery draggable](https://www.w3tweaks.com/javascript/resize-div-box-horizontally-using-jquery-draggable/)
- [Resize div box vertically using jquery draggable](https://www.w3tweaks.com/javascript/resize-div-box-vertically-using-jquery-draggable/)
- [Run AI Locally with Ollama and JavaScript](https://www.w3tweaks.com/javascript/run-ai-locally-ollama-javascript/)
- [Select all and Deselect all checkboxes in angularjs](https://www.w3tweaks.com/javascript/select-all-and-deselect-all-checkboxes-in-angularjs/)
- [Service Worker Offline First: Complete Tutorial With Simulator](https://www.w3tweaks.com/javascript/service-workers-offline-first/)
- [Top javascript Array Methods with Examples](https://www.w3tweaks.com/javascript/top-javascript-array-methods-with-examples/)
- [Tryit Editor for HTML CSS JavaScript using CodeMirror](https://www.w3tweaks.com/javascript/tryit-editor-for-html-css-javascript-using-codemirror/)
- [Tutorial about how to Create Jobs portal using Indeed API](https://www.w3tweaks.com/javascript/tutorial-about-how-create-jobs-portal-using-indeed-api/)
- [Update and create the iframe element with content using JavaScript](https://www.w3tweaks.com/javascript/update-and-create-the-iframe-with-content-using-javascript/)
- [Vercel AI SDK in Plain JavaScript (No Next.js)](https://www.w3tweaks.com/javascript/vercel-ai-sdk-javascript/)
- [WebLLM: Run LLMs in the Browser with JavaScript](https://www.w3tweaks.com/javascript/webllm-run-llm-browser-javascript/)
- [YouTube Data API in JavaScript: List Channel Videos](https://www.w3tweaks.com/javascript/youtube-data-api-javascript-list-channel-videos/)

### HTML

- [Accessible Forms — Complex Fields for Screen Readers](https://www.w3tweaks.com/html/accessible-forms-complex-fields-screen-readers/)
- [ARIA Roles — The Practical Guide Developers Actually Need](https://www.w3tweaks.com/html/aria-roles-practical-guide/)
- [The Benefits of Using Multi Step Forms in HTML](https://www.w3tweaks.com/html/benefits-of-using-multi-step-forms-in-html/)
- [The Clipboard API — Copy, Paste, Images & the Safari Trap](https://www.w3tweaks.com/html/clipboard-api-copy-paste-images/)
- [6 Cool Things You Can Do With HTML](https://www.w3tweaks.com/html/cool-things-you-can-do-with-html/)
- [The File System Access API — Save to Disk, Directories & OPFS](https://www.w3tweaks.com/html/file-system-access-api-save-to-disk/)
- [Chapter 2: How to create HTML files?](https://www.w3tweaks.com/html/how-to-create-html-files-and-how-to-run-the-html-pages-in-the-browsers/)
- [HTML contenteditable: Rich Text Editor Without Libraries](https://www.w3tweaks.com/html/html-contenteditable-rich-text-editor/)
- [HTML datalist — Native Autocomplete & Search UI Guide](https://www.w3tweaks.com/html/html-datalist-native-autocomplete-search-ui/)
- [HTML details & summary — Beyond Basic Accordions](https://www.w3tweaks.com/html/html-details-summary-beyond-basic-accordions/)
- [The HTML dialog Element: Complete Guide](https://www.w3tweaks.com/html/html-dialog-element-complete-guide/)
- [Chapter 3: List all HTML common file extensions of web pages](https://www.w3tweaks.com/html/html-file-extensions/)
- [HTML Drag and Drop File Upload: The Complete Guide](https://www.w3tweaks.com/html/html-file-upload-drag-drop/)
- [Every HTML Input Type — Real-World Use Cases & Mobile Keyboard Guide](https://www.w3tweaks.com/html/html-input-types-complete-guide/)
- [HTML Keyboard Navigation & Focus Management: Complete Guide](https://www.w3tweaks.com/html/html-keyboard-navigation-focus-management/)
- [HTML media tags](https://www.w3tweaks.com/html/html-media-tags/)
- [The HTML Popover API — Complete Guide (No Libraries)](https://www.w3tweaks.com/html/html-popover-api-complete-guide/)
- [HTML5 Video Custom Controls: Media API, Captions & PiP](https://www.w3tweaks.com/html/html-video-custom-controls-media-api/)
- [HTML5 Form Validation Without JavaScript — The Complete Guide](https://www.w3tweaks.com/html/html5-form-validation-without-javascript/)
- [Intersection Observer API: Scroll, Lazy Load & Scrollspy](https://www.w3tweaks.com/html/intersection-observer-api-scroll-detection/)
- [Meta Tags for SEO & Social — Open Graph, Twitter Cards & SERP](https://www.w3tweaks.com/html/meta-tags-seo-open-graph-twitter-cards/)
- [41 Free Multi Step HTML Forms](https://www.w3tweaks.com/html/multi-step-html-forms/)
- [Native Lazy Loading: When loading=lazy Silently Fails](https://www.w3tweaks.com/html/native-lazy-loading-when-it-works-silently-fails/)
- [Resource Hints — preload, prefetch, preconnect & Speculation Rules](https://www.w3tweaks.com/html/resource-hints-preload-prefetch-preconnect/)
- [Responsive Images & Modern Formats: AVIF, WebP, JXL Guide](https://www.w3tweaks.com/html/responsive-images-modern-formats-avif-webp-picture-srcset-sizes/)
- [Schema Markup & Structured Data — JSON-LD That Actually Works](https://www.w3tweaks.com/html/schema-markup-structured-data-json-ld/)
- [Semantic HTML Guide — Every Element and What You're Getting Wrong](https://www.w3tweaks.com/html/semantic-html-guide-every-element/)
- [The Viewport Meta Tag — Mobile-First, Safe Areas & dvh](https://www.w3tweaks.com/html/viewport-meta-tag-mobile-first/)
- [Web App Manifest — Make Your Site an Installable PWA](https://www.w3tweaks.com/html/web-app-manifest-installable-pwa/)
- [Web Share API: navigator.share, Files & Fallbacks](https://www.w3tweaks.com/html/web-share-api-native-sharing-files-fallbacks/)

### Guide

- [How to Add .env to .gitignore: The Complete Security Guide](https://www.w3tweaks.com/guide/add-env-to-gitignore-tutorial/)
- [Android WebView application Prompt | Android Studio](https://www.w3tweaks.com/guide/android-webview-application-prompt/)
- [How to Center iFrame Video in HTML?](https://www.w3tweaks.com/guide/center-iframe-video-in-html/)
- [How to Check if an Object Is Empty in Javascript](https://www.w3tweaks.com/guide/check-empty-object-javascript/)
- [How to Comment Out Multiple Lines in JavaScript](https://www.w3tweaks.com/guide/comment-multiple-lines-javascript/)
- [How to Compile SCSS to CSS: A Comprehensive Guide](https://www.w3tweaks.com/guide/compile-scss-to-css-a-comprehensive-guide/)
- [How to Convert String to Date in Javascript in dd-mmm-yyyy Format](https://www.w3tweaks.com/guide/convert-string-to-date-in-javascript/)
- [What Is the Correct CSS Syntax for Making All the P Elements Bold?](https://www.w3tweaks.com/guide/css-syntax-for-making-all-the-p-elements-bold/)
- [What is the difference between www and W3C?](https://www.w3tweaks.com/guide/difference-between-www-and-w3c/)
- [GitHub Copilot vs Claude vs ChatGPT: Which Writes Better CSS?](https://www.w3tweaks.com/guide/github-copilot-vs-claude-vs-chatgpt-css/)
- [Go Developer Roadmap 2020](https://www.w3tweaks.com/guide/go-developer-roadmap-2020/)
- [How to Create a Basic HTML Document: A Step-by-Step Guide](https://www.w3tweaks.com/guide/how-to-create-a-basic-html-document/)
- [How to declare variables in JavaScript?](https://www.w3tweaks.com/guide/how-to-declare-variables-in-javascript/)
- [How to Disable Javascript in Tor](https://www.w3tweaks.com/guide/how-to-disable-javascript-in-tor/)
- [How to Install Bootstrap CSS on a Website](https://www.w3tweaks.com/guide/how-to-install-bootstrap-css-on-a-website/)
- [How to Make a Square in CSS?](https://www.w3tweaks.com/guide/how-to-make-a-square-in-css/)
- [How to Override Bootstrap CSS](https://www.w3tweaks.com/guide/how-to-override-bootstrap-css/)
- [How to Read a CSV File in JavaScript](https://www.w3tweaks.com/guide/how-to-read-a-csv-file-in-javascript/)
- [How to Select & Style Multiple Classes in CSS Explained?](https://www.w3tweaks.com/guide/how-to-select-multiple-classes-in-css/)
- [How to Separate Cards Stuck Together in CSS?](https://www.w3tweaks.com/guide/how-to-separate-cards-stuck-together-in-css/)
- [How to create a sticky header in CSS and JavaScript?](https://www.w3tweaks.com/guide/how-to-sticky-headers-html-css-javascript/)
- [How to write a function in JavaScript?](https://www.w3tweaks.com/guide/how-to-write-a-function-in-javascript/)
- [Does Internet Explorer 10 Support HTML5?](https://www.w3tweaks.com/guide/ie10-html5-support-compatibility/)
- [Why Multi Page Form HTML is Better than Single Page Forms](https://www.w3tweaks.com/guide/multi-page-form-html-better-than-single-page/)
- [How to Play Tic Tac Toe (TTT) Without CSS: A Simple Guide](https://www.w3tweaks.com/guide/play-tic-tac-toe-without-css-a-simple-guide/)
- [How to Position an Image in CSS?](https://www.w3tweaks.com/guide/positioning-images-in-css-guide/)
- [Prompt Engineering for Frontend Developers](https://www.w3tweaks.com/guide/prompt-engineering-frontend-developers/)
- [Re-sign an Android APK Manually for an application](https://www.w3tweaks.com/guide/re-sign-an-android-apk-manually-for-an-application/)
- [Search YouTube Videos using YouTube V3 API using Jquery Ajax call](https://www.w3tweaks.com/guide/search-youtube-videos-using-youtube-v3-api-using-jquery-ajax-call/)
- [What Does $ Mean in Javascript?](https://www.w3tweaks.com/guide/what-does-dollar-mean-in-javascript/)
- [YouTube API autocomplete search suggestion using Jquery JSON request](https://www.w3tweaks.com/guide/youtube-api-autocomplete-search-suggestion-using-jquery-json-request/)

## Site meta

- Sitemap: https://www.w3tweaks.com/sitemap-index.xml
- RSS feed: https://www.w3tweaks.com/rss.xml
- Search: https://www.w3tweaks.com/search/
- Feedback / Q&A: https://github.com/vimaltweaks/w3tweaks-feedback

## Archived categories

- https://www.w3tweaks.com/php/ — older content, no longer actively maintained