This article discusses some basic HTML guidelines for creating better forms. It deals with HTML tags & attributes that can help user to fill the form better.

A three-column layout where items are aligned to left, center and right can be created with CSS flex, and using justify-content property.

Giving user the preference of choosing a dark or light mode has become a very popular feature of operating systems. Webpages can also be shown in dark or light theme depending on the mode chosen in the device settings.

Variable fonts is a new font technology that allows a single font file to store multiple variations of the font. Variable fonts are going to bring a major change in web design.

When a fixed-position modal dialog is opened, scrollbars on the page can be removed by dynamically setting overflow:hidden CSS for the 〈body〉tag.

Pull-to-refresh feature on mobile browsers that refreshes the page, can be disabled using the overscroll-behaviour CSS property.

Click to Call functionality in web pages can be implemented using the tel: schema inside a hyperlink. Clicking on such a link would open the Dialer App on the device.

The theme color of the address bar in mobile browsers can be changed using the theme-color meta tag. Any CSS color value can be set as its content.

:placeholder-shown is a selector for <input> and <textarea> elements who are currently showing placeholder text. This can be be used in forms to highlight empty text input.

The HTML inputmode attribute can be used for textboxes in a webpage. This can effectively customize the onscreen keyboard taking in the mind the data to be filled for the textbox - telephone, email, numbers etc.

Styling first letter in a block of text is a good way of increasing user attention span. It can be done with the ::first-letter CSS pseudo-element.

When your copy content goes long, it is a good idea to make it visually attractive. The CSS pseudo-element ::first-line can be used to style the first line appearing within an element.

If your application involves showing a lot of images then probably it makes sense to add WebP support. Using the HTML <picture> tag is the most robust solution to display WebP images with fallback.

Popularly used in admin pages, a page with a left sidebar to hold menu options, and a section to hold the main content is one simple design that looks good.

A SVG format logo will look far better than a jpeg or png format. SVGs bring high quality at a small file size.

Favico.js is a Javascript plugin that animates the website's favicon to inform user of new notifications.

While the user is on a different browser tab, you can get his attention by animating the favicon of the website.

Lightboxes are one of the common things implemented in websites, so animating them is a good idea to impress your visitors.

Moving / animating an element along a circular path can be achieved by animating the CSS transform property.