We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

The chemistry between these two is ELECTRIC

@Who_Is_Yasir....

3 ай бұрын

agree sir!

Wow, you literally gave a full course about webflow in two hours 👏🏿

@Webflow

2 жыл бұрын

Glad it was helpful!

I upgraded my free subscription after watching this video. Thank you for making it fun again.

I like how this is like a cooking show, but you are cooking website 👍

Again, if Bob Ross did web design, this is how his show would have been. Kudos

@loganbenjamin8922

2 жыл бұрын

Thought that for years! #Win

This is one of the most helpful and engaging tutorials I've ever seen. Thank you guys

It's absolutely amazing how Webflow is making me like Web Design. I was using Wordpress, but I was so limited as a Designer that I even got discouraged. With Webflow creativity goes a thousand ways and I feel like using Figma to create a website. Also, I gained a lot of time using it to create a website. Thank you very much to the Webflow team for having developed this wonderful site and even more with this course with the best possible quality! Hello from Brazil😁

This is GOLD DUST. Production quality and general persona and camera presence is second to none.

Grate work in teaching. Great team. Good work. Nice fun. Amazing style and atmosphere. Good sense of humor.

Wow, just beautiful work on the explanation. So smooth

What a journey. What a tutorial. Kudos to the entire team 🙌🏼

@Webflow

2 жыл бұрын

Thank you to the moon and back!

Can't thank you guys enough! 👏🏻👏🏻

Very nice tutorial. Good job you two and good job to webflow!

Hahaha I’m so dead. “This team is extremely skilled to ed-“ I laughed on the train love your tone and format. One of the best from a brand on KZread 👍🏽

Awesome, I just purchased a plan to Webflow just because of those videos ! Thank you sooooo much

it's full of information and yet it is interesting to watch. Thank you, Great job!!!!

Thank you so much! I've learned so many things!

your duet in this video is amazing) thank you for tutorial

I love these guys

i just love the whoiole video editing team

execution on this video is 100

Beautifully made, very informative , funny as hell this is the best tutorial I've ever seen by miles

webflow, you folks amaze me.

Thank you🙏🙏

You should set 8 variable colors (matching bottles) for the "sign-up" button, so that it changes every refresh...

Love you! 🤩

Those drops of goofiness interspersed in the tutorial make it so engaging and keep the attention in. This is a masterpiece, guys.

Nice workshop, i would suggest getting a course in ui design and study material design for a few tips on minimal button size etc.

That's a whole other level of a tutorial

Been looking forward to this!

@Webflow

2 жыл бұрын

We hope you enjoy and it bring you tons of value!! 😁

0:43 amazing cutoff, also ima grab my popcorn for this one lol

What a laugh these two 😆 This is the best way to learn Webflow

perfect tutorial. i appreciated😀bb :)

🎯 Key Takeaways for quick navigation: 00:32 🌐 In this lesson, they start from a blank site in Webflow to build a full-page design, covering the fundamentals. 01:00 📐 When transitioning from design to development, there are different approaches, but they use Figma to develop a mid-fidelity design in this example. 01:56 🧰 They break the lesson down into six parts: hero section, navigation, product features, featured logo section, contact form, and footer. 02:24 🖥️ They emphasize that the principles they teach are applicable regardless of your development environment. 15:09 🎨 Classes in Webflow help maintain consistency in styling and reduce the total number of styles to manage in a project. 17:00 🎨 Styling in CSS goes beyond just font color and weight; it includes anything in the Style panel. 17:29 🖼️ You can set background images in Webflow, adjusting settings like cover and position for responsive design. 18:27 💻 You can preview and test the responsiveness of your design in Webflow, making adjustments for different breakpoints. 24:14 📐 CSS styles can be inherited, so setting top-level changes for typography in the parent element can save you from styling each element individually. 32:46 🖌️ You can apply and customize styles to elements like text and backgrounds in Webflow, and changes made to one element with a class can affect all elements with that class. 33:42 🖌️ You can create combo classes in Webflow to apply specific styles to elements without affecting others. 35:07 🧩 Combo classes in Webflow allow you to make more specific styling changes while inheriting some properties from the base class. 37:58 📏 You can use margin and padding adjustments to control spacing and layout in Webflow. 39:25 🎨 You can easily change colors and styles in Webflow using swatches and combo classes. 46:35 📦 Div blocks in Webflow can be used to group and style elements, allowing you to control layout and apply styles effectively. 50:43 📝 When duplicating elements with shared classes in Webflow, changes made to one element with the class will affect all instances of that class. 52:39 🎨 To create visual differentiation between sections in Webflow, you can use gradients or blending modes to control how elements interact with their backgrounds. 53:36 ⏭️ You can use negative margins to adjust the positioning of elements in Webflow, allowing them to overlap with previous sections. 56:27 🔄 You can create scroll animations in Webflow by using element triggers and defining animations to occur at specific scroll percentages. 01:06:41 📱 When designing for responsive layouts in Webflow, you can adjust font sizes and other styles on child elements to inherit changes from their parent elements, maintaining consistent design across breakpoints. 01:08:01 📐 Text inheritance is a powerful technique used in web design for consistent styling and layout. 01:09:00 📱 When designing for mobile, consider adjusting maximum widths and margins to ensure responsive design. 01:11:51 🖼️ Utilizing base classes and combo classes in design tools like Webflow can help maintain consistency and simplify future changes. 01:15:11 🧩 CSS techniques like using viewport width (VW) can be applied to create responsive layouts. 01:18:00 🌐 Adding alt text to images is important for accessibility and search performance in web design. 01:25:44 🎯 Use the Command+E shortcut in Webflow to add elements like sections, div blocks, and form blocks efficiently. 01:26:39 📏 Adjust element width in Webflow to ensure it fills available space up to a maximum width, allowing for responsive design. 01:27:08 🖍️ Create and apply CSS classes to style elements consistently in Webflow. 01:29:04 📐 Use Flexbox in Webflow to align and position elements within a container for better layout control. 01:42:40 📱 Ensure responsive design in Webflow by adjusting padding and layout for different screen sizes. 01:43:10 📐 Adjusting footer grid: In Figma to Webflow design, you can modify grid columns and row gaps to fine-tune your layout. 01:44:07 📏 Increasing tap target size: To improve user experience on mobile devices, consider adding padding to increase tap target size for links. 01:45:32 🧩 Responsive design control: Building with responsive units allows complete control over design and ensures it looks good on all devices and screen sizes. 01:47:28 📱 Single-column layout for mobile: Adjust your grid to a single column layout for better mobile portrait display. 01:57:01 🍀 Utilizing sticky navigation: Make your navigation bar sticky to enhance user experience and provide easy access to site sections. 02:01:38 🛠️ Customizing form error messages: You can personalize error messages on your forms to match your brand's tone and provide contact information for assistance. 02:02:08 🌐 Testing and publishing: It's essential to test your website on different browsers and devices before publishing. Make sure your design responds well in various conditions. 02:03:05 🚀 Preparing for domain connection: In the next lesson, the video will cover connecting the website to a custom domain for publication. Made with HARPA AI

Came here for te knowledge, stayed for the plot

Very entertaining tutorial haha!

32:48 Wow. Numbers are now colors. Learning more everyday 😂

You should adapt the tariffs for the CIS countries. For our region, the prices are expensive. I hope you will think about this question.

Hi Webflow, I was just wondering how the smooth scroll effect was achieved when you covered the section to jump to different sections on the page. Mine is a bit jumpy at the moment. Thanks so much for the tutorial!

@Webflow

2 жыл бұрын

Hi! You can control the speed of the scroll in your Element Settings panel. Check out how here: kzread.info/dash/bejne/d31no7Gco7Kem9I.html Let us know if that helps!

I equate Z-Index to building a sandwich. Layer 1 (the bread slice) is always on bottom and starts the sandwich, moving upwards. Every man loves a sandwich metaphor.

Hey guys, I'm following along using your asset folder. And I have problems with the lottie animation. First it became smaller when I used preview mode and with instant preview the animation was laggy. Now I tried to import everything again and redo it. The animation is visible in the assets tab, but it doesn't show at all when I pull it into the page. I tried different containers and sections already... Maybe somebody can help? Amazing course by the way ! Very on point aaand entertaining. Every learning experience should be like this! If the rest of your academy content is like this I'll know everything in a week!

@alexanderbrandt8342

2 жыл бұрын

Ok, I closed my Macbook Pro and finished this part on my desktop PC (chrome) and it worked without any problems. Nice that it's browserbased and switching is so easy and fast. Aftewards I tried opening it on the Macbook again and after cleaning caches it worked aswell. A little bit of Wordpress feelings coming up ;)

I have an issue Im a little stumped on at the moment. I've followed along precisely and when I preview my dropdown navbar menu, the menu items show up below my herobox. in the navigator the "nav menu" is above the herobox. Is it something to do with new default settings when creating the navbar? I'm feeling a bit lost. When I edit the nav menu in editing mode, it is under the burger menu in the navbar. It is only in preview mode that I have this issue.

Hi guys, this is a very beautiful tutorial, please how do I add a sort of black overlay to improve contrast on text-image backgrounds

For the contact form, how do I design a floating label on webflow?

Great sources! Perhaps, that you offer the link to the design in Figma file for a download? Thanks a bucnh!

Love to the edit team 🥰

@Webflow

2 жыл бұрын

Ditto to you and our community!

Hi, I have been following this tutorial to create my front page and I just cant figure out why no matter the size in desktop mode the content is left justified. Any ideas as to why?

@Webflow

2 жыл бұрын

If you can, please post your question and a read-only link to your project over on our forums: discourse.webflow.com

Can you export files from the free account? I work with developers and they will bring this into Angular or React and will want the htmls files as a zip.

whenever I start a new project (blank site) I don't have the body its completely blank and I cant throw anything in there. Why it is not already there ? that's odd.. What should I do ?

How do I change where the value comes from?

classes are the bane of my webflow experience. You end up creating so many they become unusable and create clutter. I wanted to watch this tutorial bc i felt like i must have been doing something wrong, but then i saw you doing the same thing i do, making combo classes for one time use, "negative margin", "extreme negative margin" seems like there's no way around it. Eventually it'll be "negative margin [keyboard mashing]"

Hello, at 2:50, I'm notified that I need to add hosting or upgrade my account. Does this mean I need to be at least on the Standard plan to be able to do this?

@Webflow

2 жыл бұрын

To upload images, you do not need to upgrade your account plan or site plan. If you are still getting this prompt, please contact our support team at support.webflow.com and they'll be able to help you with this.

So when someone does "sign up" where does that information go to? What would be the best place to link it to?

@Webflow

2 жыл бұрын

If you're referring to signing up for this course, you'll just need to have a Webflow account. If you haven't yet signed up for Webflow, you can do so at webflow.com . Hope this helps 😀

@gabrielfigueroa4886

2 жыл бұрын

@@Webflow I’m talking about the “sign up” option in the Created website. Not for Webflow University. Sorry for the confusion

Sara was right, it’s mobile in British, not moble!

Wait, i thought we could copy/paste the figma design in there or upload it via master componants

omg she is very beautiful 😍

where can i find Figma file and other assets?

Can I get assets folder?

@Webflow

Жыл бұрын

You can clone the project and download the assets here: university.webflow.com/courses/figma-to-webflow?video=sQnPzTohwfM

The comments of the woman are 100% fire

What was the point of designing in Figma only to rebuild everything again in Webflow? I thought you were going to import CSS from Figma or something like that and then add functionality to the design with Webflow.

@corywatilo

2 жыл бұрын

Agreed, and it took me 15 mins to realize 😫

@Belisiario

2 жыл бұрын

In the designing process we always begin by sketching, then building up from there > low fidelity > mid fidelity > high fidelity prototyping > development (of course there are several other steps we take into consideration when building a website in the "real world") but the way they tackled the construction process from figma to webflow were really spot-on

@modisana

2 жыл бұрын

Webflow is a development tool and is best for actual development/ deployment. Figma, Adobe XD and Sketch are for layout design and this is where you can try out different layout ideas. This was showcased in the first video. Designing in Webflow should generally be avoided especially on real-world projects where clients make changes.

@robertocoladomenico5426

2 жыл бұрын

Life is never easy

@kirkgraham1

2 жыл бұрын

Figma is for planning + layout design, Webflow is for development and actually bringing that design onto the web

39:22

Reda Izo

12:29

@Belisiario

2 жыл бұрын

1:16:11

@Webflow

2 жыл бұрын

Unitless line height is magic!!! ❤️

now i noticed that it's not a course of using figma to webflow plugin...

What's the purpose of doing all your design on figma if you have to do it again in Webflow? I watched 6 episodes of this and was expecting some kind of a technique to simply transfer work done on Figma to Webflow... This is just doubling the amount of work...

@takashi9749

2 ай бұрын

I just do my designs in webflow

pozorische...

12:50 that's not his voice lmao

My man has $1000 Apple Srand ._."

this is too fast.

So, you basically just copied text from Figma? And you call this going from Figma to Webflow?