Learning Webflow
2h 8mBeginner2024-07-31
Authors

Jen Kramer
Teaches web design and development
Course details
Webflow, a leading hosted web design and development platform, 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. Whether you’re a web designer, a UX designer, or a content publisher working on websites or intranet sites, Webflow can be a great addition to your tool kit.
Learning objectives
Describe the basics of the Webflow interface and how it publishes content.
Break down the steps for creating the visual aspects of a Webflow site without code.
Explain how to create content and navigation for your Webflow site.
Customize a site with basic functionality.
Recognize how to publish and maintain your Webflow website.
Learning objectives
Describe the basics of the Webflow interface and how it publishes content.
Break down the steps for creating the visual aspects of a Webflow site without code.
Explain how to create content and navigation for your Webflow site.
Customize a site with basic functionality.
Recognize how to publish and maintain your Webflow website.
Skills covered
WebflowPrototypingProduct and ManufacturingLearning
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 - Configure Webflow variables
- 05 - Configure font properties in the style guide
- 06 - Configure buttons in the style guide
2. Creating the Home Page
- 07 - Configuring the navbar
- 08 - Creating a navigation dropdown and a nav component
- 09 - Creating the opening hero section and background image
- 10 - Configuring the spa layout section
- 11 - Configuring the cards inside of the spa section
- 12 - Challenge - Creating the photo and text section and footer section
- 13 - Solution - Creating the photo and text section and footer section
- 14 - Adapting the design for mobile
- 15 - Adapting the navbar for mobile
3. Setting Up Content Pages
- 16 - Creating the spa package page and updating the navbar
- 17 - Modifying the spa package page and adding more spa cards
- 18 - Challenge - Creating the Detox detail page
- 19 - Solution - Creating the Detox detail page
4. Launching and Maintaining Your Site
- 20 - Exploring the dashboard and adding a favicon
- 21 - Publish your site
Conclusion
- 22 - Continue your Webflow journey