Web

How to Add Living Photo Effects to Your Web Portfolio

Static portfolios blend together. Every designer's site has the same grid of JPEGs. We wanted something different for our own product pages at Inithou…

10 Things I Learned in My First Week of Learning HTML and CSS

10 Things I Learned in My First Week of Learning HTML and CSS A week ago, I opened my code editor with excitement and a little fear. I had heard that …

How to Keep Your Website Fast When Using Custom Fonts

Custom fonts look great, but they can easily slow down your website if they aren't optimized. Large font files increase loading times and cause unexpe…

CSS Animations & Transitions: A Visual Guide (2026)

CSS Animations & Transitions: A Visual Guide (2026) CSS animations and transitions are the secret sauce that makes interfaces feel alive. No JavaS…

Designing Lispy DSLs, part 1: SCSS (2012)

CSS box-shadow: The Complete Guide to Multi-Layer Shadows

The box-shadow property is one of the most underused tools in CSS. Most developers use it for a single subtle drop shadow and stop there — but the ful…

CSS 'overscroll-behavior' rubber banding: the right color behind the page when you pull it

I think you all know the overscroll rubber-banding effect: when you scroll past the end of a page, or pull past the top, the content bounces back. It …

Color Contrast Failures: The Number One Accessibility Issue and How to Fix It

Color contrast failures are the single most common accessibility issue on the web. The WebAIM Million study found them on 83.6% of home pages tested. …

Styling and Color

Prologue A while ago, I decided to develop a fully accessible main navigation component in React and write a series of articles documenting the steps …

Я устал от Electron, Tauri и Neutralino — и случайно сделал… лучше?

Webnative - фреймворк для разработки нативных приложений на языках веба с использованием нативных webview компонентов. Читать далее

How I made cssnano ~30% faster

Introduction In 2025 I started contributing to cssnano , the CSS minifier that runs at the end of a lot of build pipelines. If you use PostCSS, there'…

Как заставить AI-ассистента верстать премиальные интерфейсы вместо унылых серых шаблонов

Разбираем концепцию правил визуального вкуса (taste rules) и как вайбкодить фронтенд со вкусом. Настраиваем физику анимаций, цветоую палитру и правиль…

CSS: Unavoidable Bad Parts

Устаревшие CSS-техники, от которых уже можно отказаться

Привет, Хабр! В общении с коллегами я всё чаще замечаю, что многие не знают о последних возможностях CSS. Кто-то настолько занят повседневными задачам…

Fix: node-sass is end-of-life — migrate to Dart Sass in one command

node-sass has been officially deprecated since 2022 and is now end-of-life. It breaks on every new Node.js version upgrade with the error: "Node Sass …

CSS: Decoupling Behaviors

A press effect, shadow on rest, lifted on hover, depressed on active, is not central to buttons. It can be used on cards, image gallery photos, and ot…

I built a hardware-inspired UI component library in pure Vanilla JS — here's how

Most UI components feel like UI components. You click a toggle and it moves. Fine. It works. But it doesn't feel like anything. I wanted to change tha…

CSS if(): Inline Conditionals for Smarter Styling

Originally published on danholloran.me There's a moment every CSS developer knows: you want to tweak a single property based on some condition — a vie…

Как выжать из HTML/CSS динамику, или создание IRC клиента без JS

Когда возникает идея создать браузерный IRC-клиент без JavaScript, приходится сталкиваться с классической проблемой фронтенда: все насколько привыкли …

Best workflow for AI-generated UI mockup to real DOM web page?

I am prototyping a mobile web page from a high-fidelity AI-generated visual mockup. The visual style is complex: wooden tabletop, paper cards, fabric,…

How I Built an Age Calculator Using HTML, CSS and JavaScript

How I Built an Age Calculator Using HTML, CSS and JavaScript I recently built a simple Age Calculator web application using HTML, CSS and JavaScript. …

Why we still hand-code marketing sites in 2026 (GSAP, no page builder)

Page builders won. Wix, Squarespace, Webflow, and Framer cover most small business needs in an afternoon. So why would anyone still hand-code a market…

I Built a Complete AI Workspace UI Kit in Pure HTML — No React, No npm, No Build Tools

If you're tired of bloated React setups just to build a UI — this is for you. I built NexChat, a complete AI Workspace UI Kit using only HTML, Tailwin…

Frontend Status: свежий дайджест фронтенда и AI — 04.06.2026

Привет! Это 17 выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Страница отрисована, а интерфейс всё ещё «оживает»: отложе…

Premium micro-interactions in React 19 (without the jank)

There's a specific kind of bad animation I notice immediately: the count-up stat that stutters as it ticks, the progress bar that lags a frame behind …

Stop flattening your typography tokens: Preserving bound aliases in W3C exports

I was looking at a pull request last Monday. The marketing team had just rolled out a massive rebrand. We swapped our primary typeface from Inter to a…

HTML TAGS & CSS PROPERTIES

What are HTML Tags? HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building b…

HTML&CSS basic Portfolio Website

Introduction This is a basic portfolio website built with HTML and CSS. It includes a header with navigation links, sections for About Me, Projects, a…

Why I stopped fighting the browser

A while ago I was about to install another dropdown library. I'd already added one for modals and one for tooltips. Somewhere between npm install and …

I replaced GSAP DrawSVG with 4.4 KB (and it uses native CSS where it can)

The setup You know the pattern. You have an SVG — a logo, a path, a hand-drawn illustration — and you want it to draw itself as the user scrolls. It l…