The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

<a role="button" tabindex="0" ...>...</a>

One of the biggest problems in building fast loading websites is that a lot of times you’re stuck using third party assets that are — to be brutally frank — utter and total shite. Topping the list of…

A set of rules that will improve your typography 10x.

Use Traditional Point Sizes

Display     Double Canon    4.666
Heading 1   Canon   3.999
Heading 2   Double Great Primer 2.999
Heading 3   Double English  2.333
Heading 4   Double Pica 2.000
Heading 5   Paragon 1.666
Heading 6   English 1.166
Body        Pica    1.000
Fine Print 1    Small Pica  0.916
Fine Print 2    Bourgeois   0.750

Use Serif for Italic Text

Reduce Heading Spacing

The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the paragraph.

Use Thin Space

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect.

The HTML code is  . You can go even further with Hair Space  

Don’t Use Helvetica, Inter, & Roboto

From its start, Perl comes with most (Unix) core operating system trickery like forks, events and signals. So, you can implement real performing daemons for interesting tasks.

We will get into various features which show how straight-forward it is to implement an Apache-like webserver, with VirtualHosts, proxies, etc.

But we start by discussing many options how to set-up servers: processes, event-loops, and so on... before we reach to HTTP-servers processing requests.

Any::Daemon

• Use Apache as your front end ~30:00

A UI design case study to redesign an example user interface using logical rules or guidelines

Use space to group related elements
Be consistent
Ensure similar looking elements function similarly
Create a clear visual hierarchy
Remove unnecessary styles
Use colour purposefully
Ensure interface elements have a 3:1 contrast ratio
Ensure text has a 4.5:1 contrast ratio
Don’t rely on colour alone as an indicator
Use a single sans serif typeface
Use a typeface with taller lower case letters
Limit the use of uppercase
Use regular and bold font weights only
Avoid pure black text
Left align text
Use at least 1.5 line height for body text

Illustration placeholders for developers. Powered by Blush

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

A deep dive into CSS masking

• Use near-black and near-white instead of pure black and white
• Saturate your neutrals
• If you saturate your neutrals you should use warm or cool colours, not both
• Use high contrast for important elements
• Everything in your design should be deliberate
• Optical alignment is often better than mathematical alignment
• Lower letter spacing and line height with larger text. Raise them with smaller text
• Container borders should contrast with both the container and the background
• Everything should be aligned with something else
• Colours in a palette should have distinct brightness values
• Closer elements should be lighter
• Make drop shadow blur values double their distance values
• Keep container colours within brightness limits
• Make horizontal padding twice the vertical padding in buttons
• Nest corners properly
• Don’t put two hard divides next to each other

border-radius: 100vmax;

.full-width {
box-shadow: 0 0 0 100vmax var( --color );
clip-path: inset( 0 -100vmax );
}

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Scale: 1.25 Major Third

The hsl() and hsla() functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.

CSS has a lot of pretty rad and powerful features for managing image rendering these days. Let’s leverage some of these, like aspect-ratio, object-fit, and object-position for when we need to use a single image in many different contexts.

A collection of popular layouts and patterns made with CSS

When an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.

When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

built with 🌮 by sarah_edo

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

For the first 5 or 6 years of iPhone releases, screen sizes were pretty manageable. If your design worked on a 320x480 screen, you were golden. Now, it’s the wild west out there. Every year seems to come with at least another screen size 🙄…

Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques