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!
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...
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.
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...... UA-cam algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥
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 :)
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)
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
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!)))))
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
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.
Bro, what a content! Thanks so much for sharing this! I got one question, my VSCode keep compiling the .scss file into .scss file instead of into .css file, and when I reference the scss on html, it doesn't show any styling effect on the page, what should I do to make that styling effect shows on the page? Cheers.
I hope this will solve your issue - download live scss compiler ext - write in your scss -it should compile into main.css and main.map.css -include your main.css file in your html file
How do you prevent double scrollbars when the element has already created a vertical scrollbar? That could happen when the parent container is accompanied with a header and footer container (whose height get added to the height of 100% what triggers a vertical scrollbar). Any idea?
Thanks for share, but I got an issue, i revised everything if I'm missing something, but I can't scroll using my mouss's scroller, but I can do it using my keyboard arrow as well as my laptop pad, how can I handle this issue. thanks for the good content and your good explanation
Hi, at first I love your Videos, they are very helpful. A little Question: how kann i convert the scroll direction horizontal wenn I scroll vertical with the mouse well. In Mac it doesn't make a Problem but in Windows. Tank you four your help
HEY! I used this method but for AGES I couldn't align anything absolute in each 'section' or DIV once I'd done it. Found you must add "contain: content" to the section to stop the display properties cascading into every DIV. It doesn't demonstrate a real world use with just the one bit on text in each section.
Heyy Filip, Can you make a video on how much information of Html, Javascript, Css etc is enough for front end. Like how much information is enough information to get started in the field. And I am talking about starter roadmap that would help us create projects with that basic information because actually front end is vast! And as a beginner it is tough to grab all of it. Esp with all the buzzwords we keep listening. I am planning for a job change from network to front end and would really appreciate if this is a video that aligns with your channel asthetic while still helping us.
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!
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?
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.
5 minutes in and I really like your style of teaching. Very easy to understand and code along! Subbed for sure! =)
Awesome tutorial! *Definetly* will be using this!
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
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...... UA-cam algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥
Glad it was helpful! :D
Bro why didn’t this channel blow up yet
I’m waiting! Lol
Sr. You gained my trust. I am in shock, right now i felt like a damn pro thanks to this video. Cheers from Argentina.
I just wanted to say I love your videos they are very entertaining and educational 👍
Thank you so much for this. Googled so much and didn't find what I wanted much less explained in such a simple way.
So sick. I'm really tired of doing this with JS& jQuery so this makes my life 100× easier!
Awesome video mate! I just implemented this with JavaScript and this way is so much easier! Thanks for sharing!
I just found out your channel today and being enjoying it so much. Thank you for the great content and please never stop uploading.
This is what I have needed for my current project. I was using JS for this, uffff..... Thank You
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!!!!
Great work man 🔥
can we have more small tutorials like this plz
Yes!
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!
I used to use smooth-scroll but this is way more fancier
got a google reccomend for your video and wow so good ! good luck with future vids, will definitely subscribe 👍🏻
I'm from Vietnam, I appreciate your video, it's quite good and useful
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 :)
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
please can you tell me how to do that on mouse?
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 is truly amazing content, would like to see more of this "tips and tricks" or a css series. Great video!
you are awesome!! I was looking for that for so long time
amazing bro just no words you did it with css !!!!
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
Your explanation is so good. Would love to see you make more tutorials like this.
Super cool bro, congrats!!
Great video Filip. I definitely will be using this
please make this a series and i'd be nice if you bring more fancy yet simple stuff ✨
Cheers!
Will do!!!
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!)))))
Hey Filip. This is beautiful. Thankyou for sharing
great tutorial, just revamping my site, and this pops up, nice timing
Hey filip, i want to thank you for making this video
This was such an amazing video 😍
I was thinking of using this snap for my website now I finally have tutorial. Thanks a lot
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
Thanks man, will try it out for sure :)
Thank you bro!! That's what I wanted🙌🏻
Really cool I will use it tomorrow on my project. Thank you.
Fantastic. This was so easy to understand as you elaborated to simply.👍
If you're having problems with an extra scroll bar, add "overflow: hidden;" into body class.
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! 😎
Hello...
Your tutorials are awesome!!!!
Any possible way you can make the whole tutorial on scroll animations?
Awesome tutorial, thanks and please keep continue & make this a serie.
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.
visual studio code
it's not an IDE, it's just a code editor, VS Code
One of the best I have ever seen ❤❤.
Please continue with more such cool vedios 🦚
I'm so gonna use this! This is fun.
Aaah... such a nice small css tut😁❣️
easy and clear thank you Filip
Great vid! Thanks for sharing!
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?
Love this video!! Super easy to understand and very clear.. Thanks man! keep it going! love it!
Simple and aesthetically appealing
Amazing tutorial, thanks!
amazing tutorial and great explanation dude! please make this a series..
Damn that was so cool. Thanks
Nice video dude!
It was nice ! Do more of these !
thanks bro this video really helped me for my projects
Really nice one!! thanks for sharing!
Hey Filip! What's your favourite way to implement a 'momentum' scroll feature? Can you recommend any free libraries that integrate well with GSAP? 😁
This is a really good explaination. Thank you!
Very simple but informative video!
Thank you so much Filip for this helpfull video, amazing! Lots of love
Thank you Filip 😊
Great Tutorial, thanks from Brazil
Zajebista sprawa, dzięki piękne za taki CSSowy smaczek. Pozdro! :)
Thank you Filip for tutorial
I needed this! Thanks!
Yoooooo this is awesome
hello Filip. Can you make a video on some micro animations using html and css?
wonderfull! other thing ...can u add a menu ....then pages pass for down scrolling and menu bar slide to the right side?
Bro, what a content! Thanks so much for sharing this! I got one question, my VSCode keep compiling the .scss file into .scss file instead of into .css file, and when I reference the scss on html, it doesn't show any styling effect on the page, what should I do to make that styling effect shows on the page? Cheers.
I hope this will solve your issue
- download live scss compiler ext
- write in your scss
-it should compile into main.css and main.map.css
-include your main.css file in your html file
@@mayankagarwal5071 thank you sir, it works now
Idk why, But I'm receiving this video multiple times in recommendation.
Woohoo! 🤪🤪
Amazing… love it. Surely gonna give a try 🤙🤙
Omg so cool, thanks 😁 regards from Perú
Why does it give me a vertical scrollbar? I have to manually scroll horizontally because the mouse wheel scrolls vertically by default.
You can hide scrollbars with css!
@@developerfilip I'm kinda new to web development, how do I hide scrollbars?
@@IgnitedIce81 .example::-webkit-scrollbar { display: none; }
Fantastic, thank you!
This is just awesome video tutorial
Btw your accent is cool.
Fabulous explanation ✨
Thank you! ;)
How to change the background for differeent section please?
How do you prevent double scrollbars when the element has already created a vertical scrollbar? That could happen when the parent container is accompanied with a header and footer container (whose height get added to the height of 100% what triggers a vertical scrollbar). Any idea?
Thanks for share, but I got an issue, i revised everything if I'm missing something, but I can't scroll using my mouss's scroller, but I can do it using my keyboard arrow as well as my laptop pad, how can I handle this issue.
thanks for the good content and your good explanation
That was Very useful ...appreciate it
Hi, at first I love your Videos, they are very helpful. A little Question: how kann i convert the scroll direction horizontal wenn I scroll vertical with the mouse well. In Mac it doesn't make a Problem but in Windows.
Tank you four your help
Great work❤️
Love your videos
HEY! I used this method but for AGES I couldn't align anything absolute in each 'section' or DIV once I'd done it. Found you must add "contain: content" to the section to stop the display properties cascading into every DIV. It doesn't demonstrate a real world use with just the one bit on text in each section.
You deserve a subscribe
hi, great video.
from brazil🇧🇷🇧🇷
Amazing I going to try it now.
wow this was cool!!
4:48 these moment burned my eyes... XD
Hey Fillip this video was so helpfull, But what should I do if I want to scroll vertical and the website still scrolls horizontally.
Heyy Filip, Can you make a video on how much information of Html, Javascript, Css etc is enough for front end. Like how much information is enough information to get started in the field. And I am talking about starter roadmap that would help us create projects with that basic information because actually front end is vast! And as a beginner it is tough to grab all of it. Esp with all the buzzwords we keep listening. I am planning for a job change from network to front end and would really appreciate if this is a video that aligns with your channel asthetic while still helping us.
I will definitely consider your request 😎