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

Orienting yourself to the Webflow Designer UI

At first look, the Webflow Designer seems to be mostly taken up by a blank canvas with few obviously noticeable capabilities. However, once you start clicking around in the different sections of the Designer, you will start uncovering more subsections and details. Newcomers might find the menu choices and properties to be overwhelming or intimidatingly technical. Don't worry—over the course of the book, we'll peel back the layers slowly and get progressively more exposed and trained on how the individual parts work.

For now, let's take a whirlwind tour of the most important parts of the Designer and how it's laid out.

Taking up the most space, as we've mentioned, is the center panel. This is a blank canvas where you will be adding your HTML elements and building them visually. What you see here will be a fairly good, yet not absolutely accurate, representation of what you can expect to see if you were...