Portfolio Pure CSS Scroll Snapping Tutorial
ฝัง
- เผยแพร่เมื่อ 28 พ.ค. 2021
- If you want to see more tutorial like this, make sure to SUBSCRIBE!
Here is a first of many tutorials for you guys on creating fancy and fun stuff for your personal portfolios // personal websites. All of these tutorials using plain CSS or a combination of CSS and JavaScript should make your websites be top of their game, professional, with great user experience!
JOIN MY DISCORD SERVER ► / discord
FOLLOW ME ON INSTAGRAM ► / developerfi. .
CHECK ME OUT ON GITHUB ► github.com/FilipGrebowski
INQUIRIES AND COLLABORATIONS ► grebowskifilip@gmail.com
WATCH MORE OF MY VIDEOS ►
►Web Developer Reacts LATEST • Web Developer Reacts t...
► Perfect your Resume/CV • How to CREATE the PERF...
► I Built my DESK! • Building my Minimalist...
► Get Hired as a Software Developer • HOW TO get $100,000+ S...
► 6 Developer Life Hacks in 90 Seconds: • 6 SOFTWARE DEVELOPER L...
► Best Chrome Extensions for Developers: • BEST Chrome Extensions...
► Reacting to Incredible Personal Websites: • Web Developer Reacts t...
► FUN day in the life of a Developer: • FUN day in the life of...
MUSIC BY ► @epidemicsound
#developer #tutorial #webdev - วิทยาศาสตร์และเทคโนโลยี
![Pure CSS Snap Scrolling Tutorial [Better User Experience!]](/img/n.gif)
For anyone having trouble to make the SCSS work, and you are using Visual Studio Code, you need the "Live SASS Compiler" Plugin installed and turned on :) Have fun!
Also make sure the version is 5.x since the most downloaded one is outdated (3.x)
@@Creedoo thanks for that info
👍
Thanks
Make Scss tutorial playlist plzz.
Can you please make this a series?This is really helpful!
Yup will do!
5 minutes in and I really like your style of teaching. Very easy to understand and code along! Subbed for sure! =)
I just found out your channel today and being enjoying it so much. Thank you for the great content and please never stop uploading.
Awesome tutorial! *Definetly* will be using this!
This is truly amazing content, would like to see more of this "tips and tricks" or a css series. Great video!
I just wanted to say I love your videos they are very entertaining and educational 👍
Awesome video mate! I just implemented this with JavaScript and this way is so much easier! Thanks for sharing!
Your explanation is so good. Would love to see you make more tutorials like this.
Thank you so much for this. Googled so much and didn't find what I wanted much less explained in such a simple way.
Love this video!! Super easy to understand and very clear.. Thanks man! keep it going! love it!
great tutorial, just revamping my site, and this pops up, nice timing
you are awesome!! I was looking for that for so long time
Great work man 🔥
Been looking for a scroll snapping tutorial as good as this for a while now (just wasn't understanding it). You're a God send Filip!
Glad I was able to help you!!!!
I was thinking of using this snap for my website now I finally have tutorial. Thanks a lot
Thanks man, will try it out for sure :)
Just started learning some html and css. I had a rly basic tutorial, but i swear this video made me understand so much so quick(i di have some java experience). 10/10 thank you
Fantastic. This was so easy to understand as you elaborated to simply.👍
This was such an amazing video 😍
got a google reccomend for your video and wow so good ! good luck with future vids, will definitely subscribe 👍🏻
Hey filip, i want to thank you for making this video
I needed this! Thanks!
Great video Filip. I definitely will be using this
Awesome tutorial, thanks and please keep continue & make this a serie.
Sr. You gained my trust. I am in shock, right now i felt like a damn pro thanks to this video. Cheers from Argentina.
Hey Filip. This is beautiful. Thankyou for sharing
This is what I have needed for my current project. I was using JS for this, uffff..... Thank You
amazing tutorial and great explanation dude! please make this a series..
Thank you I'm an 11-year-old developer I'll probably be using this
Oh, that's cool. I'm a 14 year old devloper, found this really helpful
No, ur doge
@@pranav1615 dogecoin to the MOON!
@@sillicon8227 same
also watched the live stream
amazing bro just no words you did it with css !!!!
Thank you so much Filip for this helpfull video, amazing! Lots of love
So sick. I'm really tired of doing this with JS& jQuery so this makes my life 100× easier!
Just exactly what I'm looking for. Subbed!
Super cool bro, congrats!!
easy and clear thank you Filip
It was nice ! Do more of these !
very helpful, thank you !♥ good luck 👍for next one!
Really nice tutorial and I’ve not touched scss but your tutorial just blew my mind and I’ll be usin it
Amazing… love it. Surely gonna give a try 🤙🤙
Apparently, the scrollbar adds some px to the section's width (in some browsers), so the total width of each section becomes vw+scrollbar>vw resulting in an overflow x when you have a scrollbar y
I usually set the width of each section to 100% instead of 100vw
I meet the same problem here, and I used React and tailwind-styled-components.
Another issue that troubled me all these days is,
when I set the horizontal overflow view, I got an X scrollbar instead of scrolling down to the left pages.
I used useEffect to add an event listener to solve it.
HOWEVER, I am wondering if there is any method easier?
Because I don't wanna listen to the whole wheel event all the time...
@@styxshy5704 how did you do that can u tell me?
please make this a series and i'd be nice if you bring more fancy yet simple stuff ✨
Cheers!
Will do!!!
This is a really good explaination. Thank you!
Aaah... such a nice small css tut😁❣️
Thank you bro!! That's what I wanted🙌🏻
Brilliant! Thank you!
Zajebista sprawa, dzięki piękne za taki CSSowy smaczek. Pozdro! :)
Simple and aesthetically appealing
Really cool I will use it tomorrow on my project. Thank you.
Yoooooo this is awesome
Very simple but informative video!
Amazing tutorial, thanks!
Great vid! Thanks for sharing!
I'm so gonna use this! This is fun.
Really nice one!! thanks for sharing!
Damn that was so cool. Thanks
Fantastic, thank you!
Thank you Filip 😊
Thank you Filip for tutorial
Nice video dude!
AWESOME! Thank You!!!
thanks bro this video really helped me for my projects
If anyone want to know how justify-content works, is depend of the flex direction, if the flex direction is row (which is by default) will be horizontal, if it is colum, will be vertical and align-items will be the one to center the things horizontal.In a nutshell, justify-content works in flex direction value.
i saw you before, anyway i will subscribe just now, because of this video, the way of teaching and css simple but amazing tricks are cool! i own you that one!)))))
Great Tutorial, thanks from Brazil
One of the best I have ever seen ❤❤.
Please continue with more such cool vedios 🦚
wow this was cool!!
I'm from Vietnam, I appreciate your video, it's quite good and useful
Great work❤️
Thanks for this!
That was Very useful ...appreciate it
Amazing I going to try it now.
Love your videos
love this
Zajebisty i szybki effect :)
Great video thanks !!!
Thank you for this tutorial.
Thanks bro! ♥
Please do this tutorials more ❤️
I love it !!
Omg so cool, thanks 😁 regards from Perú
Hello...
Your tutorials are awesome!!!!
Any possible way you can make the whole tutorial on scroll animations?
Fabulous explanation ✨
Thank you! ;)
SUPERB!!!!!!
Thank you mate 😊
This is just awesome video tutorial
Btw your accent is cool.
I used to use smooth-scroll but this is way more fancier
THANK YOU SO MUCH
Thanks a lot !!
Kurcze, nie dość że przy oglądaniu poradników, szlifuje angielski to na dodatek uczę się programować. Proszę o wiecej takich małych tutoriali :) Pozdrawiam
Cieszę się, będzie więcej! 😎
ty for ur tutorials!
great tuts
Bro why didn’t this channel blow up yet
I’m waiting! Lol
Awesome sir
did not know that you can ignore flexbox shrinking the children width by setting the child's flex to none. Learned something new from this video! +1 from me (y)
This would be a sick series. Maybe something along the lines of teaching common/cool CSS tricks like this, or parallax scrolling, or animations.
That is the idea! It will be a series!
@@developerfilip great!
You deserve a subscribe
It was very useful
Nice 👍 thank you
Just 15:16 min of content have tons of knowledge,how is it even possible....
Today I was just trying to find how to make my website horizontally scroll and booooom...... TH-cam algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥
Glad it was helpful! :D