Webflow EASY Beginner Crash Course 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

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

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

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

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

[@ggndsgn]

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

[@timothyricks]

Thanks so much! Sounds good!

[@DANNFIGDESIGNS]

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! :)

[@madgraphix87]

Awesome job! as always

[@user-rd1tc1qk7b]

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?

[@annamolokanova5651]

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

[@tfranxx588]

Learned so much! Thank you, really clear and structured

[@PraxCruz-ln4jv]

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

[@Gmaster35mm]

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

[@moekaba]

This video is sooo helpful! Thanks

[@brucefrancis2301]

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

[@DerekElliott]

Really great video!!!

[@MaxWeir]

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

[@olenakitsak37]

Thank you very much! Amazing lesson.

[@Harshitkumarimprovement]

This one is truly for beginners, excellent job!

[@osendz]

Thanks for the lesson. Really helpful. 🎉

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

[@Kenten-d9g]

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

[@akbarbadsha25]

Awesome Tim, This will really help us 🥰😇

[@Omzing]

You are a genius ! Thanks for sharing your knowledge !

[@nhato4644]

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

[@timothyricks]

Thanks so much! Will do :)

[@deepak8586]

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

[@timothyricks]

My pleasure!! Glad you enjoyed it!

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

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

[@CitoTalvi]

Hey Timothy. Simple thank you! This content is great

[@adamjazowiecki]

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

[@timothyricks]

Glad this helps! Thank you for watching

[@puseletsomaraba1313]

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

[@feefoo564]

Dang! that's a pro skill man

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

[@ChristianBachmann-Webdesign]

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

[@timothyricks]

Thanks so much!

[@garretcullman6957]

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

[@timothyricks]

Thank you for the feedback!

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

[@bamoj]

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

[@timothyricks]

Thank you!!

[@MACH_SDQ]

Goooooooood !!!!

[@RyanNelson-wi8gc]

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!

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

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

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

[@dragan516]

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

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

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

[@RockOfEye-nd3gj]

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

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

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

[@JannisTimm]

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

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

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

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

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

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

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