Get Started with Webflow Jul 6-8

1hr x 3days

Jul 6
-
Jul 8
12:00 pm
ET
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.

Register

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.

Ready to level up your skills?

Register Now

Attendee Reviews

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!

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.

Cerise
Cerise
UX Designer

Dayton gave a logical approach to designing on Webflow using CSS utility framework. It's systematic approach that allows for creativity and experimentation.

Other courses you might like

Other courses you might like

There are no other courses being offered at this time. Please check back again later.