Learn the basics of web design in 4 minutes with this interactive tutorial.

It’s got:

• Horizontal rulers at the top of the frame showing where (1) page actions, (2) page title, and (3) the search bar (if applicable) go
• Horizontal rulers at the bottom of the page showing where the tab bar goes
• Vertical rulers at (1) the standard iOS side margins and (2) the centerline
• A single-layer status bar – easy to delete or change to white, as needed
• A single layer device outline (including notch)

And it makes it dead simple to lay out apps in a “typical” iOS style.

Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects.

There are two kinds of shadows that occur when a light shines on an object, a drop shadow and a form shadow.

90 percent of the problems found in forms solved in a few hundred precious words.

• Use sentence case for labels, hints and error messages. It’s easier to read and spot nouns. Use a verb for button text because the user is doing something.

• Be tolerant of mistakes like extra spaces, dashes and slashes. Do the hard work so users don’t have to.

• Prefix the word “Error:” to the document’s title. It’s the first thing announced by screen readers when the page loads.

• Tell users what they need and how long the form will take to complete before they start.

A simple hand drawn HTML/CSS theme.

This stylesheet is heavily inspired by the Hand Drawn Vector UI Kit by Tony Thomas. I wanted a CSS theme that looked just like that, so I drew a bunch of similar components and got them working on the web.

https://medialoot.com/item/hand-drawn-vector-ui-kit/

HTML coverage using HTML Kitchen Sink.

https://github.com/dbox/html5-kitchen-sink/

The font is Short Stack.

In general, the attribute selector can target any attribute that's attached to an HTML element. By default, the selector is case sensitive and has a lower specificity than id's and classes.

CSS attribute ends with

Conversely to looking for matched at the start, we can also look at the very end of an attribute's value by useing the $ operator. We'd match something value but not value something. This is especially interesting because we know that files always have a certain extension and by passing the full name into a data-attribute, we'd be able to match elemenets that represent PDF documents like this a[href$="pdf"].

[data-attribute$="value"] {
  /* ... */
}

Create a set of lush, realistic CSS shadows.

https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/

I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!

Colors are always a tricky topic to address for many reasons. First, it’s a key pillar of a brand’s identity and has a clear impact on the perception of the brand by both the user and employees, and…

1. Clutter & Legacy
2. Simplify our designer’s journey
3. Accessibility

Easily make tints and shades that match the output of Chrome DevTools, PostCSS, and Sass.

Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.

Also checkboxes:
https://moderncss.dev/pure-css-custom-checkbox-style/

https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/

Information architect, author, and educator

Your Instagram feed may tell you that the line spacing should be 20% more than the font size. You may see that the difference should be as much as 50% as well.

There is no magic ratio. Text blocks will look different with different typefaces because of differences in Cap Height and X-height. While 120% is very likely to work for interface fonts — because they were created with a certain Cap to X-height ratio — the rest are problematic.

To solve the problem, you should not use a common index for all fonts, but an individual one, depending on its X-height. It is necessary to take a lowercase letter without extensions — for example, N — of the same point size as the typed text, and put it between two lines of text so that the upper boundary of the letter touches the typing line of the first line, and the lower boundary touches the upper height of the uppercase letter.

The benefit of a CSS framework is that it helps you create a number of eye-catching layouts without having to start from scratch.

1. For Simple Needs, Use Class-less
   Some examples of classless frameworks include sakura, watercss, holiday.css, bamboo css, attricss, and basic.css.

2. To Build on Mobile, Opt for Very Lightweight
   Examples of very lightweight CSS include pure, chota, and milligram.

3. For an Open-and-Go Solution, Use General Purpose
   Examples of general purpose CSS include bootstrap, primer, foundation, and base.

4. For Niche Needs, Opt for Specialized
   An example of a specialized CSS is bojler, which is used for developing lightweight and responsive email templates. It’s no secret that developing email templates is a pain.

5. Looking to Skip Javascript? Material Design is the Way to Go
   Material design CSS frameworks include newer versions of UI controls such as check boxes, text fields, column layouts ,and typography. MD is can be used across browsers by anyone who wants to create more portable and usable web pages.

6. For Greater Attention to Detail Utility-Based Frameworks Are Best
   Some examples of utility-based frameworks include tachyons and tailwind CSS.

7. For Web App Development and Mobile-First, Look to Base/Reset/Normalize
   Some great examples of base css frameworks include sanitize.css, ress, minireset.css, normalize.css, modern normalize, and natural selection.

8. For More Flexibility, Toolkits Work Well
   An example of a toolkit CSS is Bourbon. Bourbon aims for clarity, is pure Sass and lacks visual opinion.

9. Honorable Mentions Are Those with Stalled Development
   Some examples of stalled development frameworks include flexbox grid, semantic UI, materialize, neat, wing, and propeller.

Checkboxes are the worst
But I'm here to help make them better.

Here's an approach I use to always perfectly center them with the first line of text, no matter the text length or size

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Aesthetic-Usability Effect

Users often perceive aesthetically pleasing design as design that’s more usable.

We take a look at why the GOV.UK Design System changed the element it uses for inputting numbers, making it more accessible and easier to use.

Using <input type="text" inputmode="numeric" pattern="[0-9]*"> allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.

Meet the Extendabox-rule

The four strokes making up a box end at each intersection. But in our unconsciousness, every one of those lines draws out an imaginary line much further, through the entirety of your design.

A grid works the other way around: you define a set of columns, gutters, and rows to make up certain sections of your design, and you then position all of your objects onto that grid.

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

For the best results using Bulma, it's recommended to use the control element as often as possible.

<div class="field">
  <label class="label">Username</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small is-left">
      <i class="fas fa-user"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
  <p class="help is-success">This username is available</p>
</div>

Setting up your screen reader

For this guide, I’m going to use VoiceOver on Mac, a screen reader program that comes on new Mac computers, iPhones, and iPads. If you’re on Windows, you can use JAWS or NVDA. I’ll provide guiding questions and examples of good and bad interactions, so your OS shouldn’t matter.
The first step is to enable your screen reader and get familiar with its keyboard shortcuts.

1. Tab
2. Ctrl-Option- ← →
3. Ctrl-Option-Cmd-H
4. Ctrl–Option–Cmd–G
   Bonus: disabled buttons