WebDevPuneet.com – Web Development Tutorials, UI Snippets, and Free Developer Tools

Available for freelance work

Puneet Sharma

Frontend Dev & UI Engineer

I build pixel-perfect, production-ready HTML, React & WordPress websites from Figma designs. I also share frontend tutorials, UI snippets, and free developer resources on WebDevPuneet.com.

⇗ Hire on Upwork

✉ Email me

puneet438@gmail.com

Puneet Sharma - Frontend Developer & UI Engineer

16+ yrs experience

Latest Posts

10 Free ECharts Data Visualization Snippets: A Synced Candlestick + Volume Panel, a Sankey Diagram That Actually Traces Drop-Off & a Sliding-Window Realtime Chart

10 Free ECharts Data Visualization Snippets: A Synced Candlestick + Volume Panel, a Sankey Diagram That Actually Traces Drop-Off & a Sliding-Window Realtime Chart

This batch opens a new corner of the collection: real data visualization built on Apache ECharts instead of hand-rolled SVG. All ten load the genui…

JavaScript Event Delegation: 10 Practical Examples with closest() and Event Bubbling

JavaScript Event Delegation: 10 Practical Examples with closest() and Event Bubbling

Every developer hits the same wall eventually: you attach a click listener to every button in a list, then the app adds a new button, and it just doe…

CSS Subgrid Explained: 8 Real Layout Problems It Solves

CSS Subgrid Explained: 8 Real Layout Problems It Solves

Subgrid is the smallest CSS Grid feature with the biggest "oh, that's what was wrong" moment attached to it. Every developer who has b…

React useRef Explained: 8 Practical Uses Beyond the DOM

React useRef Explained: 8 Practical Uses Beyond the DOM

Most useRef tutorials stop at one example — focusing an input — and leave the impression that useRef is just "the DOM access hook." Tha…

How to Animate CSS Properties with GSAP (With Live Examples)

How to Animate CSS Properties with GSAP (With Live Examples)

Most GSAP tutorials start with x and y and stop there, which leaves out a real question: which CSS properties can GSAP actually animate, and does i…

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/851759228-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AAPvtVkYy3p7cB8XcU-_qSgURfxL:1789939260017';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7154435437619178098','//www.webdevpuneet.com/','7154435437619178098');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7154435437619178098', 'title': 'webdevpuneet', 'url': 'https://www.webdevpuneet.com/', 'canonicalUrl': 'https://www.webdevpuneet.com/', 'homepageUrl': 'https://www.webdevpuneet.com/', 'searchUrl': 'https://www.webdevpuneet.com/search', 'canonicalHomepageUrl': 'https://www.webdevpuneet.com/', 'blogspotFaviconUrl': 'https://www.webdevpuneet.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-SJKRD65SBJ', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22webdevpuneet - Atom\x22 href\x3d\x22https://www.webdevpuneet.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22webdevpuneet - RSS\x22 href\x3d\x22https://www.webdevpuneet.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22webdevpuneet - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7154435437619178098/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/04015544616439432341\x22 /\x3e\n', 'adsenseClientId': 'ca-pub-2762737943861458', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/7ce469edaf870342', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'index', 'pageName': '', 'pageTitle': 'webdevpuneet', 'metaDescription': 'A blog by a freelance frontend developer with 16+ years of experience sharing tutorials, UI snippets, tips, and web development insights.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'webdevpuneet', 'description': 'A blog by a freelance frontend developer with 16+ years of experience sharing tutorials, UI snippets, tips, and web development insights.', 'url': 'https://www.webdevpuneet.com/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}, {'name': 'widgets', 'data': [{'title': 'webdevpuneet (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Looking for something?', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Bookmark Posts', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Translate', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Tabbed Menu', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList05'}, {'title': 'Labels Description', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList07'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '536020214834552543', 'title': '10 Free ECharts Data Visualization Snippets: A Synced Candlestick + Volume Panel, a Sankey Diagram That Actually Traces Drop-Off \x26amp; a Sliding-Window Realtime Chart', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOp4OO3-xl0w3vAeE4U4cYFgtrKIbecBSkfu4oCOyuwofny7BVp-FpmgoBtc0w-Jkd2EIRv11RUiWf2pG7NlTVuq2pHdxh8oumncuysCmd18NN1eAVzW6xJGWvnif0gqlLkfKYJ6CZmV93f5i2Cr_l1PANn0yuzfxxJoqAoRrtoCcDFVQD07JRy6xrNmA/s1600/echarts-data-visualization-header-1200x630.jpg', 'showInlineAds': true}, {'id': '9121266808583757065', 'title': 'JavaScript Event Delegation: 10 Practical Examples with closest() and Event Bubbling', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIs4v3XuHJKFesGdwDx1-KhMGHqDg9TrTLqlodepetyKRdcGQnz8b7J1vAdCIaj9FEmd5Og5b9pyLQhSUSVgRiPHwHH-neQTNexYwLMi083rNNGitVSLynKPE7y5BOunCfZS4_Zs0aIadYINc-qFkyImMUPhsYkXGSvwOiw0OLq2HKPhsoe43xcLF8-18/s1600/javascript-event-delegation-header-1200x630.jpg', 'showInlineAds': true}, {'id': '6665703297741346587', 'title': 'CSS Subgrid Explained: 8 Real Layout Problems It Solves', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_g4v1ZQs76bFli3IQiQ2Xgi2Pkeye2Tc9rrvpvxMPYJ8ehF3ksA5sh5Ry4mFJqpb01fFST6ztHOBBc1UOlUSSIS8sQ0zQNP3r-Hw_KephlUy_-bAwEaM1UDgAWNk2ciSjUjbhoI2R_5CzD7rkize2tFIsarZpQdiT-2XYvG7APueXL9wKkLuRh_H1HTs/s1600/css-subgrid-explained-1200x630.jpg', 'showInlineAds': true}, {'id': '2858461814618774925', 'title': 'React useRef Explained: 8 Practical Uses Beyond the DOM', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2M1BgH1ZWJbPcFtXko8Obpt3vJmVO2A_R77HFRpTmX2MDiaivZNqzF8IKL-OcIjbhxdDm_HX7a4pVs3oPKcQUoRtOkjRgZgVPShZOUHSkSQWhFbvFcEICFhn_NyvzHpTXECnsb7uZK2r_iRoPz6gX0SYIzS2JIhRjQs6dYuVnBbalRMMR6QFi4Lq1Q0/s1600/react-useref-1200x630-compressed.jpg', 'showInlineAds': true}, {'id': '3973733634454806678', 'title': 'How to Animate CSS Properties with GSAP (With Live Examples)', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAo9ilQld_PHODdBcU6XH6UXAkm1IBGeX6ULt2YYGeOLvEvnu5qIh-uLA-5RHH2QdQOu1eXrTeY4cQXkwhhFKzbmKLOyg7KghkKRcqQbDsOaMk7x6eFbSPpb3j6iTMeLSKPXHknI3hl_gbUqTbRFrwvnOGhKdhe3GQ6-kybxaa8veKDHak1RCh3XxE3s/s1600/gsap-css-properties-tutorial-1200x630.jpg', 'showInlineAds': true}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Categorized Posts', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList08'}, {'title': 'Post Middle Ads', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList84'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Below Posts Ad', 'type': 'LinkList', 'sectionId': 'sec_Bottom_Widgets', 'id': 'LinkList85'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': '10 Copy-Paste AI UI Snippets That Make Your App Feel Like ChatGPT', 'id': 7019682671224468238}, {'title': 'How to Learn HTML, CSS, JavaScript and React in the Age of AI (Without Getting Left Behind)', 'id': 7898016898365403807}, {'title': 'HTML \x26lt;input\x26gt; Types You Should Actually Use in Modern Forms', 'id': 8263384698964347323}, {'title': 'GSAP Tutorial for Beginners: Animate Your First HTML Element', 'id': 6997126915827415355}, {'title': '9 Copy-Paste Three.js Scroll Scenes That Turn Scrolling Into Cinema', 'id': 1113958772831407609}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Sticky Ad [Desktop]', 'type': 'LinkList', 'sectionId': 'sec_Side_Sticky', 'id': 'LinkList86'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': '', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList22'}, {'title': '', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList23'}, {'title': '', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList24'}, {'title': '', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Mobile Menu', 'type': 'TextList', 'sectionId': 'sec_Mobile_Menu', 'id': 'TextList99'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Cookie Consent [NoTitle]', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList05', 'sec_Under_Header', document.getElementById('LinkList05'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList07', 'sec_Under_Header', document.getElementById('LinkList07'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/120969204-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList08', 'sec_Main_Widgets', document.getElementById('LinkList08'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList84', 'sec_Main_Widgets', document.getElementById('LinkList84'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList85', 'sec_Bottom_Widgets', document.getElementById('LinkList85'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList86', 'sec_Side_Sticky', document.getElementById('LinkList86'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList24', 'sec_Footer_Widgets', document.getElementById('LinkList24'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'sec_Mobile_Menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7154435437619178098', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AAPvtVn2PCLe4edrmVbjDBX9Pd4b:1789939556039', 'submitUrl': 'https://www.blogger.com/contact-form'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.webdevpuneet.com/b/stats?style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAEz_qU_hiGc0oU7gyOsqqtMDd5rx3Z72-azvOxRbprDsaTDQe3i0vQ1kA043JUlCyU3xCTGguVAwyX_pQLikYjs'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>