I swear to God, I've been doing web development for 20 years, and this is the first time I truly understand the difference between these property values...
I think I’m falling hopelessly in love with Webflow. This is the second Webflow employee in as many days that I have been given no choice, but to refer to as delightful. It used to be that the only viable way to learn something about Webflow was to watch Ran Segal over at Flux. Webflow university existed, but the content often felt like a chore. But now, now!? Webflow University is fully accredited and this man (what’s his name?) is the headmaster. Ran’s still awesome, too.
First, I'm blown away by the power of Webflow. Second, [changes z-index to make it first] your teaching is so brillant. It is exactly what's needed to make learning this complex subject fun!
As a developer understanding css position properties took me an entire day, as a designer I learnt it in 17 minutes watching this video! Thanks a lot! 👍
I've been trying to learn CSS properly for over 3 years now and I haven't heard a more simple and understandable explanation for positioning in CSS until this video
Where were you when I was at school? This is the way how teachers supposed to teach at schools. He just literally make learning so sophisticated-fun simple and no painful at all. Thank you!
Man, You taught me which my University could not. You speak like scientists with confidenceand clear explanation without any off topic. Keep doing that, you have a new follower today. Thanks.
Excellent content and presentation. Well planned script, wry comments. Far better than the previous video I watched, with a guy seemingly winging it by demonstrating technique with no explanation. When/if I get through all this, I can get back to ST Insurrection.
Really well explained with great examples. Very straight faced delivery had me confused until the very straight faced jokes were introduced which I loved. Informative, intelligent AND Funny. Loved it 🤩🤩
@Webflow @9:33 When i place the child dive block inside 80% of dark opacity dive block , the child element also inherit the 80% opacity so how to fix the child element opacity to 100%? In the Opacity effect the child opacity is 100% but visually its opacity is also 80% means all the body is shown behind both the parent and child element.
lol as soon as you mentioned floats and clears i got ptsd of trying to learn to code html and css in 2010, float positioning is literally the exact reason i quit
@@shubhamparekh9808 You can check the video channel suggested above, since it also shows you how to display stuff that is saved in Firebase database. I have a programmer that connected my project to Firebase, a little complicated if you don't know coding. At the beginning we used glitch.com did all the configuration there and then pasted a javascript file inside Webflow custom code. Now we are using webpack
I'm enjoying and learning from these videos, but I have to say you guys run through the content REALLY fast. I know it's a "Crash Course" but it's faster than I can even take notes and comprehend fully at the same time. I have to go back over and over again to re-listen to the same info to make sure I'm taking accurate and relevant notes. Slowing down via the playback speed settings in RUclips helps a little, but it's more an effect of how the videos were devised to be paced in the first place. Very little "white space" to use a design term.
i get nervous changing a bunch of things to relative, but now i'm wonder why isn't everything just relative by default for more control. typically things are built relative to one another so the exception is when they ignore their surroundings.
There are a few reasons why static is the default position value for HTML elements: Simplicity and predictability: Setting elements to static ensures that they follow the natural flow of the HTML document. This makes it easier for developers to build web pages without needing to explicitly define positioning for every element. Performance: The static position doesn't require any calculations or rendering adjustments, so it can be rendered more efficiently by the browser. This is particularly important for performance-sensitive scenarios, such as when rendering large web pages or complex layouts. Accessibility: The default static positioning helps ensure that web pages remain accessible to assistive technologies, such as screen readers. These technologies rely on the document flow to provide a meaningful reading experience, so altering the default positioning could potentially disrupt that experience. While static is the default position value, developers have the flexibility to change it to other values such as relative, absolute, fixed, or sticky. These alternative position values allow elements to be positioned in different ways, enabling more complex and customized layouts on web pages.
This is so cool. On my blog, I have a LOT of absolute and relative positioning, and I have been told not to use it often. I'm so stuck on this, and not sure what else to do. It's a 3 column layout blog. Any advice?
4:25 Why? Why must a parent section be set to 'relative' in order to get its child element (that's set to 'absolute') to stay within its bounds? He seemed to have given what _he_ thought was a solid explanation for this maneuver's logic, but my head is still spinning. Yes, I understand what relative positioning is/does. I don't see why a section must be positioned relatively (within the body) simply in order to "trap" an absolutely positioned child element within itself. What's the logic? Thanks!
How has Webflow managed to teach something that had potential of becoming dreadfully boring & dry, but instead has turned it into a comical, educational and interesting piece...!!!
I swear to God, I've been doing web development for 20 years, and this is the first time I truly understand the difference between these property values...
There should be a nobel prize for tutorials, really.
7 years here, but same!
One of the best videos I have seen about CSS
Thank you for your kind words, Bruno!
I think I’m falling hopelessly in love with Webflow. This is the second Webflow employee in as many days that I have been given no choice, but to refer to as delightful.
It used to be that the only viable way to learn something about Webflow was to watch Ran Segal over at Flux. Webflow university existed, but the content often felt like a chore. But now, now!? Webflow University is fully accredited and this man (what’s his name?) is the headmaster. Ran’s still awesome, too.
I love the combination of covering what is kind of a super-boring topic in a way that is informative, energetic and mildly humorous.
First, I'm blown away by the power of Webflow. Second, [changes z-index to make it first] your teaching is so brillant. It is exactly what's needed to make learning this complex subject fun!
Glad we were able to help!!
As a developer understanding css position properties took me an entire day, as a designer I learnt it in 17 minutes watching this video!
Thanks a lot! 👍
I've already watched like 100+ hours of content with this guy. I don't even use Webflow. Just love these videos
I've been trying to learn CSS properly for over 3 years now and I haven't heard a more simple and understandable explanation for positioning in CSS until this video
I can imagine the hard work behind bringing us such amazing content.
Where were you when I was at school?
This is the way how teachers supposed to teach at schools. He just literally make learning so sophisticated-fun simple and no painful at all. Thank you!
No one can top these videos.
This is incredible, he made the concept of positioning so much easy to understand.
Man, You taught me which my University could not. You speak like scientists with confidenceand clear explanation without any off topic. Keep doing that, you have a new follower today. Thanks.
Where has this teacher / course been all my life? Amazing.
i'm a designer who knows nothing about coding and these videos are a godsend!
The guy is a literal star, no doubt.
This is top-notch level tutorial stuff. Huge kudos
This is brilliant. Thank you!! All the professors and teachers should learn from you on how to teach.
The only hard part i had in webflow, now learnt✊✊✊. Thank you guys
This guy is seriously so funny! Keep up the great work with these training videos.
Loved the content !! It's like attending a premium quality lecture!!!!!!!
This is the absolute and practical explanation of Positions. Thank you
Гримур лучший !!! только он!! всё очень доходчиво, правильно и кратко объясняет!!
A very underrated video on CSS position
These tutorials and a presenter is just another level !!! So great!
You guys are simply amazing. Teaching web design and dev at the same time. Learned so much from you! Greetingss from brazil 🇧🇷
Man, these are good videos. Quality in speed, script and humor.
We rarely find any video made in such a great way
For real have y’all won an award yet for these how to videos?
The real awards are the friends we've made along the way. ❤️
These videos are outstanding, well explained, straight to the point, comprehensive and funny! Incredible. Thanks so much!
I ABSOLUTE'y loved and CLEARly understood the RELATIVEly simple STATIC review. Your videos really STICKS. 😁😁
Excellent tutorial!!! Not just about Webflow, but about CSS as well.
These videos make learning to use webflow a breeze.
Came to understand the positioning in webflow but understood the real CSS positioning much better!
"Now ...there are far less infuriating ways to build common layouts" That was a good one!! haha
best educational videos on the web by far.
I can't express how good that it. Glad I've stumbled upon this.
i'm just awed by technical humors in the explanation.
this deserves millions of views
You guys are the best. Like the way you teach us about the use of your tools. More of these.
Excellent content and presentation. Well planned script, wry comments. Far better than the previous video I watched, with a guy seemingly winging it by demonstrating technique with no explanation.
When/if I get through all this, I can get back to ST Insurrection.
Awesome! Watched out a range of videos about positioning, but this one is the most easy to grasp. Excellent! Keep going.
Thank you, Firuz! We're launching lessons on positioning, layout, typography, and more - glad this one was easy to grasp!
This teacher is a Top G
Really well explained with great examples. Very straight faced delivery had me confused until the very straight faced jokes were introduced which I loved. Informative, intelligent AND Funny. Loved it 🤩🤩
you are the best, you just made my day. No better way of teaching . Consider me one of your student
Man, we LOVE webflow. I can't believe I ever used wordpress.
Amazing, just what i need!!
Great instructor, clear and entertaining.
After 15 years of trials and errors I finally understood this.
Fixed positioning... Meryl Streep is always there. Haha, best tutorials out there!
@Webflow
@9:33 When i place the child dive block inside 80% of dark opacity dive block , the child element also inherit the 80% opacity so how to fix the child element opacity to 100%? In the Opacity effect the child opacity is 100% but visually its opacity is also 80% means all the body is shown behind both the parent and child element.
Can you post a link to your project so I can see the issue?
university.webflow.com/lesson/share-your-site
@@Webflow no
Great way of teaching. nailed it like a pro.
love this guys humor
Better than any teacher I ever had in High School
On to the next video!
I was like "What‽" seconds before he said " that was a terrible sentence" lol
You just made my life a lot easier, thanks a lot.
4 years of computer programming courses and I never understood positioning properties until now.
Whoever hired this guy at Webflow made a great decision.
Thanks to this very significant course! It really helps
This guy should be the onr invented the web
Webflow.. you guys ROCK!!!!
Who is this guy? I want to hire him; he's like some kind of Deadpool.
Speaking of Deadpool... ruclips.net/video/ga15Oqkafag/видео.html
lol as soon as you mentioned floats and clears i got ptsd of trying to learn to code html and css in 2010, float positioning is literally the exact reason i quit
Very informative and very entertaining...this guy should present the Oscars lol
That will help me get out of my shell at parties, bring up z-index as ice breakers
z index talked about at parties my sides have gone to space :D
Knock Knock. Is this the greatest channel to learn web fundamentals?
geiles video digga
Sir can i Connect the firebase database in webflow?
Here. :)
ruclips.net/video/30AIpEnsEaQ/видео.html
@@jpthedio hey John thanks for the link😊
I have seen this video already but this is the not what am I saying you.
You can with custom code.
@@by_gato how?
Can u explain in detail? Or you have sharing related example.
@@shubhamparekh9808 You can check the video channel suggested above, since it also shows you how to display stuff that is saved in Firebase database. I have a programmer that connected my project to Firebase, a little complicated if you don't know coding. At the beginning we used glitch.com did all the configuration there and then pasted a javascript file inside Webflow custom code. Now we are using webpack
This guy knows his shit!
Diffrence between-
1.static and relative
2. relative and absolute
Hi Vansh! Great question! Here's a detailed guide on position properties in Webflow:
university.webflow.com/lesson/position-floats-and-clear-settings
@@Webflow Thanks!
These videos are so good!
Do these things matter: no. But yes, they do!
Make so much sense. Muchas gracias
this is what happens when you want to be a standup comedian but your mom want you to be a teacher :)) love these content
I love Webflow
This is just AMAZING!!!!
Webflow ist so eine geile platform #Webflow #nofigma
#verstanden #relativ #position #Disign #floats
You guys are genuinely so funny
#WebflowBetterThanFigma
Thank you for the amazing content, I just entered the WEb Development course and I would like to know what program are you using?
The app is called Webflow. You can try it now by signing up for free at webflow.com
6:07
15:06
I love you, haha!
Really well explained!
But just like that we built AN ENTIRE OPERATING SYSTEM. Except no, we didn't.
Everything made sense until float
I'm enjoying and learning from these videos, but I have to say you guys run through the content REALLY fast. I know it's a "Crash Course" but it's faster than I can even take notes and comprehend fully at the same time. I have to go back over and over again to re-listen to the same info to make sure I'm taking accurate and relevant notes. Slowing down via the playback speed settings in RUclips helps a little, but it's more an effect of how the videos were devised to be paced in the first place. Very little "white space" to use a design term.
Not all heros wear capes 💪
achsoooo jetzt verstehe ich es
Finally got it.
What is the name of program he is using? I guess , it is a good way to practice new stuff.
Thank you! very useful!
Every time someone asks me why I've switched to Webflow I show them these videos.
i get nervous changing a bunch of things to relative, but now i'm wonder why isn't everything just relative by default for more control. typically things are built relative to one another so the exception is when they ignore their surroundings.
There are a few reasons why static is the default position value for HTML elements:
Simplicity and predictability: Setting elements to static ensures that they follow the natural flow of the HTML document. This makes it easier for developers to build web pages without needing to explicitly define positioning for every element.
Performance: The static position doesn't require any calculations or rendering adjustments, so it can be rendered more efficiently by the browser. This is particularly important for performance-sensitive scenarios, such as when rendering large web pages or complex layouts.
Accessibility: The default static positioning helps ensure that web pages remain accessible to assistive technologies, such as screen readers. These technologies rely on the document flow to provide a meaningful reading experience, so altering the default positioning could potentially disrupt that experience.
While static is the default position value, developers have the flexibility to change it to other values such as relative, absolute, fixed, or sticky. These alternative position values allow elements to be positioned in different ways, enabling more complex and customized layouts on web pages.
@@Webflow #WebflowHelps
This teacher is just amazing!!!
What is this tool he is using?
This is so cool. On my blog, I have a LOT of absolute and relative positioning, and I have been told not to use it often. I'm so stuck on this, and not sure what else to do. It's a 3 column layout blog. Any advice?
4:25 Why? Why must a parent section be set to 'relative' in order to get its child element (that's set to 'absolute') to stay within its bounds? He seemed to have given what _he_ thought was a solid explanation for this maneuver's logic, but my head is still spinning. Yes, I understand what relative positioning is/does. I don't see why a section must be positioned relatively (within the body) simply in order to "trap" an absolutely positioned child element within itself. What's the logic?
Thanks!
Amazing! Thanks
How has Webflow managed to teach something that had potential of becoming dreadfully boring & dry, but instead has turned it into a comical, educational and interesting piece...!!!