html
Home 🍹 HTMLcat
HTML Can Do That
HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.
You don’t know HTML Lists
This second installment in the "You don't know HTML" series is going to be all about the ways that we put collections of things together
How the DOM affects crawling, rendering, and indexing
Learn how the DOM structures your page, how JavaScript can change it during rendering, and how to verify what Google actually sees.
Getting Started With The Popover API
What happens if you rebuild a single tooltip using the browser’s native model without the aid of a library? The Popover API turns tooltips from something you simulate into something the browser actually understands. Opening and closing, keyboard interaction, Escape handling, and…
You can make up HTML tags: (Maurycy's blog)
Introducing CSS Grid Lanes
It’s here, the future of masonry layouts in CSS!
What I learnt about making websites by reading two thousand web pages
How to write thoughtful HTML, new-to-me features of CSS, and some quirks and relics I found while building my personal web archive.
Masonry: Things You Won’t Need A Library For Anymore
CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.
A Few Things About the Anchor Element’s href You Might Not Have Known
Writing about the big beautiful mess that is making things for the world wide web.
Color Names — HTML Color Codes
HTML color names rule. Modern browsers support 140 HTML color names which we've listed here along with their Hex color codes and RGB values.
Plain Vanilla
An explainer for doing web development using only vanilla techniques.
Lesser Known Uses Of Better Known Attributes — Smashing Magazine
HTML attributes are like little instructions that we add to the markup of elements to make them do certain things or behave in certain ways. For example, most of us know that the `target` attribute with a value of `_blank` opens the link in a new tab or window. But did you know…
HTML Over The Wire
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
Image Effects With HTML Canvas
HTML Canvas is an element I don't see very often in the wild, but when I do, there's always something...
Y2Z/monolith
⬛️ CLI tool for saving complete web pages as a single HTML file - Y2Z/monolith
Semantic HTML cheat sheet
There are hundreds of semantic tags available to help describe the meaning of your HTML documents....
I keep making things out of checkboxes
Something happened earlier this year where I got on a run making checkbox animations and just couldn’t stop.
Converting an Image into ASCII Art Masterpiece
While browsing Stack Overflow, I generally browse one or two links from the sidebar 'Hot Network Questions'. It brings me to several interesting topics, not necessarily related to development. And this time, I found an interesting post: how do ASCII art image conversion…
Please Make Your Table Headings Sticky
Hotwire Modals in Ruby on Rails with Stimulus and Turbo Frames
In the first part of our series, we'll explore two Hotwire methods to make modals accessible in your Rails application.
How to Draw with JavaScript on an HTML Canvas Element – Beginner's Guide
There are many ways to code graphics for the web. You can create art with CSS. You can code an SVG image as part of an HTML file. Or you can generate graphics from JavaScript using the Canvas API. In this article, we'll explore how to use JavaScript ...
HTML CheatSheet: Master the Most Commonly Used HTML Tags
Master the most commonly used HTML tags with this comprehensive cheatsheet. This comprehensive HTML cheatsheet covers the most commonly used HTML tags you need to know, from structural tags to text formatting tags to image and link tags. It's the perfect resource for web…
The Path To Awesome CSS Easing With The linear() Function
With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what…
CSS | Trigonometry Circle
Hello Frondend developers, today i will show you how to create a circular element layout with css...
7 Advanced CSS Selectors You Should Know
CSS is indispensable when we talk about web design and development. Basic selectors like classes (.)...
Adding a URL class
Hi all!
How to do stunning 3D with pure HTML/CSS
HTML and CSS may be the bedrock of 2D web design, but hidden within their virtual toolbox are the...
What is a Tooltip? Definition, Types, and Best Practices
Time to define tooltips and share best practices. Explore tooltip types and its examples in our blog post coming from a prototyping tool.
I'm betting on HTML
AI Use Disclaimer: I wrote this post and then GPT-4 fixed my grammer and spelling
10 Cool CodePen Demos (July 2023)
A collection of 10 cool and exciting front-end demos shared on CodePen during July 2023
How to Create a Beautiful Particle Animation with HTML Canvas
Live Demo / Download -- In this tutorial, we will utilize the power of HTML canvas to...
Design of complex tables
Instant colour fill with HTML Canvas – SOS
TLDR: Demo is at , code is at . The Problem When building a website or app using HTML Canvas, it’s often a requirement to support a flood fill. That is, when the user chooses a colour and cli…
Chris James - HTMX is the Future
Chris James, London - Software Engineer
10 HTML Attributes that Make Things a Lot Easier
With over a 100 HTML attributes available, it's almost impossible to remember them all. While we are...
Custom Data Attributes in HTML: A Guide to `data-*`
Custom Data Attributes in HTML: A Guide to data-* When developing web applications,...
The importance of rel=canonical for content writers
The subject of canonical reference has been touched thousand times. But since some content writers...
A Comprehensive Guide to CSS Shorthand Properties
CSS shorthand is a group of CSS properties that allow you to write multiple CSS properties in a...
Mastering Semantic HTML: A Guide to Using All 16 Semantic Tags with Example
Semantic HTML refers to the use of HTML elements that convey meaning beyond just the presentation of...
Using the HTML Geolocation API to display a users location on a map
In this tutorial we’ll be using the HTML Geolocation API to display the current location of a user on...
Articles — Smashing Magazine
Smashing Magazine — front-end, UX and design for front-end engineers and designers
Putting Gears In Motion: Animating Cars With HTML And SVG
SVG `` provides a way to define how an element moves along a motion path. In this article, Paul Scanlon shares an idea of how to use it by animating race cars in an infinite loop as easy as one-two-three!
Google's John Mueller: Move JavaScript Below The Head Element
John Mueller from Google advises placing JavaScript code underneath the HTML element to ensure that search engines can clearly understand your website.
An Ultimate Guide On Sizing, Spacing, Grids And Layout In Web And UI/UX Des
A grid is like invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together. Grids help designers to build better products by tying different design elements together to achieve effective…
InnerHTML vs. InnerText vs. TextContent: A Guide | Built In
InnerHTML, innerText and textContent can each help to manipulate JavaScript code, but they contain subtle differences. Here’s what to know
UTM Parameters Best Practices & Intro | Rafflecopter
Do you know where your site traffic comes from? Which of your campaigns drives the most traffic? Let's investigate UTM parameters best practices.
6 alternatives for div tag you need to know and use
Using more specific HTML elements instead of the tag can help improve the readability,...
ericchiang/pup: Parsing HTML at the command line
Parsing HTML at the command line.