Learning Webflow (2023)

Course details

If you are a web designer, a UX designer, or a content publisher working on websites or intranet sites, Webflow can be a great tool to know. It empowers you to build professional, responsive, customized sites using a completely visual canvas—no coding required! In this course, web design and development instructor Jen Kramer introduces you to Webflow and all the basics of what you can do with it. Jen steps through creating a starting style guide for a Webflow website. Once that's established, she moves on to building the initial homepage and populating it with images and content. She shows you how to style the site’s content, as well as the navbar and footer, then covers how to build an inside page and link the navbar to existing pages. Once you have your pages ready, Jen shows you how to launch your site and take the necessary steps to maintain it.

Concepts

0. Introduction

01 - A new kind of content management system

1. Setting Up the Webflow Project

02 - Creating a project and choosing a template
03 - Tour of the Webflow interface
04 - Configuring color and add fonts in the style guide
05 - Configuring font properties in the style guide
06 - Configuring buttons in the style guide

2. Creating the Home Page

07 - Configuring the navbar and creating a component
08 - Creating the opening hero section and background image
09 - Adding tour cards to the home page
10 - Challenge - Create the footer
11 - Solution - Create the footer
12 - Adapting the design for mobile
13 - Adapting the navbar for mobile

3. Setting Up Content Pages

14 - Creating the tour page skeleton and updating the navbar
15 - Configuring the tour banner
16 - Configuring the tour grid
17 - Adding the tour cards
18 - Challenge - Creating the Big Sur tour page
19 - Solution - Creating the Big Sur tour page

4. Launching and Maintaining Your Site

20 - Exploring the dashboard and adding a favicon
21 - Publishing your site
22 - Collaborating on page design and editing
23 - Controlling collaborator access to editing

Conclusion

24 - Continue your Webflow journey