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

8 күн бұрын

absolutely true.

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

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

@timothyricks

13 күн бұрын

Thank you! I'm so glad this helps!

@HilariousKitties

12 күн бұрын

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

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

@timothyricks

Күн бұрын

Thanks so much! Sounds good!

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!

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

@timothyricks

13 күн бұрын

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

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

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!

@timothyricks

13 күн бұрын

Thank you so much!

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.

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

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

@timothyricks

11 күн бұрын

Glad this helps! Thank you for watching

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

@timothyricks

13 күн бұрын

Thank you for the kind words and for following along!

@writersnoise

13 күн бұрын

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

Thank you very much! Amazing lesson.

Really great video!!!

Awesome job! as always

Learned so much! Thank you, really clear and structured

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

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

@timothyricks

13 күн бұрын

Thanks so much! Will do :)

This one is truly for beginners, excellent job!

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

This video is sooo helpful! Thanks

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

You are a genius ! Thanks for sharing your knowledge !

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

@timothyricks

13 күн бұрын

Thanks so much!

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

13 күн бұрын

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

Hey Timothy. Simple thank you! This content is great

Thanks for the lesson. Really helpful. 🎉

Awesome Tim, This will really help us 🥰😇

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

@timothyricks

9 күн бұрын

Thank you! Great suggestion!

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

@timothyricks

11 күн бұрын

Thank you!!

Dang! that's a pro skill man

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

14 күн бұрын

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.

Goooooooood !!!!

My ass has been waiting for a sign. This is the sign. This video is the sign.

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

13 күн бұрын

Thank you for the helpful feedback!

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

13 күн бұрын

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. kzread.info/dash/bejne/pJiCtadwpdfKnJs.html

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

11 күн бұрын

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. kzread.info/dash/bejne/q2ijtsZ8kZfQg6Q.htmlsi=6JjLVfkyKg_uZS7N

@michaelmirchandani9805

10 күн бұрын

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

10 күн бұрын

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

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

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

13 күн бұрын

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

@sebastiancarballo9318

13 күн бұрын

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

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

@timothyricks

12 күн бұрын

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

@writersnoise

12 күн бұрын

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

11 күн бұрын

There’s good principles in it! Personally, I’ve created my own system for Webflow called Lumos. kzread.info/dash/bejne/g2tqqbKuacKqnqw.htmlsi=-mE0fiOVQD5ulA7b

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

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

2 күн бұрын

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.

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

12 күн бұрын

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

12 күн бұрын

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

11 күн бұрын

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.

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

@timothyricks

10 күн бұрын

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.

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

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

8 күн бұрын

Thank you for the helpful feedback!

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

12 күн бұрын

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

11 күн бұрын

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

11 күн бұрын

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

@timothyricks

14 күн бұрын

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

No voice brother

@timothyricks

14 күн бұрын

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