Intro to WebFlow for Beginners (Complete guide to building a fully responsive lander)
HTML-код
- Опубликовано: 27 июл 2020
- 0:24 Planning how to develop
5:04 Setting up the Webflow project
19:17 Building the page sections
57:25 Creating the footer
1:08:40 Building the navbar
1:18:12 Making everything mobile responsive
Join my Webflow Wizards Community
/ timothyricks
New to Webflow? You're probably using too many classes, and it's slowing down your development time, especially when making your site responsive. This is a crash course on how to create and build a one page website in under two hours that looks amazing from a 5k screen down to a flip phone.
Cloneable Project to Start With (affiliate link)
webflow.grsm.io/styleguide-st...
XD File to Follow Along
drive.google.com/file/d/1H21m...
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096
Seriously, this is the best Webflow video I've ever seen. I learnt so so much. Make a full course and you'll never work another day in your life :):):)
Agreed. This was masterful!
Truth!!
💯💯💯💯💯💯💯💯
💯💯💯💯💯💯💯💯
💯💯💯💯💯💯💯💯
took the words right out of my mouth
Dude you dont even have an idea how much valuable and precious you are. Please keep uploading you are a gem! Thanks!
I just can't believe this is free!
Keep up the amazing content my dude!
Yep, best Webflow tutorial I’ve seen. I love how thorough you are. It’s hard to find Webflow tutorials that show good workflow, not just creating the website itself. Thank you!
My god! You are a wonderful human being to share all this knowledge for free. Thank you!!!
Great video, thank you soo much! I have learnt a lot even about design not just about Workflow :)
this tutorial re-ignited my love for webflow. thank you so much Timothy!
I watched the first 30 minutes of this video during my first week at my job and walked into a meeting with my boss and was able to almost immediately troubleshoot a few problems they were having with a site the previous designer had made for them. Can't wait to watch the rest. Major kudos, fantastic video.
Learned so much from this tutorial alone than I had ever learned wandering around the internet watching tutorials for webflow. Great job Timothy!!!
Thanks so much! Glad it was helpful
I dont often leave a comment, but you are a treasure. Thank you for the free content! You are a real creator! Keep it up.
Here take my algorithm comment!!!
Thanks so much for the encouraging words! Happy to help
You can't believe how much you've helped me learn. Decided to completely redo my website after watching your video... Now everything feels much cleaner.
This is amazing Timothy, a new way to make sure the website is responsive simultaneously while designing it in Webflow.
Thank you! I'm so glad it's helpful!
damn this whole video is pure gold.
than you for this tutorial Timothy. Awesome stuff right here
I'm really happy I found your channel. This is the second video I've seen and I've picked up more little things watching you do this than just about any other tut or walkthrough. Really appreciate your style, you're an excellent mentor, very thorough and precise.
Really happy to have found this channel! This tutorial has been so much more helpful than many I've found. Thanks man! 👍I finally feel like I can understand Webflow a little better now!
Your explanations and preparation is on another level!
This is amazing, I regret it so much I didn't watch this before I started my project on webflow. I was really confused by a lot of things in webflow and now it is so much clearer after watching your video!
I appreciate all these free content, from the bottom of my heart
I started building my new portfolio using webflow and I found your video to be super helpful! thanks a lot!
This is BY far the best webflow video ever. You explain things so well!!! I love that you explain what each property does and are so patient. Subbed!! and yes I will a course if you choose to drop one! Amazing work Timothy!!
Has to be said, 4 years in web design and I learned so much here. I love your approach!
You should definitely put out more content Tim, you have been blessed with a skill for teaching !!!!
genuinely one of the most helpful videos i have ever watched on this platform. thank you!
I’m so glad to come across this video. Thank you for such a great tutorial.
Fantastic work, thank you, Tim, had a problem to create custom footer, and you explanation is brilliant and super easy to follow
You've dont it again Tim. If ever you had a Webflow Masterclass/Course... I'm definitely signing up 💯
Thank you Tim! I was following along the whole tut, and made one on my own. thanks!
What an amazing video ! For someone who just started learning about webdesign and tried webflow I can tell how good you are.
I really want to thank you for this great tutorial. I've already seen almost all web-flow university videos, and the team is as qualified and cool as you are. You really helped me. Thanks :)
Thank you so much for this video, Timothy! A real gem!
Love your video Tim! Straight forward with a splash of humor!
Fantastic tutorial. Thanks so much for sharing Timothy.
I just watched your how to, probobly one of the most GENUINE ATTEMPTS TO TEACH OTHERS without any hitches, your detailing is SUPERB, you don’t skip over , BIG THANKS amazingly humanly paced presentations..✅
Man, great job!!!! Waiting for a complete tutorial for beginners
Sorry Timothy, I have to say this to you but ... your videos actually make me feel really good ! I mean, it is my first project / second day at using webflow, and I just feel like it is going be so fun to do because of you. So, thank you very much man !
The explanations are gold
Love your content! I have been waiting for someone that could share the best practices to responsive design and you really hit the mark!
Thanks so much! Glad it's helpful
Incredible teacher man, thank you!
Very valuable tutorial Timothy, thanks!!
The explanations were fantastic and easy to follow!
This is great, thank you for sharing!
Never considered using em or vw this way!
Wow I was terrified of using Webflow not knowing much about code, but you've made such an easy to follow tutorial I am actually confident I can do it for my portfolio!
Amazing Tutorial please do more. I learnt so much! Thanks a lot :)
Awesome video! Thank you. 🙏🏽
Hands Down Mr. Timothy!
Thanks Buddy, very detailed tutorial. thanks you so much for sharing this
Cool
Definitely recommended, you will learn the basics
Learned so much from this video, holy hell. Thanks so much!
thanks a lot, your channel is super helpful
please make a full course:)
Hey, Timothy. Thank you so much for creating such a great video, it’s easy to follow along. By the way, it’s my first time using Webflow. Great job bro :D
That’s awesome to hear! Thank you!
Thanks for the tutorial, this is the great one!
awesome tutorial thank you!
Thank you Mr. Ricks
T.Rizzy! I’ma third of the way through bro this iz the 💣. Appreciate you 🤜🏻🤛🏾
That’s awesome! Thank you!
Thank you so much for this, much appreciated
Wow man, this video is so fkn good. You should make the videos for Webflow University! Seriously I learnt so much, thank you very much Tim!
Thank you! This was so good!
A lot of gems. Thank you.
Thanks a lot, that's was very interesting!!!
Really helpful tutorial. 👍👌
omg this helped so much wow thanks for sharing
Don't forget that when you're going back and forth and measuring the font size as it shows in the browser, that it's important to consider the difference in screen size that you have versus the initial breakpoint you're designing for. Since it's vw or ems it's based on screen size, so can be a bit confusing later on when all the fonts look too big or too small when you spent the time to be as precise as possible.
Helpful videos
Congrats for the content Tomothy!! Watching from Brazil and loving it! I have a question, why didnt you use the grid function on the trhee-column-container instead of the "space-between"? Thanks again for this tutorial
Thank youu for this :)
Thank you for sharing, Tim, your channel has been immensely helpful to my understanding of webflow and the underlying CSS/HTML. I do have one question - why didn’t you use the grid setting to create your column layouts in this instance?
You're the GOAT
Jesus Christ,
your videos are awesome!
Good explanations and very dense in klowledge :)
Thank you for your teaching amazing i learn it much can i do it more later coz i learn morento my show here in this show thank you fir your help
Timothy, you are a great professional. I really like everything you create. Wich leads me to a question: Based on your knowledge, can you give us your take about landing pages layouts that actually help conversion and peoples interest on our website? It would help people like me, who works with Google Ads, a lot. Thank you, brother!
I was doing it all wrong. VH made a huge difference, thanks!
This will save so much of time!!
Like the vid! For responsive scaling for fonts and images I would go for the clamp css function. Any thoughts on that?
Amazing video! I have one question...
At 35:00 why did you put the heading inside a div element while you could use padding to the heading directly?
Hey Timothy, awesome tutorial! One question, how come youy didn't use a css grid for the columns?
This has helped me so much, thank you!! For some reason the moving display text isn't seamlessly responsive for other screen sizes - on larger or smaller desktop sizes the animation jumps a bit when the letters move to the edge of the screen since the letters don't seem to be aligned anymore.. am I doing something wrong?
Apex level vid T.RICKS . How would you place elements in a fully responsive background image as opposed to a video? I assume set a sections background to the image? Struggling to find the solution here.
You are seriously the best teacher! I love ALL of your videos. Thank you for so much for sharing your expertise. :) I a question--I previously set my menu to hide when you scroll down, which is causing my dropdown menu to allow scrolling AND leave a gap at the bottom. Do you think I need to create two menus and hide one on desktop/mobile to fixe this problem?
Never mind! I figured out how to disable the other interaction for tablet and mobile. Thank you again!
Nice, dude! :) Congratulations. I am having a small problem with the navigation menu in landscape mode. When viewing in the webflow (and even on the published website), the links seem ok, but when I access the project directly from a cell phone, for example, in landscape mode, the links seem to "overflow" off the screen and end up being cut . Can you tell me what could be happening?
Webflow should pay you. End of story.
Hi Tim, thanks for this video. Would you say you would do things differently now that it's been 2 years on. If so, would there be any chance of doing another video so it's up to date? I'm having a nightmare trying to figure all this out still haha . Thanks again for an amazing channel!
use wizardry 2.0 to make your life easier
Followed along and have everything working but on the menu animation for "Close Nav", everything works fine. The only problem is the menu links still show. They are not collapsing to "0 VH" any suggestions would be greatly appreciated. Also, noticed that when I test the menu is in the open state by default?
Hey mate) how come that at 45:55 the video you embedded has sharp corners, and at 45:56 they are already rounded?
I tried to round the video itself and the container it is in, but it still stays sharp cornered. it looks like the corners are getting rounded, but UNDER the thumbnail of the video.
It's my third video of yours and I'm already a fan. 👍🏻
Great video Timothy!
Is there a reason that for some designs / tutorials you choose to give the container a max width (like the Stripe website), and for some designs like this one you choose to let the container scale infinite even with screen size 5000px +?
So glad this is helpful! This tutorial was created early on when I was first learning about responsive type. The feedback I got from most clients and end users is that they prefer the max width container so elements don’t feel too large. This was also before I had a larger screen to test things on, haha!
Nice video but how did you get the nav-bar menu to drop at breakpoint?
thanks for the video, I did it like in your video, but with a screen width of 5000px, everything still moves away and decreases, although I did everything like in the video .. strange. I still don’t understand how you determine when and where you need to choose vw or em, it’s still very difficult for me to rebuild from ordinary pixels and understand this all (I will be glad if someone helps:(
I love this video, but how do you link the nav links to a section in a one-page website?
Please make a full Visual/Web Design awwards course. Figma/XD to webflow, with multiple sites.
Hi, how do I make the lottie navbar work smoothly on mobile (iOS)? Do I have to revert the navbar back to the webflow navbar element?
1:31:03 i was hoping you'll get back to this and show you fixed it, could you please let us know how to keep it looping seamlessly around all breakpoints, or is that impossible?
You don't use the natives nav bar ? You're a G, bro 😆😆
What was the first thing that you had did? Can u do an explanation on that?
If I create a custom series of shadows in an element in figma, how can I paste those properties into a webdlow div?
❤️
13:20 I thought EMs used the parent element's font size and REMs used the root body font size?
Please let me know when I can use the grid.
guys, please help! I follow same steps for the nav menu for tablet, but after I set the position to Absolute for the navbar menu, give it a bg color, and set the -1 z-index, i still see the hero section under the navbar. My navbar menu relaite to navbar, I checked that.. but still dont get why its not converting the hero section.
great video, thx for that.
how can i find the header video? xd file?
Yeah, I had the same question.
Did you figure it out?
Tim, what if i dont want the website to take the whole vw size on huge screens like 2-5k?
Is the clonable project changed? I cloned it and class names and font sizing is different, it is showing me in an “em” size, and in the video, it is in “vw” sizing