- Видео 361
- Просмотров 213 456
HankTheTank
Индия
Добавлен 12 апр 2016
Coding is fun! Building Cool UI is fun! I joined github, check my account : github.com/Hank-D-Tank
✨ Building Smooth Skeleton Loading in React | Modern UI Magic 🪄
Learn how to create professional skeleton loading states in React!
In this tutorial, we'll explore:
🔄 Managing loading states with useState
⚡ Conditional rendering techniques
🎨 Creating beautiful skeleton UI animations
🧱 Building reusable loading components
💫 Mapping placeholder arrays
Starting with a basic React setup, we'll dive deep into implementing skeleton loading - that smooth, professional loading effect you see on major platforms. Perfect for improving your user experience!
🎯 What you'll learn:
useState for loading states
Conditional rendering
Array mapping techniques
CSS animations
Modern UI patterns
💻 Complete source code available in description!
🔥 No advanced prerequisites needed - just ba...
In this tutorial, we'll explore:
🔄 Managing loading states with useState
⚡ Conditional rendering techniques
🎨 Creating beautiful skeleton UI animations
🧱 Building reusable loading components
💫 Mapping placeholder arrays
Starting with a basic React setup, we'll dive deep into implementing skeleton loading - that smooth, professional loading effect you see on major platforms. Perfect for improving your user experience!
🎯 What you'll learn:
useState for loading states
Conditional rendering
Array mapping techniques
CSS animations
Modern UI patterns
💻 Complete source code available in description!
🔥 No advanced prerequisites needed - just ba...
Просмотров: 92
Видео
✨ One Line CSS Magic: No JavaScript Required! 🪄
Просмотров 2,2 тыс.16 часов назад
✨ One Line CSS Magic: No JavaScript Required! 🪄 🎯 Learn how this single line of CSS transforms your gallery: .container:hover .image img:not(:hover) 🔍 🎨 What you get: - 🖼️ Non-hovered images auto-blur & shrink - 🔆 Focused image stays crystal clear - 🌊 Smooth, fluid transitions - ⚡ Zero JavaScript needed - 📱 Works across all browsers 💡 Perfect for: - 🎯 Image galleries - 💼 Portfolios - 🎪 Showcase...
🚀 MIND-BLOWING 3D Website in 5 Minutes
Просмотров 87414 дней назад
🔥 In this quick tutorial, I'll show you how to create an insane 3D website that will blow your audience away! Learn how to integrate Spline's powerful 3D capabilities with clean HTML/CSS to create a professional landing page in just 5 minutes. ✨ What you'll learn: Setting up the HTML structure Integrating Spline 3D elements Pro tip: Removing the built-in Spline button ⚡️ No code! [Source Code] ...
Building an Elegant Image Gallery with React & Tailwind
Просмотров 1,3 тыс.21 день назад
In this tutorial, we'll create a stunning, interactive image gallery inspired by modern UI designs. Learn how to build an expanding panel animation that smoothly transitions between images using React and Tailwind CSS. This project features: ✨ Smooth panel expansion animations 🎨 Dynamic background blur effects 📱 Responsive design principles ⚡ useState hook for state management 🎯 Click interacti...
Sleek Quick JS mouse reveal effect | easy & elegant ✨
Просмотров 78928 дней назад
🖱️ Create an EPIC Mouse Trail Effect in Pure JavaScript! ✨ No Libraries, Just Vanilla JS Magic ✨ Transform your boring cursor into a mesmerizing image reveal effect! In this tutorial, we'll create a sleek mouse movement animation that unveils a cyberpunk-style image beneath your cursor. Perfect for portfolio websites, landing pages, or any project needing that extra WOW factor! 🚀 Source Code : ...
Video Background Text using CSS in 3mins
Просмотров 223Месяц назад
In this video we'll learn how you can mask a video behind a text using just one line of css. Source Code : github.com/Hank-D-Tank/video-bg-text-mask Hashtags: #CSS, #HTML, #CSSMagic, #WebDesign, #CodingTutorial, #HTMLVideo, #CSSAnimation, #FrontendDev, #WebDevelopment, #CreativeCoding, #CSSEffects, #TextMask, #VideoBackground, #WebDesignTricks, #CodingForBeginners, #AdvancedCSS, #ResponsiveDesi...
🔥Creative 3D Tilt Card Using 3 lines of JS
Просмотров 322Месяц назад
Hey there! 👋 In this video, I’ll show you how to create an eye-catching 3D Tilt Card effect with just 3 lines of JavaScript using Vanilla Tilt. 🚀 You'll learn how to: Set up a beautiful card design with HTML and CSS 🎨 Add a smooth 3D tilt effect that responds to mouse movement 🖱️ Achieve a modern, engaging UI effect in minutes ⏱️ Source Code: 👉github.com/Hank-D-Tank/tilt-card Let's make your de...
✨Build Pinterest Layout with 1 CSS Line | Masonry Layout
Просмотров 448Месяц назад
Tired of over complicating your layout with Flexbox or CSS Grid? I’ve got the simplest solution for you-the column-count CSS property! In this video, I’ll show you how to create a sleek and responsive masonry layout (like Pinterest 🖇️) using just one line of CSS. 🖌️ 🚫 Why Flexbox & Grid fall short: Both Flexbox and Grid have their strengths, but when it comes to a seamless, staggered masonry ef...
✨Crazy Mobile Event Web App Using Tailwind & GSAP 🔥
Просмотров 934Месяц назад
Description: 🚀 Ready to build an EPIC mobile event web app? Let's dive in! 🏊♂️ In this tutorial, we'll create a stunning event app using: ✅ Tailwind CSS for sleek styling ✅ GSAP for smooth animations ✅ Responsive design for mobile-first approach 🔥 You'll learn how to: Create eye-catching event cards , Implement a slick "About" section Add buttery-smooth animations and Optimize for mobile devic...
✨Modern Creative Landing Page Using GSAP! 🔥
Просмотров 15 тыс.2 месяца назад
In this tutorial, I'll walk you through building a stylish and animated swiper-based layout for a Moncler-themed webpage using GSAP (GreenSock Animation Platform) and Swiper.js. We’ll implement smooth animations and transitions with GSAP and add interactivity to our swiper slides using Swiper.js. Perfect for anyone looking to level up their frontend skills! 🚀 🔗 Source Code: github.com/Hank-D-Ta...
Sleek Text Reveal Animation Using Just CSS 🔥
Просмотров 5302 месяца назад
In this video, we’ll create a stunning CSS text wipe animation paired with a neon glowing icon effect using just HTML and CSS. 🌟 Source Code : drive.google.com/drive/folders/1W3WtqyE06smtJXq2ZsdJr_7VhoEJNMm0?usp=sharing This step-by-step tutorial will walk you through building a clean, modern animation from scratch - perfect for adding a unique touch to your web designs. 🎨 Whether you're a begi...
🚀 Send Browser Notifications in 5 Lines of JS!
Просмотров 2852 месяца назад
🔔 Unlock the power of browser notifications in just 5 lines of JavaScript! 🖥️ Source Code : drive.google.com/drive/folders/1sjBI24krdDddztrqDgh8kbMdo4RnNcdI?usp=sharing In this quick tutorial, we'll show you how to: ✅ Request user permission ✅ Create custom notifications ✅ Boost user engagement with ease Perfect for beginners and pros alike! 👨💻👩💻 🔥 Don't forget to like and subscribe for more ...
🔥CSS Gradient Borders made Easy!! in just 2 mins 🤯
Просмотров 1212 месяца назад
Lets learn to build cool gradient backgrounds with animations as well in just 2 minutes. Source Code : drive.google.com/drive/folders/1YNvX3pkODn-5gBJ7bPUx-dxMhHWVWVAy?usp=sharing Tags: CSS tutorial, 3D CSS effects, infinite scrolling, web development, front-end tutorial, HTML CSS project, web design, coding tutorial, CSS animation, responsive web design, web development for beginners, HTML CSS...
🔥Sleek Glossy Modern Card Using Just CSS, Never Seen Before!
Просмотров 2042 месяца назад
In this video we'll be learning to create a modern sleeky card that you can integrate into your website or web application to make it stand out! Source Code: drive.google.com/drive/folders/1BqMGKSK-K0In8AfhOOyL8wpCch8GIZYv?usp=sharing ✨ If you found this helpful, don’t forget to drop a like and share your own creations in the comments! 🙌 Tags: CSS tutorial, 3D CSS effects, infinite scrolling, w...
🔥 Create a 3D Infinite Scrolling Gallery Only with CSS! No JavaScript Needed!
Просмотров 3953 месяца назад
Ever wanted to create a stunning 3D infinite scrolling gallery using only CSS? 🤯 In this tutorial, I’ll show you how to build this eye-catching effect from scratch! 💡 We’ll go step by step, breaking down the HTML structure and diving deep into the CSS magic - from perspective and 3D transforms to smooth animations. 🚀 👇 Grab the code below and follow along! drive.google.com/drive/folders/1vP7bG9...
Amazing Book Flip Effect In 5 Mins | HTML CSS ✨
Просмотров 1,6 тыс.3 месяца назад
Amazing Book Flip Effect In 5 Mins | HTML CSS ✨
🚀 Create a Cool Accordion with Just HTML & CSS - No JS Needed! 🎨
Просмотров 3073 месяца назад
🚀 Create a Cool Accordion with Just HTML & CSS - No JS Needed! 🎨
🚀 Create a Popup in Less Than a Minute Without JavaScript! 😲
Просмотров 2483 месяца назад
🚀 Create a Popup in Less Than a Minute Without JavaScript! 😲
🔥 Create an Animated Landing Page in 5 Minutes! 🚀
Просмотров 5164 месяца назад
🔥 Create an Animated Landing Page in 5 Minutes! 🚀
Create an Animated Input Field with HTML & CSS in 5 Minutes! ✨
Просмотров 7824 месяца назад
Create an Animated Input Field with HTML & CSS in 5 Minutes! ✨
✨ Only 2 Lines of CSS for Amazing Scroll Animations! 🚀 No JS Needed!
Просмотров 2 тыс.4 месяца назад
✨ Only 2 Lines of CSS for Amazing Scroll Animations! 🚀 No JS Needed!
✨Create Amazing Horizontal Slider Using Just CSS | No Javascript !
Просмотров 1,3 тыс.4 месяца назад
✨Create Amazing Horizontal Slider Using Just CSS | No Javascript !
Easy Mega Menu Dropdown Using Just CSS ✨
Просмотров 5385 месяцев назад
Easy Mega Menu Dropdown Using Just CSS ✨
😍 Stylish Interactive Graphs with Chart.js 📈🔥
Просмотров 1915 месяцев назад
😍 Stylish Interactive Graphs with Chart.js 📈🔥
🚀 Create an Awesome Table with HTML & CSS! 📊✨
Просмотров 2535 месяцев назад
🚀 Create an Awesome Table with HTML & CSS! 📊✨
🚀 Create a Stunning Product Card 🍦With GSAP Animations
Просмотров 2975 месяцев назад
🚀 Create a Stunning Product Card 🍦With GSAP Animations
🎨 Create a Stylish Custom Right-Click Menu with HTML, CSS & JS! 💻✨
Просмотров 4345 месяцев назад
🎨 Create a Stylish Custom Right-Click Menu with HTML, CSS & JS! 💻✨
Create a Searchable Member List with HTML, CSS & JS 🚀
Просмотров 3826 месяцев назад
Create a Searchable Member List with HTML, CSS & JS 🚀
🎨 Build Custom Dropdown & Accordion Menu
Просмотров 2796 месяцев назад
🎨 Build Custom Dropdown & Accordion Menu
Learn To Create STUNNING Cards Using HTML & CSS
Просмотров 3256 месяцев назад
Learn To Create STUNNING Cards Using HTML & CSS
How do you learn this kind of stuff?
There are many resources available, when you work on practical projects , you have to do research and look into various docs, that's how you learn. Now you know it, so you can build skeleton loaders easily 🙌
Bro where do you get these ideas for project and do you use to make project by doing a topic or completing react then making project
Build from whatever you have learnt, you'll eventually face some problems which after solving by yourself you'll learn something new. That's how it works, if you wait for completing and then building it will never happen
thanks man ,..your content is cool ..i usd to see this effect on youtube but i couldnt imagine how its done
Glad I could help man!!
1:00
Bro can you tell me about your learning resources. From where you learned all this. I am really amazed by your projects.
Thanks , mostly youtube, looking at docs
@HankTheTankCoding can you share some resources for frontend developer who wants to make crazy animation websites
Look at gsaps docs they have a detailed tutorial, after that build some of my landing page videos side by side, you should have a decent idea , after that look at some designs on dribble, behance and even pinterest, try replicating those after your abit good with ui, focus on react, like higher order functions , fetching, hooks and bla bla..and you should be good. In short build projects and learn new concepts, you'll do good, god bless
big bro ......teach us to build this
I did, its uploaded on the channel, check in this playlist : "Websites Tutorial With Source Code!"
😍😍😍😍😍😍😍😍😍😍woooooooow
🙌🔥
Can get code
There isn't much though, just flex the images and then do this ;)
@HankTheTankCoding i try same code but I don't have any idea how to find image ,is that png image
Get those image from Pinterest and then go to photoroom website or remove bg and remove the background using AI and then use them
Looks good, I'll put it into practice at some point.
Yep 🙌
great work. You should produce more reactJs content ;)
Thanks man. YES! I am planning on making more, just about busy with job ;)
bro can you share your linkedin profile link
Yes will share someday ;)
awesome work bro
Thanks bro 🔥
No one is making a videos of html and css and i think here you can really diferentiate yourself from all the basic webflow and framer people. HankTheTank. Exploring true limitations of Spline integration with css html etc..
Yes! 🙌
Great example HankTheTank. My question. How would you create an experience where there is just a spline scene (you can interact with) but when you click twice or press exact key the overlay UI pop's up. I know there are ui scenes in Spline but are very limited. I am thinking in making a b2b digital twin, connecting API data and show charts ... webcams etc as an overlay that is triggered with Spline scene. Do I need to do this with three.js or is there some alternative approach. How would you achieve this? Thanks and keep it up with great work!
Thanks for your thoughtful question! For what you're describing, I'd recommend using Spline's @splinetool/runtime library with React or another frontend framework, rather than relying on Spline's built-in UI scenes. This gives you much more flexibility to create custom overlays and integrate data. Thanks, god bless ❤️
Well HankTheTank, this is a piece of a puzzle that MANY are missing and looking for. If you can make a video in this direction you will be a true helper. Same goes for connecting geolocation api (being able to show map as an api or at least get the gps location in Spline and put on the spline created environment with true location data. Same as you can do within UE. Take care and thanks for your effort
Yes, in future 😁, thanks for the appreciation.
So you buy someone else’s work then add it to your code.. lol instead! Use blender and three.js
Your suggestion changed my life. Thanks
@ that was the goal. Glad I could achieve it.
@@Brawlstriker89 yes
Amazing ❤
Thanks ;)
Awesome work bro ❤❤❤
Thanks bro
So good 👏
Appreciate it man 🙏
Your Projects are Amazing, Bro! 🚀 I'm just starting out in web development and really inspired by your work! 🙌 Got any tips on how I can make projects like you?
Just follow along I'd say, keep building and you'll be good ;) god bless and thanks for the appreciation
Okay...Thanks
@abhishekkalita-303 welcome ;)
Link for image ?
images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg
not responsive
Yep 🥲 that's a home take away!
nice project bro
Thanks alot bro
Thanks, I was just looking for something to practice with pictures and found this, looks great.
You're welcome 🔥
@@HankTheTankCoding I need help, I used TypeScript instead of JavaScript and it didn’t turn out as I expected. Everything is showing up in one column instead of how it was in the video :c
That shouldn't happen even if you use typescript ;) class names work same in js and in ts also pls tell me where you're having issue?
@@HankTheTankCoding I've already fixed it, I had missed something to do so that my Tailwind styles would load
@@jhonatanjacome7207 ohh nice
amazing am gona incomperate it in my hero section ..thank you very much
Thanks alot ;)
Awesome work bro ❤❤❤
Thanks bro
How were you able to get the images ? Did you generate your own using AI ??
Nope, searched these online
let container=document.querySelector(".container"); container.addEventListener("mousemove",function(dets){ let span=document.createElement("span"); container.appendChild(span); span.style.left=dets.x+"px"; span.style.top=dets.y+"px"; console.log("hello"); setTimeout(function(){ container.removeChild(span); },2000) }) // you can also use dets try out this one!
ohh cool thanks bro!
semangatt bang sangat membantu vidionya buat pemula yang binggung mau buat projek apa setelah tau basic python
Terima kasih banyak! Senang mendengar videonya membantu.
This is top level stuff for e-commerce products showcase. Quick question; how do I replicate this in WordPress/Elementor.
Thanks man, This will be abit difficult on WordPress imo, it uses too much custom code and use gsap
@@HankTheTankCoding Yes I know. To be honest, WordPress uses a lot of custom code and can implement GSAP as well
Cool, you can prolly look at the source, you can implement it directly by pasting with some modifications as needed
World class material
Thanks a lot man 🙌🏼
Very informative
Thanks!
awesome work bro
Appreciate it man
Amazing work❤
Thanks pro coder 🤣!
Hey, Can anyone give me the code for the slider when scrolling I just want to add the code to my website to make the scrolling slider or effect like this. This will be very helpful for me..
Check the description, it has the source code ;)
Is it you teaching in Harkirat's course, today's class? UI UX?
No that's a different guy bro, that's keshav
@@HankTheTankCoding Tbh, you should've been doing it
haha he's good bro ;)
My goodness the best teacher of all time ..i cant believe how you made something which seemed too complex so simple like that ..i will give you a like and a subscribe ..thank you for teaching me this cool stuff ....your amazing
Thanks for such words and appreciation, glad I could help ;)
This is crazy Shit broo 😂 i Thougt you were using three JS , I saw you from harkirats live , i took your notion and followed from there great work bro 🐐
Thanks bro ;)
Yeah!!.. React JS coming up :)
Yesshh
i cant wait
@@mileslegend 🎉
very impressive
Thanks
It looks great but why is it so hard to read, the screens are pretty blurry. THANKS.
Images prolly haven't loaded
Cool.....
Thanks bro
your x link please
r_joydeb
Awesome ❤
Thanks
Wow bro awesome work bro ❤❤❤
Thanks man