Portfolio Pure CSS Scroll Snapping Tutorial

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/Fil...
INQUIRIES AND COLLABORATIONS ► [e-mail]
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]

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]

Also make sure the version is 5.x since the most downloaded one is outdated (3.x)

[@welikerosafloyd]

@@Creedoo thanks for that info

[@bhargavmahajan696]

👍

[@topcringeandslander]

Thanks

[@jayantpapola]

Make Scss tutorial playlist plzz.

[@saranyaghosh2003]

Can you please make this a series?This is really helpful!

[@developerfilip]

Yup will do!

[@markasgrazhulis9081]

Thank you I'm an 11-year-old developer I'll probably be using this

[@sillicon8227]

Oh, that's cool. I'm a 14 year old devloper, found this really helpful

[@pranav1615]

No, ur doge

[@markasgrazhulis9081]

@@pranav1615 dogecoin to the MOON!

[@markasgrazhulis9081]

@@sillicon8227 same

[@markasgrazhulis9081]

also watched the live stream

[@stevenerixon33]

5 minutes in and I really like your style of teaching. Very easy to understand and code along! Subbed for sure! =)

[@erin1569]

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?

[@goytu5493]

Awesome tutorial! *Definetly* will be using this!

[@InWardHayden]

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.

[@juanmartinaliaga6368]

Sr. You gained my trust. I am in shock, right now i felt like a damn pro thanks to this video. Cheers from Argentina.

[@domizianoscarcelli1936]

Bro why didn’t this channel blow up yet

[@developerfilip]

I’m waiting! Lol

[@amandeepchauhan6091]

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...... KZbin algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥

[@developerfilip]

Glad it was helpful! :D

[@isableye7164]

I just found out your channel today and being enjoying it so much. Thank you for the great content and please never stop uploading.

[@nikkiivanov7995]

I just wanted to say I love your videos they are very entertaining and educational 👍

[@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.

[@ConorBailey]

Awesome video mate! I just implemented this with JavaScript and this way is so much easier! Thanks for sharing!

[@benjaminlevinson5205]

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]

Glad I was able to help you!!!!

[@VIKASH1870]

This is what I have needed for my current project. I was using JS for this, uffff..... Thank You

[@ezramengesha8165]

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]

That is the idea! It will be a series!

[@ezramengesha8165]

@@developerfilip great!

[@CalvinBonner]

So sick. I'm really tired of doing this with JS& jQuery so this makes my life 100× easier!

[@markasgrazhulis9081]

I used to use smooth-scroll but this is way more fancier

[@adrianjuarez4423]

This is truly amazing content, would like to see more of this "tips and tricks" or a css series. Great video!

[@iDeviceSlash]

please make this a series and i'd be nice if you bring more fancy yet simple stuff ✨ Cheers!

[@developerfilip]

Will do!!!

[@hitarthagogoi2829]

Idk why, But I'm receiving this video multiple times in recommendation.

[@developerfilip]

Woohoo! 🤪🤪

[@mirchm]

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

[@arogueotaku]

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)

[@tusharsaha321]

Your explanation is so good. Would love to see you make more tutorials like this.

[@TECHNOLOGYENABLED]

can we have more small tutorials like this plz

[@developerfilip]

Yes!

[@gabrielreliquias5253]

you are awesome!! I was looking for that for so long time

[@niclienquan8703]

I'm from Vietnam, I appreciate your video, it's quite good and useful

[@user-bi3xn8dj7y]

got a google reccomend for your video and wow so good ! good luck with future vids, will definitely subscribe 👍🏻

[@darshandev1754]

great tutorial, just revamping my site, and this pops up, nice timing

[@newjio4334]

amazing bro just no words you did it with css !!!!

[@rye013]

I was thinking of using this snap for my website now I finally have tutorial. Thanks a lot

[@dexter2374]

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]

Cieszę się, będzie więcej! 😎

[@soni801]

For the record: this does not work nicely with a computer mouse. it works great and looks amazing with a trackpad, but looks very bad if you try to use a mouse wheel on it. Therefore, I would actually recommend using JS for this instead, especially if this is something you're going to use on a professional portfolio :)

[@filipjelic8806]

Just tried coding it, I was really disappointed when I found out that it will snap only if the next section is taking 50% of the page

[@crazydevil3090]

please can you tell me how to do that on mouse?

[@Awe88Some]

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!)))))

[@ayoubibourkelidrissi1231]

Hey filip, i want to thank you for making this video

[@subhasrini2706]

Really nice tutorial and I’ve not touched scss but your tutorial just blew my mind and I’ll be usin it

[@jaypratap3888]

Great work man 🔥

[@holymacaroni3319]

amazing tutorial and great explanation dude! please make this a series..

[@dankcommenter5889]

Fantastic. This was so easy to understand as you elaborated to simply.👍

[@piyushs8176]

Thanks man, will try it out for sure :)

[@NitinKankarwal]

Great video Filip. I definitely will be using this

[@juillotine]

Yoooooo this is awesome

[@mstfsgdc]

Awesome tutorial, thanks and please keep continue & make this a serie.

[@MsMelanie117]

Really cool I will use it tomorrow on my project. Thank you.

[@cesarduarte9313]

Love this video!! Super easy to understand and very clear.. Thanks man! keep it going! love it!

[@manjeetdhayal2595]

One of the best I have ever seen ❤❤. Please continue with more such cool vedios 🦚

[@jakobo5521]

Zajebista sprawa, dzięki piękne za taki CSSowy smaczek. Pozdro! :)

[@IshanKesharwani]

This was such an amazing video 😍

[@kreten780]

If you're having problems with an extra scroll bar, add "overflow: hidden;" into body class.

[@himanshukamal1]

Hey Filip. This is beautiful. Thankyou for sharing

[@omkarp9943]

Thank you bro!! That's what I wanted🙌🏻

[@michelefernandoloureiroros4366]

Amazing tutorial, thanks!

[@iuhere]

very helpful, thank you !♥ good luck 👍for next one!

[@nobody-bt7mu]

I'm so gonna use this! This is fun.

[@mohammedjuzer9748]

Hello... Your tutorials are awesome!!!! Any possible way you can make the whole tutorial on scroll animations?

[@sheerasai5948]

Thank you Filip 😊

[@adrielschmitz]

Super cool bro, congrats!!

[@aryantnigam2246]

Simple and aesthetically appealing

[@dell4559]

thanks bro this video really helped me for my projects

[@crlntravels]

Thank you so much Filip for this helpfull video, amazing! Lots of love

[@bissu21]

Aaah... such a nice small css tut😁❣️

[@kuzmicheff]

Great vid! Thanks for sharing!

[@symamaisonsbois2281]

Brilliant! Thank you!

[@Adhithya2003]

Damn that was so cool. Thanks

[@shin5302]

This is a really good explaination. Thank you!

[@victorcandiani]

Great Tutorial, thanks from Brazil

[@cyrusthapa4149]

It was nice ! Do more of these !

[@mouradbousba5215]

easy and clear thank you Filip

[@RaxtersVlog]

Amazing… love it. Surely gonna give a try 🤙🤙

[@VidarrKerr]

AWESOME! Thank You!!!

[@patapizza3382]

I needed this! Thanks!

[@requenz_]

Very simple but informative video!

[@dominiklasek4511]

4:48 these moment burned my eyes... XD

[@box90s13]

Thank you Filip for tutorial

[@pranavyeole102]

wow this was cool!!

[@mashodrana1485]

love this

[@itaispector6040]

Really nice one!! thanks for sharing!

[@mateopetruccelli3156]

Nice video dude!

[@ryaaan0751]

Thanks for this!

[@ahmetcanekinci6006]

thanks from Turkey

[@angelomancilla7153]

Omg so cool, thanks 😁 regards from Perú

[@momakplayz7985]

Hi, Ive used codepen to code what you did, and there was no animation or anything like scroll snapping. Can you please tell me why?

[@darshanrajpattanaik2154]

9:32 start of relevant code if parent and child are made

[@mrbhaskarn]

This is just awesome video tutorial Btw your accent is cool.

[@HSNMSD]

output doesn't work what do all are same way

[@harishr9342]

SUPERB!!!!!!

[@SweetPeachannel]

How to change the background for differeent section please?

[@prudhvichinnam1488]

Please do this tutorials more ❤️

[@himanshusahu6960]

Amazing I going to try it now.

[@manas3905]

a shorthand : You can use shift+alt+down arrow instead of copy paste in vscode

[@sarthaksharma4816]

Thanks bro! ♥

[@prathameshladkat7352]

Sir we will love to know how to move 3d objects in js. Love ur videos❣

[@kasraghasemipoo7991]

That was Very useful ...appreciate it

[@srikarkandula5313]

Love your videos

[@divyashreesoni663]

Fabulous explanation ✨

[@developerfilip]

Thank you! ;)

[@mariotheraviolieater4718]

Snapping implenentation starts at 10:00

[@kylek3534]

What IDE is that? You should do a video on your setup from the software side (what IDE, computer, project management software, etc) that you use. And maybe some go to resources for color selections or anything else you use day to day.

[@marcohorodnichev9489]

visual studio code

[@djecaummeta2022]

it's not an IDE, it's just a code editor, VS Code

[@alexbird1507]

tf, why are you flipping my nose at the start, what did I do to you?!

[@reallygoodstuff4441]

Great work❤️