Webflow by Example

Ali Rushdan Tariq

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781801071772
• Edition: 1
• Topic: Diseño
• Subtopic: Diseño web

Build modern responsive websites without writing code by making the most of the power and flexibility of WebflowKey Features• Get to grips with Webflow to build and launch responsive websites from scratch• Learn how to put Webflow into practice and take advantage of its power and flexibility• Build your own modern responsive websites from scratch and without any codeBook DescriptionWebflow 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.What you will learn• Build and customize websites without any code• Understand how to approach designing and developing for the modern web• Become familiar with the main functionalities of Webflow• Follow best practices for Webflow development while working on a practical project, from its design to launch• Harness the power of the Webflow CMS to create dynamic content• Add modern flourishes to a website using pre-defined and custom animations and interactionsWho this book is forIf you're an entrepreneur, web designer, or anyone with little web development knowledge, this book will help you learn how to build fully responsive websites and web prototypes without writing a single line of code. If you're a web designer, this book will make you a more informed web developer. If you're already a developer, this book will help you become a better web designer.

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 Webflow
• Chapter 2, The Web in a Nutshell
• Chapter 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 movement
• What sets Webflow apart
• Who 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,...