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

Chapter 1: Why Webflow

I designed and built my first website in 1998 as part of a self-chosen school project. Sitting in my high school's computer lab, I pored over lengthy, dry textbooks, learning about HTML and CSS (the building blocks and core technologies behind websites), constantly refreshing my internet browser to render my latest work. After months of toiling, I had proudly finished the project: a three-page website that marketed my very own school, complete with images, pricing tables, and even the obligatory rotating GIF of my school's logo. As tiresome as the process was, the World Wide Web promised many exciting things to come. The possibilities of creative expression in this new digital medium literally felt endless.

More than 20 years later (and well into a career in digital product design), website technologies have gone through major evolutions. While there are now many more resources and tools—many of which are free—than ever before to help you get up to speed in web design and development, the actual process is arguably more complex than ever, as well. In fact, so extensive are the technologies and skills required to design, develop, test, and deploy websites that you can quite safely build a flourishing career in any one of these areas.

And at a time in the mid-2000s when I was admittedly starting to get tech-fatigue, I happened to come across Webflow. It promised a whole new way to design, build, and deploy websites in a completely visual editor, all without code.

I should mention here that drag-and-drop website builders were not a new technology at this point. I had even used a number of them for various projects, with varying degrees of satisfaction. I still preferred opening up my favorite code editors and manually writing the code out as I felt this provided the most control and flexibility, rather than being constrained by a visual editor's limitations.

But Webflow, I was meant to believe, was supposed to be different.

And sure enough, after building my first few websites on Webflow, I was a believer. Unlike the many other web builders before it, Webflow's approach was built entirely on the foundations of the underlying web technologies that powered everything, only I didn't have to code any of it. Armed with a solid understanding of how websites are developed, and with a little patience, you could build and deploy a live website completely through Webflow in a fraction of the time (and skill) you would've needed if you were to do it by code. And as a cherry on top, Webflow generated cleaner, more efficient code than any of the other builders I had used before, all of which you could export if you wished.

For the first time since those months sitting in my computer lab in high school, I felt excited again for the future of the web. I felt my imagination fluttering again.

Indeed, one of the hallmarks of the Webflow phenomenon, you'll find, is the legion of fans who can't stop talking about it, and for good reason.

With this book, my aim is to provide you with what I wished I had when I first started with Webflow; a resource that I could go through at my own pace, which clearly laid out foundational principles of how web design/development all worked in the context of Webflow, and a variety of practical examples that put everything into practice.

This is not meant to be an exhaustive book on web design and development, nor an exhaustive manual on mastering Webflow. In this book, I will introduce you to just enough theory and principles in order to succeed with Webflow. In fact, I believe the main reason why a number of people fail to adopt Webflow in their process is that they are missing some of those foundational principles of modern web development.

In addition, I believe the majority of learning comes through doing. As such, in this book, we'll spend some time understanding theory and more time applying it to a variety of realistic projects. By the end, the hope is that you will have gone through numerous examples that will provide you with the knowledge and confidence to apply them in countless other ways that are only limited by your imagination.

In this chapter, we'll take a step back and examine the larger context that Webflow finds itself in today and, in particular, we'll take a look at the No-Code movement. We'll then address some common concerns that people have about Webflow and what makes it stand out from the crowd.

The topics we will cover more closely in this first chapter are as follows:

  • The No-Code movement
  • What sets Webflow apart
  • Who will benefit from this book?