Can I Create This Tricky Animated CSS Sidebar?

Sdílet
Vložit
  • čas přidán 26. 08. 2024

Komentáře • 133

  • @Smiley01987
    @Smiley01987 Před 2 lety +53

    Pro tip: you can slow down the animations in the Chrome devtools to really see in detail what kind of animations are being applied to the elements.

  • @SuboptimalEng
    @SuboptimalEng Před 2 lety +153

    Kyle: Can I Code This Tricky Sidebar?
    Me: * checks video length *
    Me: Yea, probably.

  • @avneet12284
    @avneet12284 Před 2 lety +147

    Excellent - I'd try to avoid width/height for transitions - that'll trigger repaints. Scale/Translate = better.

    • @lucianmehedinteanu
      @lucianmehedinteanu Před 2 lety +5

      Yes, translate is way better. Performance is very good. Avoiding top, left, right, bottom and hwight width is recomandwd

    • @RodrigoMendoza7
      @RodrigoMendoza7 Před 2 lety +8

      I agree, but what would you do to prevent things from squeezing when using "scale"?

    • @elieanimations
      @elieanimations Před 2 lety +6

      True. But another approach is to only optimise if the performance is bad because it will add complexity as well. Here there aren't many components and the animation seems fluid.

    • @avneet12284
      @avneet12284 Před 2 lety

      @@elieanimations you are right

    • @dealloc
      @dealloc Před 2 lety +1

      @@elieanimations While I agree premature optimizations are bad. I think it would be important to explain and show why it's bad. For example, somebody taking the code from this video, without thinking about the ramifications when they have a lot of content in the body, might incorrectly assume this is the way to do it.

  • @infraredgoldfish
    @infraredgoldfish Před 2 lety +8

    3 minutes into the video and I'm blown away man. This is going to help so much with work. Thanks, this info is so valuable

  • @JDalmasca
    @JDalmasca Před 2 lety +31

    For box-shadows, using multiple, layered shadows usually results in a more natural gradient, adding additional realism to the effect.

    • @TheDannytaz
      @TheDannytaz Před 2 lety +1

      This! They can be a bit of a headache to understand at first but the result is simply stunning

    • @dienazty8820
      @dienazty8820 Před 2 lety +1

      Can you share an example please?

  • @joemoussally2927
    @joemoussally2927 Před 2 lety +7

    Thank you for your vids, I'm only a month new in HTML CSS and JS, and your vids helped me a LOT in understanding the concepts when applying it. Thank u so much!

  • @mattunlu8916
    @mattunlu8916 Před 2 lety +15

    I liked more when you try something you have not done before . So we all see how to handle , fix or walk around errors, issues. Thanks

  • @walterhafner2910
    @walterhafner2910 Před 2 lety +11

    Was great to see you figuring out solutions on the run. really learned a lot, great video

  • @brijeshkanchan9776
    @brijeshkanchan9776 Před 2 lety +7

    I was searching for this since 1 year. None of them were perfect.
    Now its perfect.
    Thank You Sir.

  • @unnervingibet117
    @unnervingibet117 Před 2 lety +2

    I just got into computer science and am currently learning python, however, I stumbled upon this video and it was so interesting I couldn't believe how entertaining you and watching you code is. This video rocks, thanks!

  • @ahmedroberts4883
    @ahmedroberts4883 Před 2 lety +5

    Love it. I am learning so much just watching how you work and think. I appreciate it.

  • @DanielWegmann
    @DanielWegmann Před 2 lety +8

    i like how you run into problems, struggle in inspecting your own code as if someone else has written it and then solve the issue. feel it!

    • @ja31ya
      @ja31ya Před 2 lety +2

      Unfortunately that's CSS programming in a nut shell lol. I really hate the language, but no one realized at the time of its creation, that websites would become the new software applications...

    • @JeloOW
      @JeloOW Před 2 lety +1

      @@ja31ya just letting you know that css and html arent a programming language

    • @ja31ya
      @ja31ya Před 2 lety +1

      @@JeloOW Actually a very hotly debated topic that is not settled one way or another. If you're a purist, you believe a programming language must be Turing complete, however I'm in the other camp. I believe if you are writing instructions that create a unique behavior through their interpretation, then you have successfully programmed something and I would call those instructions a programming language.

  • @vojinmilovic5787
    @vojinmilovic5787 Před 2 lety +1

    You make me think I can actually get a job. Seeing you struggle there for a good hour really gave me confidence that other people need time as well.

  • @spencer5051
    @spencer5051 Před 2 lety +5

    Absolutely love the new format. Thanks for keeping the errors and troubleshooting in.

  • @BryndilleYT
    @BryndilleYT Před 2 lety +3

    Well, as pointed already, I would use scale/translate for transitions. Also you forgot about the opened dashboard overlapping the content, and adding a dark filter to the main content.

  • @stark469
    @stark469 Před 2 lety +3

    Amazing.
    Found something really interesting in free time ☺️

  • @Muzly
    @Muzly Před 2 lety +2

    30,000 subscribers in the last 28 days? Damn, you're killing it! Great job.

    • @WebDevSimplified
      @WebDevSimplified  Před 2 lety +5

      Thanks. This last month has been by far the best ever for my channel.

    • @quixote5986
      @quixote5986 Před 2 lety

      @@WebDevSimplified Rightfully so

  • @alouisjeanmedia7723
    @alouisjeanmedia7723 Před 2 lety +1

    You gained my "like" at the calc property. Good show sir, good show indeed!🧐

  • @AmandeepSingh-sx9ke
    @AmandeepSingh-sx9ke Před 2 dny

    Please do some advanced projects on pure javascript. It helps us learn things better. Thank you for all your videos.

  • @kleinesmaccify
    @kleinesmaccify Před 2 lety

    Very clean explanations and excellent content/tempo ratio...thanks for sharing.

  • @UmairSadaqat
    @UmairSadaqat Před 2 lety

    The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀

  • @W4IT-YT
    @W4IT-YT Před 2 lety

    Its nice & amazing to see how you code all this

  • @D.P._
    @D.P._ Před 2 lety +1

    Very powerful video, so much technics in just one example!

  • @rishabsharma5307
    @rishabsharma5307 Před 2 lety

    Need more videos like this

  • @charliecayno
    @charliecayno Před 2 lety

    One thing I noticed is the positioning of text on CZcams is not actually moving but just appearing when it's open. But overall, great CSS!

  • @evanlarsen1980
    @evanlarsen1980 Před 2 lety

    I really like these videos! Please make more :)

  • @mohammedezzinehaddady7252

    box-shadow for me especially with light background colors like white is something like 0 2px 3px rgba(0,0,0,0.2)

  • @MattCurney
    @MattCurney Před 2 lety

    The king showing us his channel dashboard.

  • @AvanaVana
    @AvanaVana Před 2 lety

    This video is a classic example of the divide between what developers **think** looks the same, and what actually looks the same. 😂

  • @librakala7457
    @librakala7457 Před 2 lety +2

    It would be awesome if you make a video doing a functional multilanguage system with just html and js

  • @user-oq1vz8hy4r
    @user-oq1vz8hy4r Před rokem

    At the 6:00 point in the video, Kyle wraps the SVG element in a button, to "make it more accessible"... what exactly is meant by this?
    Can the SVG element itself not be made to have the similar functionality of a button that may be later required?
    I am not challenging or doubting this method/approach... I am just wondering what exactly is meant by "accessible" in this case.
    Thank you. Great content!

  • @nizarkadri3109
    @nizarkadri3109 Před 2 lety

    I was waiting for customized scrollbar as youtube, seems like you kinda missed it. Otherwise great video!

  • @joshhallan
    @joshhallan Před 2 lety +2

    Is there a reason why you don't use SCSS? I find it easier when nesting for different components. Also have you thought about JS hooks opposed to data attributes?

  • @andrija-official
    @andrija-official Před 2 lety +1

    Great video, Kyle! Sometimes you sound like I'm watching at 1,25x speed

  • @abhilashmatukumalli4321

    This is just awesome, can you also create this over react please

  • @mikoajwychorski4648
    @mikoajwychorski4648 Před 2 lety

    Love u, good work. U r very helpful thank u

  • @starwaveprime7398
    @starwaveprime7398 Před 2 lety

    Hi! I really enjoy your videos, thanks!

  • @plemplem
    @plemplem Před 2 lety +1

    I can't believe that you've spent an hour perfectly replicating the style and animation of that sidebar but you didn't spend the second it would've taken you to add "font-family: sans-serif" 💀

  • @hassaneoutouaya
    @hassaneoutouaya Před 2 lety

    Thank you !

  • @jackbushnell2622
    @jackbushnell2622 Před 2 lety +1

    Thank you so much Kyle! I have one question: how can I make the sidebar stay open when moving to a new page like content.html (for example)?

  • @user-jz4iz2qh9u
    @user-jz4iz2qh9u Před 2 lety

    Excellent video and topic! Could you please make a video on LottieFiles and how to integrate them in a website? Perhaps a loading animation or something… thanks 🙏🏻

  • @CodeAProgram
    @CodeAProgram Před 2 lety +1

    Awesome

  • @tmnrp
    @tmnrp Před 2 lety

    Awesome.... :) Thank you

  • @wallace4904
    @wallace4904 Před 2 lety +2

    El Niño?

  • @morningstarsci
    @morningstarsci Před 2 lety

    why did you use * as well as *::after and *::before? doesn't * apply to those elements as well?

  • @RyanMontambeault
    @RyanMontambeault Před 2 lety

    anyone know why when I use a class for the li's, it wont change the color of the svg? Mine only seems to work if I put the fill in the a tags class.

  • @giwrgosiwannidis4684
    @giwrgosiwannidis4684 Před 2 lety

    Hey Kyle! Could you please make a video or project about React Native ? It would help so much

  • @aliezadkhaha9439
    @aliezadkhaha9439 Před 2 lety

    Excellent

  • @MuhammadAdnan2.0
    @MuhammadAdnan2.0 Před 2 lety

    Awesome 👍

  • @jawherjawa555
    @jawherjawa555 Před 2 lety

    great job

  • @hatersbudiman7058
    @hatersbudiman7058 Před 2 lety

    How to use swipe gestur in this sidebar?

  • @gururajmoger8649
    @gururajmoger8649 Před 2 lety

    If u add the scroll bar and change the font ll looks like same

  • @AlexCouch65
    @AlexCouch65 Před rokem

    You: *uses inspect element to get the svgs and colors and play around with the box shadow*
    Also you: *doesn't use inspect element to copy the box shadow to save time*
    I kid of course

  • @Kokuen0245
    @Kokuen0245 Před 2 lety

    What VSC plugins are used here? Please and thanks.

  • @DesignwithCracka
    @DesignwithCracka Před 2 lety

    Now I'm gonna try recreate this in Oxygen Builder :)

  • @Sven1222225
    @Sven1222225 Před 2 lety

    why did u use position sticky on sidebar? why not fixed. is there any difference?

  • @__Phederal__
    @__Phederal__ Před 2 lety

    So good

  • @ComradeBao
    @ComradeBao Před 2 lety

    Nice!

  • @RobbyDongre
    @RobbyDongre Před 2 lety

    Can you create one project using mongodb, node js and javascript. It would be great if you create one ecommerce site

  • @developer_hadi
    @developer_hadi Před 2 lety

    can you make videos of learning JavaScript from scratch to pro

  • @techtipsuk
    @techtipsuk Před 2 lety

    Always keep your errors in so much better.

  • @learn029
    @learn029 Před 2 lety

    can you please make a Custom Js framework like React JS from scratch

  • @engmt8435
    @engmt8435 Před 2 lety +1

    Love you from algeria

  • @mdsaifulislamshanto4444

    Great

  • @S4LTYT
    @S4LTYT Před 2 lety

    hey Kyle Please make a video on reducing bundle size of React app in production. please.

    • @SuperAlibajwa
      @SuperAlibajwa Před 2 lety

      Try implementing lazy loading in ur react app

  • @burakkaya9149
    @burakkaya9149 Před 2 lety

    He is a good programmer.

    • @finsflexin
      @finsflexin Před 2 lety

      Yeah, he is a good programmer

  • @maxime9728
    @maxime9728 Před 2 lety

    778,822 SUBSCRIBERS BTW

  • @sahilkamra4586
    @sahilkamra4586 Před 2 lety

    Can anybody please share their journey about how you started creating websites without much help like without watching tutorials that takes you from A-Z? Like ofcourse while using resources like Google and stack overflow and using CZcams tutorials to understand basic topics but creating things on your own.

  • @avmalik3705
    @avmalik3705 Před 2 lety +4

    First view from india

  • @paoloose
    @paoloose Před 2 lety

    yes

  • @BorosBlake
    @BorosBlake Před 2 lety

    Its cool. Now, how to make it work, when you click on the sidebar link, render the content into the main area, without reloading the whole page? Do you use jquery, httprequest, or must to use a framework like react, vue ? Can you contiue this example with the rest of the functionality?

    • @robertcarsten4050
      @robertcarsten4050 Před 2 lety

      So you could theoretically have multiple sections in the "content" container. Set them to display:none.
      And then in JS set an "active" like class on the section corresponding to the clicked button.
      Not the best way, as I would probably just reach for a framework if that was the case

    • @d.sherman8563
      @d.sherman8563 Před 2 lety

      There are a million different ways to solve this.

    • @BorosBlake
      @BorosBlake Před 2 lety

      @@d.sherman8563 I already know that. But would like to see than view solutions..

  • @chefbennyj
    @chefbennyj Před 2 lety +1

    Yeah debugging videos are great because people can see the process.

  • @smcalpha
    @smcalpha Před 2 lety

    Can I use your sidebar as an inspiration for a react sidebar-component?

  • @traju2737
    @traju2737 Před 2 lety

    First view from Hyderabad (India)

  • @lordrampenthump422
    @lordrampenthump422 Před 2 lety

    well i just learned about lorem in vs code

  • @geb2
    @geb2 Před 2 lety

    Like the Bob Ross of the next generation...

  • @dannylee5037
    @dannylee5037 Před 2 lety

    "And that's all it took to create CZcams sidebar..."
    It took literally 1 hour to replicate it.

  • @funnylifestyle8174
    @funnylifestyle8174 Před 2 lety

    Lets go...

  • @dvdmndz5946
    @dvdmndz5946 Před 2 lety

    ❤️❤️

  • @augustuscaeser8939
    @augustuscaeser8939 Před 2 lety

    any chance this video can be shorter?

  • @iydl
    @iydl Před 2 lety +1

    CSS is easy but annoying for me to do idk why.

  • @mykalimba
    @mykalimba Před 2 lety

    Slick move editing the DOM to change the revenue number to "????". Or does CZcams make all content creators wonder what this number is? 🤔

  • @cubanolibre5465
    @cubanolibre5465 Před 2 lety

    A tutorial video made for people that dont need tutorials videos. Xd

  • @aungthiha0
    @aungthiha0 Před 2 lety

    Please share css of your hair.

    • @madhumitamiddya702
      @madhumitamiddya702 Před 10 měsíci

      .hair{
      display:flex;
      justify-content: space-evenly;
      align-items: center;
      background: linear-gradient(45deg, brown, wheat);
      transform: skewY(2.5deg);
      }

    • @madhumitamiddya702
      @madhumitamiddya702 Před 10 měsíci

      npm i --save @kyle-hair

  • @snow3570
    @snow3570 Před 2 lety

    I’m so triggered that you didn’t change the font.

  • @afin4684
    @afin4684 Před 2 lety +1

    Best theme for Vscode?

  • @tj_1260
    @tj_1260 Před 2 lety

    Namerlp

  • @khizrshaikh9902
    @khizrshaikh9902 Před 2 lety

    First

  • @rezaroohian9549
    @rezaroohian9549 Před 2 lety

    If you had used Sass/Less or at least use some naming convention like BEM you could have achieved the same result in half the time.

  • @johnkucharsky6927
    @johnkucharsky6927 Před 2 lety

    CSS is difficult

  • @muzammilsyed2339
    @muzammilsyed2339 Před 2 lety

    Close the damn sidebar of vscode jeez

  • @alex01at
    @alex01at Před 2 lety +2

    Beautiful, but not responsive. :-)

    • @starwaveprime7398
      @starwaveprime7398 Před 2 lety

      I'm new to web dev and I wanted to ask what about JS for this? but I think this sum up the answer 😃

    • @alex01at
      @alex01at Před 2 lety

      @@starwaveprime7398 The JS part only trigger the button and add css-class to sidebar. It's the easiest way for it.

    • @robertcarsten4050
      @robertcarsten4050 Před 2 lety

      @@alex01at
      Actually all of this could be recreated with just html +Css really simply without Javascript.
      Wouldn't make a tonne of sense since this is theoretically the sidebar for a SPA but still easy and possible