- Видео 353
- Просмотров 185 996
HankTheTank
Индия
Добавлен 12 апр 2016
Coding is fun! Building Cool UI is fun! I joined github, check my account : github.com/Hank-D-Tank
✨Crazy Mobile Event Web App Using Tailwind & GSAP 🔥
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 devices
✨Design Link: dribbble.com/shots/14708176-Event-App-Design-Concept
💻 Source code: github.com/Hank-D-Tank/eventia-ui
🌐 Live demo: eventia-ui.netlify.app/
👇 Don't forget to LIKE, SUBSCRIBE, and hit that NOTIFICATION BELL! 🔔
🔥 Want more tutorials like this? Let me know in the comments below! 👇
Popular Hashtags:
#W...
🚀 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 devices
✨Design Link: dribbble.com/shots/14708176-Event-App-Design-Concept
💻 Source code: github.com/Hank-D-Tank/eventia-ui
🌐 Live demo: eventia-ui.netlify.app/
👇 Don't forget to LIKE, SUBSCRIBE, and hit that NOTIFICATION BELL! 🔔
🔥 Want more tutorials like this? Let me know in the comments below! 👇
Popular Hashtags:
#W...
Просмотров: 456
Видео
✨Modern Creative Landing Page Using GSAP! 🔥
Просмотров 8 тыс.День назад
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 🔥
Просмотров 44214 дней назад
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!
Просмотров 23121 день назад
🔔 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 🤯
Просмотров 84Месяц назад
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!
Просмотров 149Месяц назад
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!
Просмотров 272Месяц назад
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 ✨
Просмотров 424Месяц назад
🔥 Welcome to this fun tutorial where we create a flippable Pokémon magazine using HTML, CSS, and JavaScript! 🔥 In this video, we’ll walk you through step-by-step on how to build an interactive digital magazine that you can flip through just like a real book! Perfect for showcasing your Pokémon collection or any creative project. 🌐 Official Resources: jQuery: jquery.com/ turn.js: www.turnjs.com/...
🚀 Create a Cool Accordion with Just HTML & CSS - No JS Needed! 🎨
Просмотров 2232 месяца назад
In this video, I'll show you how to create a functional and stylish accordion using only HTML and CSS. No JavaScript required! We'll walk through the entire process step-by-step, so you can easily follow along and add this feature to your own website. 🎉 Timestamps: 0:00 - 🎬 Introduction and Project Showcase 0:32 - 📜 HTML Code Explanation 1:27 - 🎨 CSS Code Explanation 3:04 - 🏁 Final Project Show...
🚀 Create a Popup in Less Than a Minute Without JavaScript! 😲
Просмотров 1622 месяца назад
In this video, I'll show you how to create a stylish popup in less than a minute without using any JavaScript. This easy HTML and CSS tutorial is perfect for beginners and anyone looking to add quick popups to their website. 📌 What you'll learn: How to create a popup using HTML and CSS Styling your popup for a modern look Adding buttons to show and close the popup Don't forget to like, comment,...
🔥 Create an Animated Landing Page in 5 Minutes! 🚀
Просмотров 3952 месяца назад
Description: Hey everyone! 👋 In this video, I'm going to show you how to create a simple yet crazy and cool animated landing page using HTML, CSS, and GSAP. This tutorial is perfect for beginners, and we'll have it all done in just 5 minutes! ⏱️ 🎨 What You'll Learn: Setting up your HTML structure 📄 Styling with CSS for a professional look ✨ Adding eye-catching animations with GSAP 🎥 🔗 Get the S...
Create an Animated Input Field with HTML & CSS in 5 Minutes! ✨
Просмотров 6852 месяца назад
Hey everyone! 👋 Welcome back to our channel. In this quick and exciting tutorial, I'm going to show you how to create a sleek, animated input field using just HTML and CSS. This is perfect for both beginners looking to learn some cool CSS tricks and experienced developers wanting to enhance their web projects with stylish animations. Timestamps: 0:00 - Intro 0:11 - Project Preview 0:39 - Channe...
✨ Only 2 Lines of CSS for Amazing Scroll Animations! 🚀 No JS Needed!
Просмотров 2 тыс.2 месяца назад
✨ Only 2 Lines of CSS for Amazing Scroll Animations! 🚀 No JS Needed! Learn how to create stunning on-scroll animations using just 2 lines of CSS! In this tutorial, I'll walk you through the entire process, from setting up your HTML to adding CSS animations that bring your webpage to life as you scroll. No JavaScript needed! Follow along with the timestamps below to master this awesome CSS techn...
✨Create Amazing Horizontal Slider Using Just CSS | No Javascript !
Просмотров 1 тыс.3 месяца назад
🎉 Welcome back to my channel! 🎉 In today's tutorial, I'll show you how to create a stunning horizontal slider with custom scrollbars using only HTML and CSS. This is perfect for displaying content in a sleek, interactive way on your website. Watch the video and follow along! 📂 Source Code : drive.google.com/drive/folders/1JdKgZ6NoCFhhOY0VQoTayvfv1WKume1O?usp=drive_link 💡 What You'll Learn : - H...
Easy Mega Menu Dropdown Using Just CSS ✨
Просмотров 5003 месяца назад
Welcome to my channel! In this tutorial, we'll be creating a stunning and responsive Mega Menu using HTML and CSS. This step-by-step guide will help you enhance your web design skills and make your navigation menus look amazing. 🔴 What You'll Learn: Setting up the HTML structure Styling the menu with CSS Creating interactive hover effects Using Remix Icons for added flair Tips and tricks for ma...
😍 Stylish Interactive Graphs with Chart.js 📈🔥
Просмотров 1403 месяца назад
😍 Stylish Interactive Graphs with Chart.js 📈🔥
🚀 Create an Awesome Table with HTML & CSS! 📊✨
Просмотров 2133 месяца назад
🚀 Create an Awesome Table with HTML & CSS! 📊✨
🚀 Create a Stunning Product Card 🍦With GSAP Animations
Просмотров 2404 месяца назад
🚀 Create a Stunning Product Card 🍦With GSAP Animations
🎨 Create a Stylish Custom Right-Click Menu with HTML, CSS & JS! 💻✨
Просмотров 4104 месяца назад
🎨 Create a Stylish Custom Right-Click Menu with HTML, CSS & JS! 💻✨
Create a Searchable Member List with HTML, CSS & JS 🚀
Просмотров 3464 месяца назад
Create a Searchable Member List with HTML, CSS & JS 🚀
🎨 Build Custom Dropdown & Accordion Menu
Просмотров 2654 месяца назад
🎨 Build Custom Dropdown & Accordion Menu
Learn To Create STUNNING Cards Using HTML & CSS
Просмотров 2974 месяца назад
Learn To Create STUNNING Cards Using HTML & CSS
Create Professional Image Uploader Using HTML CSS & JS 🔥
Просмотров 1525 месяцев назад
Create Professional Image Uploader Using HTML CSS & JS 🔥
Creative Modern Form Using HTML CSS & GSAP
Просмотров 1805 месяцев назад
Creative Modern Form Using HTML CSS & GSAP
🎨Build A Stunning Website Using GSAP🚀🌟 😍
Просмотров 5085 месяцев назад
🎨Build A Stunning Website Using GSAP🚀🌟 😍
🎨🌟 SVG Text Animation Using HTML & CSS No GSAP! 🚀 😍
Просмотров 2435 месяцев назад
🎨🌟 SVG Text Animation Using HTML & CSS No GSAP! 🚀 😍
Crazy Tips To Improve Buttons In CSS #html #css
Просмотров 976 месяцев назад
Crazy Tips To Improve Buttons In CSS #html #css
Create Skeleton Loading Using HTML CSS & JS
Просмотров 2076 месяцев назад
Create Skeleton Loading Using HTML CSS & JS
Full Responsive Modern Animating Website Tutorial Using | HTML CSS JS
Просмотров 1,5 тыс.6 месяцев назад
Full Responsive Modern Animating Website Tutorial Using | HTML CSS JS
🎨Build A Stunning Animated Joker Website Using HTML CSS & GSAP🚀🌟 😍
Просмотров 7676 месяцев назад
🎨Build A Stunning Animated Joker Website Using HTML CSS & GSAP🚀🌟 😍
Hello bro from where u learnt GSAP
Hello bro from where u learnt GSAP
Hello bro from where u learnt GSAP
Bro, you spamming everywhere, haha, I learnt by building projects, reading docs and watching yt videos ;)
Ur name is jayodeep right
Joydeb
Oo sry bro mein tum harkirat podcast you amazing brother 🙌🙌🙌🙌
ha bro , thanks bro ;)
Great job 😃
Thanks 😊
thank you so much
You're welcome
You should think about making a Udemy course. I would buy it!!
Thanks bro, yes I will
Nice transition 👍
Thanks bro
Even your old videos are a gem, dil krrha h bc puri 360 videos downlaod krke rkh lu
Arey bro thanks ❤️
Awesome work bro ❤❤❤
Thanks bro 🔥
This project clean bro🔥🔥
Thanks bro
This is dope♠️
Thanks bro
Thank you! This is so generous of you. Excellent content.
Glad I could help
Really good design, where did you get these ideas from.
I mostly refer behence, dribbble, pinterest and other platforms, not all designs are mine though, this one is not mine, I just modified a little bit ;)
Can you make a playlist on UI, step by step, from beginner to advance, covering every important aspect of UI, I guarantee you it will gain millions and millions of views
Thanks alot bro, yes I am planning on starting ;)
@@HankTheTankCoding Please asap
@@HankTheTankCoding and you are from Guwahati?
@umairabdullah9041 🔥
@@umairabdullah9041 yea bro, I'm Joydeb don't worry , it's same guy lol
some crazy shit right there cool sick dude n1 keep the good work up ❤❤ i made it and uploaded on LinkedIn thanks !
Damn, crazy man, thanks
Bro how you get all the resources like images ?
I searched these images online via google image search then downloaded and removed the background of the images
Why isn't your code on GitHub?
is gsap free?
Yes, but they have their paid version as well for the plugins with cool effects, but here we use everything for free!
Not responsive
yes , i already told in the video ;)
Hey how do you download the assets from dribble?
I search on google and then remove the background and use them
@@HankTheTankCoding Could you please elaborate like what do you search for?
I use Google image search to find the images
@@HankTheTankCoding Thanks fo replying man much appreciated! Keep on doing the good work!
@yashgupta6327 no worries bro, thanks!
Phenomenal
Thanks man!
yes we need gsap animation please xd
surely 🔥
Plz make tutorial like makeing awwward type website. Plz
Good idea but would take soo much time though , haha
@@HankTheTankCoding give it a try because there are not many Chanel that cover this
yea
Thank you Boss. did you just download the images from Dribble?
no , I searched these images, their brands found their official site or so and then downloaded and removed the background of the images
where do you get all these ideas from bhai?
Saw the design on Pinterest I think then thought sliding the car in would make it look and having text effect behind would be cool so, that's how ig
@@HankTheTankCoding Bhai, would you please guide me through a little bit? What are the tools/libraries that I should go through? Can you please name some?
Gsap, three js
What are the tech stack you are using
usually MERN
Grate stuffs broo
Thanks bro
bro make on react?
we can but that would make the video longer, haha , but will in future
How can I subscribe twice, great stuff brother ❤
Thanks man , haha
Wow this is so nice...
Thank you so much
Amazing ❤
🔥
🤯
🎉
Cool ❤
Thanks bro 🎉
Awesome work bro ❤❤❤
Thanks bro
Nice you r genius
Thanks ;)
it was amazing
Thanks 🔥
Good
🔥
Hi Joydeb, if this is you could you please guide me. I am a first year CSE student. Recently I saw all the websites you shared on Notion and they are amazing! I am very excited and inspired by your work. Can you please explain how you learned to create such awesome designs? I would like to know what resources you use. How long does it take? And which framework are you using? Your advice will help me a lot as I improve my web development skills.
Hey! So basically I use react and currently working on next JS , the design I have , some of them are designed by other person and some by me, for designing I mostly use figma, for components, I use my custom CSS mostly. The only advice would be, keep building and you'll get better, I got better by building heaps n heaps of projects. God bless, keep up the good work!
@@HankTheTankCoding Thanks for your time and guidance. It means a lot 🤗
@@HankTheTankCoding Thanks for your time and guidance. It means a lot 🤗
@JayeshKrishna-k7v no problem bro 🔥
where did you learn these cool css design?
The design was taken from a Pinterest image, then I added images and animations n stuff
❤❤😊
🔥
looks great🎉
Thank you 😋
Awesome work bro ❤❤❤
Thanks bro
Hi brother can you be my mentor.
Idk if I am even qualified to be one!
@@HankTheTankCoding help me with structured learning I don't know exactly what to learn guide me on what to learn.
@@manavkohli8601 learn html css then JS, learn higher order functions of JS go for react , learn Typescript , go for backend, yea build projects on the way
Goggle drive link is not working
Will check and let you know , no worries
Awesome work bro ❤❤❤
Thanks bro 🔥
Clean
Thanks bro
@@HankTheTankCoding More than welcomed brotherman! would you recommend me to move to learning libraries and frameworks for JS n CSS I haven't learnt much of these
Definitely, start with the hig order array functions like map filter etc n then you can start with react if you want n if u know css other libraries r easy, go for tailwind if you want, or may be for components you could go with shad ui
@@HankTheTankCoding Thank You 💯🙌🏾
@samkelopj always brother!