Award Winning Animation With Only 20 Lines Of CSS?

Поділитися
Вставка
  • Опубліковано 3 лют 2025

КОМЕНТАРІ • 896

  • @camichannn
    @camichannn 2 роки тому +12413

    Thank you for featuring my website and the kind words! I’m glad you guys enjoy it!

    • @zarakikenpachi1773
      @zarakikenpachi1773 2 роки тому +336

      This is amazing. Being this good is one of the milestones I really wish to reach.

    • @dbkarman
      @dbkarman 2 роки тому +146

      you world be burned if you lived in a different time, wizzard
      /s
      Love your work ❤️

    • @ginvodka3115
      @ginvodka3115 2 роки тому +58

      wooo "Take that Camille!" hahahahah you guys are awesome!

    • @iivarimokelainen
      @iivarimokelainen 2 роки тому +123

      That website was made by Aristide Benoist, as clearly stated in the credits, why is everyone talking like its made by Camille?

    • @JoeMamaTheSecond
      @JoeMamaTheSecond 2 роки тому +4

      One of the best styling I've seen!

  • @j4yd34d5
    @j4yd34d5 2 роки тому +4637

    Honestly one of the slickest web dev channels out there. Amazing content!

    • @parsonsmarcus
      @parsonsmarcus 2 роки тому +12

      I could not agree more! This channel is a gem, and I learn something new all the time!

    • @madhavvankina5201
      @madhavvankina5201 2 роки тому +3

      Totally agreed

    • @studyingasyouwere
      @studyingasyouwere 2 роки тому +6

      100% agreed. I am a web dev content creator too so I am always on the lookout for cool channels like this. Any recommendations? 😄

    • @j4yd34d5
      @j4yd34d5 2 роки тому +3

      @@studyingasyouwere pretty niche use cases but Franks Laboratory is incredible.

    • @studyingasyouwere
      @studyingasyouwere 2 роки тому

      @@j4yd34d5 Interesting channel! Thank you for the recommendation!

  • @Goodgu3963
    @Goodgu3963 2 роки тому +1049

    This is THE best web dev channel I have ever found. Your tutorials and demos are amazing. Going through the through process makes these types of tasks much easier to understand. Thank you so much!

    • @elexxa2268
      @elexxa2268 2 роки тому +7

      it's definitely on par with fireship

    • @HappyVLR
      @HappyVLR Рік тому +1

      fr

  • @silver_crone
    @silver_crone 2 роки тому +516

    I'm learning JS and honestly, you describing the logic behind it, makes such a difference in how quickly I pick it up. Thank you!

  • @luciobruna157
    @luciobruna157 Рік тому +49

    What's really award-winning is this video, explaining incredibly how that animation is done. Amazing content.

  • @ferpalaciosd
    @ferpalaciosd Рік тому +16

    I will never stop being amazed at how clearly, concisely, and directly you translate initially (apparently) insurmountable problems into step by step solutions. Your channel feels like mental health support to me. Kudos man.

  • @joyboy95
    @joyboy95 2 роки тому +175

    Awesome! draggable="false" property was something I needed in an ongoing project, but didn't know about. I implemented it on all my images in the project😁 Thank you!

    • @ashutoshsamantaray6596
      @ashutoshsamantaray6596 2 роки тому +2

      etch a sketch

    • @somebody302
      @somebody302 Рік тому +1

      you can also just add: event.preventDefault() to the (mousedown)-EventListener and all default behavior like draggable will be ignored

  • @Fighter178
    @Fighter178 2 роки тому +2206

    Love how you could actually just do them in a single line if you want

    • @Thebiggestgordon
      @Thebiggestgordon 2 роки тому +378

      I mean, you could do all css with one line.

    • @purpshell
      @purpshell 2 роки тому +349

      @@Thebiggestgordon you could cram all the js in one file using semicolons too

    • @purpshell
      @purpshell 2 роки тому +121

      Also goes for html

    • @Thirrek
      @Thirrek 2 роки тому +136

      The line breaks are really just there to make it easier to read, we don't have to use them!

    • @kubakazimierczak6646
      @kubakazimierczak6646 2 роки тому +64

      What you all describing is called minification. It's often used when distributing the final versions to remove unnecessary signs (like spaces or newlines) to reduce the size of the transferred files.

  • @krazymeanie
    @krazymeanie 2 роки тому +692

    Bro this channel is a gem. It's made me finally decide to go back to just vanilla everything and have fun instead of using a bunch of libs to get stuff done. Love your content as always man. Wish you all the best in your endeavors. 🎉💯

    • @6884
      @6884 2 роки тому +30

      lol I read "all the best with your eyebrows"

    • @w花b
      @w花b 2 роки тому +12

      @@6884 his eyebrows are fine >:(

    • @InnerEagle
      @InnerEagle Рік тому

      cool eye brows @@6884

    • @TheRoseAlmighty
      @TheRoseAlmighty Рік тому +4

      @@w花bdon’t talk about the eyebrows he’s self conscious about them👉👈

  • @tiefflieger3320
    @tiefflieger3320 2 роки тому +23

    You‘re a Legend! Best content on UA-cam. Always hyped when there is a new vid.

  • @ganumba11
    @ganumba11 Рік тому +32

    First time watcher, I’m quite perplexed at how amazingly informative, engaging, and simple this video was

    • @Dezzikuo
      @Dezzikuo 9 місяців тому

      literally my exact situation

  • @caveman240
    @caveman240 10 місяців тому +2

    Excellent training for newbies, it details how to think through a problem based on what you know and the steps necessary to get there. Love it!

  • @nilanthyogadasan848
    @nilanthyogadasan848 2 роки тому +5

    No question, the best front end web dev tutorials on the net! Your explanations, and communication of your thought processes set you apart from the rest. I watch all your videos for renewed inspiration and confidence in my own abilities! Appreciate you!

  • @Blearky
    @Blearky 2 роки тому +25

    You know you did something insane when Hyperplexed takes 5+ minuts for one effect and also linelimits as a challenge. Awesome video love it

  • @andrecarcausto2740
    @andrecarcausto2740 2 роки тому +8

    bruh the amount of work and esthetic you put to your videos is insane. I haven't seen a code channel with this quality. Ty so much i enjoy every part of it

  • @Maniac-007
    @Maniac-007 2 роки тому +30

    Been working as a backend dev for almost 2 years now.
    After binging to almost all of your videos, I think it is time for me to go back to my ol’ FE playground and trying out these animations/designs.
    Thanks for the wonderful content, as always. +1 sub ❤

  • @tylerarrigoni7700
    @tylerarrigoni7700 10 місяців тому +1

    Great channel to chill w the phone and watch. Pls keep this format. Love it! Cheers!

  • @visionaeon
    @visionaeon Рік тому +2

    To be able to abstract, deconstruct e recreate someone's work is an insane job!
    Got tier video! I'm getting into Front-end, trying to get into the industry, and you're a blessing! Appreciate, mate!

  • @anuragpal02
    @anuragpal02 2 роки тому +127

    You make me realize how everything could be just done with Vanilla and none of those fancy libraries is requierd. Your content deliverly is amazing man!

    • @MrProthall
      @MrProthall Рік тому +17

      @Christos Montariou True, but mostly because of maintainability. It's easier if everyone is on the same page, that said: Knowing vanilla this well will make your react apps soooooo much better. You have no idea the complexity built into projects by devs that glossed over vanilla to get to "marketable" skills.

    • @spl420
      @spl420 Рік тому

      ​@@christosmontariou3105i mean, nowadays most things from jQuery in ES standart so it doesn't really make a difference if you use it or not.

    • @rossclutterbuck1060
      @rossclutterbuck1060 Рік тому +1

      @Christos Montariou but the logic behind a swiper is universal, you just need to set bounds on a per-project basis. Simple enough to build it once and just reuse it.

    • @verbon47
      @verbon47 4 місяці тому +2

      Unpopular, but vanilla is so much easier then libraries. Idc what anyone says

  • @AllMoneyIn2024
    @AllMoneyIn2024 4 місяці тому +1

    I know nothing about coding yet was completely enthralled with your video. You have a talent for explaining this stuff. Thank you for sharingz

  • @한순전-p3h
    @한순전-p3h 10 місяців тому

    I'm crying. I just didnt' know how to proceed with fixing errors and not be overwhelmed and edit everything and then the code is so messy. Yhis was just so enlightening. And something just clicked. Thank you so much!

  • @deemdll
    @deemdll 2 роки тому +3

    I'm only actively subscribed to about 6 channels that I watch almost everyday, and you joined them a month ago. Beautiful videos, editing is sick, and you voice is just ideal for a video like this.

  • @chizidotdev
    @chizidotdev 2 роки тому +1041

    Okay I’m gon go remove JavaScript from my resume for now…

    • @lemonade3532
      @lemonade3532 8 місяців тому +94

      Just make this as a weekend project and add it back on

    • @ummallarakesh4602
      @ummallarakesh4602 7 місяців тому +9

      😂

    • @peterhindes56
      @peterhindes56 5 місяців тому +7

      I mean this isn't even that great of a way to do it. It shouldn't touch the dom outside of the styles.

    • @TheChaser.
      @TheChaser. 5 місяців тому +2

      @@peterhindes56 why not ??

    • @novellanightmares
      @novellanightmares 4 місяці тому +3

      This is a super easy task to accomplish with A.I.

  • @ALTTABINMAINMENU
    @ALTTABINMAINMENU 5 місяців тому

    Wow, the quality of animations made for this video (not the scrolling effect itself, but explanations, etc.) is just amazing!

  • @Demonix77x
    @Demonix77x 2 роки тому +7

    I really love how you break down everything into the simple steps needed to get the desired effect!

    • @verbon47
      @verbon47 4 місяці тому

      You say simple but watching this made me more confused by the minute

  • @boltez6507
    @boltez6507 Рік тому +2

    The most important thing that i learnt in this video is that the classic way of solving problems(i.e. breaking problems into chunks) never fails.

  • @64revolt
    @64revolt Рік тому +1

    Holycrap this is so well explained. As a recent student in frontend development (one week in mind you) this made me smile :)

  • @sergiohernandez72
    @sergiohernandez72 2 роки тому +2

    One of the best explained web dev videos I’ve ever seen. Subscribed!

  • @hamids4550
    @hamids4550 11 місяців тому

    I must say
    WOooow, your style of teaching and doing this is incredible. Please continue....I'll watch every single one.
    Thanks

  • @nekotajni394
    @nekotajni394 2 роки тому +2

    Dude this is absolutely incredible. Please make more like this !!!

  • @johnpapp131
    @johnpapp131 10 місяців тому

    This is such a great tutorial. I’m trying to avoid tutorial hell but these kind of quick tutorials really help to nail down these basic concepts

  • @echangf6416
    @echangf6416 2 роки тому +4

    I learned more about animations in this video than in many courses out there. Awesome content man thank you very much.

  • @ahmedjaved78
    @ahmedjaved78 2 роки тому +2

    I'm so genuinely happy I came across your channel, you made my day. Your content is so good, they're not too short nor too lengthy. They're just perfect, so enjoyable. I hope you keep creating this content and wish you all the best ahead. 🙌🏻

  • @pixelbornGlitch
    @pixelbornGlitch 2 роки тому +4

    Very slick front end, your breakdowns are quite captivating. Love this channel ❤

  • @dag.3r504
    @dag.3r504 Рік тому +445

    me watching this not knowing how to center an element: 👁👄👁

    • @Prots0392
      @Prots0392 7 місяців тому +34

      Css file
      Display : flex;
      Justify-content : center;
      Align-items : center;

    • @AwkwardCompilations
      @AwkwardCompilations 5 місяців тому +9

      position: absolute
      top: 50
      bottom 50

    • @HiroX24
      @HiroX24 4 місяці тому +2

      ​@@Prots0392 I also use this 😂

    • @zakem
      @zakem 4 місяці тому +6

      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;

    • @yassx5567
      @yassx5567 3 місяці тому +6

      ​@@zakemmargin: auto;

  • @davidorubo8983
    @davidorubo8983 Рік тому +1

    I'm still actually mind blown on how smooth camille's website was and even how you were able to duplicate it

  • @tunghoangthanh3770
    @tunghoangthanh3770 2 роки тому

    THE best web dev channel I have ever found. Your tutorials and demos are amazing. Going through the process makes these types of tasks much easier to understand.Amazing content! Thank you so much!

  • @Ostad_oomade
    @Ostad_oomade 2 роки тому

    you are a true CHAD for not giving a damn about the overflow of your maximum amount of line challenge.
    I was waiting for you to get spare lines and use them as comments. that would be ultra CHAD

  • @Krazness
    @Krazness Рік тому +2

    Love the content. I've dreaded CSS for years, but these breakdowns make it less intimidating. Keep up the great work

  • @aneurysmjs
    @aneurysmjs Рік тому +1

    Wanna give a massive props for this kind of explanation, keep it up

  • @mcstephen
    @mcstephen Рік тому

    I have never watch any of your video, but this single video alone just got you a new subscriber.
    Thanks, learn somthing new today.
    Really would love to see more video like this in the future.

  • @mistamoofin
    @mistamoofin Рік тому

    This is the most beautiful video I’ve ever watched. Skilled. Well explained. Efficient. Intuitive. Made me feel smarter.

  • @watevakid
    @watevakid Рік тому

    this type of content is so fucking useful. tutorials are great, but if you just blindly follow them, you don't learn the concepts. tutorials abstract away the actual thought process, but that is what your channel does so well. keep doing your thing, it is very appreciated 🙏

  • @bowriing
    @bowriing Рік тому

    The way you narrate and present your videos really reminds me of the scene in the Netflix series YOU. Very entertaining.

  • @garrymugen486
    @garrymugen486 Рік тому

    Loved it, even when the calculations made my head hurt, the logic flow balanced it out. Best website programming video I've watched.

  • @MaxFerney
    @MaxFerney 8 місяців тому

    This man is crafting spells with basic web code. Hats off to you for making this so understandable

  • @ashutoshmahapatra537
    @ashutoshmahapatra537 2 роки тому

    Props to you and the website of Camille and also Aristide Benoist. One of the most smoothest and fluid website I've seen!

  • @whokhoa
    @whokhoa 2 роки тому +1

    This is not only visually appealing, informative, but also just fun to watch!

  • @nicholasmackey
    @nicholasmackey Рік тому +1

    This is insane. Honestly my new favorite channel. Well done, man. 👏

  • @harper5378
    @harper5378 2 місяці тому

    Woah love hearing the thought process behind figuring it out. I still often think "the author's probably done it more elegantly somehow" when figuring things out and get discourage,d so weirdly enough seeing you fail and just keep going has made something click in my head. One step forward through imposter syndrome!

  • @krateskim4169
    @krateskim4169 2 роки тому +1

    tbh best frontend content i have ever witnessed, you're extremely skillful mate , thank you

  • @25314354
    @25314354 2 роки тому

    this is channel is a legit gold mine, subbed!

  • @shiizu0863
    @shiizu0863 Рік тому

    Love this vid, one of the best web dev channels. As someone who doesn’t know any programming, this was explained to us casual viewers very well, without any knowledge in web development.

  • @dmnkb
    @dmnkb Рік тому

    The quality of explanation is exceptional! Really love this format!

  • @FiFiFilth
    @FiFiFilth 2 роки тому +1

    I'm currently in a coding Bootcamp, and this channel is absolutely amazing. Really inspires me to do some of my own projects on the side.

  • @Jirito
    @Jirito Рік тому

    Holy hell that was amazing, smooth, and satisfying. Great editing !

  • @CptSauce
    @CptSauce Рік тому

    That is really cool. I didnt know that I need this in my life but Im glad this got recommended by algorithm. Wil defiantly try this one day.

  • @z_0968
    @z_0968 2 роки тому

    Never have I've ever, enabled notifications for a UA-cam channel. But today that has changed.

  • @secession77
    @secession77 2 роки тому +1

    You definitely put more effort into presenting us the process than on the process itself. And that's brilliant.

  • @cekuhnen
    @cekuhnen Рік тому

    Honestly this is a brilliant visual explanation of how the code logic works !
    Super work !!!

  • @johnsondeng
    @johnsondeng 2 роки тому +5

    I usually do backend data stuff, but coming across your channel inspired me to code along and try it out. Your way of showing us the naive 'mistakes' and going into the process of correcting that made me really want to give this a try. Amazing quality tutorial!

  • @EEBDivyanshgupta
    @EEBDivyanshgupta 2 роки тому +398

    This portfolio website is of Camilia
    But is developed by Aristide Benoist
    Truly beautiful ❤️❤️❤️

    • @smithwillnot
      @smithwillnot 2 роки тому +9

      It's also very similar to the Aristide Benoist's personal website.

    • @voaneves
      @voaneves 2 роки тому +5

      @@smithwillnot thanks for noticing that 👍, really similar

    • @mannycalavera121
      @mannycalavera121 Рік тому +21

      And her comment is pinned giving no kudos to the guy who actually developed it

  • @jorgejorge8878
    @jorgejorge8878 2 роки тому

    For some reason, watching your content give confidence in myself. You make it look so... achievable, even easy. Thanks.

  • @Guess_who08
    @Guess_who08 Рік тому

    I’m about to sleep but but dude you’re awesome. It keeps me awake and entertained! New sub!!

  • @guillermomedel1575
    @guillermomedel1575 Рік тому

    This is the web dev content I've been wanting. Thanks!

  • @aidanarnold3147
    @aidanarnold3147 2 роки тому +1

    Hey man, I'm sure you hear this a lot but, thank yo for making this content. I love frontend and similarly find different components I like through the web and recreate them in my spare time. This channel has given me another (prime) resource.
    Cheers!

  • @omersabic8555
    @omersabic8555 2 роки тому +2

    I love how you keep it simple. I would of dragged this out to at least 100 lines each lol

  • @craftnclash1952
    @craftnclash1952 7 місяців тому

    thats really epic, code less do more is much appreciated for every code , Thankyou for this video

  • @bopon4090
    @bopon4090 2 роки тому

    Bro you're too good at this. I'm glad i found this channel.

  • @k-yo
    @k-yo 2 роки тому

    I can't stress enough how much I see my own thought process when watching your videos. The goddamns "I'm guessing"s are so much relatable.

  • @gislo
    @gislo Рік тому

    this is a pretty awesome video the way you edit it and explain it all. Insanely good.

  • @talhazaryab
    @talhazaryab 2 роки тому

    Amazing content!
    One of the best web dev channels out there.
    Loved it

  • @StuffyX974
    @StuffyX974 2 роки тому

    Excellent breakdown of the problem solving for a complex feature, moreover explained in clear, efficient and demonstrative way. That's gold ! Subed

  • @scharpmeister
    @scharpmeister 2 роки тому

    I had to share this channel on my college web dev class discord cause its that much better than the course material

  • @x13244231
    @x13244231 2 роки тому

    I have to paused the video and appreciate how much effort you put in this video, so informative and easy to digest!

  • @UmarHamza
    @UmarHamza Рік тому

    The most underrated front end tutorial on the internet webs 🔥

  • @rage9067
    @rage9067 Рік тому +5

    after watching this video -8yrs from my life

  • @c0mplicated
    @c0mplicated 2 роки тому +1

    2:48 i cant😂😂 first time watching one of your videos, already a fan of your content

  • @longyuanchuan
    @longyuanchuan Рік тому

    This is so understandable... I loved your pedagogy, this is what I need in life xD

  • @7days280
    @7days280 2 роки тому

    I am absolutely amazed how easily you made me understand. You gained a new sub!

  • @solidkundi
    @solidkundi 2 роки тому +2

    I love your style of teaching ...when I was a beginner, my head would also hurt to keep track of why some choices were made in tutorials. I love that method to teach slowly while still moving fast.
    great job 👍

  • @angeliumeddra601
    @angeliumeddra601 9 місяців тому

    Impressive how the channel really makes your name, Im hyperplexed

  • @projekt.amadeus
    @projekt.amadeus 2 роки тому

    GOSH, I AM SO GLAD I FOUND YOUR CHANNEL!!!!!

  • @ianyimiah
    @ianyimiah 2 роки тому

    Awesome content man. You are offering something truly unique. I love your style.

  • @denizorsel1029
    @denizorsel1029 2 роки тому

    Thanks!

  • @meetbhalodi11
    @meetbhalodi11 Рік тому

    This is awesome
    Watching you explaining is like watching a movie

  • @Rensoconese
    @Rensoconese 2 роки тому

    I love how you explain everything so simply.

  • @deotexh
    @deotexh 8 місяців тому

    DAMN, BOTH OF YOU GUYS ARE IMPRESSIVE!!!

  • @tdrkone
    @tdrkone Рік тому

    holy shit the website has the smoothest transitions and ui ive used to date

  • @lemmeplay9034
    @lemmeplay9034 Рік тому

    just love your content, this is channel is just pure class

  • @tracla6430
    @tracla6430 Рік тому

    Seriously, where were you when I was in bootcamp studying this stuff??! lol You Rock!

  • @kerbymathewsarcia9583
    @kerbymathewsarcia9583 2 роки тому

    Breaking down a problem into smaller parts is so satisfying. Thank you for this content. Love from Philippines 💖

  • @migidoes
    @migidoes Рік тому

    This video perfectly captures what hours of front end work looks like in < 7 mins
    Bravo! 🎉

  • @davidvideauortega2617
    @davidvideauortega2617 2 роки тому

    You are always delivering man, amazing content!

  • @p.anuragrao6381
    @p.anuragrao6381 Рік тому

    Your channel's content is very precise and also nicely edited ;)
    I really enjoyed this video.

  • @NotHaunted1
    @NotHaunted1 Рік тому

    This is the most beautiful thing I've seen today

  • @nathantrance7558
    @nathantrance7558 2 роки тому

    You just earned a solid subscriber from me. What an experience that was! Keep up the good work sir.

  • @Doha3ris
    @Doha3ris Рік тому

    Just discovered your channel on this one, you're pretty awsome dude, love the way you explain each steps and goes trough your logical process, huge gg and keep up your great work ! I won't miss any of your upcoming vids ! 🏆

  • @danuvip
    @danuvip 2 роки тому

    damn that was good!
    nice explanation over there with the smoothing, loved it!
    keep it up

  • @Antiheroeanonimo
    @Antiheroeanonimo 11 місяців тому

    Wow thanks a lot, you're the only one who explained perfectly. Best regards here from Chile