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.
Dayton is a great teacher. He understands the nuances of the tech, listens to the students' voices and is never shy to deliver what's promised
I've realized that technical possibilities of Webflow reach way beyond what I've tried out and experienced so far. Utility based classes changed the way I see web structures now and I'll be sure to apply this approach to my next project.
What I learned from in this course is the understanding of a systematic approach to building reliable manageable systems in Webflow!