Webflow EASY Beginner Crash Course 2024

[@AmantiDesigns]

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!

[@jayneshpatel7925]

absolutely true.

[@paulocardoso8519]

I couldn't agree more, mate!

[@Cs2GamiNG]

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.

[@AmantiDesigns]

​@@Cs2GamiNG Intermediate I think might be the wrong word. Its really depends on the type of project and size of your team. For us solo "teams" this convention can be used at mastery level. Now wouldn't be nice if Relume used this naming convention instead of Finsweet?

[@AmantiDesigns]

@@paulocardoso8519 See all those divs in the navbar gives us nightmares.

[@gjo9621]

Using webflow since 4 years now and I still continue learning something from your beginner courses. Thank you!

[@timothyricks]

Thank you! I'm so glad this helps!

[@HilariousKitties]

Same! I was getting sloppy on some basics so I keep coming back to Tim to learn what I wish I learned years ago.

[@JeremieTisseau]

This course is really well structured. I like how you keep building up on top of the base concepts. It was a nice progression without being overwhelming. A lot to take in 30 min though. Will probably have to watch it a couple more times. Thank you

[@bohdandanylko2006]

Hello. Please, more tutorials like this for beginners. Thank you, it is very helpful.

[@oliviaswiss]

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!

[@stevenboyce2862]

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.

[@timothyricks]

I’m so glad this helps! Thank you for following along!

[@DANNYFIGDESIGNS]

I thought I knew the basics, but I got some golden eggs out of this video. Thank you!

[@timothyricks]

Oh, awesome! Really glad to hear that! :)

[@hazemalhabbal]

One the best videos for anyone learning about Webflow

[@gabriandu]

Goldmine of helpful tips..Legend! More beginner lessons are welcome.

[@brucefrancis2301]

Your clarity is priceless!!!❤❤❤❤❤

[@_eugenechia]

Was into webflow until 2022. Now I'm back to restart my journey. Thank you Tim for this tutorial!

[@timothyricks]

Welcome back! Thank you for watching!

[@mattsmithcreative]

These short tutorials have been a godsend for my learning. The clear detailed explanations have helped me through some mental roadblocks I have created for myself. I really can't thank you enough!

[@timothyricks]

Thanks so much, Matt! I’m really glad these help!

[@boyter8]

Wow, this is one of the very best Webflow tutorials I've watched/used. Your calm voice instills confidence. Thank you.

[@robertbillingse]

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.

[@ggndsgn]

absolutely love this! please do more tutorial like this in the future, thank you Timothy

[@timothyricks]

Thanks so much! Sounds good!

[@ЮляАнтонишин]

So far the best crush course I've seen! thanks mate!

[@tomwdesign]

This is exactly what I needed Tim, thank you. I’ll be starting my first Webflow build very soon and I can’t wait.

[@juanksantamaria8208]

Amazing! Your workflow is fluid and the whole file and structure are super neat. I'm learning a lot from you, mate!

[@timothyricks]

Thank you for the kind words and for following along!

[@writersnoise]

Yeah, I already finished the webflow courses but this video is really good for learning a good structure of website and layouts.

[@dalejanzen3253]

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!

[@timothyricks]

Thank you so much!

[@wynterkool]

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.

[@nhato4644]

Amazing like always, please keep it up Tim. Can't get enough of your video!

[@timothyricks]

Thanks so much! Will do :)

[@mbtauiliili]

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!

[@timothyricks]

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. kzbin.info/www/bejne/lXmah6J4iNWmndUsi=zc1efuGsjRkywRyE

[@mbtauiliili]

@@timothyricks wow, thanks so much. About to watch!

[@mbtauiliili]

@@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!

[@mbtauiliili]

@@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!

[@catherinemcclure2486]

@@mbtauiliili I have the same question. Did you find the answer?

[@Kenten-d9g]

Спасибо автору за новую связку. Проверил, все работает.

[@annamolokanova5651]

that's exactly what I need right now, i love you Timothy Ricks

[@MaxWeir]

Great tutorial Timothy, this really helps you get the foundations in place.

[@LaurenPidwirny]

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.

[@timothyricks]

Thanks so much for the helpful feedback! Are there any topics specifically you feel could use more course coverage?

[@nubreakz1]

@@timothyricks Timothy, thanks for those videos! For me the main problem with Lumos is that it is no clear for me what for I should use it, I mean Lumos is so complex that I am scaried that it is too much for some small website. Also please share some info how we can start using it for brand new design from Figma (as this video).

[@joeygarner1636]

This video helped me a lot, thanks Tim. Would love if you made more of these build along videos. The other video I watched of yours was the "Remarkable" build. I tried following along, but a lot of things were going over my head that I didn't understand. I would love to see a video that shows how to use all those very useful Lumos tricks with custom code, but crafted for a beginner audience. Thanks.

[@hcf797]

Wow. That was for beginners?! 😅 I have a lot to learn. Thanks Timothy for all that you do.

[@deepak8586]

Thank you Timothy!!! for making this course for beginners love your works!!

[@timothyricks]

My pleasure!! Glad you enjoyed it!

[@PraxCruz-ln4jv]

Always learning some new little trick, tip, or smoother way of doing something from you. Great stuff as always.

[@ChristianBachmann-Webdesign]

What an awesome tutorial! So much clearness! hope u doing a course around that !

[@timothyricks]

Thanks so much!

[@yoozer8741]

Thx Tim, pretty useful. How did u get these nice, light-blue layout column grids?

[@bamoj]

This is a very great introduction to Webflow build and bit of Lumos.

[@timothyricks]

Thank you!!

[@Designworx1]

Thanks again Timothy!

[@staticmotion1628]

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.

[@timothyricks]

I'm really glad this helps! Thank you for following along and for the helpful feedback

[@adamjazowiecki]

Thank you for your instructions. Very helpful. The best!!!

[@timothyricks]

Glad this helps! Thank you for watching

[@jayellwood]

Tricks is the man 🙏

[@puseletsomaraba1313]

Thank you for principle application of standards we need to use when developing websites in Webflow.appreciate your quality applicable content.

[@JustinDesignzz]

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!

[@timothyricks]

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.

[@Harshitkumarimprovement]

This one is truly for beginners, excellent job!

[@whitespace1801]

@timothyricks - Ive been trying to look up some of your clones to understand what units to use but I see in some you have VW or REM or EM for body font. Also the wizardry technique seems to be changed from what I came across last year. How can I find your latest techniques ?

[@maxshakun1177]

This was so helpful! Thanks so much.

[@garretcullman6957]

Would love to see you make a full webflow course, especially an advanced one!

[@timothyricks]

Thank you for the feedback!

[@mw5145]

Absollutely amazing

[@tfranxx588]

Learned so much! Thank you, really clear and structured

[@feefoo564]

Dang! that's a pro skill man

[@HrissW]

10:58 12:37 13:00 14:10 14:48, 16:16 overlap, img res 20:30 24:45 25:09 res 25:43 img ratio

[@ryan-from-verow]

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 KZbin and Patreon but a simple one would be great to see!

[@timothyricks]

Thank you! Great suggestion!

[@DerekElliott]

Really great video!!!

[@osendz]

Thanks for the lesson. Really helpful. 🎉

[@josephb6574]

Brilliant! Thank you!

[@trezzah]

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...

[@timothyricks]

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.

[@olenakitsak37]

Thank you very much! Amazing lesson.

[@thiagotorelli2283]

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?

[@timothyricks]

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. kzbin.info/www/bejne/qJWxhHhtqtmXopo

[@richardtorresmagic]

what would be the next video to watch after this video?

[@Omzing]

You are a genius ! Thanks for sharing your knowledge !

[@IgnacioTalvi]

Hey Timothy. Simple thank you! This content is great

[@shrutisonali5008]

This is sooooo helpful! Can you make a similar crash course for animation basics and maybe use this same website and pick up where you leave here?? I am starting webflow and this is literally the easiest tutorial I have come across. I would really appreciate if you could make a part 2 with animation basics🙏💓🙌

[@timothyricks]

I’m so glad this helps! This one uses a different design, but here’s my animation basics crash course. kzbin.info/www/bejne/e3K4fXqborqimMUsi=1u2RVXZuSYMA3acw

[@shrutisonali5008]

@@timothyricks Thankyou so much for this!! Appreciate it!🙌

[@akbarbadsha25]

Awesome Tim, This will really help us 🥰😇

[@madgraphix87]

Awesome job! as always

[@murmuriio]

Hello Timothy, at the end of the Tutorial, what happened to "Heading" you used to define the Class Sizes to different Screen Sizes?

[@timothyricks]

Hi, I deleted the heading element, but the changes I applied to the class were still saved since that class was used on all headings throughout the site.

[@sebastiancarballo9318]

Hi Timothy, I'm looking for your help. Do you have any classes or explanations that show how to name each section in Webflow? That is, each section that is created should be named, basically also how to manage the classes. Thanks

[@timothyricks]

Hi, sure thing! Here's my complete guide to class naming. kzbin.info/www/bejne/lXmah6J4iNWmndU

[@sebastiancarballo9318]

@@timothyricks Thanks Timothy. I'm starting a project and I want to learn how to use the Lumos framework, but I have no idea where to start. Do you have any videos where you start from scratch or from the beginning? Is Lumos for people with more experience?

[@timothyricks]

@@sebastiancarballo9318 Glad to help! I created a video series that covers everything about Lumos. It's geared towards intermediate Webflow users, but I've seen some people who are new to Webflow have success with it also. kzbin.info/www/bejne/lXmah6J4iNWmndU

[@muhammadraabit3158]

i have set heading width but its not working text is not shrink could you help me whats the issue or update

[@chakhmanmohamed9436]

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.

[@timothyricks]

Thank you for the helpful feedback!

[@moekaba]

This video is sooo helpful! Thanks

[@SonTran-dh9db]

@ 9:11 'naming conventions' what was the name of the framework you are following. B-E -?? Thank you for this great walk through!

[@timothyricks]

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.

[@omkarghodke9472]

Too good!

[@michaelmirchandani9805]

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!

[@timothyricks]

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

[@michaelmirchandani9805]

@@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!! 🙌😁

[@timothyricks]

Happy to share!! Thank you for checking it out!

[@daanvanlieshout4193]

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!

[@timothyricks]

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. kzbin.info/www/bejne/boOlpGVtbdShg6Msi=X78EfXG6lptzPDpa

[@JannisTimm]

Hey, do you know any native way to add reservations in Webflow? is There a App or a Widget you can recommend?

[@triancirc]

11:53 is there a way to use em in the gaps so it scales automatically? Wouldn’t the gap scale to the hero_container font size?

[@timothyricks]

Yes, an EM gap would be based on the hero_contain font size so it would change when the body font size changes. But it’s hard to maintain a consistent spacing system when the spacing is based on heading and paragraph sizes. I prefer to use REM spacing variables for gaps instead, and the variables can be automatically responsive or even fluid.

[@sebastiancarballo9318]

Thank you very much Tomothy for this guide, excuse my English, I'm using Google translate. I just don't understand the division part, for example to get 90 rem, why 1440/16? why 16 and not another number? thanks

[@timothyricks]

Hi Sebastian, great question! The default font size on the html element in most browsers is 16px. The user can always change that default font size from their browser settings to make everything larger or smaller. So in most browsers 1rem is 16px. 90rem (90 x 16) is 1440px.

[@sebastiancarballo9318]

@@timothyricks Thank you very much, Tomothy.

[@sebastiancarballo9318]

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?

[@timothyricks]

Glad to help! Social Logins would likely require a third party solution like MemberStack or Wized.

[@sebastiancarballo9318]

@@timothyricks Thank you, you are a Genius at Webflow

[@dragan516]

Will there be an update for Lenis smooth scroll? Many people are experiencing bugs with anchor links and Safari

[@allwynmathias856]

How do we export the Hero image from figma?

[@sltho]

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.

[@timothyricks]

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.

[@sltho]

@@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.

[@timothyricks]

@@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.

[@sltho]

@@timothyricks ahh got you! it was a deliberate design decision. noted! i love learning frmo your tutorials Tim!

[@timothyricks]

@@sltho Thanks so much!

[@ramo4uuuu]

Ehy you create a class for nav when you use nav element only once ?

[@timothyricks]

We can’t natively style the nav tag or style by ID in Webflow. So class names are usually the only option apart from a few tag types. It keeps the process clear and consistent and makes elements easy to target with custom code.

[@sylviomurer7915]

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?

[@timothyricks]

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.

[@sylviomurer7915]

@@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.

[@timothyricks]

Oh, awesome! I’m glad it all makes sense now. It sounds like Bricks handles classes slightly differently.

[@TheMasterLogoist]

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?

[@timothyricks]

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.

[@TheMasterLogoist]

@@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.

[@timothyricks]

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.

[@writersnoise]

interesting that you use the combo class as the main styling layout all across rather than the main class

[@timothyricks]

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. kzbin.infoAXxZ_4DCJtI?si=PFph9Q6nIgcHO5L2

[@writersnoise]

@@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?

[@timothyricks]

There’s good principles in it! Personally, I’ve created my own system for Webflow called Lumos. lumos.timothyricks.com

[@Radulin]

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! 😀

[@timothyricks]

Thank you for the helpful feedback!

[@Rock-Of-3y3]

All we need now is to add 3D animations!!!

[@HrissW]

33:08

[@HrissW]

31:00

[@MACH_SDQ]

Goooooooood !!!!

[@Harshitkumarimprovement]

Hey, there is no audio in the video

[@timothyricks]

I'm sorry about that! It seems to be working now. Somehow the video posted before it was fully processed.

[@mohsinsherwani4221]

No voice brother

[@timothyricks]

Thank you for the heads up! It seems to be working now. Somehow the video posted before it was fully processed.