Webflow by Example. E-Book

Ali Rushdan Tariq

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 321

Veröffentlichungsjahr: 2021

Beschreibung

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.

Leseprobe

Webflow by Example

Design, build, and publish modern websites without writing code

Ali Rushdan Tariq

BIRMINGHAM—MUMBAI

Webflow by Example

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Hayden Edwards

Content Development Editor: Abhishek Jadhav

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Project Coordinator: Rashika Ba

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Jyoti Chauhan

First published: November 2021

Production reference: 1261121

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-539-8

www.packt.com

To my father, for introducing me to the internet during my teens and encouraging me to kick off a love affair with designing and building for the Web.

And to my lovely wife, Sehrish, for always believing that I can accomplish way more than I believe I can.

Finally, to my son, Rayyan, for tolerating me writing this book over late nights while he was growing in his mum's belly.

– Ali Rushdan Tariq

Contributors

About the author

Ali Rushdan Tariq is a product designer, strategist, and award-winning writer with more than 10 years of experience helping start-ups, scale-ups, and large corporations build simple solutions to complex problems while growing strong design teams. He is passionate about advocating user-centered design cultures in organizations and mentoring junior designers. At the time of writing, he is a Principal Designer and Associate Director of product design at Slalom Build, where he helps organizations design products that make a difference. When not designing, he enjoys traveling (in a non-pandemic-riddled world), photography, cooking, and the occasional video game. He is based in Kitchener, Canada, with his wife and son.

About the reviewers

Ethan Suero is a freelance web designer and Webflow developer who has helped start-ups to build stunning brands and digital experiences. He has worked with agencies and clients alike from all over the world. Ethan is a gamer, as well as a vegan, traveler, and a Lakers fan.

Andreu Pifarre holds a master's degree (MSc) in computer science from the University of London and is a seasoned full-stack software engineer based in the UK. He has 20 years of industry experience working with global companies and clients to develop world-class software solutions, as well as web and mobile applications.

During his career, Andreu has served in numerous senior and lead roles in software engineering, product engineering, and web development with top-tier tech companies around the world.

Currently, Andreu works as a lead web engineer in London, United Kingdom. He provides consulting services to companies around the globe. In addition, he teaches computer science and software engineering online.

According to Andreu, Webflow promises a new era in web design and development. He is also an astronomy enthusiast.

Andreu can be reached at @andreupifarre on Twitter.

Table of Contents

Preface

Section 1: Getting Started with Webflow

Chapter 1: Why Webflow

The No-Code movement

What sets Webflow apart?

Concern 1 – Is Webflow too difficult to learn?

Concern 2 – Will Webflow scale well to larger projects?

Concern 3 – What kinds of websites can I build with Webflow?

Concern 4 – Is Webflow too expensive?

Deciding whether Webflow is right for you

Who will benefit from this book?

Summary

Chapter 2: The Web in a Nutshell

The box model

Boxes in boxes

Implications for designers

The anatomy of a box

The basics of HTML and CSS

HTML

CSS

Summary

Chapter 3: Setting Up Your First Project

Technical requirements

Project overview

Getting set up in Webflow

Understanding Webflow's priced plans

Signing up for Webflow

Setting up your project

Orienting yourself to the Webflow Designer UI

Summary

Section 2: Building a Mobile Responsive Landing Page with Webflow

Chapter 4: Building Above the Fold

Technical requirements

Setting up the Body

Building the Hero section

Adding the background image

Adding the copy text

Adding Call to Action buttons

Adding showcase images

Adding the navigation menu

Making it responsive

Tablet breakpoint

Mobile Landscape breakpoint

Mobile Portrait breakpoint

Large screen size breakpoint

Summary

Chapter 5: Building the Rest of the Body

Technical requirements

Adding the How it Works section

The Main features section

Creating the grid

Adding elements to the grid

Adding the final CTA section

Adding the footer section

Summary

Chapter 6: Making It Responsive

Making the How it Works section responsive

Large screen sizes

Tablet screens

Mobile screens

Making the Main Features section responsive

Tablet screens

Mobile screens

Making the CTA section responsive

Tablet screens

Mobile screens

Making the footer responsive

Tablet screens

Mobile screens

Summary

Chapter 7: Introduction to Interactions and Animations

The basics

Animating transitions on hover

Simple element-triggered animations

Creating custom page scroll interactions

Summary

Chapter 8: Advanced Interactions

Building a parallax effect

Animating the menu on scroll

Creating a custom floating button

Creating the interaction

Adding the interaction

Displaying text on the floating button

Summary

Section 3: Building a Dynamic Website with Webflow CMS

Chapter 9: Getting Started with Webflow CMS

What is a CMS?

Why Webflow CMS?

Webflow CMS – the basics

Project overview

Technical requirements

Planning the CMS structure

Summary

Chapter 10: Creating Your First CMS Project

Technical requirements

Creating a CMS project

Creating a Collection

Adding content to a Collection

Designing a CMS home page

Importing mass content

Finishing touches

Summary

Chapter 11: Creating Collection Pages

Project overview

Building the Library Collection Page

Building the Main section of the Library page

Building the other libraries section

Putting the finishing touches to the home page

Summary

Chapter 12: Managing CMS Projects

Managing Collection Page settings

Making Collection Pages SEO-friendly

Making Collection Pages ready for social media

Setting up an RSS feed for a Collection Page

Updating Collections

Updating data in Collection fields

Updating the structure of fields

Managing Collection item states

Summary

Section 4: Additional Topics

Chapter 13: Publishing Projects on the Web

Publishing a Webflow project

Configuring the project settings

Publishing the project

Exporting project code

Showcasing a project

Summary

Chapter 14: Using Webflow Editor to Update Websites

Using Webflow Editor to update a website

Using the Editor to configure page settings

Editing a live page

Summary

Why subscribe?

Other Books You May Enjoy

Preface

Webflow is a modern website builder that enables you to rapidly design and build production-scale responsive websites without code. This book, 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.

The approach this book takes is to give you just enough foundational theory and principles before diving into actionable steps. In general, you'll be shown what you're going to build, why it's built that way, and then the actual steps showing how to do it.

You'll 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 two projects that you'll be ready to publish to the world. The first will be a fully responsive landing page for a fictional mobile app. You will build a solid foundation for building modern websites, from the CSS box model to Flexbox and CSS Grid, including how to build slick custom animations and interactions and more, all within Webflow and without code.

The second project will be focused on building a dynamic website using Webflow CMS. We'll build our very own curation of some of the world's most interesting libraries. We'll learn all about content management in Webflow and how it makes building large websites easy and efficient.

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 a website.

By the end of this book, you will have gained the skills you need to build and launch modern responsive websites from scratch without any code in Webflow. The hope is that this will open up a new avenue for you and empower you to pursue crafting useful web experiences and exciting creative expressions!

Who this book is for

If you've ever wanted to learn how to build websites but always found the prospect of learning to code off-putting, then learning Webflow is, arguably, the next best thing.

This book is aimed at anyone interested in building websites, regardless of their knowledge of web technologies. If you're a beginner, then you'll learn just enough about web design and development principles to understand how Webflow works. If you are familiar with some core concepts of web development, and maybe even specifically with Webflow, the book will help reinforce those fundamentals through repetition and practice.

What this book covers

Chapter 1, Why Webflow, briefly introduces you to the main differentiating factors of Webflow and how it plays an increasingly trusted role in the growing no-code movement. You will learn when and why to use Webflow and how it can help make the web design/development process faster and more efficient than ever.

Chapter 2, The Web in a Nutshell, introduces you to some basic, but crucial, web design principles, specifically around how websites are structured. We'll take a closer look at the box model of web design and gain some basic understanding of how HTML and CSS work and how Webflow abstracts some of that away.

Chapter 3, Setting Up Your First Project, starts by taking a look at the finished website that you will build in Webflow. You will also be shown where to download some assets that will be used to build the website. Lastly, you will step through some basic website settings to make sure all the right fonts are installed, and that the images are uploaded to Webflow.

Chapter 4, Building Above the Fold, takes you through creating the navigation bar and the main Hero section from scratch. Throughout the process, you will be introduced to various foundational concepts of web development and specifically how Webflow can be used to quickly build different layouts and stylings. You will also be introduced to how Webflow can make responsive design efficient.

Chapter 5, Building the Rest of the Body, covers how, the rest of the sections of the website will be completed in Webflow. While many of the concepts will be repeated as good practice, there will be new concepts and best practices introduced, including how to use links, accessibility, grid layout, relative positioning, and more. This chapter will only cover the desktop layout of the web page.

Chapter 6, Making It Responsive, takes you through making the website fully responsive. You'll be shown how to think about responsiveness, adapting designs to various screen sizes (or breakpoints), and how to preview changes.

Chapter 7, Introduction to Interactions and Animations, introduces you to the basics of creating simple interactions and animations in Webflow and how they can be used strategically and intentionally to create a livelier experience on a website. This chapter will also help you understand how to create multiple states, and how to transition between them.

Chapter 8, Advanced Interactions, continues from the previous chapter by diving into creating modern and more complex interactions. These include parallax effects, scroll-triggered effects, and page-triggered ones. We'll see how easy it is to create custom-made interactions from scratch.

Chapter 9, Getting Started with Webflow CMS, introduces you to the basic concepts of content management systems, how Webflow CMS is different, and why and when to consider using Webflow CMS to create dynamic content. You will also make a start on the next project: a curated directory-listing website of some of the most interesting libraries from around the world.

Chapter 10, Creating Your First CMS Project, introduces you to Collections in Webflow and how to structure a Collection from scratch. You will create your first Collection, create fields, and populate them to create items. You will also learn how to import data directly into the Collection from an external file. Finally, you will learn how to display the Collection items dynamically on the home page of their website by binding web elements to CMS fields.

Chapter 11, Creating Collection Pages, continues to build out the libraries of the world project by creating a Collection Page. You will learn how to style a Collection Page such that each library gets its own unique detailed page. You will also learn how to use filters to dynamically structure Collection lists and learn how Webflow generates these pages automatically for all items in a Collection.

Chapter 12, Managing CMS Projects, explains the various ways to manage CMS pages, including how to optimize them for SEO and how to effectively edit the data and the data structure of CMS Collections.

Chapter 13, Publishing Projects to the Web, steps you through how to publish Webflow projects to the web for the world to see. You'll also see how to showcase a project for other Webflow developers to view and maybe even clone.

Chapter 14, Using Webflow Editor to Update Websites, will introduce you to the basics of using Webflow Editor to update live websites directly without having to know how Webflow works. This will be key to helping clients or other non-technical stakeholders manage their own content.

To get the most out of this book

While having a basic understanding of HTML and CSS will only strengthen your ability to pick up Webflow, this book does not assume any prior knowledge of them. And since Webflow is entirely a cloud-based tool that auto-updates, you do not have to install any additional software to use it.

You should also have an internet connection and a desktop or laptop device with at least a 13-inch monitor. Furthermore, at the time of writing, Webflow is only supported in Chrome and Safari browsers.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Webflow-by-Example. If there's an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781801075398_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in the text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Click the button and select the image called AppStore.png."

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "Select the Showcase Wrapper element."

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you've read Webflow by Example, we'd love to hear your thoughts! Please visit https://www.amazon.in/review/create-review/error?asin=%3C1801075395%3E for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.

Section 1: Getting Started with Webflow

In this section, you will learn about the rise of the no-code movement, what sets Webflow apart from other website builders, and how to get started with a Webflow project. We'll cover all the fundamentals that will help set us up for success with Webflow.

We will cover the following chapters in this section:

Chapter 1, Why WebflowChapter 2, The Web in a NutshellChapter 3, Setting Up Your First Project

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 movementWhat sets Webflow apartWho will benefit from this book?

The No-Code movement

Ever since software has been built, there has been continued effort to make it simpler. Coding languages are being written in more readable English-like syntax. Frameworks and libraries are available to provide almost plug-and-play functionality to websites with minimal extra code; website builders from WordPress to Squarespace now power a vast amount of the web.

To be sure, there is much to celebrate about this. The barriers of entry when it comes to creation on the web have been lowered, meaning more people are able to make their creations available to the masses. Side projects, blogs, and businesses are built every day online, making the world more connected.

In the spirit of this continued effort to make the web ever more accessible, the last few years have seen a growing trend toward what is being popularly called the No-Code (or Low-Code) movement. The main mission is straightforward: enable anybody to build functional, production-grade websites and apps with little to no coding.

And the appeal of this should be obvious: while knowing how to code has long been considered critical for building on the web, a growing number of entrepreneurs, builders, and enthusiasts have been challenging this concept in recent years. Not only can you now build fully functional websites without ever needing to write a line of code, but new technologies such as Zapier, Integromat, and Parabola unlock further power by allowing no-code developers to integrate their various tools and products, effectively creating fully automated systems of workflows.

What would have taken a team of developers a fairly hefty budget and a good amount of time to design, build, publish, and productionize a website now can take a single non-technical person a mere weekend to do at a fraction of the cost. Indeed, in a 2019 research report, Gartner estimated that low-code or no-code technologies will be powering nearly 65% of all app creations within the next few years.

Tip

If you want to read the 2019 Gartner report, you can find it here: https://www.gartner.com/en/documents/3956079/magic-quadrant-for-enterprise-low-code-application-platf.

We are at an inflection point in the advent of modern technology. With the internet at peak penetration, smartphones more readily available than ever, no-code apps and resources being made available at affordable prices, and a resurgence in the maker culture, I believe we are poised to see an explosion in websites and apps being built by previously underrepresented swathes of the population. We'll not only see more people delivering business value and solving important problems, but we'll see a rise in better self-expression and hear unique voices through imaginative and bold web design.

And it is against this exciting backdrop that I'd like you to view the place of Webflow. Not only has Webflow earned a reputation for being reliable and highly performant in the web-builder space, its continued support of integrations into the broader no-code ecosystem has also positioned it as one of the most important tools in the modern no-coder—and web design/development– tool chest.

Let's take a closer look at why that's the case.

What sets Webflow apart?

As mentioned before, Webflow is not the only no-code web-builder available. Far from it. In fact, it appears that every month or so, a new no-code or low-code web-builder is announced. Such is the hype surrounding this era of democratized web design and development.

Squarespace and Wix remain major competitors, with the latter recently launching EditorX, a no-code web builder that was launched seemingly in direct response to Webflow. Furthermore, WordPress remains the most popular website builder and Content Management System (CMS), reportedly powering a third of the internet.

So, why should you consider Webflow?

In this section, I will list out some common concerns I've heard about Webflow and will provide my views on why you should reconsider them. At best, I hope you will agree that these concerns actually put Webflow in a better light and help it stand out from the crowd. At the very least, I hope you do not let these concerns stop you from exploring the wonderful world of Webflow.

Concern 1 – Is Webflow too difficult to learn?

Nearly everyone I know (including myself) who was first introduced to Webflow felt like the platform had too steep a learning curve. When you start a new project in Webflow, you are dropped directly into the builder interface, which may bear some resemblance to Photoshop. Faced with a number of options and selections, even those who may be familiar with the concepts of web design and development can feel a little overwhelmed, let alone those who are starting with no knowledge of the technologies. But stick with it, and you'll realize that the peculiar drag-and-drop nature of Webflow is inspired by web development best practices and will, in fact, give you an appreciation of how the underlying HTML and CSS technologies work. We'll dive more into this later.

Since its launch in 2013, Webflow has invested heavily in its educational resources; its Webflow University showcases a number of well-produced, step-by-step guides and lessons from the basics of web design through to using almost every feature of the builder.

But perhaps more importantly, over the years, a supportive community of Webflow users, designers, and developers have been sharing more and more material and how-tos, specifically targeted at newcomers to help them feel more at ease. In fact, this book is the product of my own enthusiasm for the tool motivating me to release it in the hope that it can help others climb over the initial ramp-up in learning how to build websites in Webflow. For some, the Webflow University courses can feel a little too quick, scattered, or tonally off. I hope this book fills the gap for you.

All that said, let it be clear that there is, indeed, a learning curve for Webflow. But like all things worth learning, I firmly believe that the learning curve is rewarding.

Crucially, take heart in knowing that a wonderful side effect of learning Webflow is that you will also learn the best practices of how modern websites are built. For me, this was a realization that took me by surprise. Even though I already had a fairly good grasp of the basics of HTML and CSS, there were a number of gaps in my knowledge of modern concepts around Flexbox, CSS Grid, layouts, interactions, and more. Webflow allowed me to put all this into practice and helped me address all these by applying them hands-on. As a professional UI/UX designer, I cannot overstate how tremendously this grew my overall confidence as a website builder. Moreover, it also fed back into my design process. And as any developer would attest, a designer who tempers their work in the realities of what is and isn't possible is a much stronger designer. It gave me the confidence and credibility to work more closely with developers and speak their language in my design practice, instilling much stronger collaboration.

Designer and Webflow developer Michael Riddering sums this up in his illuminating blog post when he says the following:

"With every website I create in Webflow I learn something new about HTML/CSS (and even JavaScript triggers to an extent). But the coolest part? I didn't even realize it most of the time! Because I was learning the Webflow editor, not how to actually write code or understand CSS syntax."

Tip

You can read the rest of Michael Riddering's take on how Webflow changed his design and development process here: https://www.michaelriddering.com/blog/the-tipping-point-in-my-career-as-a-product-designer.

Part of the reason why this is possible is that Webflow's opinionated take on how to design and build websites is almost always an up-to-date reflection of the state of modern web development best practices. For the curious or more technically inclined, this is evident by the source code Webflow automatically generates for everything that is designed in its editor. The source code is popularly viewed as the cleanest, most bloat-free code by any web builder of its kind. In fact, you can even choose to export all its generated code, transfer it to any hosting provider of your choice, and publish it successfully with hardly any hitches.

As such, while it is indeed true that Webflow will likely take you longer to master, it is my belief that the rewards are far greater than using other web builders; you will not only build solid, professional, flexible, and exciting websites, but you will also gain a much deeper understanding of what it takes to build for the modern web.

Concern 2 – Will Webflow scale well to larger projects?

This concern was more commonly raised during the early days of Webflow, and typically by those who were looking for web builders for more complex needs. Yes, it was positive and promising to see that the code it generated was remarkably readable and efficient, but could it support websites that needed tens, perhaps even hundreds, of pages?

Like any forward-thinking product, Webflow has put in significant effort to evolve with the times. The platform has matured and produced many success stories that demonstrate its capability of supporting large, moderately complex, production-grade websites. If you want to get an example of how large a website can get with Webflow, I invite you to visit its website, www.webflow.com. Nearly the entire site, including its Community pages and Help documentation, all of which contain likely hundreds of pages, is built in Webflow.

Furthermore, it is worth noting that if you're looking to build enterprise-grade websites that are fast, stable, secure, scalable, and supported by a rockstar team, Webflow offers a business plan that provides all that and more.

That said, in this book, we'll dive deep into some specific Webflow capabilities and features that will hopefully show you how practical and easy it can be to spin up and scale fully responsive and beautiful websites effortlessly with little to no code.

Concern 3 – What kinds of websites can I build with Webflow?

Webflow is sometimes thought to be largely suited to single-page marketing landing pages. And while this is definitely a use case that Webflow excels at, it is by no means limited to it.

As mentioned previously, Webflow's capabilities afford it the ability to rapidly build out large and moderately complex systems, including multi-page sites, news publication-style blogs, curated directories, highly interactive multi-media showcases, dashboards, and more.

And while, at the time of writing, Webflow does not have any native support for advanced capabilities such as user profile registrations and account management, the industrious No-Code community has built various add-ons and third-party services that can be integrated into Webflow sites to address this. With the proper setup, Webflow sites have even been used in creating user-driven, dynamic websites that collect information, save information, and display information depending on who is accessing it.

And if you really want to get fancy, look no further than the works of prolific Webflow developer and builder, Sarkis Buniatyan. His concepts are full-blown recreations of highly complex interfaces, such as the strategy game Civilization, and even Playstation 4's UI.

Figure 1.1 – Clone of Civilization VI by Sarkis Buniatyan

Tip

You can explore this project and many more by Buniatyan and his team on their Webflow Showcase page: https://webflow.com/Protocore.

If anything, this should excite you about the potential that Webflow has in your prototyping and development workflows. The limit really is your imagination!

While most of the preceding use cases are beyond the scope of this book, take heart in knowing that Webflow has been built for resilience and flexibility. The projects we will go through will arm you with enough about the fundamentals, some advanced concepts to get you up on steady and confident feet and will set you up to start taking Webflow in whichever direction you want.

Concern 4 – Is Webflow too expensive?

This one is unfortunately more difficult to address. Webflow is offered in a number of differently featured tiers or plans. In fact, the sheer number of ways a Webflow setup can be priced can be dizzying! Depending on what you're looking to achieve with Webflow, you could find yourself using it without paying a dime all the way up to paying a fairly hefty amount in any given year. In Chapter 3, Setting Up Your First Project, we'll be covering the Webflow plans in more detail, but for now, rest easy knowing that you should be able to cover a fair bit of ground in your leveling up of Webflow skills on the free plan, which we'll be using for the majority of this book.

But what if you're considering whether it makes economic sense as a tool for your freelance work, maybe? Or your personal projects? Or your small business? Would it be prohibitively costly?

Unfortunately, there's no easy answer to this except for it depends. What features and capabilities of Webflow do you need? Will you be looking to use its CMS? Will you be looking to create an e-commerce store? Will you rely on Webflow to host your site, or do you have your own hosting domain? Are you just looking to use it to prototype your ideas?

Most of all, it will come down to knowing your alternatives. Will you be able to achieve your goals by using a free WordPress template and simply pay for your hosting costs? Will you need to outsource the work to a third party? Will you generate enough income from your website to pay for its costs? Does this matter?

Ultimately, you know your goals and limitations the best. By listing them and knowing what you're looking to get out of a web builder solution, you can begin to compare whether it would be worth it for you to go with Webflow versus choosing any of its alternatives.

Deciding whether Webflow is right for you

So, now that we've covered some of the main questions and concerns about Webflow, how can you decide whether it is right for you? In general, if all the following criteria are important to you, Webflow is likely a great candidate to be your go-to web builder solution of choice:

You want fully responsive websites that are interactive and feel custom-made.You want to minimize or eliminate coding.You want the flexibility to change and update not only the content of websites, but also their layout, structure, and overall look and feel.You want to create functional prototypes of web designs.You care about generating clean and efficient markup code that you can export or further customize.You care about learning the best practices of modern web development.

On the other hand, if the following criteria are important to you, then you may be better off exploring other platforms:

You need only a single one-off website that likely won't need extensive custom styling. In this case, Webflow might be overkill and you may be better off considering a template from other web builders, such as Squarespace, Weebly, Wix, WordPress, or Carrd.You don't have the time or interest to customize web experiences.You want complex, scalable application capabilities such as Uber-like on-demand platforms, or video conferencing, or two-sided marketplaces. For these purposes, at the time of writing, you may want to consider other no-code builders such as Bubble or UI Bakery.

I will assume that by choosing to read further, you've expressed an interest to dive in and learn Webflow. Chances are also likely that you may have tried other resources. From its Webflow University to the many courses and videos that have been released by Webflow users around the world, there's no shortage of help!

So, where does this book fit in? Let's take a closer look.

Who will benefit from this book?

If you are like me, then you may have found a number of the available resources did not match your preferred style of learning. Perhaps the videos or courses were too long or too fast. Perhaps the delivery of the topics was not to your liking. Some may even be too prohibitively costly.

I will admit that my journey of learning Webflow had many false starts. I would excitedly start a new tutorial, jump into the Webflow builder, and after following along for a few lessons, I'd inevitably stop understanding what it was I was doing, which would stunt my learning and motivation to continue.

Ultimately, I feel the underlying reason behind those moments was that I was missing a key point or concept, without which I was unable to understand how the platform was working. For me, this was the difference between simply following instructions blindly and truly learning the underlying principles. After many trials and errors, I managed to break through these impasses and unlock the power of Webflow, and I've not looked back.

And now I want to