Portfolio Pure CSS Scroll Snapping Tutorial
Рет қаралды 184,558
3 жыл бұрын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
@developerfilip 3 жыл бұрын
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!
@Creedoo 3 жыл бұрын
Also make sure the version is 5.x since the most downloaded one is outdated (3.x)
@welikerosafloyd 3 жыл бұрын
@@Creedoo thanks for that info
@bhargavmahajan696 3 жыл бұрын
👍
@topcringeandslander 3 жыл бұрын
Thanks
@jpwebdev8516 2 жыл бұрын
Make Scss tutorial playlist plzz.
@saranyaghosh2003 3 жыл бұрын
Can you please make this a series?This is really helpful!
@developerfilip 3 жыл бұрын
Yup will do!
@stevenerixon33 3 жыл бұрын
5 minutes in and I really like your style of teaching. Very easy to understand and code along! Subbed for sure! =)
@isableye7164 3 жыл бұрын
I just found out your channel today and being enjoying it so much. Thank you for the great content and please never stop uploading.
@goytu5493 3 жыл бұрын
Awesome tutorial! *Definetly* will be using this!
@adrianjuarez4423 3 жыл бұрын
This is truly amazing content, would like to see more of this "tips and tricks" or a css series. Great video!
@nikkiivanov7995 3 жыл бұрын
I just wanted to say I love your videos they are very entertaining and educational 👍
@ConorBailey 3 жыл бұрын
Awesome video mate! I just implemented this with JavaScript and this way is so much easier! Thanks for sharing!
@tusharsaha321 3 жыл бұрын
Your explanation is so good. Would love to see you make more tutorials like this.
@nyoreachoja2068 Жыл бұрын
Thank you so much for this. Googled so much and didn't find what I wanted much less explained in such a simple way.
@cesarduarte9313 3 жыл бұрын
Love this video!! Super easy to understand and very clear.. Thanks man! keep it going! love it!
@darshandev1754 3 жыл бұрын
great tutorial, just revamping my site, and this pops up, nice timing
@gabrielreliquias5253 Жыл бұрын
you are awesome!! I was looking for that for so long time
@jaypratap3888 3 жыл бұрын
Great work man 🔥
@benjaminlevinson5205 2 жыл бұрын
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!
@developerfilip 2 жыл бұрын
Glad I was able to help you!!!!
@rye013 3 жыл бұрын
I was thinking of using this snap for my website now I finally have tutorial. Thanks a lot
@piyushs8176 3 жыл бұрын
Thanks man, will try it out for sure :)
@mirchm 3 жыл бұрын
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
@dankcommenter5889 2 жыл бұрын
Fantastic. This was so easy to understand as you elaborated to simply.👍
@IshanKesharwani 3 жыл бұрын
This was such an amazing video 😍
@user-bi3xn8dj7y 3 жыл бұрын
got a google reccomend for your video and wow so good ! good luck with future vids, will definitely subscribe 👍🏻
@ayoubibourkelidrissi1231 3 жыл бұрын
Hey filip, i want to thank you for making this video
@patapizza3382 3 жыл бұрын
I needed this! Thanks!
@NitinKankarwal 3 жыл бұрын
Great video Filip. I definitely will be using this
@mstfsgdc 3 жыл бұрын
Awesome tutorial, thanks and please keep continue & make this a serie.
@juanmartinaliaga6368 2 жыл бұрын
Sr. You gained my trust. I am in shock, right now i felt like a damn pro thanks to this video. Cheers from Argentina.
@himanshukamal1 3 жыл бұрын
Hey Filip. This is beautiful. Thankyou for sharing
@VIKASH1870 3 жыл бұрын
This is what I have needed for my current project. I was using JS for this, uffff..... Thank You
@holymacaroni3319 3 жыл бұрын
amazing tutorial and great explanation dude! please make this a series..
@markasgrazhulis9081 3 жыл бұрын
Thank you I'm an 11-year-old developer I'll probably be using this
@sillicon8227 3 жыл бұрын
Oh, that's cool. I'm a 14 year old devloper, found this really helpful
@pranav1615 3 жыл бұрын
No, ur doge
@markasgrazhulis9081 3 жыл бұрын
@@pranav1615 dogecoin to the MOON!
@markasgrazhulis9081 3 жыл бұрын
@@sillicon8227 same
@markasgrazhulis9081 3 жыл бұрын
also watched the live stream
@newjio4334 3 жыл бұрын
amazing bro just no words you did it with css !!!!
@crlntravels 3 жыл бұрын
Thank you so much Filip for this helpfull video, amazing! Lots of love
@CalvinBonner 3 жыл бұрын
So sick. I'm really tired of doing this with JS& jQuery so this makes my life 100× easier!
@iwanttopunchtheosface Жыл бұрын
Just exactly what I'm looking for. Subbed!
@adrielschmitz 3 жыл бұрын
Super cool bro, congrats!!
@mouradbousba5215 2 жыл бұрын
easy and clear thank you Filip
@cyrusthapa4149 3 жыл бұрын
It was nice ! Do more of these !
@iuhere 2 жыл бұрын
very helpful, thank you !♥ good luck 👍for next one!
@subhasrini2706 3 жыл бұрын
Really nice tutorial and I’ve not touched scss but your tutorial just blew my mind and I’ll be usin it
@RaxtersVlog 3 жыл бұрын
Amazing… love it. Surely gonna give a try 🤙🤙
@erin1569 2 жыл бұрын
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
@styxshy5704 Жыл бұрын
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...
@eggrat3381 Жыл бұрын
@@styxshy5704 how did you do that can u tell me?
@iDeviceSlash 3 жыл бұрын
please make this a series and i'd be nice if you bring more fancy yet simple stuff ✨ Cheers!
@developerfilip 3 жыл бұрын
Will do!!!
@shin5302 2 жыл бұрын
This is a really good explaination. Thank you!
@ASHISH-le4jg 3 жыл бұрын
Aaah... such a nice small css tut😁❣️
@omkarp9943 Жыл бұрын
Thank you bro!! That's what I wanted🙌🏻
@symamaisonsbois2281 Жыл бұрын
Brilliant! Thank you!
@jakobo5521 2 жыл бұрын
Zajebista sprawa, dzięki piękne za taki CSSowy smaczek. Pozdro! :)
@aryantnigam2246 3 жыл бұрын
Simple and aesthetically appealing
@MsMelanie117 2 жыл бұрын
Really cool I will use it tomorrow on my project. Thank you.
@juillotine 2 жыл бұрын
Yoooooo this is awesome
@requenz_ 3 жыл бұрын
Very simple but informative video!
@michelefernandoloureiroros4366 Жыл бұрын
Amazing tutorial, thanks!
@kuzmicheff Жыл бұрын
Great vid! Thanks for sharing!
@nobody-bt7mu 2 жыл бұрын
I'm so gonna use this! This is fun.
@itaispector6040 3 жыл бұрын
Really nice one!! thanks for sharing!
@Adhithya2003 3 жыл бұрын
Damn that was so cool. Thanks
@mattbaro909 Жыл бұрын
Fantastic, thank you!
@sheerasai5948 2 жыл бұрын
Thank you Filip 😊
@box90s13 3 жыл бұрын
Thank you Filip for tutorial
@mateopetruccelli3156 3 жыл бұрын
Nice video dude!
@VidarrKerr 11 ай бұрын
AWESOME! Thank You!!!
@dell4559 2 жыл бұрын
thanks bro this video really helped me for my projects
@InWardHayden 3 жыл бұрын
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.
@Awe88Some 2 жыл бұрын
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!)))))
@victorcandiani 3 жыл бұрын
Great Tutorial, thanks from Brazil
@manjeetdhayal2595 3 жыл бұрын
One of the best I have ever seen ❤❤. Please continue with more such cool vedios 🦚
@pranavyeole102 2 жыл бұрын
wow this was cool!!
@niclienquan8703 3 жыл бұрын
I'm from Vietnam, I appreciate your video, it's quite good and useful
@reallygoodstuff4441 3 жыл бұрын
Great work❤️
@ryaaan0751 2 жыл бұрын
Thanks for this!
@kasraghasemipoo7991 3 жыл бұрын
That was Very useful ...appreciate it
@himanshusahu6960 3 жыл бұрын
Amazing I going to try it now.
@srikarkandula5313 3 жыл бұрын
Love your videos
@mashodrana1485 2 жыл бұрын
love this
@Jankee187 3 жыл бұрын
Zajebisty i szybki effect :)
@zziomus3402 3 жыл бұрын
Great video thanks !!!
@ekramwasi238 3 жыл бұрын
Thank you for this tutorial.
@sarthaksharma4816 2 жыл бұрын
Thanks bro! ♥
@prudhvichinnam1488 3 жыл бұрын
Please do this tutorials more ❤️
@kodosensei 2 жыл бұрын
I love it !!
@angelomancilla7153 3 жыл бұрын
Omg so cool, thanks 😁 regards from Perú
@mohammedjuzer9748 2 жыл бұрын
Hello... Your tutorials are awesome!!!! Any possible way you can make the whole tutorial on scroll animations?
@divyashreesoni663 3 жыл бұрын
Fabulous explanation ✨
@developerfilip 3 жыл бұрын
Thank you! ;)
@harishr9342 3 жыл бұрын
SUPERB!!!!!!
@madebytl 3 жыл бұрын
Thank you mate 😊
@mrbhaskarn 3 жыл бұрын
This is just awesome video tutorial Btw your accent is cool.
@markasgrazhulis9081 3 жыл бұрын
I used to use smooth-scroll but this is way more fancier
@meixel 2 жыл бұрын
THANK YOU SO MUCH
@prathameshjadhav2047 3 жыл бұрын
Thanks a lot !!
@dexter2374 3 жыл бұрын
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
@developerfilip 3 жыл бұрын
Cieszę się, będzie więcej! 😎
@shuttlehd2395 3 жыл бұрын
ty for ur tutorials!
@shohqadamm 2 жыл бұрын
great tuts
@domizianoscarcelli1936 3 жыл бұрын
Bro why didn’t this channel blow up yet
@developerfilip 3 жыл бұрын
I’m waiting! Lol
@chairilaliart 3 жыл бұрын
Awesome sir
@arogueotaku 3 жыл бұрын
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)
@ezramengesha8165 3 жыл бұрын
This would be a sick series. Maybe something along the lines of teaching common/cool CSS tricks like this, or parallax scrolling, or animations.
@developerfilip 3 жыл бұрын
That is the idea! It will be a series!
@ezramengesha8165 3 жыл бұрын
@@developerfilip great!
@rishabhsharma3357 3 жыл бұрын
You deserve a subscribe
@seeker3794 7 ай бұрын
It was very useful
@AdeyCoder 3 жыл бұрын
Nice 👍 thank you
@amandeepchauhan6091 3 жыл бұрын
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...... KZfaq algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥
@developerfilip 3 жыл бұрын
Glad it was helpful! :D
Online Tutorials
Рет қаралды 1,9 МЛН
Syncswift
Рет қаралды 2,1 МЛН
Техно Гарри
Рет қаралды 27 М.
Typecase
Рет қаралды 1,1 МЛН
i-shoppers обзоры
Рет қаралды 839 М.
Alex Boyko
Рет қаралды 281 М.