Portfolio Pure CSS Scroll Snapping Tutorial

Подписаться 109 тыс.

Просмотров 184 тыс.

50% 1

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

Наука

Опубликовано:

28 май 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 320

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

@goytu5493 3 года назад

Awesome tutorial! *Definetly* will be using this!

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

@adrianjuarez4423 3 года назад

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

@ConorBailey 3 года назад

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

@nikkiivanov7995 3 года назад

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

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

@gabrielreliquias5253 Год назад

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

@rye013 3 года назад

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

@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

@user-bi3xn8dj7y 3 года назад

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

@NitinKankarwal 3 года назад

Great video Filip. I definitely will be using this

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

@piyushs8176 3 года назад

Thanks man, will try it out for sure :)

@iwanttopunchtheosface Год назад

Just exactly what I'm looking for. Subbed!

@mstfsgdc 3 года назад

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

@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 Год назад

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

@newjio4334 3 года назад

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

@himanshukamal1 3 года назад

Hey Filip. This is beautiful. Thankyou for sharing

@jaypratap3888 3 года назад

Great work man 🔥

@holymacaroni3319 3 года назад

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

@VIKASH1870 3 года назад

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

@ayoubibourkelidrissi1231 3 года назад

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

@crlntravels 3 года назад

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

@omkarp9943 Год назад

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

@subhasrini2706 3 года назад

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

@CalvinBonner 3 года назад

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

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

@patapizza3382 3 года назад

I needed this! Thanks!

@michelefernandoloureiroros4366 Год назад

Amazing tutorial, thanks!

@IshanKesharwani 3 года назад

This was such an amazing video 😍

@MsMelanie117 2 года назад

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

@kuzmicheff Год назад

Great vid! Thanks for sharing!

@shin5302 2 года назад

This is a really good explaination. Thank you!

@iuhere 2 года назад

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

@symamaisonsbois2281 Год назад

Brilliant! Thank you!

@RaxtersVlog 3 года назад

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

@mouradbousba5215 2 года назад

easy and clear thank you Filip

@adrielschmitz 3 года назад

Super cool bro, congrats!!

@cyrusthapa4149 3 года назад

It was nice ! Do more of these !

@ASHISH-le4jg 3 года назад

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

@nobody-bt7mu 2 года назад

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

@aryantnigam2246 3 года назад

Simple and aesthetically appealing

@sheerasai5948 2 года назад

Thank you Filip 😊

@requenz_ 3 года назад

Very simple but informative video!

@jakobo5521 2 года назад

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

@mattbaro909 Год назад

Fantastic, thank you!

@itaispector6040 3 года назад

Really nice one!! thanks for sharing!

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

@dell4559 2 года назад

thanks bro this video really helped me for my projects

@niclienquan8703 3 года назад

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

@juillotine 2 года назад

Yoooooo this is awesome

@victorcandiani 3 года назад

Great Tutorial, thanks from Brazil

@box90s13 3 года назад

Thank you Filip for tutorial

@VidarrKerr 10 месяцев назад

AWESOME! Thank You!!!

@manjeetdhayal2595 3 года назад

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

@Adhithya2003 3 года назад

Damn that was so cool. Thanks

@pranavyeole102 2 года назад

wow this was cool!!

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

@ryaaan0751 2 года назад

Thanks for this!

@kasraghasemipoo7991 3 года назад

That was Very useful ...appreciate it

@mashodrana1485 2 года назад

love this

@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

@mateopetruccelli3156 3 года назад

Nice video dude!

@harishr9342 3 года назад

SUPERB!!!!!!

@himanshusahu6960 3 года назад

Amazing I going to try it now.

@prudhvichinnam1488 3 года назад

Please do this tutorials more ❤️

@reallygoodstuff4441 3 года назад

Great work❤️

@angelomancilla7153 3 года назад

Omg so cool, thanks 😁 regards from Perú

@srikarkandula5313 3 года назад

Love your videos

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

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

@developerfilip 3 года назад

Glad it was helpful! :D

@sarthaksharma4816 2 года назад

Thanks bro! ♥

@mrbhaskarn 3 года назад

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

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

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

@ekramwasi238 3 года назад

Thank you for this tutorial.

@markasgrazhulis9081 3 года назад

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

@zziomus3402 3 года назад

Great video thanks !!!

@mohammedjuzer9748 2 года назад

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

@Jankee187 3 года назад

Zajebisty i szybki effect :)

@kodosensei 2 года назад

I love it !!

@domizianoscarcelli1936 3 года назад

Bro why didn’t this channel blow up yet

@developerfilip 3 года назад

I’m waiting! Lol

@shohqadamm 2 года назад

great tuts

@divyashreesoni663 3 года назад

Fabulous explanation ✨

@developerfilip 3 года назад

Thank you! ;)

@chairilaliart 3 года назад

Awesome sir

@madebytl 3 года назад

Thank you mate 😊

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

@prathameshjadhav2047 3 года назад

Thanks a lot !!

@rishabhsharma3357 3 года назад

You deserve a subscribe

@meixel 2 года назад

THANK YOU SO MUCH

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