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

21 Free Money Calculators: Take-Home Pay, Loans, Investments, Tax and Retirement

21 Free Money Calculators: Take-Home Pay, Loans, Investments, Tax and Retirement

Most money decisions come down to one number you can't quite work out in your head. What actually lands in my account after tax? How much does th…

Building a Three.js Product Viewer: Why Lighting, Not Geometry, Makes 3D Look Real

Building a Three.js Product Viewer: Why Lighting, Not Geometry, Makes 3D Look Real

The first 3D object almost everyone renders on the web looks wrong, and it's never obvious why. The geometry is right, the code runs, the thing s…

10 Copy-Paste E-commerce Snippets That Take a Shopper From Browse to Buy

10 Copy-Paste E-commerce Snippets That Take a Shopper From Browse to Buy

An online store is a funnel with a specific set of leaks. People scroll past products that don't look clickable. They bounce because seeing a sec…

10 Copy-Paste AI UI Snippets That Make Your App Feel Like ChatGPT

10 Copy-Paste AI UI Snippets That Make Your App Feel Like ChatGPT

Every product is growing an AI surface — a chat panel, an assistant sidebar, a "summarise this" button that streams an answer back. The mod…

The Free Freelance Toolkit: 17 Browser Tools for Clients, Proposals, Time Tracking and Getting Paid

The Free Freelance Toolkit: 17 Browser Tools for Clients, Proposals, Time Tracking and Getting Paid

Freelancing has a hidden second job attached to it. The work you're paid for — the design, the code, the writing — is only part of the week. The …

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3432011497-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'ACvIOeCx1kLJD7DXyg81xJIQwSI6:1785617071793';_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/d046e0cddf00ec44', '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': '3419169952011630410', 'title': '21 Free Money Calculators: Take-Home Pay, Loans, Investments, Tax and Retirement', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlK1Cz_vLPRViwIPUzTUtkFEPciSSuVUgmpm8JmfBIeZv1B6hznsVPoqZ0Vb9cuBl1YhaMt73oCm3UICJEXyLDZeTuCwidl6y_HEhxpIulCzsA6L_goafYpYJfMpTjYdj61CYvTJSnmvYXrRHORJQvny2zYlVX3phDv8XmknVywyAX1j3wmioeArqLvKs/s1600/21-free-money-calculators-header-1200x630.jpg', 'showInlineAds': true}, {'id': '7081833300944684520', 'title': 'Building a Three.js Product Viewer: Why Lighting, Not Geometry, Makes 3D Look Real', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ8IeF8JzxPYbzBVd6NZk6U8HOnGyzprYvj1BWjB4KcnSOZ-hj1kPfRzB2V2DkbinzOnU1sNeL8jZ8epVfKWHutlB4LfzP8k4eF1SvBY8LtvBy6cynGM7c14HwgrGcDi0LTOnqd-rYbWhu6-6XCm3ZdGDnB9YW7UTO8HOAMiMfU0m1UA52CyAA6vAf71g/s1600/threejs-product-viewer-header-1200x630.jpg', 'showInlineAds': true}, {'id': '6144879345780404482', 'title': '10 Copy-Paste E-commerce Snippets That Take a Shopper From Browse to Buy', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoS3o74Kx-v8N6xyM0i9SKOhcswrDIK1MtEF0hP_SmkxGOkTymUYVG36_0-cwejHzeeDOKZVQxDM1YfQNOiqIi1Yj1y0yGE61InOm8TpkqcQOXKnYPtTTmmouPCKk2LGtTNrOls2ypP3gbk5Hnk4ePrIt7M7NSD_8ijscAzOl_cpkCRjr2pQK7tul4Hsw/s1600/10-copy-paste-ecommerce-snippets-header-1200x630.jpg', 'showInlineAds': true}, {'id': '7019682671224468238', 'title': '10 Copy-Paste AI UI Snippets That Make Your App Feel Like ChatGPT', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESPrXdmP-6B3EoXTR4zPpK08WcX57Wwo_o1_zIU0XylkgGB3fjizP_lc3Brp8qa-ocN9_kSSUZf7rKdio9v8kCnouAl3yGvkWkWeUeOm2Hf95WEFici6W3Eqmm9XHI1IqWhz8K9icmaUnw-_kw6ryfl6LJnFebTZXGU6AhCcRy51Nck58ZnLaLidjW8E/s1600/10-copy-paste-ai-ui-snippets-header-1200x630.jpg', 'showInlineAds': true}, {'id': '8318641842338611006', 'title': 'The Free Freelance Toolkit: 17 Browser Tools for Clients, Proposals, Time Tracking and Getting Paid', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG60PZw-jxS1560OG_vyAP-Sjgj50UpcEfDkIW9DpgcgxRzZgtzfUMrn3UvWHnrENVZ20PYmCHIE0qHThw8a84kfJx_6XqMvLWcMjr3ta5Bo3NFnctkPixp87hyphenhyphenowA4rQO7vxJRyP64NJlk6ku3DiaxMbPhVJ2TjoVFPulu9W4dTh2hrS3gERRMZO0GZ8/s1600/free-freelance-toolkit-dashboard-header-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 Modal, Popover \x26 Toast Snippets That Don\x27t Feel Bolted On', 'id': 4095565308591851208}, {'title': 'Native Page Transitions Without a Library: A View Transitions API Walkthrough', 'id': 162384358668940019}, {'title': 'Learn SVG the Visual Way: A Free Interactive SVG Playground (Beginner to Pro, With Animation)', 'id': 2564455878740065465}, {'title': 'Free Password Generator: Strong, Random Passwords (Plus Passphrases, PINs \x26 Memorable Passwords)', 'id': 5547281138235380366}, {'title': '10 Copy-Paste Dashboard Snippets That Turn Data Into a Real Admin Panel', 'id': 3555923246459751361}]}, {'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': '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/3899201366-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('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': 'ACvIOeDosZ68aINCqQbRKa1xAwyK:1785617071872', '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\x3dAEHf7-e7BpBuVdohiUiBtDyRNpuKFVjdW1HWsfMY3P-etDVno0XbaYUSt0AH4b1uGB4W-eM87qC-o9zz-5XQlt4'}, '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>