- 26
- 117 972
chunkydotdev
Sweden
Приєднався 17 лют 2022
We dive into the world of web development and explain concepts, patterns and everything you need to know to become a web development overlord. We like to keep it to the point and have some fun on the road to enlightenment.
How to turn text into a hacker-style animation
Discover how to create a mesmerizing text reveal effect using JavaScript in this step-by-step tutorial! Watch as we transform random letters into a hidden message, perfect for adding a touch of magic to your website.
----------------
// Code 🧑💻 codepen.io/chunkydotdev/pen/Baeedvr
// Support the channel 🎉 ko-fi.com/chunkydotdev
// Let's connect ☀️ x.com/chunkydotdev
----------------
#learnwebdevelopment #javascript #textanimation #html #css #cssanimation #tutorial #codewithme #websitedesign #javascripttutorial
----------------
// Code 🧑💻 codepen.io/chunkydotdev/pen/Baeedvr
// Support the channel 🎉 ko-fi.com/chunkydotdev
// Let's connect ☀️ x.com/chunkydotdev
----------------
#learnwebdevelopment #javascript #textanimation #html #css #cssanimation #tutorial #codewithme #websitedesign #javascripttutorial
Переглядів: 711
Відео
The Beginners Guide to CSS - Compilation
Переглядів 2336 місяців тому
Learn the fundamentals of CSS and start your journey into the fun and crazy world of styling websites in any way you want. This guide covers it all! 0:00 Timestamps for the videos in the compilation 0:05 CSS Fundamentals 7:15 CSS Box Model 11:57 CSS Flexbox 16:02 CSS Grids 20:21 CSS Animations // Support the channel 🎉 ko-fi.com/chunkydotdev // Let's connect ☀️ x.com/chunkydotdev // Let's hang o...
How to build a Stunning Honeycomb Background Animation
Переглядів 2,7 тис.6 місяців тому
Unlock the magic of hexagonal patterns with this step-by-step tutorial! Learn how to create captivating backgrounds using simple HTML, CSS, and JavaScript techniques. // Code 🧑💻 codepen.io/chunkydotdev/pen/yLWzeXX // Support the channel 🎉 ko-fi.com/chunkydotdev // Let's connect ☀️ x.com/chunkydotdev #learnwebdevelopment #css #javascript #html #cssanimation #tutorial #webdevelopment #hexagon #h...
Build this glowing button in 3 minutes
Переглядів 2877 місяців тому
Learn how to create a stunning gradient button with an amazing hover effect using just HTML and CSS-no fancy frameworks required! 🌈💻 // Code 🧑💻 codepen.io/chunkydotdev/pen/xxNggMK // Support the channel 🎉 ko-fi.com/chunkydotdev // Let's connect ☀️ x.com/chunkydotdev #learnwebdevelopment #css #html #cssanimation #tutorial #webdesign #gradientbuttons #buttondesign #csstricks #webdevelopment #fro...
How Rocket met Cursor
Переглядів 2767 місяців тому
Learn how to do an awesome engaging website animation where a rocket follows and falls in love with your cursor. Hope you have as fun as I did creating this! // Code 🧑💻 codepen.io/chunkydotdev/pen/jOorVzz // Support the channel 🎉 ko-fi.com/chunkydotdev // Let's connect ☀️ x.com/chunkydotdev #learnwebdevelopment #css #javascript #html #cssanimation #tutorial
An overly dramatic card animation tutorial
Переглядів 9897 місяців тому
Video Description In this video, we’ll recreate an incredible card effect inspired by GitHub’s landing page using just HTML, CSS, and JavaScript. From creating a sleek card design to adding dynamic mouse-follow gradients and jaw-dropping perspective animations, we’ll break down each step in an easy-to-follow, fun way. If you’ve ever wondered how to build such a stunning effect, you’re in the ri...
How YOU can build an AMAZING MASONRY grid
Переглядів 1 тис.8 місяців тому
Discover how to create a visually striking masonry grid layout with this detailed and quick tutorial! Masonry grids are an excellent choice for modern web design, allowing images to stack dynamically across different column heights. This video guides you through building a masonry grid from scratch using HTML, CSS, and a touch of JavaScript for interactive enhancements. Links: - Code: github.co...
Learn JSON in 5 minutes
Переглядів 4,2 тис.8 місяців тому
Dive into the world of JSON with our latest UA-cam tutorial! 🌐🚀 Whether you're a beginner or looking to refresh your knowledge, this video will guide you through the essentials of JSON, the backbone of data exchange in web applications. We'll explore how to use JSON in real-world scenarios, including connecting to a fun API that delivers Chuck Norris jokes! Links: - code: github.com/chunkydotde...
How to build a NAVIGATION BAR for ANY device
Переглядів 4868 місяців тому
How to build a NAVIGATION BAR for ANY device
How YOU can build a FUN website from scratch
Переглядів 9269 місяців тому
How YOU can build a FUN website from scratch
How to set up Firebase Auth from scratch
Переглядів 81710 місяців тому
How to set up Firebase Auth from scratch
Just stumbled upon this channel. Super nice content. Hope you will return and make some more tutorials 😁
What a great video
Thank you! 🙏
What's that
Sorry, no idea what you're referring to 😅 But next time we're starting to code! Hope to see you there 🫡
💤
Like so many other CSS keyframes tutorials, "steps( )", "end" and "start" not mentioned here.
Hey, you're right! Today you actually helped me learn a little bit more about the "animation-timing-function" and I read up a bit on developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function. Great stuff, thank you! 🙏
I fell in love with you within 2 minutes of this video. I love you! You had everything I've been looking for after going through several 30mins videos in one place. And explained each of them perfectly! Thank you!!
So happy to hear! Thank you! 🙏
I mised the live. Great vid!
Thanks mate! 🙏 will try to make it more regular!
Thank you guys keep it up
Bro this is a masterpiece i can say
Also funnily enough Pomodoro is Italian for Tomato and you picked your primary color as red. 😂
Haha had no idea! 😂
Unfortunate that the screen cap got cut off.
Oh wth, totally missed that, I'll fix it until next time! 😄
wow I love clearcut explanations
Thanks mate! 🙏
Bro your video is amazing .But I thought you were going use css only for the scroll animaion becuase it can be done easily with animation timeline:view()
Cool, haven't heard of it before, i'll check out! Thank you!
very helpfull video for beginner
Thank you!🙏
How did you showed the layers in the video... I mean diagram of the layers...
Did you like that part? I've been experimenting with ways of explaining concepts and I thought this way was pretty cool.
Superb Bro❤❤❤
Thanks mate! 🙏
subscribed!
Thank you! 🙏
You are 💎
Amazing video! This channel is what I looking for. I really like your content, 1 subs from me
9:00 - might be better done with intersection observers rather than listening on scroll.
Amazing video n tips n tricks! 🎉
Glad you like it!
Perfect Video! thx!
Thank you! 🙏
there are only 3 comments so i want to make it 4 😊nice video
Haha thank you mate! 😄🙏
@@chunkydotdev bro are u student currently or completed ur education
Completed my education 2017 and been working as a developer ever since (and a bit before) 🙂
Good video bro 👍
Thanks mate! 🙏
Add timestamps. I think it helps in SEO
Great advice, I'll see if I can make it happen!
Should be timestamps there now! 👍
@@chunkydotdev yes timestamps are there!
This tutorial is top quality. Definitely underrated!
Thank you! 🙏
Simply amazing!
So underrated !
Criminally under viewed
You're too kind mate! 🙏
I have a question as a noob, if I learn all this what percentage of the CSS total knowledge would I have, does it cover every fundamental concept? Sometimes you don't know what you don't know, if that makes sense...
Great question! It definitely covers the fundamentals in CSS and touches some more advanced concepts as well, it is although a compilation of my previous CSS specific videos so if you have watched those already then there's not much new here for you unfortunately. Hope they help nevertheless!
@@chunkydotdev yeah, that helps, it is such a big subject and a lot of developers seem to hate it from the comments I have read on different channels, but the more it can be used to do things as opposed to Javascript is probably safer from a security point of view, at least to my understanding. I only use a page builder, Bricks Builder, and work in Wordpress, although it lays down all the HTML, there are still a lot of options for CSS input...so the more I learn it the more choices there are, thanks again!
Thanks for the video, good work, must have taken a lot of time to put together....
Awesome! , why use requestAnimationFrame()??
Thank you! From what ive tested it feels like it gives a smoother animation than just having the change in the addEventListener :)
Just what I needed for my current project 😮💨
I hope it helps! 🙌
Excellent tutorial 👌
Appreciate it! 🙏
Nice explaination along with those Pointers. Keep it up
Thanks mate! 🙏
Really helpful 😮💨
Thank you! 🙏
Looks great! You can clean up the code a bit using the inset property instead of top, bottom, left, right.
*mind blown* that's some really great advice, thank you!
Hi guys, thank you for all the amazing comments! Love you all! I've got a channel page on ko-fi.com/chunkydotdev where I will be posting updates and stuff related to the channel, would love to see you there!
Hyperplexed is that youu??🤔
Haha thank you! I wish! 😂
Love your straight forward video. I just subscribed.
Love it! Fun and informative 🚀❤🖱️
Thank you! 🙏😄
LOL You sir are a storyteller. I never thought I'd enjoy watching a video about CSS but here we're. Teach me AI next
Wow thank you! I'm happy you enjoyed it! 😄 haha, maybe we could build a website leveraging AI somehow in the future 🤔 a great suggestion!