impressive tips and tricks with interactive tools and collection



Browsing Category " Web Development "

Sticky Table Header for long tables with too many rows

If a Table is too long with too many rows, then some users forget context what each column represents. So, you should lock table headers. CSS Code mentioned below keeps table header visible while user scrolls the table, and it helps users maintain context without forgetting what each column represents.


Super-organized Hyperlink Tooltip

If any webpage has a lot of links, sometimes this may be boring for visitors to visit all of those pages. This is not also possible to make the Text Hyperlink too long. But there is an alternative solution. Tooltip! Just look at the example links below and hover your mouse over the links. If you like it, you have SourceCode too.


CSS Code for Responsive Web Design

CSS Media Queries are a core part of responsive web design, allowing you to conditionally apply CSS styles based on device width. You should have only one CSS Styles for everything, but if something is related to screen-width, then copy the code below and make your design responsive.

HTML Modal Alert instead of JS Window Alert

HTML Modal Alert is a way to customize alerts in your websites. It allows you to change a standard JavaScript button to a beautiful, customizable, and responsive pop-up dialog boxes. The code is lightweight and independent.

CSS Cursor Code with Live Preview

Cursors are a subtle but crucial part of the user interface that guide behavior, set expectations, and improve overall usability. Hover over any cursor name in the left column to see a live preview.

add a contact form to any HTML page, even on multiple pages

If you want to collect feedback from visitors to your website, you can add a contact form to any HTML page, even on multiple pages. The page extension will always remain .html webpage file. However, a PHP file is required to process the form. The good news is that this PHP file will remain hidden from visitors. You can simply upload it to your root server, where it will securely handle form submissions and send emails in the background.


Stylish Navigation Buttons

In HTML, the <button> element is used to create interactive buttons on a webpage. It can be utilized for form submissions, executing JavaScript functions, or navigating to other pages. Below is an example of a well-designed navigation buttons.


HTML Alert instead of JS Window Alert

Normally we use JS alert function to let users know something, which may not be supported in every platform. The alert box also comes with a Title "www.example.com" which is not editable at all. This is disgusting. So, it will be wise to use HTML Alert instead JS Alert Function. Here is a live preview of JS Window alert()

Override a CSS Class Style

If someone wants to override a class style (like .responsive-style th), they can use CSS with higher specificity, the !important declaration, or inline styles. Here’s how each method works ...

JavaScript Code for Last Modification Date

You may want to show the Last Modification Date of your website. Here is the JavaScript code to do that. Even you can edit the date and time format by editing this line:

const formattedDate = `Last modified on ${day} ${month} ${year} at ${hour12}:${minutes}:${seconds} ${ampm}`;

How to use Classic and Block editors simultaneously?

How to use Classic Editor, Classic Widget, Classic Menu, and Gutenberg both at the same time?, and both in Classic Theme and Block Themes? It's the question of lot of developers after the introduction of Guternberg. WordPress.org is released under GPL, which means there should be accountability. But top decesion makers have established a aristocracy. Just read the comments of common developers here: https://wordpress.org/support/plugin/gutenberg/reviews/?filter=1

Open a new Full Screen Window with a Button

If you want to let your visitor want to open a new window with a single click on a button, here is the Live Preview and SourceCode. For security purpose, the browser will not allow to make the URL disappear, but the address is non-editable. If you are a Developer and want to show your work in Full Screen Live Preview, it may be useful for you.

Show URL in Webpage

Sometimes you may need to show the URL address in website. Is it possible? Yes! With a simple one line JavaScript code, you can do it. Your visitor may print the webpage, and you may want the URL to be printed in specific part of the webpage - and that's why this code is useful.