chunkydotdev
chunkydotdev
  • Видео 26
  • Просмотров 115 145
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
Просмотров: 689

Видео

The Beginners Guide to CSS - Compilation
Просмотров 2306 месяцев назад
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,6 тыс.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
Просмотров 2866 месяцев назад
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
Просмотров 2726 месяцев назад
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
Просмотров 9777 месяцев назад
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
Просмотров 9987 месяцев назад
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 тыс.7 месяцев назад
Dive into the world of JSON with our latest RUclips 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/chunkydotd...
How to build a NAVIGATION BAR for ANY device
Просмотров 4838 месяцев назад
How to build a NAVIGATION BAR for ANY device
A dark CSS DARKMODE tutorial
Просмотров 1 тыс.8 месяцев назад
A dark CSS DARKMODE tutorial
How YOU can build a FUN website from scratch
Просмотров 9198 месяцев назад
How YOU can build a FUN website from scratch
Explain CSS like I'm 5
Просмотров 8508 месяцев назад
Explain CSS like I'm 5
Every CSS Animation property
Просмотров 83 тыс.9 месяцев назад
Every CSS Animation property
The CSS Box Model
Просмотров 6549 месяцев назад
The CSS Box Model
How to use the IMG tag
Просмотров 1,6 тыс.9 месяцев назад
How to use the IMG tag
The CSS Grid System
Просмотров 6 тыс.9 месяцев назад
The CSS Grid System
The CSS FLEXBOX System
Просмотров 9 тыс.9 месяцев назад
The CSS FLEXBOX System
How to set up Firebase Auth from scratch
Просмотров 69810 месяцев назад
How to set up Firebase Auth from scratch

Комментарии

  • @oa2766
    @oa2766 Месяц назад

    What a great video

  • @lullimongal
    @lullimongal Месяц назад

    What's that

    • @chunkydotdev
      @chunkydotdev Месяц назад

      Sorry, no idea what you're referring to 😅 But next time we're starting to code! Hope to see you there 🫡

  • @studyingwithavibe
    @studyingwithavibe Месяц назад

    💤

  • @VideoNOLA
    @VideoNOLA Месяц назад

    Like so many other CSS keyframes tutorials, "steps( )", "end" and "start" not mentioned here.

    • @chunkydotdev
      @chunkydotdev Месяц назад

      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! 🙏

  • @whatidoknow3417
    @whatidoknow3417 2 месяца назад

    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!!

    • @chunkydotdev
      @chunkydotdev 2 месяца назад

      So happy to hear! Thank you! 🙏

  • @BarryBashCS
    @BarryBashCS 2 месяца назад

    I mised the live. Great vid!

    • @chunkydotdev
      @chunkydotdev 2 месяца назад

      Thanks mate! 🙏 will try to make it more regular!

  • @ebrahimtufa-hp3vg
    @ebrahimtufa-hp3vg 2 месяца назад

    Thank you guys keep it up

  • @Rian2-ey6yx
    @Rian2-ey6yx 2 месяца назад

    Bro this is a masterpiece i can say

  • @samvidjhaveri634
    @samvidjhaveri634 2 месяца назад

    Also funnily enough Pomodoro is Italian for Tomato and you picked your primary color as red. 😂

  • @samvidjhaveri634
    @samvidjhaveri634 2 месяца назад

    Unfortunate that the screen cap got cut off.

    • @chunkydotdev
      @chunkydotdev 2 месяца назад

      Oh wth, totally missed that, I'll fix it until next time! 😄

  • @Baba6ita
    @Baba6ita 2 месяца назад

    wow I love clearcut explanations

  • @EasyCodingDev
    @EasyCodingDev 2 месяца назад

    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()

    • @chunkydotdev
      @chunkydotdev 2 месяца назад

      Cool, haven't heard of it before, i'll check out! Thank you!

  • @devabhai11
    @devabhai11 3 месяца назад

    very helpfull video for beginner

  • @IndianWallpaper
    @IndianWallpaper 3 месяца назад

    How did you showed the layers in the video... I mean diagram of the layers...

    • @chunkydotdev
      @chunkydotdev 3 месяца назад

      Did you like that part? I've been experimenting with ways of explaining concepts and I thought this way was pretty cool.

  • @mp3prime
    @mp3prime 3 месяца назад

    Superb Bro❤❤❤

  • @danta.4023
    @danta.4023 4 месяца назад

    subscribed!

  • @spidysense7754
    @spidysense7754 4 месяца назад

    You are 💎

  • @priopambudi9533
    @priopambudi9533 4 месяца назад

    Amazing video! This channel is what I looking for. I really like your content, 1 subs from me

  • @mina86
    @mina86 4 месяца назад

    9:00 - might be better done with intersection observers rather than listening on scroll.

  • @thewebstylist
    @thewebstylist 4 месяца назад

    Amazing video n tips n tricks! 🎉

  • @lilcranky9455
    @lilcranky9455 4 месяца назад

    Perfect Video! thx!

  • @merchantofVeniceinTelugu
    @merchantofVeniceinTelugu 5 месяцев назад

    there are only 3 comments so i want to make it 4 😊nice video

    • @chunkydotdev
      @chunkydotdev 5 месяцев назад

      Haha thank you mate! 😄🙏

    • @merchantofVeniceinTelugu
      @merchantofVeniceinTelugu 5 месяцев назад

      @@chunkydotdev bro are u student currently or completed ur education

    • @chunkydotdev
      @chunkydotdev 5 месяцев назад

      Completed my education 2017 and been working as a developer ever since (and a bit before) 🙂

  • @NurioonSoftware
    @NurioonSoftware 5 месяцев назад

    Good video bro 👍

  • @abcdabcd8605
    @abcdabcd8605 5 месяцев назад

    Add timestamps. I think it helps in SEO

    • @chunkydotdev
      @chunkydotdev 5 месяцев назад

      Great advice, I'll see if I can make it happen!

    • @chunkydotdev
      @chunkydotdev 5 месяцев назад

      Should be timestamps there now! 👍

    • @abcdabcd8605
      @abcdabcd8605 5 месяцев назад

      @@chunkydotdev yes timestamps are there!

  • @abcdabcd8605
    @abcdabcd8605 5 месяцев назад

    This tutorial is top quality. Definitely underrated!

  • @muhammad_zohaib936
    @muhammad_zohaib936 5 месяцев назад

    Simply amazing!

  • @Ronit.xe7
    @Ronit.xe7 6 месяцев назад

    So underrated !

  • @piyh3962
    @piyh3962 6 месяцев назад

    Criminally under viewed

    • @chunkydotdev
      @chunkydotdev 6 месяцев назад

      You're too kind mate! 🙏

  • @bob-p7x6j
    @bob-p7x6j 6 месяцев назад

    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...

    • @chunkydotdev
      @chunkydotdev 6 месяцев назад

      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!

    • @bob-p7x6j
      @bob-p7x6j 6 месяцев назад

      @@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!

  • @bob-p7x6j
    @bob-p7x6j 6 месяцев назад

    Thanks for the video, good work, must have taken a lot of time to put together....

  • @syedjaveed3607
    @syedjaveed3607 6 месяцев назад

    Awesome! , why use requestAnimationFrame()??

    • @chunkydotdev
      @chunkydotdev 6 месяцев назад

      Thank you! From what ive tested it feels like it gives a smoother animation than just having the change in the addEventListener :)

  • @nanobii
    @nanobii 6 месяцев назад

    Just what I needed for my current project 😮‍💨

  • @cecilselormamediku9560
    @cecilselormamediku9560 6 месяцев назад

    Excellent tutorial 👌

  • @Volt-Eye.
    @Volt-Eye. 6 месяцев назад

    Nice explaination along with those Pointers. Keep it up

  • @nanobii
    @nanobii 6 месяцев назад

    Really helpful 😮‍💨

  • @LateStageDesigner
    @LateStageDesigner 6 месяцев назад

    Looks great! You can clean up the code a bit using the inset property instead of top, bottom, left, right.

    • @chunkydotdev
      @chunkydotdev 6 месяцев назад

      *mind blown* that's some really great advice, thank you!

  • @chunkydotdev
    @chunkydotdev 6 месяцев назад

    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!

  • @mamomi1hd993
    @mamomi1hd993 6 месяцев назад

    Hyperplexed is that youu??🤔

    • @chunkydotdev
      @chunkydotdev 6 месяцев назад

      Haha thank you! I wish! 😂

  • @emekamgbemere7888
    @emekamgbemere7888 6 месяцев назад

    Love your straight forward video. I just subscribed.

  • @tragicstory9244
    @tragicstory9244 6 месяцев назад

    Love it! Fun and informative 🚀❤🖱️

  • @lilyshevchenko7048
    @lilyshevchenko7048 7 месяцев назад

    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

    • @chunkydotdev
      @chunkydotdev 7 месяцев назад

      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!

  • @vallunacoder.wecodetogether
    @vallunacoder.wecodetogether 7 месяцев назад

    Love your editing!! And for sure your explanation is great!

    • @chunkydotdev
      @chunkydotdev 7 месяцев назад

      Thank you! Happy to see you're still around! 😃

    • @vallunacoder.wecodetogether
      @vallunacoder.wecodetogether 7 месяцев назад

      @@chunkydotdev For sure!!! Your videos are among the best I have seen on RUclips 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!!

    • @chunkydotdev
      @chunkydotdev 7 месяцев назад

      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! :)