Latest UI-UX Tutorials and How-To's

html
HTML Guidelines for Creating Better Forms
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.
July 19, 2020

css
How to Align Column DIVs as Left-Center-Right with CSS Flex
A three-column layout where items are aligned to left, center and right can be created with CSS flex, and using justify-content property.
April 20, 2020

ui-ux
How to Create a Dark / Light Mode for Websites
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.
December 28, 2019

videos
An Introduction to Variable Fonts and Using Them in Webpages (VIDEO)
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.
December 22, 2019

ui-ux
How to Disable Page Scrolling when Modal Dialog is Opened
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.
December 15, 2019

css
Disabling Pull-to-Refresh Feature on Mobile Browsers using CSS
Pull-to-refresh feature on mobile browsers that refreshes the page, can be disabled using the overscroll-behaviour CSS property.
December 14, 2019

html
How to Implement Click to Call Feature in Web Pages
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.
October 31, 2019

html
How to Change the Theme Color of the Address Bar in Mobile Browsers
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.
October 24, 2019

css
Using CSS :placeholder-shown to Customize Styles for Empty Text Input
: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.
September 27, 2019

html
HTML inputmode Attribute for Textboxes
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.
September 19, 2019

css
Styling First-Letters with CSS ::first-letter
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.
March 2, 2019

css
Creating Attractive First Lines with CSS ::first-line
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.
February 27, 2019

ui-ux
Using WebP Images with Fallback
If your application involves showing a lot of images then probably it makes sense to add WebP support. Using the HTML tag is the most robust solution to display WebP images with fallback.
January 13, 2019

css
Creating a Page with Sidebar and Main Content Area using HTML & CSS
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.
November 1, 2017

ui-ux
UI Tip : Replace your JPEG-PNG Logos by SVG ones
A SVG format logo will look far better than a jpeg or png format. SVGs bring high quality at a small file size.
May 1, 2017

ui-ux
UI Tip : Use Favico.js for Better Notification Management
Favico.js is a Javascript plugin that animates the website's favicon to inform user of new notifications.
May 1, 2017

ui-ux
UI Tip : Using Animated Favicon to Attract User Attention for an Inactive Browser Tab
While the user is on a different browser tab, you can get his attention by animating the favicon of the website.
April 28, 2017

css
Animating a Lightbox with CSS & Javascript
Lightboxes are one of the common things implemented in websites, so animating them is a good idea to impress your visitors.
February 13, 2017

css
How to Move an Element in a Circular Path with CSS
Moving / animating an element along a circular path can be achieved by animating the CSS transform property.
January 11, 2017
New & Upcoming Javascript / Web Platform Features

Pan / Tilt / Zoom Support for Camera in getUserMedia()

Javascript Logical Assignment Operators

Intersection Observer Now Also Accepts a Document as the Root Element

Javascript String.replaceAll() Method

Better Caching With stale-while-revalidate Directive in Cache-Control Header

Synchronous AJAX Will Not Work in Page Dismissal Events

Javascript globalThis Property

Javascript Hashbang Comment Syntax