Get Started with Webflow

1hr x 3days

FREE

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.

Course Dates

Dates for this course aren't scheduled yet. Subscribe to be notified when they're announced.
Thanks for subscribing, we'll keep you in the loop.
Oops! Something went wrong while submitting the form.

Day 1

Publishing your first Webflow website

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.

Day 2

Adding content to our basic layout

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.

Day 3

Making it responsive

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.

Course Dates

Dates for this course aren't scheduled yet. Subscribe to be notified when they're announced.
Thanks for subscribing, we'll keep you in the loop.
Oops! Something went wrong while submitting the form.

Attendee Reviews

Amanda Friday
Amanda Friday
UX Designer

Learning with Dayton is an great experience. His wealth of knowledge and approachability make him an amazing teacher. His teaching style makes learning online feel like a natural and fun experience!

Daniel Churchill
Daniel Churchill
UX Design Student

The RSG Webflow 300 course was exactly what I needed at the time I took it! After using webflow for a year prior, it elevated my level of understanding of what could be done with the platform.

Anshul Kidile
Anshul Kidile
Designer

What I learned from in this course is the understanding of a systematic approach to building reliable manageable systems in Webflow!

Other courses you might like