I've never had so much fun watching tutorial videos. Well past midnight here and I just keep hitting next and learning while laughing! Haven't built anything with the platform yet but can already tell I'll be ending my Squarespace subscription.
these videos are legit. After seeing so many of these, i signed up, started using webflow, purchased it, danced a little, went back to webflow and made a site.. then danced again, drank some coffee and went to sleep, in that order. EPIC
this video was so good i had to leave the webflow website to come like it. i was forced, compelled by respect for quick humor and efficient tutorials. 10/10
as a video editor - turned motion designer - turned motion designer pursuing web interaction design, all I can say is: never regretted opting out from video editing until now, realizing that Dylan guy gets to edit this perfectly dry humor all day long and get paid for it. Kudos to Dylan, these videos are next level
I've come to expect the little humour jabs in each video. I'm interested in learning more about how to use the platform, sure, but a part of me is just waiting for the punch. Then BAM! There it is. So good.
i really like the humor and the tone of these videos.. and also i'm learning stuff! used to be "writing" webpages in vs code or notepad++ back when ... but now i, too, point and click and it doesn't feel bad ;)
Such an amazing tool, and great tutorial video! This is something they would spend an entire class teaching you at College and you would only catch not even half the amount of information this video presents in only 9 minutes.
As always, taking out the line between fun and learning. I LOLed. But not that usual "LOL" that we send when a friend shares a mildly amusing meme. I actually laughed out loud. I'm about to make the most beautiful nav bar today baby. Oh yes. I just had coffee.
I'm sure it's a love or hate feeling towards this video style, seems like more love. But man the humor and dialogue is brutal IMHO. I just want the information and to figure out how to do something without all the quirky comments. Sure you get a little chuckle the first couple of times and I'm happy you guys are clearly having fun making these, though beyond that I'd just prefer to get the information delivered in the shorted time possible without the extra time waste.
That was awesome! I can't wait for a demo that detailed showing how to make a grid-based big/mega menu that is fully responsive at all breakpoints. I've been fighting most of this year trying to figure that one out. Driving me CrAzY!
Who wrote this? The Webflow 101 videos that preceded this one were perfectly executed but this one is exquisite. I only heard of Webflow today but I want to build a site with it just to see if it's as much fun as the tutorial. But I want to watch the rest of the tutorials first. 🤣
@webflow All your tutorials are great, I have just had one problem with the navbar. The position is fixed but all other elements on the page seem to go on top of the nav when scrolling, rather than behind. Eventually I would like to reduce the opacity to my nav bar, but even with full opacity the other elements appear on top when scrolling. Is there a setting somewhere I’m missing ?
You can wrap the dropdown label with a link block, set the dropdown to open on hover, then set your link for the text label link: share.getcloudapp.com/X6u7EbbN Hope this helps :)
I'm using a template that has a home tab with three different options (Home A, Home B, and Home C), and I just want to utilize Home C as my main home. How do I hide the other home pages? I don't want them showing when I publish my website. Is there a video on this? I tried hiding, but it hides the whole button in the Navbar.
Is there a way to clone the initial state of the project to able to work on the lesson? As a beginner it took me 45 mins to figure out how to create that bg hero shot before I could learn how to place the navbaar.
Here are some projects tagged with "sticky nav" that you may be able to clone: webflow.com/made-in-webflow/popular?page=1&search=sticky%20nav Hope this helps :)
How do i add a little effect when someone hovers over it though? like an underline or something to the text? since nothing happens when you just put one down. I have a different menu bar that does have that, but then wont create a hamburger menu for smaller devices... :L
To add an effect on hover, select the link and change the state in the Style Panel to Hover. Now any design changes will only be applied to the hover state. Check out this article on using states in Webflow. university.webflow.com/lesson/states
If you can, please post your question on our community forum at discourse.webflow.com and be sure to also include your project's share link in your post. Here is how to get your project's share link: university.webflow.com/lesson/share-your-project-and-invite-collaborators
Nice video! I want to have a logo and a button (instead of full navbar). What is the best method to achieve it? Should I still use navbar from the Components list, or should I build it from scratch and just hold the logo (image element) and a button in a div block as a wrapper? Thank you so much
Hi, Christopher. The Dropdown element is added from the Add panel at 7:34 - is this what you're referring to or something else? That Dropdown element is added and styled from scratch in this video, so we'd like to better understand what you're looking to achieve so we can help out!
How about a drowdown nested in another dropdown and wanting the nested to dropdown on the left or right side? As default they just dropdown inside each other.
Love the jokes! Being a frontend-dev looking into this for an upcoming project, I enjoy this thoroughly. Also absolutely digging the approach webflow takes and how it's basically "just" 100% frontend development, but without code.
I must be dumb, but did not understand any difference between sticky and fixed. In my case the rest of the content overflowes that bar, wether it is set on sticky or fixed. And I did uncheck the eye for overflowing view. What do I do wrong??
First, you're not dumb. Everyone is learning something new at any given moment :) Second, sticky is a CSS property that allows you to "fix" the element to a parent element that has a CSS position set to relative. Fixed all you to "fix" or "pin" the element to the HTML body tag and ignores any parent element.
The navbar element setting can be found at the top right. For more information, please read this article: university.webflow.com/lesson/navbar#style-a-navbar Hope this helps 😀
Can someone please help me!!! Im a complete newbie.. How can I have some nav links at the far right of the page and some links at the far left next to the brand element without ruining the links in the dropdown menu?
Hi, Ruk Kay! If you post on forum.webflow.com, you can share your project's read-only link and the folks over there can look at your project! It's hard to diagnose without digging in. If the functionality isn't working as expected, you can also reach out to support@webflow.com, but the Webflow Forum is usually a good bet!
Hi Enrique! Great question! The best place to get help with design related questions is on the Webflow Forum: forum.webflow.com/ Please post your question there along with your Read-Only link for your Webflow site so that our community and team can help. Thanks in advance!
A lot of us on the Education Team use a vertical mouse to reduce wrist strain for broad motions like moving the cursor around etc., and a trackpad for gestures like scroll, pinch to zoom etc. Works great for Webflow, Figma, Premiere, Resolve, and of course, Calculator.
Hi, Sharp Words! The distinction can be a bit tricky. An element set to fixed position doesn't take up any space on the page. An element set to sticky still takes up space, and pushes other elements out of the way. A fixed navbar, if placed at the top of a page that has a section underneath, will overlap that section when the page is loaded (the section is tucked underneath the navbar). But a sticky navbar, if placed a the top of the same page, will push down the page's first section (the section starts after the navbar, and is pushed down so the two elements don't intersect when the page is loaded). A great way to visualize this is to toggle between fixed and sticky on an element at the top of the page while observing how it affects page content underneath it.
@@Webflow Three things... 1: Thank you for the very enlightening answer. Now I get it! 2: I can't believe you're working Sunday answering random stupid people. 3: I can't believe you answered so quickly! Thank you xxx
![ตีสิบเดย์ [FULL] | เปิดใจ "อาจารย์ เบียร์ ฅนตื่นธรรม" นักสนทนาธรรมสายดุดัน!](http://i.ytimg.com/vi/vqaBI_mnoDk/mqdefault.jpg)
I don't even use web flow. These videos are just that good.
I'm telling ya, you should consider it.
ME TOO.... I don't use Webflow but these are GREAT!!!!
These have to be the best company-produced tutorials I've ever seen. Engaging, fun, and more useful than creator-produced content. Keep it up!!
I've never had so much fun watching tutorial videos. Well past midnight here and I just keep hitting next and learning while laughing! Haven't built anything with the platform yet but can already tell I'll be ending my Squarespace subscription.
these videos are legit. After seeing so many of these, i signed up, started using webflow, purchased it, danced a little, went back to webflow and made a site.. then danced again, drank some coffee and went to sleep, in that order. EPIC
Your tutorial videos are just priceless. This is even better than some Netflix shows.
9:23 Wow... that's got to be one of the cleanest cuts I have ever seen in a TH-cam video.
this video was so good i had to leave the webflow website to come like it. i was forced, compelled by respect for quick humor and efficient tutorials. 10/10
I can't tell you guys how much I love webflow. You made my life SO MUCH EASIER! Thank you for continuing with the videos and the development.
Webflow is ok. But this narrative guy is awesome!
still 1000% better than Wordpress.
I've never enjoyed a tutorial this much, ever in my life!
I would learn anything if that guy narrates the tutorials. Great job!
as a video editor - turned motion designer - turned motion designer pursuing web interaction design, all I can say is:
never regretted opting out from video editing until now, realizing that Dylan guy gets to edit this perfectly dry humor all day long and get paid for it. Kudos to Dylan, these videos are next level
Thanks, Martin! 💙
after 3-4 years on webflow .... i discovered these videos ... love the editing and jokes! ... and the webflow stuff as well..
Ah, so that's what he looks like. Love the presentation style.
You have the best instructional video's by far. Clear, concise, and straight to the point. Great use of video real estate! Much appreciated!
I've come to expect the little humour jabs in each video.
I'm interested in learning more about how to use the platform, sure, but a part of me is just waiting for the punch.
Then BAM! There it is.
So good.
Finally, the narrator's face. Love these vids. So straightforward. Thank you.
Your humor reminds me of one by the name of Andrew Kramer... and that's a good thing. Brilliant...
i really like the humor and the tone of these videos.. and also i'm learning stuff! used to be "writing" webpages in vs code or notepad++ back when ... but now i, too, point and click and it doesn't feel bad ;)
These videos are better than most TV shows.
The Champ was here. Another winning explanation
I love how they're literally just playing these as ads now
Good stuff
Finally someone who gets it: adding fun to a tutorial video makes it soooo much better to digest (and helps remember the content) *Thank You*
OMG one of the best tutorial practice video I ever seen 🥺
Best tutorial I've watched.
Funny and engaging. Great work webflow.
I’m gonna buy a subscription and try to use Webflow just because of how amazing and creative the team behind this tutorial is!! Amazing job
Such an amazing tool, and great tutorial video! This is something they would spend an entire class teaching you at College and you would only catch not even half the amount of information this video presents in only 9 minutes.
💙
As always, taking out the line between fun and learning. I LOLed. But not that usual "LOL" that we send when a friend shares a mildly amusing meme. I actually laughed out loud. I'm about to make the most beautiful nav bar today baby. Oh yes. I just had coffee.
learning has never been more fun
I now love Webflow just because of this video! 😂even though I have never used Webflow before. Thanks very much
I don't care if this is acted or real, the scenarios with the mouse problem is genius!
YOU GUYS R THE BEST!!!
You guys made me laugh, outstanding entertainment! Well done.
amazing style of teaching. Great bro
I'm sure it's a love or hate feeling towards this video style, seems like more love. But man the humor and dialogue is brutal IMHO. I just want the information and to figure out how to do something without all the quirky comments. Sure you get a little chuckle the first couple of times and I'm happy you guys are clearly having fun making these, though beyond that I'd just prefer to get the information delivered in the shorted time possible without the extra time waste.
The clothes bit literally made me lol! 🤣
Awesome tutorial...absolutely sold on web flow...and yes that nav bar looks delicious.
That was awesome! I can't wait for a demo that detailed showing how to make a grid-based big/mega menu that is fully responsive at all breakpoints. I've been fighting most of this year trying to figure that one out. Driving me CrAzY!
These jokes made me want to learn webflow, nocode gang 🤣🤣🤣
I swear
My 2021 goal is to be as good as these Webflow guys at making tutorial videos. (And most probably master Webflow at the same time!)
Excellent videos and really funny too.
5:25 "Three seconds." got me wheezing 😭
I watch these videos to learn, sure, but also to fill the necessary prescription for humour these dark days require.
Webflow is ok, but this guy is awesome!!
Who wrote this? The Webflow 101 videos that preceded this one were perfectly executed but this one is exquisite. I only heard of Webflow today but I want to build a site with it just to see if it's as much fun as the tutorial. But I want to watch the rest of the tutorials first. 🤣
the "3 Seconds" voice at background got me 🤣
Love you guys, you're AWESOME!!
Thank you so much for this, it was really helpful!!!
Thanks , that was a great help.
btw. put in some batteries in the clock behind you :)
@webflow All your tutorials are great, I have just had one problem with the navbar. The position is fixed but all other elements on the page seem to go on top of the nav when scrolling, rather than behind. Eventually I would like to reduce the opacity to my nav bar, but even with full opacity the other elements appear on top when scrolling. Is there a setting somewhere I’m missing ?
Cutest ears. Wingnuts look good on him!
the 3 seconds joke killed me
this guy is so good
great tutorial
Great tut! Super helpful! Charge your mice, folks.
Hello, Great Video But can the dropdown text be linked to a page and then also have the dropdown links too. Thank you for your prompt response.
You can wrap the dropdown label with a link block, set the dropdown to open on hover, then set your link for the text label link: share.getcloudapp.com/X6u7EbbN
Hope this helps :)
But... What about animations/motion effects ? ... Say on the Nav bar once clicked or the fixed menu once scrolling?
Great stuff
Love webflow now!
Great videos
Yep, best tuts
i like this man
I'm using a template that has a home tab with three different options (Home A, Home B, and Home C), and I just want to utilize Home C as my main home. How do I hide the other home pages? I don't want them showing when I publish my website. Is there a video on this? I tried hiding, but it hides the whole button in the Navbar.
OMG I learned.
The dropdown text color doesn't obey the class in practise (unlike in this video)... @Webflow can you please help?
Is there a way to clone the initial state of the project to able to work on the lesson? As a beginner it took me 45 mins to figure out how to create that bg hero shot before I could learn how to place the navbaar.
Here are some projects tagged with "sticky nav" that you may be able to clone: webflow.com/made-in-webflow/popular?page=1&search=sticky%20nav
Hope this helps :)
I'm only here for the jokes.
How do i add a little effect when someone hovers over it though? like an underline or something to the text? since nothing happens when you just put one down.
I have a different menu bar that does have that, but then wont create a hamburger menu for smaller devices... :L
To add an effect on hover, select the link and change the state in the Style Panel to Hover. Now any design changes will only be applied to the hover state. Check out this article on using states in Webflow. university.webflow.com/lesson/states
Fantastic!
your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou
If you can, please post your question on our community forum at discourse.webflow.com and be sure to also include your project's share link in your post.
Here is how to get your project's share link:
university.webflow.com/lesson/share-your-project-and-invite-collaborators
can you build and publish your own website for free if you already have domain or you have to pay for one of the plans?
thank you so much
Nice video! I want to have a logo and a button (instead of full navbar). What is the best method to achieve it? Should I still use navbar from the Components list, or should I build it from scratch and just hold the logo (image element) and a button in a div block as a wrapper? Thank you so much
You can go with either route. Build it from scratch or use the navbar component and delete elements you do not need.
Great video, but can you do another one that adds how the dropdown was created, that is the primary reason I wanted to watch this one. Thanks.
Hi, Christopher. The Dropdown element is added from the Add panel at 7:34 - is this what you're referring to or something else? That Dropdown element is added and styled from scratch in this video, so we'd like to better understand what you're looking to achieve so we can help out!
Dylan was completely flabbergasted ☠
at the beginning i thought it was ad and looking for skip but see its an original video not an ads 🤣
How about a drowdown nested in another dropdown and wanting the nested to dropdown on the left or right side? As default they just dropdown inside each other.
Is there a way to animate the dropdown itself? For instance have the dropdown elements fade in, or move?
yes, you can do that. Look up tutorial you'll find something.
Love the jokes! Being a frontend-dev looking into this for an upcoming project, I enjoy this thoroughly. Also absolutely digging the approach webflow takes and how it's basically "just" 100% frontend development, but without code.
@webflow How can I move sticky nav within a hero overlay to the top of the screen?
I must be dumb, but did not understand any difference between sticky and fixed. In my case the rest of the content overflowes that bar, wether it is set on sticky or fixed. And I did uncheck the eye for overflowing view. What do I do wrong??
First, you're not dumb. Everyone is learning something new at any given moment :)
Second, sticky is a CSS property that allows you to "fix" the element to a parent element that has a CSS position set to relative.
Fixed all you to "fix" or "pin" the element to the HTML body tag and ignores any parent element.
why there is no navbar-setting in my website, did you guys changed its place or what?
The navbar element setting can be found at the top right. For more information, please read this article: university.webflow.com/lesson/navbar#style-a-navbar
Hope this helps 😀
How did you guys get John Mulaney to do your tutorial videos?
Never looked at a hamburger like that before. Bun - Protein - Bun. Cheers
sadly the drop down doesnt work in the resposive breakdowns
At this point if Webflow releases a User Manual of 1000+ pages, I wont mind reading it thru! 😂
Can I add a third menu like a filter under the submenu?
Yes. You can add a dropdown menu within another dropdown menu.
@@Webflow OK. And I want to place a store cart in the main menu on the far right. But Webflow does not allow this. Why?
u didnt talk about reuse the navbar and mkae just little changes with effect the source
Can someone please help me!!! Im a complete newbie.. How can I have some nav links at the far right of the page and some links at the far left next to the brand element without ruining the links in the dropdown menu?
Hi, Ruk Kay! If you post on forum.webflow.com, you can share your project's read-only link and the folks over there can look at your project! It's hard to diagnose without digging in. If the functionality isn't working as expected, you can also reach out to support@webflow.com, but the Webflow Forum is usually a good bet!
Does anyone know why my dropdown menu from the navigation button hides below the content of the page? thanks
Hi Enrique! Great question!
The best place to get help with design related questions is on the Webflow Forum:
forum.webflow.com/
Please post your question there along with your Read-Only link for your Webflow site so that our community and team can help. Thanks in advance!
try playing around with the z-index
Consuming a Nav bar! Lol!!!
When I create a class it doesnt save
Good morning
Sticky navbar doesn't collapse in mobile mode.
Mobile menu not closing on external/internal link
Hey Den, if possible, it would helpful for you to post this onto our forum so that we and our community can solve this with you. forum.webflow.com
Why are you using a mouse and a trackpad?
A lot of us on the Education Team use a vertical mouse to reduce wrist strain for broad motions like moving the cursor around etc., and a trackpad for gestures like scroll, pinch to zoom etc. Works great for Webflow, Figma, Premiere, Resolve, and of course, Calculator.
What is google search for?
I wanna consume a nav bar rn lolol
Wait. I'm feeling dim here. I didn't understand the difference between fixed and sticky. They both looked the same to me!
Hi, Sharp Words! The distinction can be a bit tricky. An element set to fixed position doesn't take up any space on the page. An element set to sticky still takes up space, and pushes other elements out of the way. A fixed navbar, if placed at the top of a page that has a section underneath, will overlap that section when the page is loaded (the section is tucked underneath the navbar). But a sticky navbar, if placed a the top of the same page, will push down the page's first section (the section starts after the navbar, and is pushed down so the two elements don't intersect when the page is loaded). A great way to visualize this is to toggle between fixed and sticky on an element at the top of the page while observing how it affects page content underneath it.
@@Webflow Three things... 1: Thank you for the very enlightening answer. Now I get it! 2: I can't believe you're working Sunday answering random stupid people. 3: I can't believe you answered so quickly! Thank you xxx
What about mega menu?
This past live stream may help you with this: th-cam.com/video/MSZPgv-pZwc/w-d-xo.html