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 RU-vid 👍🏽
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.
🎯 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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EI3AOcsO8ko.html Let us know if that helps!
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.
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.
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 😀
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]"
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.
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 ?
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 ;)
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.
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...
