- Видео 42
- Просмотров 145 552
Mathe. | Creative Coding Camp
Бразилия
Добавлен 14 июл 2022
Hi there, welcome to this channel!
My goal is to develop and share creativity in elements and functionality to improve the UI/UX of any type of application, here you will easily find animations and effects with HTML, CSS and JavaScript.
Whether for work, study or personal purposes, feel free to consume and share this content as you wish, remembering that all code developed is available in the description.
Subscribe to get inspired and improve your skills. Hit the bell icon to get the notification.
-
This channel has an official repository on Github, containing various HTML, CSS, JavaScript, AlpineJs, TailwindCSS, ReactJs and other projects! Become a member on Patreon and gain immediate access to this and other amazing content, such as e-books and ready-to-use templates!
Link to start your dev experience: www.patreon.com/MatheCreative
You can contact me: channel.mathe@gmail.com
My goal is to develop and share creativity in elements and functionality to improve the UI/UX of any type of application, here you will easily find animations and effects with HTML, CSS and JavaScript.
Whether for work, study or personal purposes, feel free to consume and share this content as you wish, remembering that all code developed is available in the description.
Subscribe to get inspired and improve your skills. Hit the bell icon to get the notification.
-
This channel has an official repository on Github, containing various HTML, CSS, JavaScript, AlpineJs, TailwindCSS, ReactJs and other projects! Become a member on Patreon and gain immediate access to this and other amazing content, such as e-books and ready-to-use templates!
Link to start your dev experience: www.patreon.com/MatheCreative
You can contact me: channel.mathe@gmail.com
Animated and Creative Navbar | HTML CSS & JavaScript
🎬 Animated and Creative Navbar | HTML CSS & JavaScript
IMPORTANT: With this video I start a new series here on the channel called "why not?" where I will explore interactivity, let's say with a little more freedom 😏
👍 If You Enjoy This Video, Consider Hitting The Like Button!
🥁 Subscribe To Stay Notified For New Videos:
www.youtube.com/@mathe.creative
🌟 The "Front-end for Beginners" EBOOK is now available! High quality content, check it out now:
www.patreon.com/mathecreative/shop
[SOURCE CODE]
Became a channel member:
--- Patreon:
🌟 www.patreon.com/MatheCreative
--- Buymeacoffee
🌟 buymeacoffee.com/mathecreative
Timestamps
00:00:00 - Demo
00:01:35 - TailwindCSS CDN
00:02:15 - HTML for Header Navbar
00:05...
IMPORTANT: With this video I start a new series here on the channel called "why not?" where I will explore interactivity, let's say with a little more freedom 😏
👍 If You Enjoy This Video, Consider Hitting The Like Button!
🥁 Subscribe To Stay Notified For New Videos:
www.youtube.com/@mathe.creative
🌟 The "Front-end for Beginners" EBOOK is now available! High quality content, check it out now:
www.patreon.com/mathecreative/shop
[SOURCE CODE]
Became a channel member:
--- Patreon:
🌟 www.patreon.com/MatheCreative
--- Buymeacoffee
🌟 buymeacoffee.com/mathecreative
Timestamps
00:00:00 - Demo
00:01:35 - TailwindCSS CDN
00:02:15 - HTML for Header Navbar
00:05...
Просмотров: 17
Видео
How to make a scrambled text animation | HTML CSS & JavaScript
Просмотров 627 часов назад
🎬 How to make a scrambled text animation | HTML CSS & JavaScript 👍 If You Enjoy This Video, Consider Hitting The Like Button! 🥁 Subscribe To Stay Notified For New Videos: www.youtube.com/@mathe.creative 🌟 The "Front-end for Beginners" EBOOK is now available! High quality content, check it out now: www.patreon.com/mathecreative/shop [SOURCE CODE] Became a channel member: Patreon: 🌟 www.patreon.c...
Button Animation with Lottiefiles | Easy and Awesome
Просмотров 25714 дней назад
🎬 Button Animation with Lottiefiles | Easy and Awesome Hi there! In this incredible video tutorial I show you how to use the wonderful Lottiefiles tool to create complex animations in a simplified way. Lottiefiles is growing every day with new integrations and plugins, so it's a technology that we need to pay attention to on the front ends. In this video we will use the web player and javascrip...
3D Carousel Slider in HTML CSS & JavaScript | Arrows and Pagination
Просмотров 55628 дней назад
🎬 3D Carousel Slider in HTML CSS & JavaScript | Arrows and Pagination Hi there! Mathe here and in this video we are going to create an amazing 3D Carousel Slider. Whether to make an Image Slider or a Card Slider, this video helps you to get that carousel slider effect like where each slide is given a position when another slide is showing as the main one - the carousel slider is a great way to ...
Awesome Responsive Personal Portfolio Website | Showcase UI Design
Просмотров 692 месяца назад
🎬 Awesome Responsive Personal Portfolio Website | Showcase UI Design Hi there! In this video I present to you a responsive layout for a personal portfolio in the showcase concept. Approaching your future customers in an elegant and objective way can put you ahead of the vast majority of your competition. In the development I used HTML CSS and Javascript, with AlpineJs responsible for interactio...
Top 5 CSS Effects | CSS Effects For 2024
Просмотров 943 месяца назад
🎬 Top 5 CSS Effects | CSS Effects For 2024 Hi everyone! Explore the Top 5 CSS-Only Effects in this captivating video tutorial! From neon to perspective effects, unlock the secrets of CSS wizardry and take your web design skills to the next level. No JavaScript needed - just pure CSS! Watch now and unleash your creativity! To have access to the source code of the effects presented in this video,...
Horizontal Scroll HTML & CSS | Infinite Scrolling CSS
Просмотров 7586 месяцев назад
🎬 Horizontal Scroll HTML & CSS | Infinite Scrolling CSS Hello, everyone! Want to give your users a scrolling experience that's both visually appealing and performance-friendly? Check out our tutorial on how to use horizontal infinite scroll HTML and CSS to achieve just that. In this tutorial, I will teach you how to create a scroll experience that's both visually appealing and performance-frien...
Bootstrap 5 Navbar - Creating a Responsive Dropdown Menu | DropDown Menu with Submenu
Просмотров 2,4 тыс.7 месяцев назад
🎬 Bootstrap 5 Navbar - Creating a Responsive Dropdown Menu | DropDown Menu with Submenu In this video, I created for you a Responsive Navbar with Drpdown Menu in HTML CSS and Bootstrap 5, no JavaScript. When mobile, the Navbar Menu turns into a useful Sidebar Menu, beautiful layout, super simple and functional. Site navigation with a good dropdown menu (with a submenu) is very important in term...
Multi-Step Form using HTML CSS and JavaScript | Form with Progress Bar
Просмотров 3119 месяцев назад
🎬 How to Make Multi Step Form using HTML CSS and JavaScript | Form with Progress Bar In this tutorial, we will learn how to make a multi step form using HTML CSS and JavaScript. We will also learn about the use of the Alpine.js library to create a progressive form. This form will allow the user to enter several pieces of data, and will update the progress bar as they enter each piece of data. T...
Create a Show/Hide Password Feature with HTML CSS and JavaScript | Web Development Tutorial
Просмотров 22411 месяцев назад
Create a Show/Hide Password Feature with HTML, CSS, and JavaScript | Web Development Tutorial Learn how to create a show and hide password functionality using HTML, CSS, and JavaScript. In this tutorial, we'll explore the common feature found in login forms where users can toggle the visibility of their passwords. With step-by-step guidance, you'll discover how to implement this feature using H...
CSS Text Typing Animation Tutorial | Typewriter Effect | Web Development
Просмотров 10411 месяцев назад
🎬 CSS Text Typing Animation Tutorial | Typewriter Effect | Web Development Watch this web programming tutorial and learn how to create a CSS text typing animation with a typewriter effect. In this video, you'll discover how to add a text typing animation effect using HTML and CSS. Follow along step-by-step as we create a captivating text typing animation that brings your web content to life. Wi...
Counter using HTML CSS and JavaScript | CountUp.js Tutorial
Просмотров 37911 месяцев назад
Counter using HTML CSS & JavaScript | CountUp.Js Learn how to create a stylish and smooth animated counter using HTML, CSS, and JavaScript, with the help of the CountUp.js library. In this step-by-step web programming tutorial, beginners and intermediate developers will discover the fundamentals of HTML structure and CSS styling, as well as the JavaScript logic required to implement the counter...
How to Create a Responsive Navbar using Bootstrap 5 | Responsive Sidebar Menu 2.0
Просмотров 4,5 тыс.Год назад
How to Create a Responsive Navbar using Bootstrap 5 | Responsive Sidebar Menu 2.0
Responsive Card Slider in HTML CSS & JavaScript | SwiperJs
Просмотров 971Год назад
Responsive Card Slider in HTML CSS & JavaScript | SwiperJs
CSS Product Card Hover Effect | Product Card UI Design
Просмотров 266Год назад
CSS Product Card Hover Effect | Product Card UI Design
Hide Navbar on Scroll Down and Show on Scroll Up | HTML CSS and JavaScript
Просмотров 369Год назад
Hide Navbar on Scroll Down and Show on Scroll Up | HTML CSS and JavaScript
Active Nav Link Indicator with JavaScript | Scroll Spy Indicator
Просмотров 614Год назад
Active Nav Link Indicator with JavaScript | Scroll Spy Indicator
Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step]
Просмотров 1,3 тыс.Год назад
Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step]
Parallax Scrolling Website using HTML CSS and JavaScript | How to make Parallax Website
Просмотров 309Год назад
Parallax Scrolling Website using HTML CSS and JavaScript | How to make Parallax Website
How To Make Website DARK MODE | Dark Theme Website Design Using HTML CSS & JS
Просмотров 332Год назад
How To Make Website DARK MODE | Dark Theme Website Design Using HTML CSS & JS
Creating Scroll Animations - Reveal Elements on Scroll | ScrollReveal JS Library
Просмотров 3,1 тыс.Год назад
Creating Scroll Animations - Reveal Elements on Scroll | ScrollReveal JS Library
How to Make a Responsive Sidebar Menu in HTML CSS & JavaScript - Step by Step
Просмотров 2,2 тыс.Год назад
How to Make a Responsive Sidebar Menu in HTML CSS & JavaScript - Step by Step
Full Screen Video Background with HTML & CSS | Easy Video Background CSS
Просмотров 170Год назад
Full Screen Video Background with HTML & CSS | Easy Video Background CSS
SVG Manipulation with JavaScript | Creating a SVG Animation
Просмотров 723Год назад
SVG Manipulation with JavaScript | Creating a SVG Animation
Awesome Dark Carousel Slider in HTML & CSS | Carousel for Card Slider or Image Slider
Просмотров 50 тыс.Год назад
Awesome Dark Carousel Slider in HTML & CSS | Carousel for Card Slider or Image Slider
Search Bar with HTML & CSS| Expandable Search Bar Animation
Просмотров 256Год назад
Search Bar with HTML & CSS| Expandable Search Bar Animation
Animated Toast Notification using HTML CSS & JS | Toast Notification with Progress Bar
Просмотров 1,1 тыс.Год назад
Animated Toast Notification using HTML CSS & JS | Toast Notification with Progress Bar
How to Create a Responsive Navbar using Bootstrap 5 | Responsive Sidebar Menu
Просмотров 71 тыс.Год назад
How to Create a Responsive Navbar using Bootstrap 5 | Responsive Sidebar Menu
Animated Login Form using HTML & CSS | Form with Input Animation
Просмотров 148Год назад
Animated Login Form using HTML & CSS | Form with Input Animation
Hello! Learn, share, enjoy and develop guys! Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
👏🏼👏🏼👏🏼
😃✌
Hello! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
thank you sir, that an easy tutorial
You're welcome, Sir 😉
CODE IS NOT FREE
Hi bro! The channel's source codes are available on Patreon (www.patreon.com/MatheCreative), some are paid. However, I also promote free codes for free members, including the one in this video is available this week 100% free. I hope it helps you in your work or studies ✌
thanks so much! 😍💯
You're welcome 😉
Nice content!
Thank you, I'm glad you liked it 😉
Hello! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
muy beno
Thank you :)
Hello! Learn, share, enjoy and develop, coders!✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
Hi man, I tried to send you an e-mail some days ago at the address I found in the comments below, idk if you didn't read it or if you don't have time but just letting you know😊
hello! I checked my email and your message automatically went to spam 🤦♂️, sorry, that's why I prefer a Patreon DM haha. I'll take the opportunity to see what you need and answer you, if possible by today, don't worry.
someone knows a community where people help others with html and css stuff?
Olá, Guilherme! Estou criando uma comunidade lá no Patreon, caso tenha interesse. Lá voce também pode ser um membro free, gostaria de ter voce por lá. cara. Já te adiantando, pretendo disponibilizar por tempo limitado o ebook sobre Front-end Edição 1 para os free members assim que eu lançar a Edição 2, então fique atento, dev :) www.patreon.com/MatheCreative
Hello! Learn, share, enjoy and develop, coders! ✌️ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
Hi Mathe! Good quality work. I´ve bought you a coffee and awaiting the access to your Github as per your video description. Unfortunately, I haven´t received anything yet (been about 24 hours). When am I going to get access? Thanks so much.
Hi bro! First of all, I'm sorry about that, buymeacoffee is a great platform, but it's not perfect - they're not notifying me about donations. I just sent the invitation to your email and to try to reward you for what happened, you will have 10 days of access instead of 7, ok? Confirm me about the invite, please 😀
Hi! Hi I am trying just the card scrolling using html and css only! but I am not able to get any behaviour using #s1:checked~ .cards #slide3{ transform:scale(1.2) } What am I doing wrong? I made sure everything is structured as in the video like each label is assigned perfectly for the radio button and each label has an slide id and card and an image within it please help
Hi there! I will try to help you, don't worry. So, your css declaration is apparently correct, what it expresses is "when the box with id s1 is checked then the element with id slider3 inside the .cards must have this style". Therefore, I believe the problem is possibly in your html, in the organization of the elements. Check it out and get back to me, the checkbox entries must be siblings of the elements that have the .cards class. Did you get it?
Thank you for kind response! Actually, it was resolved as soon as I realised I was putting an extra comma after #slide,{ and it should be #slide{ Thanks again
@ayushmurugkar4657 Oh yes, it doesn't really work 😅 Glad it went right!
i need ecommerce dashboard page
Hi there! We will have this video soon :) You can have more information in advance by being a member on Patreon, take a look:
Your editing skills have improved a lot, nice job Mathe!
I really appreciate your comment! As a friend, thank you Natan ✌
Hi everyone! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
looks fantastic, clever stuff but why does it give code errors 'input cannot be nested inside a button' ?
Wow, your observation is very good. To resolve this, simply change the <button> to <div>, the type="button" will ensure smooth operation. I can thank you by giving free access to the channel repository, if you are interested, become a free Patreon member and I will release your email. Anyway, thank you ✌
There is no code in index.html file downloaded by ur drive link Please tell me how to download the complete source code
Hello! I tested it here, and the code is indeed there. Could you please check again? If you're still having trouble viewing the code, you can join the official channel repository on GitHub (details in the channel description). There, you'll find this and many other projects, all 100% available. I would be happy to have you there with us :)
hello.the size of the cards covers the whole screen. How can I make the cards smaller?
Hit here! In the styles.css file, on line 37, we set the height and width of the card container - you can change it there. Alternatively, you can adjust it directly on the cards at line 58. If you have any more questions, just ask here, and either I or someone from the community will be happy to help you :)
i ve a doubt ,Is this or bootstrap grid method better....??
Hi, bro! In programming, we often encounter questions like this, as it's possible to achieve the same result in various different ways. I believe the important thing is to always test and validate according to the needs and our experience. I clearly think this is a good way to create a navbar, but the rest of the community here in the channel and I would like to know how you would do it using grid. Feel free to share it here or in the official channel repository if you'd like. Thanks :)
Hi there! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
Amazing
Thanks, bro 😉
❤💪🏻😊
😉😉😀
❤💪🏻😊
Thanks 😀
Code pl
Hi there! Here www.patreon.com/MatheCreative :)
Hi there! Learn, share, enjoy and develop, coders! Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
slide is not getting added . even thought i have worte css for every one . please help me
Hello! In the description of the video there is the source code (relax, it's free), could you test it based on it? I hope it helps :)
Hey, I used the source code and everything works fine, but I'm getting this blue box/container behind all of the cards, it seems to appear only when I add the .cards in the CSS. But I can't get rid of the .cards otherwise they don't go to the right part of the page. How would I get rid of this blue box? UPDATE: I found what is causing it, it's the width. If I get rid of the width it will get rid of the box, but the cards will now show all the way to the right side of the screen, and attempting to move them back makes the box appear again. (with width and margin right/left). Would still love some help if you got any <3
Hi there! Well, let's try to solve this little problem. First, as you mentioned about the cards being on the right, make sure you've made the adjustment I do at 13:03, ok? If the problem persists, I would need more details about this "blue container" that is appearing. If you prefer, you can send me an email with prints (it is available in the "About" tab here on the channel). I hope it works and if not, just contact me :)
After I clicked on Modal's menu, it's always go back to the top after did a scrollspy, what should I do to solve that?
Hello! I don't quite understand the problem you're facing, could you explain in more detail, please? If you prefer, you can send me an email and I will help you with this :)
What is VS code Theme that you use??
Hi there! I use the amazing Tokyo Night extension: marketplace.visualstudio.com/items?itemName=enkia.tokyo-night
Responsive?
Hi! For the mobile version I think we could only display 3 cards instead of 5, we would do that using CSS media queries. Hope this helps
you are greet bro ❤❤❤
Thanks, bro :)
I really appreciate it, it really helped a lot!!!
I'm happy to have helped you 🙂
perfect! good one
I appreciate the compliments, bro 😀
Hi there! Learn, share, enjoy and develop, coders!✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
great tutorial i liked and subscribed aswell actually helping me more with front end, by the way i practiced this with 5 cards and was able to get similar results but when i tried it with 6 cards it became a mess can you help here is my code I did play around with yours so do bear in mind it'll look weird. but here is the css code: #s1:checked~.cards #slide5, #s2:checked~.cards #slide6, #s3:checked~.cards #slide1, #s4:checked~.cards #slide2, #s5:checked~.cards #slide3, #s6:checked~.cards #slide4 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(-70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide6, #s2:checked~.cards #slide1, #s3:checked~.cards #slide2, #s4:checked~.cards #slide3, #s5:checked~.cards #slide4 #s6:checked~.cards #slide5 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); transform: translate3d(-35%, 0, -120px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide1, #s2:checked~.cards #slide2, #s3:checked~.cards #slide3, #s4:checked~.cards #slide4, #s5:checked~.cards #slide5, #s6:checked~.cards #slide6 { box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%); transform: translate3d(0, 0, 0); --current-color1: #fad00c; --current-color2: #ECEAED; } #s1:checked~.cards #slide6, #s2:checked~.cards #slide5, #s3:checked~.cards #slide4, #s4:checked~.cards #slide3, #s5:checked~.cards #slide2, #s6:checked~.cards #slide1 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); transform: translate3d(0, 0, 0); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide5, #s2:checked~.cards #slide4, #s3:checked~.cards #slide3, #s4:checked~.cards #slide2, #s5:checked~.cards #slide1, #s6:checked~.cards #slide6 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(35%, 0, -120px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide4, #s2:checked~.cards #slide3, #s3:checked~.cards #slide2, #s4:checked~.cards #slide1, #s5:checked~.cards #slide6, #s6:checked~.cards #slide5 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; }
Hi there! First of all, sorry for the delay in responding, RUclips has hidden your comment from me for some reason. Anyway, we need to remember that this video effect is only valid for an odd number of displayed cards. We could easily have 6 cards in total, but we would only show 5, so far ok? Therefore, we would need to have one more declaration of card behavior that would basically look like this: #X1:checked~.cards #Y1, #X2:checked~.cards #Y2, #X3:checked~.cards #Y3, #X4:checked~.cards #Y4, #X5:checked~.cards #Y5, #X5:checked~.cards #Y6 { display: none; } Do you think you can follow? If you prefer, you can send me an email :) channel.mathe@gmail.com
Hi there! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
Hi there! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
Thanks for the video and mostly for the source code
You're welcome 🫡
nice
Thanks 🫡
Hi there! Learn, share, enjoy and develop, coders! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
Thanks, this is a good vide
You're welcome 🫡
This is really great stuff thank you for sharing ! You should make more content like this!
I'm very happy that you liked it 🫡
thanks buddy
You're welcome, bro ;)
thank bro❤
You're welcome bro =)
perfect
I'm glad you liked it =)
how to make it autoplay
Hi there! Good question, this would make the slider much more dynamic actually. But I think it would require some javascript so it wouldn't be very simple. I wrote it down here to make a video about it, ok? Thanks for commenting :)
thank you so much for making this wonderful video
My pleasure =)