- 353
- 185 996
HankTheTank
India
Приєднався 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:
#WebDev #FrontEndDevelopment #CodingTutorial #LearnToCode #JavaScript #TailwindCSS #GSAP #MobileFirst #UIDesign #WebAnimation #ResponsiveDesign #EventApp #CodeNewbie #ProgrammingTips #WebDesign #TechTutorial #FullStackDeveloper #HTML5 #CSS3 #webappdevelopment
🚀 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:
#WebDev #FrontEndDevelopment #CodingTutorial #LearnToCode #JavaScript #TailwindCSS #GSAP #MobileFirst #UIDesign #WebAnimation #ResponsiveDesign #EventApp #CodeNewbie #ProgrammingTips #WebDesign #TechTutorial #FullStackDeveloper #HTML5 #CSS3 #webappdevelopment
Переглядів: 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!