- 15
- 76 757
chunkydotdev
Sweden
Registrace 17. 02. 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 Rocket met Cursor
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
----------------
// Code 🧑💻 codepen.io/chunkydotdev/pen/jOorVzz
// Support the channel 🎉 ko-fi.com/chunkydotdev
// Let's connect ☀️ x.com/chunkydotdev
----------------
#learnwebdevelopment #css #javascript #html
zhlédnutí: 96
Video
An overly dramatic card animation tutorial
zhlédnutí 632Před 14 dny
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
zhlédnutí 510Před 28 dny
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
zhlédnutí 2,1KPřed měsícem
Dive into the world of JSON with our latest CZcams 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
zhlédnutí 362Před měsícem
Ready to make your website accessible on any device? Join me as we build a responsive navigation bar that adapts to any screen size! In this tutorial, we’ll dive into the essentials of HTML and CSS, focusing on the crucial role of media queries. Learn how to structure your navigation bar to ensure it works perfectly from desktop to mobile. By the end of this video, you’ll understand why respons...
A dark CSS DARKMODE tutorial
zhlédnutí 891Před měsícem
Dive into the night with our latest tutorial on how to add dark mode to your website using CSS! 🌓💻 Discover the simplicity and power of CSS variables to switch between themes effortlessly. We'll walk you through each step, from setting up your variables in the `:root` for global access to implementing a clever trick for image toggling between light and dark modes. Plus, we'll cap it off with a ...
How YOU can build a FUN website from scratch
zhlédnutí 799Před měsícem
You can find the code here: github.com/chunkydotdev/cat-website Join me on a web development adventure as we craft a quirky website using HTML, CSS, and some playful images! Along the way, I'll sprinkle in a dash of animation magic with a tacky button that truly brings our digital canvas to life. If you're eager to explore the code and apply your own creative twist, find a link in the descripti...
Explain CSS like I'm 5
zhlédnutí 651Před 2 měsíci
Unleash the power of CSS in your web projects! 🌈 Dive into our immersive tutorial where we reveal the magic behind CSS - from laying the groundwork with basic syntax to navigating through the maze of selectors. Transform your static pages into dynamic masterpieces, as we guide you through the techniques to style with precision and creativity. Whether it's painting with properties or structuring...
Every CSS Animation property
zhlédnutí 54KPřed 2 měsíci
Rock your web designs with CSS animations! 🌟 Dive into our electrifying tutorial where we'll show you how to animate like a pro, from the basics of @keyframes to mastering the transform property. Get ready to add motion to your sites with simple yet powerful animations and transitions. Plus, we'll tackle scroll-triggered animations to make your pages come alive as you scroll. 🎸🔥 #css #learnwebd...
The CSS Box Model
zhlédnutí 565Před 2 měsíci
Dive into the essentials of web design with our latest CZcams video on the CSS Box Model! Perfect for beginners, this tutorial covers everything from understanding content areas to mastering margins and borders. Support the channel: ko-fi.com/chunkydotdev What You'll Learn: * The basics of the Box Model: content, padding, border, and margin. * How to control element sizing with width and height...
How to use the IMG tag
zhlédnutí 1,6KPřed 2 měsíci
Unlock the secrets of incorporating images into your web projects with our dedicated tutorial. This video covers the essentials of the HTML img-tag, including how to use src, alt, width, height, loading, srcset, and the picture-element. Enhance your site's visual appeal, improve accessibility, and optimize for all devices with practical, easy-to-follow guidance. Support the channel: ko-fi.com/c...
The CSS Grid System
zhlédnutí 6KPřed 2 měsíci
Step into the world of modern web design with our beginner-friendly guide to CSS Grid! This comprehensive tutorial is tailored for aspiring web developers eager to master the art of creating responsive, structured layouts with ease. CSS Grid is a powerful layout system that brings a new level of flexibility and control to web design, and we're here to walk you through every step of the way. #cs...
The CSS FLEXBOX System
zhlédnutí 9KPřed 3 měsíci
Unlock the full potential of CSS Flexbox with this deep-dive tutorial designed for web developers eager to master responsive layout techniques. Whether you're fine-tuning your skills or exploring Flexbox for the first time, this video provides a thorough walkthrough of Flexbox's core concepts, properties, and real-world applications. #css #flexbox #learnwebdevelopment Support the channel: ko-fi...
How to set up Firebase Auth from scratch
zhlédnutí 325Před 3 měsíci
Github repo: github.com/chunkydotdev/nextjs-firebase-auth Dive into the world of modern web development in this comprehensive tutorial, where we guide you through the seamless integration of Firebase Authentication with a Next.js project. Perfect for developers seeking to enhance their web applications with robust authentication features, this video offers step-by-step instructions from setting...
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!
Love your editing!! And for sure your explanation is great!
Thank you! Happy to see you're still around! 😃
@@chunkydotdev For sure!!! Your videos are among the best I have seen on CZcams and I have seen many!! You are doing an amazing job, I know that 's a lot of work but I'm convinced it will pay off! I would love to see some videos of technical requirement to get your website online and a bit of the planning beforehand. that's something that little creators are doing. I guess they don't talk about it because the topic might seen boring but I have the feeling that you can make the topic digestible for us not technical people!!
Sounds like a great topic to explore! Thank you for all the kind words! 🙏 I will put it on my list of topics to explain and hopefully make some walkthroughs and guides that you can make use of. Hope to see you around! :)
Loved the format and clear explaination. Can you make one for svg animations as well?
Thank you mate! I will put it on my list!
i am working on making a floating affect on my list items. I can't seem to get it done even with the help of our favorite chapGPT lol
ah man, seems like css is hard even for chatGPT 😂
Bro do you have any discord server or any thing. I want to join your network.
Hey mate! Happy to hear! I don't have one at the moment, but would be fun to have one to hang out with ya'll in the future!
Wow. Loved the tutorial. Bravo! 🎉🏆
Bro I am your loyal subscriber since when you have "259 subscribers" , I have a question who is your video editor? Please reply plz plz
Hey mate! Thanks for being a long time subscriber! I have actually done all the editing myself so far, trying out different styles and hoping to improve my editing. Sorry if that's a dissappointing answer 😅
@@chunkydotdev impossible how a single man can do this without help of another 😮🗿
Thanks for replying bro ❤️🗿
You're too kind man! 🙏
@@chunkydotdev no I am just your fan
Love you content! 🥳
Thank you!! 😊🙏
This is amazing!!
YOU'RE amazing!
that's a pretty cool breakdown
Love this vid, super relevant to what I've been tryna learn and does it well. Thanks g
Happy to help! 🙌
Wow! Is amazing the way you explain! May I ask you what did you use to edit the video and create those amazing visual effects?? Keep doing this and you will have me forever!
Thank you for the kind words! 🙏 I use final cut pro to edit all of my videos 🙂
Fantastic tutorial.
Thanks mate! 🙏
😍🥰🥰
🙌😄
Awesome
Last scroll part is bit fast
Man, Best tutorial ever; please create full stack or frontend developer BootCamp within 100 dollars; Or CSS, Bootstrap 15 dollars, I can join; I need to get the job.
Nice video! What are the advantages of using CSS Grid Layout over traditional methods like floats and positioning for creating website layouts?
It is possible to more precisely control the behaviour on different screen sizes. Thanks for watching!
Background music hampered qulity of video.
very useful bro keep it up ,thanks .👍👍👌👌
Hey man! Can you copy paste the JavaScript to the description? I keep forgetting the if condition
You can find it on github! :) github.com/chunkydotdev/animation-example/blob/main/index.js
I think developing a website for api testing isn't for beginners. But your video is good
Very nice! Will have to show Jason!
Love it 🎉
10/10
Thank you!
Amazing video! Clear and to the point. Question... Is it just me or there are some browser compatibility issues when using @keyframes? Thanks and cheers all !
You are actually correct, named timelines in @keyframes are not fully supported, like "from" and "to" (drafts.csswg.org/scroll-animations/#named-range-keyframes) MDN has a great resource on what currently is supported and where: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Great explanation! 🎉 In the realm of responsive web design, how do you believe the implementation of adaptive navigation bars, considering factors like screen size, user interaction, and aesthetic appeal, impacts user experience and the overall effectiveness of a website?
Yes
i think the explanation for what a navigation bar is a missmatch with your audience, ordinary people wont even care or see this video. the people who wants to know "How to build a NAVIGATION BAR for ANY device" will be devs who already know what a nav bar is and for.
I hear you and what you're saying makes sense, I don't want to be afraid of trying new things with my content though so we'll see how this one goes! :)
good stuff 🥳
The way you say it makes everything easier to understand. Thank you!
Amazing video!
Thank you 🙇
Good stuff man! This past week I used the scale transform property when hovering over a thumbnail in a show carousel. It looks great and it’s something you see a lot on big streaming sites these days. 🤘🏻
Замечательная подача материала! Очень полезное видео
Wonderful video! 🎉
How do you go about setting up protected routes? if we do conditional rendering using the onauthstatechanged function, that makes that whole page a client page right?
That is a great question, I guess this is something that people do a bit differently, but I don't think it's wrong to have the check in a client page since in the end what is the website if not a user interface reflecting our data we have in the backend. It's quite common to always assume the user is signed in if we have a firebase user when we render and once you do a fetch for data from firebase and that user is not valid, then you clear all the local data and show them out to the sign in page for example. You can for example do it something like this Medium post here: innocentanyaele.medium.com/protect-pages-from-unauthorized-access-nextjs-firebase-45fd9ee732b4 or just wrap a layout page in the root of what should be accessible with one of the SignedIn components from the video 🙂 sorry for the long rant, hope this helps!
@@chunkydotdev Thank you so much for the prompt reply, I'll surely look into the medium post. You're doing a great job btw, with the videos really helps out people like me who are exploring nextjs for the first time!
Amazing explanation on the Box model in CSS
I subscribed your channel because of such an amazing content ❤❤ but i want a specific video examples on psuedo elements especially ::before ::after please 🙏🙏
Such a fun and informative video!!! Love learning from you!!! Thanks for making these :-)
😂👌🏻👍🏻
you are the best
Thanks dude.
Just an advice on the jaavascript part. Instead of listening to the scroll animation then checking the bounding box each time. Just use the IntersectionObserver API.
😚 'PromoSM'
Excellent video explaining CSS for website design! Clear, concise, and informative. Highly recommend for anyone looking to improve their web development skills.🤘🤙
Dude I love you!