Web Design Basics

Getting an accessible SVG mostly comes down to deciding what the graphic is for before you touch any markup. A graphic that carries meaning…

To animate SVG with CSS, paste the SVG inline in the page, write a @keyframes rule, and hook it to a shape with animation-name…

A mockup is the version of a design where the thing finally looks like itself. Static, high fidelity, nothing clickable. Colors, type, and spacing…

Tap something on a screen and a chain of events fires off that you never see. The interface is the part you do see.…

Installing a website sounds like a category error until you’ve done it. You land on a page, a small icon appears in the address…

XML stands for Extensible Markup Language. It lets you define your own tags to describe data, which is the main thing separating it from…

A page where one section changes while everything around it stays put is doing something specific underneath. The browser sent a request, got data…

Every browser already knows how to run JavaScript. No plugin, no download, nothing extra installed on the visitor’s machine. That one fact explains most…

CSS is a stylesheet language. It controls how a web page looks on screen, in print, or through assistive technology, and it sits apart…

An SVG label with only an x value set usually lands somewhere you didn’t plan. Characters in SVG get placed by anchor points and…

Usability has a formal definition, and it is narrower than most people assume. A product counts as usable when specified users can hit specified…

Empty area on a page is not leftover area. Someone put it there, and it is doing work: steering the eye toward what matters…

Most SVG editors draw about equally well. What actually splits them is whether you can open the markup when a file misbehaves on a…

GSAP stopped charging for its SVG plugins on April 30, 2025, when Webflow made it free for all users, including the former Club plugins…

Web design principles govern how layout, structure, and visual elements fit together so a page communicates clearly and works for the people using it.…

The phrase gets used loosely. Some teams mean a research process with testing wired into every stage. Plenty of others just mean an interface…

Open a feed app on a weak connection and you get a screen full of gray rectangles for a second or two. Bars where…

Most headers scroll away. A sticky one doesn’t. It stays parked inside the browser viewport while the rest of the page keeps moving underneath…

An SVG file is a text document written in XML. It stores shapes, paths and text instead of pixels, so it scales to any…

Most SVG edits are small ones. A hex color gets swapped, a label gets corrected, a width goes from 24 to 32. None of…

A blurry PNG usually traces back to the export width, not the conversion itself. Converting SVG to PNG means rendering the vector at a…

SVG and PNG differ in what the file actually holds. Open an SVG and you find XML text that describes shapes and paths, which…

Converting a PNG to SVG means tracing it. A vector editor or online tool reads the pixels and redraws the shapes as paths, which…

Nothing inside a canvas animation is a real object. The browser holds one bitmap, JavaScript wipes it and paints it again on every frame,…

A keyframe saves what an element looks like at one moment of an animation. You write them inside an @keyframes rule, and the browser…

Most sites still ship type that got sized once in a desktop mockup, then patched with a couple of media queries after it broke…

Build the phone layout first. Everything wider gets handled after that, through CSS rules that add back what the small version deliberately left out.…

Tap a like button and the heart fills in. Pull a list down and a spinner drops in at the top. Both of those…