Webflow EASY Beginner Crash Course 2024
Вставка
- Опубліковано 27 лип 2024
- Use this Webflow cloneable to follow along (affiliate link)
webflow.grsm.io/tricks?path=e...
Figma Design
www.figma.com/community/file/...
See the completed project at this cloneable (affiliate link)
webflow.grsm.io/tricks?path=e...
Join my Webflow Wizards Community
/ timothyricks - Навчання та стиль
Learning Finsweet first was a mistake. This is where I should have started. Less divs inside of divs and a few good utility classes make this a lot more approachable for newbs. Especially since my first few clients just needed simply marketing sites with 5 pages max and maybe a CMS. Other naming conventions and systems were overkill for me and slowed me down. Those will come in handy as I grow, but for now this will reduce overthinking and give me that speed boost I need during development. TY!
absolutely true.
I couldn't agree more, mate!
When I started using Webflow I dived into finsweet and it was so frustrating. I felt like i'm building under limitation which made it really hard for me to progress. Finsweet naming system is for intermediate.
Thank you for this. I'm not new to Webflow, but I haven't used it in awhile, and the nuances of the updates definitely flew over my head. Thanks to this, it doesn't feel overwhelming, and I feel like I can get back into it. You're a lifesaver.
So far the best crush course I've seen! thanks mate!
Using webflow since 4 years now and I still continue learning something from your beginner courses. Thank you!
Thank you! I'm so glad this helps!
Same! I was getting sloppy on some basics so I keep coming back to Tim to learn what I wish I learned years ago.
Thank you so much for your clarity, Timothy! I've been designing with Webflow from 2017 to 2020 and then left the web design space altogether. I am getting back to it this year (2024), but I found these new Finsweet and utility classes confusing and don't like how bloated they make the hierarchy tree. This lesson finally helped me sort out and focus on the essentials of utility classes. This is a priceless re-skilling lesson on the latest "good practices." Thank you!
absolutely love this! please do more tutorial like this in the future, thank you Timothy
Thanks so much! Sounds good!
I thought I knew the basics, but I got some golden eggs out of this video. Thank you!
Oh, awesome! Really glad to hear that! :)
I now understand a utility class is something used sitewide and classes with underscores are specific.
I know this is dumbed down because I’m learning the whole Lumos system, but it’s perfect for the first step into it.
I’m going to rewatch and follow with my own version again and again until it’s embedded in my head.
Thank you so much.
I’m so glad this helps! Thank you for following along!
Very good video. Not often I look at videos for 30 minutes straight, even after having slept only 4 hours. Very good video. I'm going back and forth between Framer and Webflow but I think I need to give Webflow another go, thanks to this video.
Your clarity is priceless!!!❤❤❤❤❤
Timothy, you have a way about you when explaining concepts and process that cuts through any issues and clearly communicates... thank you for sharing your expertise!
Thank you so much!
Was into webflow until 2022. Now I'm back to restart my journey. Thank you Tim for this tutorial!
Welcome back! Thank you for watching!
Learned so much! Thank you, really clear and structured
Awesome job! as always
Always learning some new little trick, tip, or smoother way of doing something from you. Great stuff as always.
Goldmine of helpful tips..Legend! More beginner lessons are welcome.
that's exactly what I need right now, i love you Timothy Ricks
Thank you very much! Amazing lesson.
This video is sooo helpful! Thanks
Really great video!!!
This one is truly for beginners, excellent job!
Great tutorial Timothy, this really helps you get the foundations in place.
Thank you for your instructions. Very helpful. The best!!!
Glad this helps! Thank you for watching
You are a genius ! Thanks for sharing your knowledge !
Thanks for the lesson. Really helpful. 🎉
Hey Timothy. Simple thank you! This content is great
Awesome Tim, This will really help us 🥰😇
Would love to see you make a full webflow course, especially an advanced one!
Thank you for the feedback!
Спасибо автору за новую связку. Проверил, все работает.
Amazing! Your workflow is fluid and the whole file and structure are super neat. I'm learning a lot from you, mate!
Thank you for the kind words and for following along!
Yeah, I already finished the webflow courses but this video is really good for learning a good structure of website and layouts.
Thank you for principle application of standards we need to use when developing websites in Webflow.appreciate your quality applicable content.
Please make more tutorials like this! Very very helpful. Even if it were a series that was paid for I would 100% subscribe to that. I feel like in order to understand how lumos works and is set up, this basic knowledge is of course essential. You are a webflow genius.
Thanks so much for the helpful feedback! Are there any topics specifically you feel could use more course coverage?
Amazing like always, please keep it up Tim. Can't get enough of your video!
Thanks so much! Will do :)
I love how you take your time to explain every important bit. Also your designs are so incredibly clean, absolutely love it! One question tho, what is the reason you put the 'hero container' before the 'u-container'? 10:17 Thanks in advance!
Thanks so much!! If we ever need to add more utilities later, it’s helpful to have the custom component class first with any of the utilities stacked on top of that. For example "hero_contain u-container u-height-full". Having the custom component class first also allows to rename any of the utilities stacked on top to update every instance of that component. It’s best to see that part in action here. ua-cam.com/video/8RBs278onMA/v-deo.htmlsi=X78EfXG6lptzPDpa
Thank you Timothy!!! for making this course for beginners love your works!!
My pleasure!! Glad you enjoyed it!
This is so helpful Thank you I've been following your content for awhile now but a lot of time's it's over my head or seems to completed for someone like me but i try and learn and tuts like this help the folks like me who need a little more basic teaching so Thank you so much.
I'm really glad this helps! Thank you for following along and for the helpful feedback
What an awesome tutorial! So much clearness! hope u doing a course around that !
Thanks so much!
This is a very great introduction to Webflow build and bit of Lumos.
Thank you!!
Dang! that's a pro skill man
This is great! I would love to see a mobile menu build! I feel like you have a lot of advanced tutorials on this on both UA-cam and Patreon but a simple one would be great to see!
Thank you! Great suggestion!
I've been using Webflow for a few years now, but I learned some helpful new tips. I didn't realize that using 100vh Min H versus 100vh Height would screw with text sizing.
Can you also explain the rationale behind using em versus rem on Max W when it comes to text within the div?
Thanks again for all of your helpful and insightful videos!
Oh, awesome! I’m so glad this helps. If we used a rem max width on the text, we’d have to adjust the max width each time we change the font size to get it lined up in the correct place again. But if we use an em max width instead, we only have to set that max width once, and it will automatically scale each time we adjust the font size.
I'm just starting with Webflow - based on other comments, sooo glad I found this specific video first to ensure my basic foundation setup is correct. Didn't realize how important naming convention is. Thanks!
Oh, awesome! I’m glad you’re starting with Webflow. Webflow has some specific ways it handles classes. This class naming video covers some important details that I wasn’t able to go into in the crash course.
ua-cam.com/video/_H7VoBSpsgs/v-deo.htmlsi=zc1efuGsjRkywRyE
@@timothyricks wow, thanks so much. About to watch!
@@timothyricks since your reply, I've been deep diving into Lumos etc. Great stuff you've put together! :) Do you have a video that walks through how to actually use/integrae Lumos framework (ie preset variables panel, custom components, etc)? As in, once I start a new site on Webflow, am I launching an app (didnt see one for Lumos) or enabling Lumos chrome extension etc? Thanks!
@@timothyricks Hey Tim, since youre reply I've been deep diving into Lumos :) Great stuff you've built ! Question tho - do you have a video that walks through how to actually integrate the Lumos framework in (preset variables, custom components etc)? Meaning how to implement it when starting a new site build on webflow (simply going to variables and updating font family, spacing values, etc).
Should I be launching an app in webflow app panel (didnt see one for Lumos) or do I just enable the chrome extension?
As a noob, it wasn't as obvious beyond those. Hope that makes sense - thanks in advance!
Goooooooood !!!!
Hi Timothy, nice tutorial! I would love to see a course about size and responsive layout and typography combined in one large video instead of picking up one by one.
Thank you for the helpful feedback!
Will there be an update for Lenis smooth scroll? Many people are experiencing bugs with anchor links and Safari
this is the best beginner webflow class i've taken by far - simple with a focus on core principles - the utility classes (u-container and u-header classes) made so much sense at the end when we could change all the utilities across all the breakpoints - thanks so much T.Ricks!!! - one quick question... do u ever use the components feature much in webflow? why or why not? thanks again!
Thanks so much!! I’m really glad this helps. The focus on core principles was definitely the goal so it’s great to hear that came through.
Components are super useful for maintainability and faster workflows. I’ve built a whole Webflow framework called Lumos with the utility classes and components I recommend for every project. lumos.timothyricks.com
@@timothyricks wow thanks so much for the reply and sharing the lumos frame work!!! definitely my next webflow class, exactly what i've been looking for!! 🙌😁
Happy to share!! Thank you for checking it out!
This is amazing! Thank you so much! I'm learning Webflow as I build, but I'm always afraid if it is going to leave some gaps in my knowledge. To have a structured video like that is GREAT!
I have only one question tho. Since I'm used to Figma, I tend to create a lot of Flexboxes and not use Grid or width on text blocks, for exemple. But the thing is that this workflow creates a lot of "useless" div's just for flex. I know this is not good because the code gets longer, right?
When I need to separate components, like 2 texts for exemple, is it better to just give a margin for that componet's class or to wrap them in a div and use the gap in flex?
Thank you! Learning by doing is the best way so keep it up!
I recommend using flex gap instead of margin whenever possible. Collapsing margins can be inconsistent if their parent switches between block and flex. Flex gap also works better with conditional elements when using the cms or components. It does create more css though to apply flex and a gap instead of just applying margin. But we can use utility classes to speed up this process and create layouts without adding extra css. ua-cam.com/video/rdNSE7utdl8/v-deo.html
All we need now is to add 3D animations!!!
Hello Timothy, thank you for everything you provide to the community. I wanted to ask you if you know any way to do Social Login from Webflow?
Glad to help! Social Logins would likely require a third party solution like MemberStack or Wized.
@@timothyricks Thank you, you are a Genius at Webflow
Hey, do you know any native way to add reservations in Webflow? is There a App or a Widget you can recommend?
interesting that you use the combo class as the main styling layout all across rather than the main class
There’s a lot of advantages to this for everyone but especially for advanced users. One of the biggest is renaming the combo class to switch the style like shown here. ua-cam.com/users/shortsAXxZ_4DCJtI?si=PFph9Q6nIgcHO5L2
@@timothyricks That is smart if you want to use it again and make changes to utility class, would love to see more tutorials like these and design systems. What do you think about the client first system?
There’s good principles in it! Personally, I’ve created my own system for Webflow called Lumos. lumos.timothyricks.com
@ 9:11 'naming conventions' what was the name of the framework you are following. B-E -?? Thank you for this great walk through!
So glad this helps! My class naming is loosely based around BEM, a popular class naming convention. I've adapted it for Webflow though into my own framework called Lumos.
Absolutely fabulous lesson. I wish I were as knowledgeable as you are with this software. I have a question for you Timothy: do you think it would be possible to create a web site using only the viewport height? And by that I mean NO scrolling whatsoever...? Also, are you sure you didn't invent Webflow?
Thank you for the kind words! It’s possible to set font sizes, spacing, and everything else using VH so that everything scales with the browser height, but it wouldn’t be accessible or allow the user to adjust the font size. It’s better to set a min-height: 100vh and let the text push the section to taller if needed. We can still create great experiences that fill the browser height and don’t scroll for most users but are allowed to scroll if the section needs to be taller for some users.
@@timothyricks Hmmm...hadn't thought about that. That's why I reached out to you. I'll try to work out everything in the next version of my landing page as you suggested, and make it responsive, which I imagine won't be a party. But I really love the concept of having minimal-to-no-scrolling, so I'll persevere. Thanks Timothy, you are a rock star, and I don't care what Paul Stanley says.
Thank you! If there’s an images or visual elements in the section, they could potentially have a max height using VH to keep things more contained.
good tutorial mister, but i have a questions... what if our websites displayed in larger breakpoint/larger screens ? is the REM's unit typography still responsive ? i still remember the curch tutorial that you make several years ago, i still used that technique ( vw & ems ). But latlely you always use rems...
Thank you! Using VW for font sizes without a calc causes some accessibility issues because the user can’t adjust the font size. But we could remove the max width from our container if we want a full width site. And it’s possible to add fluid type in an accessible way.
You are great! But this as a beginner I dont understand why rem / px or flex / grid. How to control styles. Feels you are too fast! 😀
Thank you for the helpful feedback!
hi tim, im a patreon member for this month only. i will resume my membership later as i skill up.
is setting navbar position absolute with a high z index best practices?
thanks.
Oh, cool! Thank you for joining!
For the navbar z-index, there's no right or wrong number. Apple uses 9999. MailChimp uses 500. I find 1,000 to be an easy to remember number. It allows me to put modals that should be under the nav at a z-index of 999 and modals that should be above the nav at 1,001 while still leaving plenty of space for in-between elements.
@@timothyricks Thanks for the reply. sry, my question wasn't stated accurately.
shouldn't the navbar be treated as a section? so let nav stack on top of hero, and then contents, and then footer. is there a specific reasoning the navbar is in absolute position and not in the normal document flow?
looking forward to tonight's meeting! thank you.
@@sltho Oh, I see! The navbar should be its own section but with a tag "header" or "nav". Under that should be a div with the tag of "main" that holds all of the sections like the hero and other sections on the site. And under the main element should be the footer. This is structure is for screen reader users to be able to quickly skip past the nav to the main content of the site. If the nav should overlap the hero for design purposes, we use position absolute or position fixed since a nav shouldn't be placed inside the hero.
@@timothyricks ahh got you! it was a deliberate design decision. noted! i love learning frmo your tutorials Tim!
@@sltho Thanks so much!
Hi Timothy, I have a comprehension question. You have created a utility class (u-container) and assigned values. In the next step, you name the individual sections and also add u-container as a combo class. here you then change values (e.g. the padding). I always assumed that if I adjust/change the values in u-container, this would affect all elements. In the example, the values of u-container remain unchanged .
.u-container {
max-width: 90rem;
padding: 6rem 2.5rem;
position: relative;
}
.nav_container.u-container {
padding-top: 2rem;
padding-bottom: 2rem;
}
Have I misunderstood something? Is it a peculiarity of Webflow or do I simply still have large gaps in the CSS?
Hi, good question! This isn’t a peculiarity of Webflow. It’s how CSS works. When styling the u-container combo class on the nav_container, we’re not styling the global u-container class. Instead we’re only styling the combination of those two classes together. Any styles we apply to the combination of those two classes overrides the related style coming from the global u-container class. But we can still style the u-container class when it’s not used as a combo class to affect every container.
@@timothyricks Now I have understood it. I tried a bit with Webflow and Codepen and then I had an epiphany :-) My previous history with Wordpress, Bricks Builder and Automaticss got in the way a bit. Because here you stack existing classes, but don't generate combo classes. I was always under the assumption that they are combi classes. If I then adjusted something in a class, it affected all elements.
With Webflow I was also under this assumption. Now I have tried it out and seen that when combining the classes "hero_container" and the u-container" another one is created, the combo class ".hero_container.u-container" and thus the existing values are taken over and the additional values from the combo class are added. Since I only saw the two classes in the panel in Webflow ("hero_container" and the u-container"), I always assumed that the classes were stacked as in Wordpress/Bricks, but by adjusting a value in u-container, the combo class is only created for the respective elements. With Wordpress/Bricksbuilder, I can't just create it in the builder like with Webflow, but create the class manually.
Thank you Timothy, that really helped me a lot.
Oh, awesome! I’m glad it all makes sense now. It sounds like Bricks handles classes slightly differently.
Hey, there is no audio in the video
I'm sorry about that! It seems to be working now. Somehow the video posted before it was fully processed.
No voice brother
Thank you for the heads up! It seems to be working now. Somehow the video posted before it was fully processed.