| Website | Link | Created Date | Description |
|---|---|---|---|
| Createxion Home Page | Link | 4-March-2018 | |
| Email Footer | Link | 16-December-2018 | |
| JavaScript Notes | Link | 16-December-2018 | |
| Todo List | Link | 16-December-2018 | |
| Todo List Simple | Link | 16-December-2018 | |
| Todo List UI | Link | 16-December-2018 | |
| QnA App | Link | 16-December-2018 | |
| Switch Game | Link | 16-December-2018 | |
| Secret Santa | Link | 16-December-2018 | |
| Smiley Slider | Link | 3-May-2020 | |
| Fancy Scroll Bar | Link | 20-May-2020 | |
| Light Saber Scroll | Link | 20-May-2020 | |
| Ripple Effect | Link | 20-May-2020 | |
| Calculator | Link | 21-May-2020 | |
| Vehicle Scroll | Link | 22-May-2020 | |
| Isometric Page | Link | 22-May-2020 | |
| Neumorphic Buttons | Link | 22-May-2020 | |
| Sun And Moon | Link | 22-May-2020 | |
| Menu Template | Link | 24-May-2020 | |
| Masonry Grid | Link | 24-May-2020 | |
| SVG Line Animation | Link | 6-June-2020 | |
| Text Animation | Link | 13-June-2020 | |
| Projectile Motion | Link | 27-June-2020 | |
| Digital Clock | Link | 9-July-2020 | |
| Quiz | Not Public | 26-August-2020 | |
| Bookmarks | Link | 4-January-2021 | |
| Parallax | Link | 19-January-2021 | |
| Mood Year | Link | 6-March-2021 | |
| Animated Logo | Link | 2016 | |
| Scroll Activated CSS | Link | 2016 | |
| Simple Transition Animation | Link | 2016 | |
| Backgrounds | Link | 10-April-2021 | |
| F1 Response | Link | 28-March-2021 | |
| Defined Colors | Link | 31-March-2021 | |
| Gradient Play | Link | 4-April-2021 | |
| Backdrop Example | Link | 10-April-2021 | |
| Vertically Center Element | Link | 10-April-2021 | |
| Vertically Divided Element | Link | 2-March-2021 | |
| Detect If User Has Visited/Seen An Element | Link | 7-March-2021 | |
| Target Vs Current Target | Link | 28-February-2021 | |
| AR | Link | 2019 | |
| V1 | Link | 2016 | |
| V2 | Link | 2017 | |
| V3 | Link | 2019 | |
| VR | Link | 2016 | |
| Chess Clock | Link | 18-April-2021 | A Digital Chess Clock |
| Password Generator | Link | 30-April-2021 | Password Generator Tool |
| Cursor Follower | Link | 05-May-2021 | Custom Cursor, Target Cursor, Cursor Follower |
| Torch Cursor | Link | 06-May-2021 | Torch Cursor that helps you read the content in dark |
| Match Block | Link | 11-May-2021 | Matching Block Puzzle |
| Twitter Post Generator | Link | 18-May-2021 | Template to generate a Twitter post |
| Monty Hall Problem | Link | 28-May-2021 | Monty Hall Problem Game |
| PIPBOY Template Animation | Link | 02-June-2021 | PIPBOY Animation Created using CSS and HTML - Screen Buffer Animation |
| Confetti Animation | Link | 03-June-2021 | Confetti Animation Created using JS, CSS, HTML |
| Touch Race | Link | 09-June-2021 | Fastest one to tap the screen wins! |
| Loader Screens | Link | 12-June-2021 | Pre Loader Screens |
| Merry Go Round Animation | Link | 13-June-2021 | Merry Go Round Animation |
| 3D CSS | Link | 14-June-2021 | 3D Animation Using CSS Only |
| Animated Clock | Link | 14-June-2021 | Animated Clock (inspired from some random 9gag post) |
| My Mobile Model in CSS | Link | 19-June-2021 | Model of my mobile - Moto G5S+ using CSS |
| Cyberpunk Glitch Animation | Link | 20-June-2021 | Cyberpunk Glitch Animation |
| Cyberpunk Assets | Link | 21-June-2021 | Cyberpunk Assets |
| Cat Animation | Link | 25-June-2021 | Cat Animation inspired from Boom Slingers Mobile Game |
| Signature Pad | Link | 28-June-2021 | Signature Canvas To Draw and Save Your Signature |
| Game of Bulls and Cows | Link | 02-July-2021 | A classic game of Bulls And Cows |
| Drawing Board | Link | 06-July-2021 | A drawing board code from Link |
| Magnifier | Link | 08-July-2021 | A basic magnifier |
| Reverse Countdown Animation | Link | 09-July-2021 | Reverse Countdown Animation |
| Memory Game | Link | 11-July-2021 | Memory Game - Player at start is shown some numbers in random order. Then the number disappears and user is required to click the containers in same ascending order. Fastest wins! |
| Light Saber Animation | Link | 17-July-2021 | Light Saber Animation |
| CSS Clock Animation | Link | 18-July-2021 | CSS Clock Animation |
| Good&Bad Animation | Link | 21-July-2021 | Inspired from Music Video |
| Cool Fonts | Link | 23-July-2021 | Collection of all fonts I have used |
| Touch Initiated Animation | Link | 25-July-2021 | Animation plays while you touch (or keep touching) the screen, and stops as soon as you stop touching |
| Polygon Clip Path Generator | Link | 31-July-2021 | Polygon Clip Path Generator helps you generate polygon value for using with clip-path css property |
| Neon Animation | Link | 06-Aug-2021 | Neon Animation |
| Tilt Animation | Link | 12-Aug-2021 | Tilt Animation |
| Glass UI Example | Link | 14-Aug-2021 | Glass UI Example |
| Webcam Integration in Background | Link | 15-Aug-2021 | Webcam Integration in Background |
| 3D Website using Spline Design | Link | 16-Aug-2021 | 3D Website using Spline Design |
| Border Generator | Link | 18-Aug-2021 | Border Generator App helps to generate CSS code for border |
| Skull Animation | Link | 21-August-2021 | Skull Animation |
| New Year Countdown | Link | 22-August-2021 | New Year Countdown |
| Login Page UI Sample | Link | 23-August-2021 | UI Template for a Sample Login Page inspired from many other Online References |
| Blob Animation | Link | 28-August-2021 | Blob Animation |
| Curved Text using JS and CSS | Link | 30-August-2021 | Curved Text using JS and CSS |
| Reveal Card using JS and CSS | Link | 30-August-2021 | Reveal Card using JS and CSS |
| ThreeJS Basic Example | Link | 13-September-2021 | ThreeJS Basic Example |
| Rain using ThreeJS | Link | 14-September-2021 | Rain using ThreeJS |
| Text Background using CSS | Link | 16-September-2021 | Text Background using CSS |
| ThreeJs Getting Started 1st Example | Link | 20-September-2021 | ThreeJs Getting Started Example |
| ThreeJs Getting Started 2nd Example | Link | 21-September-2021 | ThreeJs Getting Started Example |
| ThreeJs Getting Started 3rd Example | Link | 21-September-2021 | ThreeJs Getting Started Example |
| Getting Started With Model Viewer | Link | 24-September-2021 | Getting Started With Model Viewer |
| Pie Chart Background using CSS | Link | 25-August-2021 | Pie Chart Background using CSS |
| Checkers Background using CSS | Link | 25-August-2021 | Checkers Background using CSS |
| Topic Notes | Link | Created Date | Description |
|---|---|---|---|
| Index | Link | 20-May-2021 | |
| Smiley Slider | Link | 3-May-2020 | |
| Animations Index | Link | 11-March-2021 | |
| Notes Index | Link | 20-May-2020 | |
| Colors | Link | 2-April-2021 | |
| Notes CSS | Link | 10-April-2021 | |
| CSS Layouts | Link | 2-March-2021 | |
| Vertically Center Element | Link | 10-April-2021 | |
| Vertically Divided Element | Link | 2-March-2021 | |
| JS Jquery Notes | Link | 20-May-2020 | |
| Creating Copy Of An Object | Link | 5-March-2021 | |
| Detect If User Has Visited/Seen An Element | Link | 7-March-2021 | |
| Error & Solution | Link | 3-March-2021 | |
| Practical Notes | Link | 6-April-2021 | |
| Sort By Numeric Property | Link | 6-April-2021 | |
| Change Event Vs Input Event | Link | 6-April-2021 | |
| FullScreen Function | Link | 6-April-2021 | |
| Popup Message | Link | 6-April-2021 | |
| Swap Key-Value in JSON | Link | 6-April-2021 | |
| Sort Object By Keys | Link | 6-April-2021 | |
| Copy Content To Clipboard | Link | 6-April-2021 | |
| JS Dates | Link | 27-February-2021 | |
| on, off, one, click | Link | 27-February-2021 | |
| Target Vs Current Target | Link | 28-February-2021 | |
| Clean Code | Link | 15-April-2021 | Short and Effective way of writing code |
| Swapping Values In Two Variables | Link | 15-April-2021 | Short and Effective way to Swapping Values In Two Variables |
| Convert String to Number | Link | 15-April-2021 | Short and Effective way to Convert String to Number |
| Substitute A Variable Inside A String | Link | 15-April-2021 | Short and Effective way to Substitute A Variable Inside A String |
| Optional Chaining | Link | 16-April-2021 | Short and Effective way to extract subproperty of data that too safely |
| Creating Copy Of An Array | Link | 16-April-2021 | Correct way to Creating Copy Of An Array |
| Split A String Into An Array | Link | 16-April-2021 | Short and Effective way to Split A String Into An Array |
| Remove Duplicate Values From An Array | Link | 16-April-2021 | Short and Effective way to Remove Duplicate Values From An Array |
| Single Line If-Else Condition Check | Link | 16-April-2021 | Short way for using If-Else Condition Check |
| Well Formatted JSON | Link | 19-April-2021 | JSON with proper indentation and format |
| Orientation Based Styling | Link | 21-April-2021 | Orientation Based Styling, Screen Rotation, Landscape, Portrait |
scroll-behavior Property for Smooth Scroll |
Link | 22-April-2021 | Smooth Scroll to an Element using CSS |
| Scroll Reveal | Link | 23-April-2021 | CSS Reveal Animation based on scroll using Jquery |
| Device Data from Navigator That Browser Can Share | Link | 24-April-2021 | Device data from navigator that browser can share |
| Detect Device Type | Link | 24-April-2021 | Detect the device type i.e wether it is Android, iPhone or iPad. |
devicePixelRatio Property |
Link | 24-April-2021 | Device Pixel Ratio |
| Detect Orientation or Orientation Change | Link | 24-April-2021 | Detect the device orientation |
| Height & Width | Link | 24-April-2021 | Height & Width |
| Convert Seconds To hh:mm:ss Format | Link | 24-April-2021 | JS Code to Convert Seconds To hh:mm:ss Format |
window, document And screen Properties |
Link | 25-April-2021 | window, document And screen Related Properties |
white-space Property |
Link | 25-April-2021 | Sets how white space inside an element is handled |
overflow-wrap Property |
Link | 25-April-2021 | Setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box |
word-break Property |
Link | 25-April-2021 | Sets whether line breaks appear wherever the text would otherwise overflow its content box |
hyphens Property |
Link | 25-April-2021 | How words should be hyphenated when text wraps across multiple lines |
transition Property |
Link | 25-April-2021 | Apply animations to properties using transition |
filter Property |
Link | 26-April-2021 | CSS property applies graphical effects like blur or color shift to an element |
| CSS Marquee | Link | 26-April-2021 | CSS Marquee |
animation-play-state Property |
Link | 27-April-2021 | Animation CSS Property |
animation-delay Property |
Link | 27-April-2021 | Animation CSS Property |
animation-iteration-count Property |
Link | 27-April-2021 | Animation CSS Property |
animation-fill-mode Property |
Link | 27-April-2021 | Animation CSS Property |
| Rotation Animation on Scroll | Link | 27-April-2021 | Rotation Animation on Scroll |
| Translation Animation on Scroll | Link | 27-April-2021 | Translation Animation on Scroll |
position Property |
Link | 28-April-2021 | position Property |
| Create and Download File on UI | Link | 03-May-2021 | Create and Download File on UI |
Using display-mode in media rule |
Link | 08-May-2021 | Using display-mode to Detect FullScreen Using CSS |
| Events | Link | 08-May-2021 | Events List |
Handle Touch Move / Cursor Move Event & event.changedTouches & event.touches |
Link | 08-May-2021 | Handle Touch Move / Cursor Move Event and extract the data using |
Count Touch Points Using event.touches.length |
Link | 10-May-2021 | Count Touch Points Using event.touches.length |
Check If Object Is Empty using jQuery.isEmptyObject() |
Link | 16-May-2021 | Check If Object Is Empty using jQuery.isEmptyObject() |
| Shuffle an Array / Randomize an Array | Link | 16-May-2021 | Shuffle an Array / Randomize an Array |
@import Rule |
Link | 16-May-2021 | Using @import Rule to import another css file in given css file and also for importing google fonts |
| HTML Notes | Link | 17-May-2021 | |
<meta> tag: The metadata element |
Link | 17-May-2021 | <meta> tag: The metadata element |
| Standard metadata names | Link | 17-May-2021 | Standard metadata names |
| Uncommon MetaData Names | Link | 17-May-2021 | Uncommon MetaData Names |
Values for the content of <meta name="robots"> |
Link | 17-May-2021 | Values for the content of <meta name="robots"> |
| MetaData Viewport | Link | 17-May-2021 | MetaData Viewport |
| Refresh A Page On Specific Interval | Link | 17-May-2021 | Refresh A Page On Specific Interval |
| Redirect To A Page After Specific Interval | Link | 17-May-2021 | Redirect To A Page After Specific Interval |
| Prevent Zoom on Your Website | Link | 17-May-2021 | Prevent Zoom on Your Website |
Robots.txt File |
Link | 17-May-2021 | Robots.txt File |
color-scheme Property |
Link | 17-May-2021 | Using color-scheme to specify preference of colors |
| Upload Image to a static website without server | Link | 20-May-2021 | Upload Image to a static website without server. Input Image Tag. FileReader() and URL.createObjectURL() |
| Making Website Text Content Editable | Link | 24-May-2021 | Enable user to edit any text element of your website using contenteditable attribute |
| Spellcheck Attribute | Link | 25-May-2021 | Enable website to perform spellcheck for editable element using spellcheck="true" attribute |
Detect Hashtags(#) and Mentions(@) In input or textarea |
Link | 25-May-2021 | Detect Hashtags and Mentions(@) In input or textarea |
White space issue with html2canvas and canvas2image |
Link | 25-May-2021 | Solutions for White Gap Issue Related To html2canvas or canvas2image |
Using html2canvas and canvas2image to export a webpage element as an Image |
Link | 26-May-2021 | Using html2canvas and canvas2image to export a webpage element as an Image |
pointer-events Property |
Link | 27-May-2021 | CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events |
| Sample Button | Link | 31-May-2021 | Sample Button Code you can directly copy-paste |
inset Property |
Link | 06-June-2021 | Set the position on all four sides with one CSS property. Property top, right, bottom, and left all together can be replaced with one CSS property i.e inset |
| Using Media Query to set dark/light theme | Link | 07-June-2021 | Using Media query i.e. @media (prefers-color-scheme: dark/light) for setting website theme based on system theme |
| CSS Units | Link | 08-June-2021 | Notes on CSS Units like vh,vw,ch,em,rem,% |
| More Ways to Vertically Center An Element | Link | 17-June-2021 | Vertically center using display as table, grid and flex or position as relative & absolute |
| Perspective CSS | Link | 18-June-2021 | Implementing Perspective in CSS using perspective and perspective-origin |
::first-letter and ::first-line Selector |
Link | 23-June-2021 | Styling using ::first-letter and ::first-line Selector |
Styling the Bullets in Lists using ::marker |
Link | 23-June-2021 | Styling the Bullets in Lists using ::marker |
| Using SVG for bullets in List | Link | 23-June-2021 | Using SVG for bullets in List |
mix-blend-mode and isolation Property |
Link | 24-June-2021 | mix-blend-mode and isolation Property Example |
| Signature Pad | Link | 28-June-2021 | Signature Canvas To Draw and Save Your Signature |
:hover or :active doesn't work in IPhone's Safari |
Link | 29-June-2021 | Solution is to use ontouchstart attribute with the tag |
| CSS Interaction Media Queries | Link | 30-June-2021 | CSS Interaction Media Queries like hover and pointer |
currentColor Keyword |
Link | 01-July-2021 | Using currentColor Keyword, to set value same as element's color property |
| Custom Cursor For Your Website | Link | 04-July-2021 | Using Custom Cursor For Your Website using cursor property |
| The Open Graph Protocol | Link | 05-July-2021 | The Open Graph Protocol |
| Prevent Div Selection on Android | Link | 10-July-2021 | Prevent Div Selection on Android using CSS |
| Prevent Screen Reader From Reading an Element | Link | 11-July-2021 | Prevent Screen Reader From Reading an Element using aria-hidden="true" |
Scroll With Padding Using scroll-padding-top |
Link | 14-July-2021 | Scroll With Padding Using scroll-padding-top |
border vs outline |
Link | 15-July-2021 | border vs outline |
| Reading a File on UI | Link | 20-July-2021 | Reading a File on UI |
| Implementing Drag and Drop | Link | 20-July-2021 | Implementing Drag and Drop |
| Using Shadow with Clip Path | Link | 25-July-2021 | Using Shadow With Clip Path |
columns Property in CSS |
Link | 26-July-2021 | columns Property in CSS |
quotes CSS Property |
Link | 27-July-2021 | quotes CSS Property |
content CSS Property |
Link | 28-July-2021 | content CSS Property |
| Draggable Element using Jquery | Link | 30-July-2021 | Making an element draggable using Jquery |
| Data Attributes | Link | 03-August-2021 | Data Attributes in HTML i.e data-* Attributes |
| Global Attributes | Link | 04-August-2021 | Global Attributes List |
Random Image Using picsum.photos |
Link | 05-August-2021 | Random Image Using picsum.photos |
| Detect Device Orientation | Link | 10-August-2021 | Detecting Device Orientation / Motion |
aspect-ratio CSS Property |
Link | 20-August-2021 | aspect-ratio CSS Property sets a preferred aspect ratio for the box |
| Useful Imports | Link | 24-August-2021 | List of useful imports |
| Google Fonts Material Icons | Link | 24-August-2021 | Google Fonts Material Icons Imports and Details |
| ARIA Attributes | Link | 25-August-2021 | ARIA Attributes are used for accessibilities |
| Intersection Observer API | Link | 27-August-2021 | Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. Basically used with scroll. |
<fieldset> Element |
Link | 29-August-2021 | <fieldset> Element |
<datalist> Element |
Link | 29-August-2021 | <datalist> Element: The HTML Data List element used with input list |
<progress> Element |
Link | 29-August-2021 | <progress>: The Progress Indicator element |
<meter> Element |
Link | 29-August-2021 | <meter>: The HTML Meter element |
<template> Element |
Link | 29-August-2021 | <template>: The Content Template element |
Set Text Inside a Polygon Using shape-outside Property |
Link | 31-August-2021 | Set Text Inside a Polygon Using shape-outside Property |
How to import Jquery directly into your script.js file? |
Link | 03-September-2021 | How to import Jquery directly into your script.js file / How to import jQuery using ES6 Syntax OR solution for Uncaught SyntaxError: Cannot use import statement outside a module |
| PokeAPI Example | Link | 04-September-2021 | Randomly getting Pokemon using PokeAPI |
| API Call From Website | Link | 05-September-2021 | API Call From Website and all details |
direction Property |
Link | 08-September-2021 | direction Property |
| WebXR Notes | Link | 09-September-2021 | WebXR Notes |
$.get() Function |
Link | 22-September-2021 | Way to get data / website data using $.get() |
| Fuzzing Testing | Link | 23-October-2021 | Fuzzing Testing |
| Kevin Powell's Challenge | Link | 1-November-2021 | Kevin Powell's Challenge - Link |
writing-mode CSS Property |
Link | 7-Nov-2021 | writing-mode CSS Property |
| Generators In JS | Link | 18-Aug-2022 | Generators In JS, solution for counter problem |
| RegExp In JS | Link | 19-Aug-2022 | RegExp In JS |
| Date | Topic |
|---|---|
| 2022-08-28 | A-Frame Notes |
| 2022-09-03 | Google API Integration Testing |
| 2022-09-17 | List Styling Using CSS |
| 2022-11-15 | Content Editable Style Tag |
| 2022-11-18 | Decide Favicons Based on Browser Theme |
| 2022-12-12 | Lazy Loading using loading attribute |
| 2023-01-31 | HTML Tags |
| Date | Project |
|---|---|
| 2022-09-18 | Game - SolveIt! |
| 2022-10-08 | Game - ClickIt! |
| 2022-11-04 | Cool Websites |
| 2023-04-19 | Countdown App From Countdown (2019) Movie |