Book Image

Webflow by Example

By : Ali Rushdan Tariq
Book Image

Webflow by Example

By: Ali Rushdan Tariq

Overview of this book

Webflow is a modern no-code website-builder that enables you to rapidly design and build production-scale responsive websites. Webflow by Example is a practical, project-based, and beginner-friendly guide to understanding and using Webflow to efficiently build and launch responsive websites from scratch. Complete with hands-on tutorials, projects, and self-assessment questions, this easy-to-follow guide will take you through modern web development principles and help you to apply them efficiently using Webflow. You’ll also get to grips with modern responsive web development and understand how to take advantage of the power and flexibility of Webflow. The book will guide you through a real-life project where you will build a fully responsive and dynamic website from scratch. You will learn how to add animations and interactions, customize experiences for users, and more. Finally, the book covers important steps and best practices for making your website ready for production, including SEO optimization and how to publish and package the website. By the end of this Webflow book, you will have gained the skills you need to build modern responsive websites from scratch without any code.
Table of Contents (20 chapters)
1
Section 1: Getting Started with Webflow
5
Section 2: Building a Mobile Responsive Landing Page with Webflow
11
Section 3: Building a Dynamic Website with Webflow CMS
16
Section 4: Additional Topics

Creating a custom floating button

A floating button is simply a button that floats above the page in a fixed position while the page is scrolling. Why would we want this?

In our case, we're going to create a button that quickly takes the user to the top of the page rather than having them manually scroll back up. Many websites make use of something like this as it saves the user's time and effort to scroll through long pages.

Our action plan is going to look like this:

  1. Create the Back to top button and set its Position to Fixed.
  2. When the user clicks on the button, it will take the user back to the top of the page.
  3. Hide the button when the user is at the top of the page.
  4. Show the button when the user scrolls down to a certain position on the page.
  5. When the user hovers over the button, make it react in some way so that it stands out.

The following diagram shows the floating button we'll be creating, along with what the hover effect...