You're ready to make your screen designs in Figma, Sketch, Adobe XD, notepad or napkin and bring them to life for real on the web.
You've tried your hand at building websites but haven't found a tool that is easy to learn and makes sense for designers. If you're nodding your head, then this course was made just for you.
We'll cover everything you need to know to get you started building sites with Webflow, and heck, you might just love it. The best part, it's FREE.
We kick off Day 1 with a very simple objective. Translate a basic layout from a screen design tool like Sketch, Figma or Adobe XD to a web page using the no-code Webflow Designer.
We'll explore some of the most frequently encountered CSS properties in web layout—margin, padding and flex box. With just three properties we'll construct the scaffolding of our page layout using a section/container/content model.
These simple tasks will introduce you to fundamental concepts of web layout—typography, the DIV element and CSS classes.
Our second lesson starts where we left off the day before. This time taking it a step further by adding content to our layout, in the form of text and images.
We'll spend a bit of time on typography, it's the most fundamental part of web design, and builds a strong foundation. We'll explore the best practices of using and styling headings, paragraphs, lists, links and block quotes. We'll once again use the margin and padding properties to specify layout.
Next up images. Two types, background and content images, the difference between them and ways to handle them with the introduction of new style properties for each.
Designing for every screen or at the very minimum, desktop and mobile, is standard in modern web design. Webflow makes responsive web design (RWD) easier than ever with its visual designer. On the final day of this beginner course, we'll convert the desktop layout we've built into a mobile responsive one.
We'll use device breakpoints to apply different layouts to page elements so they appear correctly on a smaller screen. But we won't stop at just one mobile layout, we'll create several by pushing the limits of what we can do by using the powerful features of CSS Grid and Flex-Box.
At the end of this beginner course you'll have learned the fundamentals of web design and layout, along with a powerful tool to get you up to speed quickly. It will pave the way for you to create a basic site in Webflow, like your portfolio or a simple landing page.
As the intro to Webflow was only three, one hour courses, Dayton did an amazing job in that short amount of time clearly explaining features of Webflow, providing insights not only for best practice in Webflow but UX/UI design as well and readily answered all questions. Really glad I woke up early every day to take this course, will definitely be continuing in Webflow and taking more courses with Dayton.
Dayton takes a well paced approach when teaching Webflow, introduced modern web development practices and he's helpful in answering questions proficiently after classes and also through the likes of Slack.
The course was amazing. Having already been familiar with Webflow, this beginner course still provided tons of new information. YouTube tutorials don't replace the information and direct feedback you get from a live course with a great instructor. Dayton's class structure and teaching allows anyone to jump right in and start building a site from scratch.
