- 335
- 145 043
Hank The Tank
India
เข้าร่วมเมื่อ 12 เม.ย. 2016
Hey guys ! welcome to my channel , If you are interested in learning programming from scratch and want to build cool projects with programming and just want to enjoy the vast world of coding , so this is a great channel for you. I try my best to explain things as simple as i can , so that you too can understand and have the fun and craze of coding.
God Bless Y'all . Thank You
God Bless Y'all . Thank You
🎨 Create a Stylish Custom Right-Click Menu with HTML, CSS & JS! 💻✨
🎬 Welcome to today's tutorial! 🚀
In this video, I'll show you how to create a sleek and stylish custom right-click context menu using HTML, CSS, and JavaScript. Perfect for adding that extra touch of professionalism to your website! 🌐💼
🔧 **What You'll Learn:**
1️⃣ How to structure the HTML for a custom context menu
2️⃣ Stylish CSS tricks to make your menu pop
3️⃣ JavaScript to handle right-click events and positioning
📂 **Source Code:** [Download Here](drive.google.com/drive/folders/1k5rN5WWLtFXAB2y2EOX6uXtbty7f63YP?usp=sharing)
Don't forget to like 👍, comment 💬, and subscribe 🔔 for more tutorials!
👥 **Join Our Community:**
- Follow me on Instagram: hankthetank_coding
#️⃣ **Hashtags:**
#WebDevelopment #JavaScript #HTML #CSS #CodingTutorial #CustomContextMenu #WebDesign
Enjoy coding and happy learning! 😃
In this video, I'll show you how to create a sleek and stylish custom right-click context menu using HTML, CSS, and JavaScript. Perfect for adding that extra touch of professionalism to your website! 🌐💼
🔧 **What You'll Learn:**
1️⃣ How to structure the HTML for a custom context menu
2️⃣ Stylish CSS tricks to make your menu pop
3️⃣ JavaScript to handle right-click events and positioning
📂 **Source Code:** [Download Here](drive.google.com/drive/folders/1k5rN5WWLtFXAB2y2EOX6uXtbty7f63YP?usp=sharing)
Don't forget to like 👍, comment 💬, and subscribe 🔔 for more tutorials!
👥 **Join Our Community:**
- Follow me on Instagram: hankthetank_coding
#️⃣ **Hashtags:**
#WebDevelopment #JavaScript #HTML #CSS #CodingTutorial #CustomContextMenu #WebDesign
Enjoy coding and happy learning! 😃
มุมมอง: 125
วีดีโอ
Create a Searchable Member List with HTML, CSS & JS 🚀
มุมมอง 242วันที่ผ่านมา
In this video, you'll learn how to create a searchable member list using HTML, CSS, and JavaScript. 📋 What you'll learn: Design a sleek and responsive card layout with CSS Implement a search bar for filtering members in real-time Dynamically display member profiles with images, names, emails, and roles 🚀 Perfect for: Web development beginners Front-end developers looking to enhance their skills...
🎨 Build Custom Dropdown & Accordion Menu
มุมมอง 20814 วันที่ผ่านมา
Dive into the world of web design as we create a unique dropdown menu and accordion using HTML, CSS, and JavaScript! 🚀 Follow along step by step as we craft dynamic UI components for your projects. Let's bring creativity to your web development journey! Source Code : drive.google.com/drive/folders/1IfpvQzs4Qc_804nMynNPnET9eGXuVZR8?usp=drive_link I upload programming videos regularly , so if you...
Learn To Create STUNNING Cards Using HTML & CSS
มุมมอง 20821 วันที่ผ่านมา
In this video we will be learning to create amazing creative card using HTML and CSS. Source Code : drive.google.com/drive/folders/1wAb0hK1LRr8NoQBPVDdVePfxT5GqbDbh?usp=sharing I recently started front end development , you can check out my front end playlist for more front end tutorials in html , css and javascript. If you are new to the channel and if you haven't subscribed yet , please go ah...
Create Professional Image Uploader Using HTML CSS & JS 🔥
มุมมอง 123หลายเดือนก่อน
In this video we will be learning to create professional stunning image uploader using HTML CSS & JS. Source Code : drive.google.com/drive/folders/1POLJNWUO89qWsE86zaq9d2SMpKKvdPG4?usp=drive_link I upload programming videos regularly , so if you guys are interested in learning programming you can subscribe and turn the notification bell on , for more such videos. If you are new to the channel a...
Creative Modern Form Using HTML CSS & GSAP
มุมมอง 111หลายเดือนก่อน
Hey what's going on guys welcome back to another tutorial. So, in this video we'll be learning how to create modern stylish full screen animated sign in form using HTML CSS & GSAP for animation. Source Code: drive.google.com/drive/folders/1gfzUo1m24QBeFMQlfSIGaUDopTULdZ4l?usp=drive_link I upload programming videos regularly , so if you guys are interested in learning programming you can subscri...
🎨Build A Stunning Website Using GSAP🚀🌟 😍
มุมมอง 335หลายเดือนก่อน
In this tutorial, we’ll walk through the process of designing a stunning website using HTML, CSS, SWIPER JS & GSAP We’ll be creating the website - avengers-ui.netlify.app/ - from scratch, and I’ll show you all the tips and tricks you need to know to create a beautiful and creative avengers landing website. Whether you’re a beginner or an experienced web developer, this tutorial is for you! Sour...
🎨🌟 SVG Text Animation Using HTML & CSS No GSAP! 🚀 😍
มุมมอง 132หลายเดือนก่อน
In this tutorial, we’ll walk through the process of designing a creative modern text animation which can be used in various places , like loader, scroll triggered animations, etc. In this video we will dive deep into building text svgs and then adding required animations just with CSS. Source Code : drive.google.com/drive/folders/1iSUTmrq3oFQ7go4uDr1GH-Nq1jrJN7Ex?usp=sharing Whether you’re a be...
Crazy Tips To Improve Buttons In CSS #html #css
มุมมอง 702 หลายเดือนก่อน
In this video i'll be sharing some of my personal tips and tricks that I use to improve css button designs in websites. Source Code : drive.google.com/drive/folders/1UuxrS7r9taoznP6NqJ31clORtmECnjDh?usp=sharing If you are new to the channel and if you haven't subscribed yet , please go ahead and subscribe . If you have anything to say about my codes or if you have any doubts regarding what i ex...
Create Skeleton Loading Using HTML CSS & JS
มุมมอง 1242 หลายเดือนก่อน
In this video we will be learning to create skeleton loading for components in a website from step by step using HTML CSS & JS. Deployed Site : skeleton-loader-ui.netlify.app/ Source Code : drive.google.com/drive/folders/1vT-XEDVsYvW98DR8cSkvuipKkhhcHrza?usp=sharing
Full Responsive Modern Animating Website Tutorial Using | HTML CSS JS
มุมมอง 9642 หลายเดือนก่อน
In this video , I'll be teaching you guys how to create a creative modern responsive website using HTML CSS & JS. We will be learning to add responsive media queries along with scroll animations and smooth scrolling. We will be learning to use bunch of amazing libraries that can help you build stunning websites. Deployed Website Link : v-arch.netlify.app/ UI Design Link : www.behance.net/galler...
🎨Build A Stunning Animated Joker Website Using HTML CSS & GSAP🚀🌟 😍
มุมมอง 5162 หลายเดือนก่อน
In this tutorial, we’ll walk through the process of designing a stunning website using HTML, CSS and GSAP. We’ll be creating the website - joker-ui.netlify.app/ - from scratch, and I’ll show you all the tips and tricks you need to know to create a beautiful and creative animated movie website. Whether you’re a beginner or an experienced web developer, this tutorial is for you! I found this on d...
✨Create Modern PopUps / Modals Using HTML CSS & JS😍🔥
มุมมอง 1052 หลายเดือนก่อน
In this video we will learn how to create a custom modern popup or modals using HTML CSS & JS. It is fully responsive and can be used in various situations. Source Code : drive.google.com/drive/folders/1M_IVCliggMQmaGF8hmoaJ_ODTK_skIYF?usp=sharing
✨Responsive Sidebar Menu Using HTML CSS & JS | Hindi 😍🔥
มุมมอง 1373 หลายเดือนก่อน
In this video we will learn to create fully responsive sidebar using html css and javascript and also we will add light and dark mode theme in this video. Finally in hindi!! Source Code : drive.google.com/drive/folders/1VB-QnrzsB6Dw74sMLMuwEO5wH6-nRu9h?usp=sharing
🤯Learn SWIPER JS by building this amazing website! ❤️😍
มุมมอง 8393 หลายเดือนก่อน
In this video I'll be guiding you into how to build / create amazing sliders and carousels using SWIPER JS. Swiper Js is a popular library used to build modern interactive sliders and carousels. In this video I will be teaching you in depth how to use Swiper JS Source Code : drive.google.com/drive/folders/1pt5E4N1vAx4PsxctUc8cAmSR9FS4fmqR?usp=drive_link
🎨Build A Modern Animated Website Using HTML CSS & GSAP🚀🌟 😍
มุมมอง 2553 หลายเดือนก่อน
🎨Build A Modern Animated Website Using HTML CSS & GSAP🚀🌟 😍
Build A Stunning Website & Send Mails Using HTML & CSS No PHP/ Node JS
มุมมอง 1073 หลายเดือนก่อน
Build A Stunning Website & Send Mails Using HTML & CSS No PHP/ Node JS
🎨🌟 Responsive Modern Website Using HTML CSS & JS 🚀 😍
มุมมอง 1.5K4 หลายเดือนก่อน
🎨🌟 Responsive Modern Website Using HTML CSS & JS 🚀 😍
🎨Build A Professional Modern Responsive Animated SaaS Website Part 3🚀🌟 😍
มุมมอง 2364 หลายเดือนก่อน
🎨Build A Professional Modern Responsive Animated SaaS Website Part 3🚀🌟 😍
🎨Build A Professional Modern Responsive Animated SaaS Website Part 2🚀🌟 😍
มุมมอง 1464 หลายเดือนก่อน
🎨Build A Professional Modern Responsive Animated SaaS Website Part 2🚀🌟 😍
🎨Build A Professional Modern Responsive Animated SaaS Website Part 1🚀🌟 😍
มุมมอง 6394 หลายเดือนก่อน
🎨Build A Professional Modern Responsive Animated SaaS Website Part 1🚀🌟 😍
🎨Build A Stunning Animated Food Website Using HTML CSS & GSAP🚀🌟 😍
มุมมอง 7804 หลายเดือนก่อน
🎨Build A Stunning Animated Food Website Using HTML CSS & GSAP🚀🌟 😍
🎨Build A Creative Animated Website Using HTML CSS & GSAP🚀🌟 😍
มุมมอง 1.3K5 หลายเดือนก่อน
🎨Build A Creative Animated Website Using HTML CSS & GSAP🚀🌟 😍
🎨Build A Creative Website Using HTML & CSS🚀🌟 😍
มุมมอง 3.9K5 หลายเดือนก่อน
🎨Build A Creative Website Using HTML & CSS🚀🌟 😍
🎨Build A Stunning Website Using HTML & CSS🚀🌟 😍
มุมมอง 2.7K5 หลายเดือนก่อน
🎨Build A Stunning Website Using HTML & CSS🚀🌟 😍
Amazing Page Transitions Using Barba & GSAP 😎🔥
มุมมอง 7815 หลายเดือนก่อน
Amazing Page Transitions Using Barba & GSAP 😎🔥
🎨Modern Stunning Landing Page Using HTML CSS GSAP | JS🚀🌟 😍
มุมมอง 1866 หลายเดือนก่อน
🎨Modern Stunning Landing Page Using HTML CSS GSAP | JS🚀🌟 😍
🎨Modern Creative Landing Page Using Cursor Animations | JS🚀🌟 😍
มุมมอง 2326 หลายเดือนก่อน
🎨Modern Creative Landing Page Using Cursor Animations | JS🚀🌟 😍
🎨Build Pinterest Clone Using HTML CSS & JS | Infinite Scrolling🚀🌟 😍
มุมมอง 7376 หลายเดือนก่อน
🎨Build Pinterest Clone Using HTML CSS & JS | Infinite Scrolling🚀🌟 😍
Awesome work bro ❤❤❤
Thanks bro
amazing
Thank you! Cheers!
niiiiice💥💫 thank you sir
😊
thank youu
You're welcome
amazing 🎉
Thanks 😊
nice
Thanks
Very useful
Thanks alot
Beautiful, awesome, great tutorial, thanks!
Thanks for such a wonderful comment ❤️
amazing 🎉❤
Thanks alot
thnks master
You're welcome 😊
Awesome work bro ❤❤❤
Thanks
please share the source code
Gotta check, I doubt I have the source, will share if I get ;) all the new ones have source code
Very nice Hank! I do have a question, however. In reproducing this effect, I saw an opportunity to optimize the CSS code a bit by declaring variables for the filters as a style attribute in each card instance (creating the variable --hue as 0deg, 150deg, 300deg, and 90deg for each), as opposed to declaring and creating 3 more selectors to apply the filter. I then created the filter property for the .card selector and apply the variable into the property accordingly. While this achieved the desired effect (each card got its own hue), it somehow wound up disabling all of the 3D transform hover effects for the elements inside of the cards; the card itself still rotates when hovered. Do you happen to know why this happens? EDIT: Hmm... Since the cards were wrapped by the .parent div class, I experimented and applied the style to those instances, then moved the filter property to the .parent selector accordingly. THAT works. Now I'm curious as to why applying that filter using a variable would kill some the properties in the child classes? 🤔
Hey! Well I'll have to check the video, I actually have forgotten what I did, will have to look it up and then can tell you haha, sorry bout that, glad it worked though. 🤜🏻🤛🏻🔥
@@HankTheTankCoding Haha, no worries. I was just curious, because I'm relatively new to CSS and I haven't seen that kind of behavior before. FWIW, I applied this to each .card instance in index.html, i.e. style="--hue:150deg;", with each of the values plugged in above for each card class instance on the page. I then added this to the .card selector: filter: hue-rotate(var(--hue)); - this is what caused the hover effects for the elements inside the card to stop working. As mentioned above, moving the style declarations and the property to the .parent elements fixed the problem. Regardless, thank you so much for this demo. You've inspired me to play around and experiment with 3D transform effects! 😁
Thanks alot for your wonderful comment, comments like these inspire me sooo much to keep going, even though there are days I feel down regardless of putting in so many videos in the channel, I'm glad that atleast some are getting help, means alot to me, really alot.
amazing🎉
Thanks
Definitely saving this, Thank you can you please help and make it accept to upload atleast 5 images and then the added images will be then displayed on courasel if the user click upload or next 🤲🏽👏
That would be abit different , but can be made via this approach
@@HankTheTankCoding ok thanks bro will try
Welcome
Bro!! Say about timing!!!! I was thinking of building a Sign up page tomorrow and this popped up.... It is a cool one.... will definitely look into it.
Hahaha! Thanks bro, hope it helps
Very Good 👏🏻👏🏻👏🏻👏🏻
Thanks
super sleek!!
🤙
Looks so sleek and smooth! Thanks for this tutorial 😏
Glad you liked you bro ❤️🤜🏻🤛🏻
Amazing
Thanks alot
Make the websites using react
Definitely in future.
@@HankTheTankCoding make as soon as possible all people need react
@@RohitCoder yep ;)
Awesome work bro ❤❤
Thanks bro
The Frontend channel number one. Thank you!
Thanks alot for such compliment.
Not good only one page designing only css html use that are useless and not other nav link work
Thanks for your feedback ;)
Awesome work bro ❤❤❤
Thank you so much 😀
amazing
Thank you! Cheers!
Great work as always.
Thanks 😊
khub shaaad!!
this deserves more views!
Would love if actually it did , thanks
awesome ❤
Thanks
Channel number one on youtube. 👍🏽👊🏽
Thanks alot, it means alot to me ;)
Nice Work!!
Thanks!
code ??
I havent added the source code link maybe, sorry for that!
This is absolutely stunning
Thanks alot ❤️
Thanks for sharing. What is the link to the UI design? It's not in the description
thanks for making me remember, I just added it in the description, just now please check.
Awesome work bro ❤❤
Thanks bro
so amazing 🎉
Thanks
Can you do this in react js with responsiveness
Yes but will start react at a later date but I'm planning on making react components on the channel
🏃 promo sm
awesome work bro
Thanks bro
Nice one
Thanks
Amazing ❤
Thanks 😄
amazing ❤
Thanks alot
😏
😎
код рабочий , но требует корректировки .floating-container:hover .float-element:nth-child(1){ animation: come-in 0.4s forwards 0.2s; } во всех трех элементах.
Спасибо за фрагмент кода! Кажется, он работает, но мне придется внести некоторые коррективы, чтобы он полностью соответствовал моим потребностям. Благодарю за помощь!
Superb ❤❤
Thanks 🤗
Badhiya hai bhai❤
thanks bro ❤️
Awesome work bro ♥️
Thanks bro ❤️ 🔥
How do you get the images on dribbble?
The designs?