Pure CSS Sticky Storytelling with 1 Property??

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 85

  • @DesignCourse
    @DesignCourse  6 ปีที่แล้ว +21

    Be sure to Subscribe! - My NIGHTMARE: I used to design a *lot* of logos, as I ranked high in Google for years. I'm talking well over 1,000+ clients. Anyhow, it started out as an ordinary client brief. They wanted a specific symbol with a character skiing down a mountain. Ok, that's cool -- submitted. "Could you add a few pine trees and a reindeer." -- Hm, okay... -submitted -- "Could you try adding something more? We want more character".. Wat.. Okay --submitted. "Could you try adding ..", :::CTRL+SHIFT-N::: / :::PAYPAL.COM::: / ::::REFUND:::: ;) SHARE YOURS!

    • @dameagnes6994
      @dameagnes6994 6 ปีที่แล้ว

      "Scope-Creep!" I believe that is the #1 nightmare of all time.

    • @aviatedviewssound4798
      @aviatedviewssound4798 6 ปีที่แล้ว

      hey bro i would like to work one day with you, no matter if it's design or coding

    • @AndrewYatzkan
      @AndrewYatzkan 6 ปีที่แล้ว +2

      FYI, if you have time to fix it, your thumbnail says "Storyteling"

    • @agil-j4n
      @agil-j4n 6 ปีที่แล้ว

      You have no idea. I had a lot of clients through the past 3 years who kept trying to add on their agreed project. It's fcking annoying

    • @aviatedviewssound4798
      @aviatedviewssound4798 6 ปีที่แล้ว

      so who wanna be part of my library project github.com/Voiddeepspace/neutral

  • @muhammadusman7217
    @muhammadusman7217 6 ปีที่แล้ว +13

    My worst client nightmare was nothing...
    Cause I'm a 18 year old kid learning web development, if I got any nightmare from my client I'm gonna tell you. 😃 Your videos are cool I learn alot of cool stuff from here.

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว +6

      Looking forward to your nightmares!

  • @SWGTBruno
    @SWGTBruno 6 ปีที่แล้ว +7

    Notification SQUAD UNITE!!

    • @stormz4069
      @stormz4069 6 ปีที่แล้ว +2

      Bruno Marques same brother 😂😂
      Enjoy your wonderful job. Peace ✌️

    • @kristapskokins
      @kristapskokins 6 ปีที่แล้ว

      Haha, been there too :)

  • @ethanhermsey
    @ethanhermsey 6 ปีที่แล้ว

    You are way too comfortable with your expertise. that intimidates me. Still, I don't really watch other web design channels, you make it all seem so logical.
    Very happy that you share all that knowledge with us! thnx :D

  • @Emily_Entropy
    @Emily_Entropy 6 ปีที่แล้ว +1

    My worst client nightmare was in 2001. The date is important, because back in 2001 we didn't have ubiquitous broadband. Hell, even the broadband that we did have was slow back then. But this was a good time to be a web designer. Many companies were starting to take their web presence seriously for the first time and wanted something nice. Then I got a client insistent on, "a watermark background of a map." My boss didn't understand how this could be a problem, just stick the image in the background. I had to spend 3 hours explaining to my boss and the client why sticking a 2mb jpg in background was a bad idea in 2001 when most people wereon dialup. Even DSL of the time would have choked on that. This was an insane request and no amount of logical argument would convince them otherwise... and it just kept dragging on for hours. I quit designing professionally immediately after that. I don't ever want to experience that again.

  • @jaredmalcolm1
    @jaredmalcolm1 5 ปีที่แล้ว

    This could be an excellent example of how someone could scaffold out an entire layout. You used emmet to scaffold out the html (`!`). You could follow that up with `(section>(figure>img)+(article>h3+lorem*5))*3` and then you'd have the entire layout setup and to a point where you could simply tab to the data points needed to fill it in (img attributes and h3).

  • @MarcosVinicius-gj6qg
    @MarcosVinicius-gj6qg 6 ปีที่แล้ว +1

    Gosto muito dos seus tutoriais. Aborda o conteúdo de uma maneira bem didática, parabéns!

  • @surajitdas94
    @surajitdas94 6 ปีที่แล้ว

    Love love love your videos. You always try to bring something new to us. Thanks for your effort. Really appreciate it. Love from India.

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว

      Thanks bud! Means a lot!

  • @briseidamontiel4777
    @briseidamontiel4777 6 ปีที่แล้ว +2

    You're amazing! Could you do a small video exploring three.js maybe? Thanks!

  • @shajisalim9551
    @shajisalim9551 4 ปีที่แล้ว

    You are awesome bro!!!, Hats off

  • @yunusshaikh8546
    @yunusshaikh8546 6 ปีที่แล้ว

    Side by side Browser with load reloading would be helpful. Thanks for your efforts. I have not seen free content with such amazing UI.

  • @vigneshudhay8144
    @vigneshudhay8144 6 ปีที่แล้ว

    Great videos. I would like to see a video of angular and materialize css integration in the future especially the components needing js.

  • @bikashgurung193
    @bikashgurung193 6 ปีที่แล้ว

    your tutorials are awesome

  • @kevinzhang8974
    @kevinzhang8974 6 ปีที่แล้ว

    thanks for this cool tip!!!... I duplicated it. Also, it is fun to read all these "nightmare" client story ...

  • @atosupriyanto6990
    @atosupriyanto6990 4 ปีที่แล้ว

    How we can make left column which content image fade in and out base on right content? Thanks

  • @uberfliege8289
    @uberfliege8289 3 ปีที่แล้ว

    Dropped a bullying client...said client was/is a lawyer...client threatened to have me evicted from my residence as well as a lawsuit...they taped pejorative correspondence on my front door...contacted associates on my other social media accounts. I just ignored them and rode it out.
    What could they do...I provided a flow chart of work with milestones/payment junctures...they received and signed off on the creativity of the project at these points. When they noticed the ineffectiveness of their bullying, they dissapeared...it transpired for almost a year.

  • @pandarzzz
    @pandarzzz 6 ปีที่แล้ว

    Thank you for sharing this informative video! 🐻🖐🏻

  • @Zzzzzzzzzzzzzzzzzzzzr
    @Zzzzzzzzzzzzzzzzzzzzr 6 ปีที่แล้ว

    I must have missed something how did you setup the sidebar? thanks

  • @OneOne-cq1op
    @OneOne-cq1op 6 ปีที่แล้ว +1

    As a freelancer, I had one client which is a nightmare. She ask me to design her website, all done, she likes it. Contract ended (we were working through a marketplace).
    A few months later, I got a notification that my account temporary suspended. It was her reporting me for messing up her website. I don't do anything for her of course, our contract was ended. She asks for a refund. After I checked, she hired another web dev who messed things up. But the marketplace support suggest me to do refund. I'm like, wtf???
    Long story short, I gave her what she wanted. As my time is more valuable than the amount of money she wants.
    Total nightmare lol

    • @m3rl1on
      @m3rl1on 5 ปีที่แล้ว

      what happened next? did you give her the refund?

  • @pncabhisek7949
    @pncabhisek7949 4 ปีที่แล้ว

    Could u plz demonstrate position sticky on multiple columns of a table, while scrolling horizontally.

  • @chandherbb05
    @chandherbb05 6 ปีที่แล้ว

    Hey! Can you do the same for table headers. If you just style thead?

  • @tedfitzpatrickyt
    @tedfitzpatrickyt 6 ปีที่แล้ว

    Great vids, Gary. Hey your thumbnail for this video has a typo

  • @arminbro.
    @arminbro. 6 ปีที่แล้ว +1

    @DesignCourse Great tutorial on demonstrating how awesome and easy it is to use position sticky rule in CSS. I did notice you introduce the "enter-view" package to add some animation effects to the SVGs at 9:50. I think this library would be perfect for that: github.com/ryanwalters/sticky-events It has event hooks like CHANGE, STUCK, and UNSTUCK that you can easily hook into and implement your animation or whatever you like. I believe it's using the new IntersectionObserver API under the hood which I believe is much more preferment than using "enter-view" package.

  • @eljesco8945
    @eljesco8945 6 ปีที่แล้ว

    Awesome video! But one odd thing. I tried this and the images aren't pushing each other off screen in mine. They just overlap.

  • @mattwindle3998
    @mattwindle3998 6 ปีที่แล้ว

    Really nice tutorial! thanks :)

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว

      Welcome! Thanks for the comment.

  • @eltacemiraslanov1782
    @eltacemiraslanov1782 6 ปีที่แล้ว

    your computer parametres?

  • @LumbreraEnMiCamino
    @LumbreraEnMiCamino 6 ปีที่แล้ว

    Usefull, thanks buddy!

  • @padasalgi
    @padasalgi 6 ปีที่แล้ว

    will you please advise me the url link of entire code of the above Pure CSS Sticky Storytelling with 1 Property
    Thanks

  • @AjayNishad
    @AjayNishad 6 ปีที่แล้ว

    Wow... Beautiful...

  • @muski282
    @muski282 6 ปีที่แล้ว +7

    Yo should really remove the top windows menu bar. In addition to that, you could press F11 to put vscode into fullscreen mode, that would make it look much cleaner and give you some more realestate

    • @TheFallinforyou
      @TheFallinforyou 6 ปีที่แล้ว +2

      It's free real estate. XD

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว +1

      Good tips. I will do this next time(s)

  • @yousufameer
    @yousufameer 6 ปีที่แล้ว

    Hey first of all nice tutorial
    And my worst client nightmare is client asking for majors changes in design file after completion my UI work :(

  • @DylanTheClutchGuy
    @DylanTheClutchGuy 6 ปีที่แล้ว +6

    Client? What client?
    Question answered.

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว +2

      That's a totally acceptable client nightmare man, might be the worst!

    • @MrAndi1281
      @MrAndi1281 6 ปีที่แล้ว

      "As the top sticky comment will be mine with my personal story...".-nope no sticky first comment here from DesignCourse... ;)..

    • @DylanTheClutchGuy
      @DylanTheClutchGuy 6 ปีที่แล้ว

      I swear I saw a stickied post... o.O

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว

      I thought I sticked it. "4 hours ago" it was posted though. Restickied if it wasn't!

  • @abhimishra2276
    @abhimishra2276 5 ปีที่แล้ว

    My nightmare
    एक बार मेरे क्लाइंट को मैंने उसका project complete कर के दिया तो अगले दिन उसका कॉल आया की फाइल खुल नहीं रही है और मै अपने पास से उस प्रोजेक्ट को डिलीट कर चुका था तब मुझे वो पूरा प्रोजेक्ट वापस बनाना पड़ा था।

  • @amarjeetsarma134
    @amarjeetsarma134 6 ปีที่แล้ว

    It was last year, and my 2nd client, he got his job done, with a promise to pay, like every client does, but unlike others, he never actually paid me, even after reminding him for a thousand times. I got annoyed and took that as a lesson, and stopped asking him about the payment. Now, whenever I see him, he acts like nothing ever happened, such a jerk.

    • @twocsies
      @twocsies 6 ปีที่แล้ว

      Amarjeet Sarma Send it to a bill collector. They are professionals.

  • @xerxius5446
    @xerxius5446 4 ปีที่แล้ว

    There's Intersection Observer API for doing this, no need to use a library

  • @yunusshaikh8546
    @yunusshaikh8546 6 ปีที่แล้ว

    Source code : github.com/DevYunus/sticky-navigation-inspiration

  • @MuhammadAdnan-gx6rd
    @MuhammadAdnan-gx6rd 6 ปีที่แล้ว

    I'm also looking for sticky sidebar content. . .

  • @Biersasam
    @Biersasam 6 ปีที่แล้ว

    My worst client nightmare was, that the guys didn't know what they want. They always complained about new things and were literally searching for any mistakes to bother me. Also they took a whopping 3 months to send me over their texts and images so the project took up 3/4 of a year. Never again...

  • @superknife0512
    @superknife0512 6 ปีที่แล้ว +1

    When he/she tell me fix a design a billion time and finally choose the first one :v not that bad :v

  • @maheshm4292
    @maheshm4292 6 ปีที่แล้ว

    Please share the code????

  • @sviatoslav3347
    @sviatoslav3347 6 ปีที่แล้ว

    new video - another like from me )))))

  • @MrBowmanMakes
    @MrBowmanMakes 2 ปีที่แล้ว

    Very useful info, but It's 'dragged it down', not 'drug it down'

  • @g43s
    @g43s 6 ปีที่แล้ว

    Why are you using VS code to code this examples? there are many online services that are made for quick prototyping like CodePen which has support for SCSS SASS and manyCSS , JS and HTML libraries and plugins.

  • @bobo32756
    @bobo32756 4 ปีที่แล้ว

    I am young and student and I do some webdev to earn money. I may do undeclared work :/ and a client once just cought my code, said "good bye mf" And just ran away...

  • @muhammadusman7217
    @muhammadusman7217 6 ปีที่แล้ว

    Cool.

  • @MuhammadAdnan-gx6rd
    @MuhammadAdnan-gx6rd 6 ปีที่แล้ว

    Great great. ..

  • @ashishtwr314
    @ashishtwr314 6 ปีที่แล้ว +5

    The worst nightmare is that i was not told about any deadline for the project and they informed me that tomorrow is the deadline and i had many things to develope in just one day 😐😐😐

  • @MM-doremifaso
    @MM-doremifaso 4 ปีที่แล้ว

    You're missing a l in the thumbnail

  • @SunilKumar-fh6jk
    @SunilKumar-fh6jk 6 ปีที่แล้ว

    Cool

  • @suranjithnishalaka7395
    @suranjithnishalaka7395 6 ปีที่แล้ว

    lv u

  • @jeffmanoj2091
    @jeffmanoj2091 6 ปีที่แล้ว

    Im only 13 :( , wish I had Clients :( :( :( :(

  • @abhishekkalia2702
    @abhishekkalia2702 6 ปีที่แล้ว +2

    Nothing against your videos, they're great. But all of your thumbnails look like you've been really pissed about the concept you're about to teach.

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว +2

      BECAUSE I AM, GOD DAMN TOPICS! ;)

    • @abhishekkalia2702
      @abhishekkalia2702 6 ปีที่แล้ว

      @@DesignCourse I figured! Thanks for the videos though.

  • @maltemichels
    @maltemichels 5 ปีที่แล้ว

    I like your videos a lot, but I think it would make them even better if you would dive right into the topic of the video instead of starting to build that simple website from scratch. I assume everybody who's interested into this kind of topic, is aware about the basics of web dev and doesn't want to waste 5-10 minutes watching you build that. Just friendly meant critique. 🙂

  • @mateuszjanbilko5188
    @mateuszjanbilko5188 4 ปีที่แล้ว

    She broke up with me after deployment... no money, lil love(remains), big disappointment for(eva) for me^^

  • @hammadbhat3010
    @hammadbhat3010 6 ปีที่แล้ว

    Sundae looks like poo