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!

[@sddrkk]

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

[@welikerosafloyd]

@@sddrkk 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!

[@stevenerixon33]

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

[@goytu5493]

Awesome tutorial! *Definetly* will be using this!

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

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

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

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

[@nikkiivanov7995]

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

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

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

[@domizianoscarcelli1936]

Bro why didn’t this channel blow up yet

[@developerfilip]

I’m waiting! Lol

[@user-bi3xn8dj7y]

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

[@gabrielreliquias5253]

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

[@adrianjuarez4423]

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

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

[@niclienquan8703]

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

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

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

[@VIKASH1870]

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

[@jaypratap3888]

Great work man 🔥

[@tusharsaha321]

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

[@CalvinBonner]

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

[@newjio4334]

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

[@subhasrini2706]

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

[@ayoubibourkelidrissi1231]

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

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

[@adrielschmitz]

Super cool bro, congrats!!

[@rye013]

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

[@juillotine]

Yoooooo this is awesome

[@NitinKankarwal]

Great video Filip. I definitely will be using this

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

[@iDeviceSlash]

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

[@developerfilip]

Will do!!!

[@manjeetdhayal2595]

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

[@darshandev1754]

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

[@mstfsgdc]

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

[@holymacaroni3319]

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

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

[@IshanKesharwani]

This was such an amazing video 😍

[@iuhere]

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

[@dankcommenter5889]

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

[@himanshukamal1]

Hey Filip. This is beautiful. Thankyou for sharing

[@MsMelanie117]

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

[@markasgrazhulis9081]

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

[@omkarp9943]

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

[@cesarduarte9313]

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

[@nobody-bt7mu]

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

[@dell4559]

thanks bro this video really helped me for my projects

[@piyushs8176]

Thanks man, will try it out for sure :)

[@bissu21]

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

[@mateopetruccelli3156]

Nice video dude!

[@crlntravels]

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

[@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! 😎

[@cyrusthapa4149]

It was nice ! Do more of these !

[@hitarthagogoi2829]

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

[@developerfilip]

Woohoo! 🤪🤪

[@michelefernandoloureiroros4366]

Amazing tutorial, thanks!

[@Adhithya2003]

Damn that was so cool. Thanks

[@shin5302]

This is a really good explaination. Thank you!

[@sheerasai5948]

Thank you Filip 😊

[@victorcandiani]

Great Tutorial, thanks from Brazil

[@patapizza3382]

I needed this! Thanks!

[@mrbhaskarn]

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

[@TECHNOLOGYENABLED]

can we have more small tutorials like this plz

[@developerfilip]

Yes!

[@aryantnigam2246]

Simple and aesthetically appealing

[@mouradbousba5215]

easy and clear thank you Filip

[@kuzmicheff]

Great vid! Thanks for sharing!

[@jakobo5521]

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

[@SweetPeachannel]

How to change the background for differeent section please?

[@angelomancilla7153]

Omg so cool, thanks 😁 regards from Perú

[@box90s13]

Thank you Filip for tutorial

[@mohammedjuzer9748]

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

[@pranavyeole102]

wow this was cool!!

[@itaispector6040]

Really nice one!! thanks for sharing!

[@RaxtersVlog]

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

[@mattbaro909]

Fantastic, thank you!

[@bictorino2012]

wonderfull! other thing ...can u add a menu ....then pages pass for down scrolling and menu bar slide to the right side?

[@requenz_]

Very simple but informative video!

[@srikarkandula5313]

Love your videos

[@ryaaan0751]

Thanks for this!

[@ahmetcanekinci6006]

thanks from Turkey

[@divyashreesoni663]

Fabulous explanation ✨

[@developerfilip]

Thank you! ;)

[@ani68]

Great intro...😂🤩

[@sarthaksharma4816]

Thanks bro! ♥

[@mashodrana1485]

love this

[@rishabhsharma3357]

You deserve a subscribe

[@reallygoodstuff4441]

Great work❤️

[@SireMoringstar]

hey love the tutorial btw although I need some help I am trying to class each h1 in order to move the headers upwards or center as I please but they are locked in the position they are in do I need to class the section?

[@hoff_mann]

hi, great video. from brazil🇧🇷🇧🇷

[@Just_sakov]

ty for ur tutorials!

[@kodosensei]

I love it !!

[@himanshusahu6960]

Amazing I going to try it now.

[@harishr9342]

SUPERB!!!!!!

[@kasraghasemipoo7991]

That was Very useful ...appreciate it

[@prudhvichinnam1488]

Please do this tutorials more ❤️

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

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

[@madebytl]

Thank you mate 😊

[@seeker3794]

It was very useful

[@abhayli3958]

hello Filip. Can you make a video on some micro animations using html and css?