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😁
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 RUclips 👍🏽
🎯 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
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!
Hi! You can control the speed of the scroll in your Element Settings panel. Check out how here: ruclips.net/video/EI3AOcsO8ko/видео.html Let us know if that helps!
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 😀
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.
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.
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.
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!
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 ;)
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]"
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 ?
2:47 yeah, idk how it was 2 years ago, but you can't make this course with a Starter Webflow package (as they advertise on their website), because being able to drop in assets is limited :)) whoever put this limitation and then let you make these courses was .... smart.
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.
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
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.
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?
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.
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?
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...
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
agree sir!
Wow, you literally gave a full course about webflow in two hours 👏🏿
Glad it was helpful!
I upgraded my free subscription after watching this video. Thank you for making it fun again.
This is one of the most helpful and engaging tutorials I've ever seen. Thank you guys
I like how this is like a cooking show, but you are cooking website 👍
What a journey. What a tutorial. Kudos to the entire team 🙌🏼
Thank you to the moon and back!
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.
Again, if Bob Ross did web design, this is how his show would have been. Kudos
Thought that for years! #Win
Awesome, I just purchased a plan to Webflow just because of those videos ! Thank you sooooo much
Grate work in teaching. Great team. Good work. Nice fun. Amazing style and atmosphere. Good sense of humor.
Beautifully made, very informative , funny as hell this is the best tutorial I've ever seen by miles
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 RUclips 👍🏽
Those drops of goofiness interspersed in the tutorial make it so engaging and keep the attention in. This is a masterpiece, guys.
it's full of information and yet it is interesting to watch.
Thank you, Great job!!!!
i just love the whoiole video editing team
SO helpful. Thank you.
your duet in this video is amazing) thank you for tutorial
execution on this video is 100
That's a whole other level of a tutorial
What a laugh these two 😆
This is the best way to learn Webflow
Thank you so much! I've learned so many things!
You should set 8 variable colors (matching bottles) for the "sign-up" button, so that it changes every refresh...
Wow, just beautiful work on the explanation. So smooth
0:43 amazing cutoff, also ima grab my popcorn for this one lol
Nice workshop, i would suggest getting a course in ui design and study material design for a few tips on minimal button size etc.
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
I love these guys
Very nice tutorial. Good job you two and good job to webflow!
webflow, you folks amaze me.
🎯 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
Very entertaining tutorial haha!
Thank you🙏🙏
Great sources! Perhaps, that you offer the link to the design in Figma file for a download? Thanks a bucnh!
Can't thank you guys enough! 👏🏻👏🏻
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!
Hi! You can control the speed of the scroll in your Element Settings panel. Check out how here: ruclips.net/video/EI3AOcsO8ko/видео.html
Let us know if that helps!
Been looking forward to this!
We hope you enjoy and it bring you tons of value!! 😁
Came here for te knowledge, stayed for the plot
Love to the edit team 🥰
Ditto to you and our community!
perfect tutorial. i appreciated😀bb :)
You should adapt the tariffs for the CIS countries. For our region, the prices are expensive. I hope you will think about this question.
Wait, i thought we could copy/paste the figma design in there or upload it via master componants
on 1:09:47 McGuire you said the page can be scrolled horizontally using Shift + Mouse wheel but it isn't working.. what's the solution?
So when someone does "sign up" where does that information go to? What would be the best place to link it to?
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 😀
@@Webflow I’m talking about the “sign up” option in the Created website. Not for Webflow University. Sorry for the confusion
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.
32:48 Wow. Numbers are now colors. Learning more everyday 😂
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.
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.
where can i find Figma file and other assets?
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!
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 ;)
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]"
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 ?
Sara was right, it’s mobile in British, not moble!
2:47 yeah, idk how it was 2 years ago, but you can't make this course with a Starter Webflow package (as they advertise on their website), because being able to drop in assets is limited :)) whoever put this limitation and then let you make these courses was .... smart.
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.
Agreed, and it took me 15 mins to realize 😫
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
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.
Life is never easy
Figma is for planning + layout design, Webflow is for development and actually bringing that design onto the web
How do I change where the value comes from?
Love you! 🤩
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?
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.
For the contact form, how do I design a floating label on webflow?
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?
If you can, please post your question and a read-only link to your project over on our forums: discourse.webflow.com
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...
I just do my designs in webflow
now i noticed that it's not a course of using figma to webflow plugin...
The comments of the woman are 100% fire
Can I get assets
folder?
You can clone the project and download the assets here: university.webflow.com/courses/figma-to-webflow?video=sQnPzTohwfM
omg she is very beautiful 😍
39:22
12:50 that's not his voice lmao
Reda Izo
12:29
1:16:11
Unitless line height is magic!!! ❤️
My man has $1000 Apple Srand ._."
So, you basically just copied text from Figma? And you call this going from Figma to Webflow?
pozorische...
this is too fast.