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?

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.

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.

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 share my lessons with you, dear reader. This book is the resource I wish I had had when I first started my journey. It not only will help you build and publish a handful of useful websites that you can show off in a portfolio, but you will also understand why things are built that way. If you've ever been curious to understand modern web development concepts but were always too intimidated or overwhelmed by code, then this book will hopefully help bridge all those gaps together.

We'll start simple and slowly build layers of complexity on top. Like doing reps in the gym, we'll repeat a number of the concepts so they are reinforced, and your web design/development muscles are growing. Everything will be practical and rooted in real examples. Where appropriate, we'll introduce relevant web development concepts that will help you understand the magic behind how Webflow is working.

If you're a designer, it will make you think like a web developer. If you're already a web developer, it can help you experiment with designs in a quick and visual manner. And if you're neither, Webflow will at best introduce you to the possibility of being a professional designer/developer and, at the very least, provide you with enviable skills in creating customized websites for your personal needs.

And not only will we build functional websites, but we'll also put the fun back into functional as well.

In this chapter, we took a high-level look at what Webflow is as a technology and the larger context in which it finds itself. Specifically, we took a brief look at the history of web design and development, leading up to today's No-Code movement.

We then explored and addressed some of the most common concerns about Webflow. Through this, we peeled back some of the layers of the capabilities and limitations of Webflow, and hopefully made a strong case for how and why Webflow can factor into your modern web design and development process.

We also broke down how you can decide whether Webflow is right for you. You know your goals the best, but if designing and building performant websites efficiently is on your agenda, then Webflow should be a serious consideration!

And finally, we looked at how this book is positioned to help you on your journey to learning and putting Webflow to use. Through practical examples, supported by just enough theory that shines a light on key web development principles, you'll develop the appreciation and confidence that Webflow can bring into your workflow.

In the next chapter, we will be spending a little time developing some foundational knowledge that is crucial to succeeding in Webflow. Specifically, we will take a concise, no-nonsense look at some core concepts that govern the entire web—the box model and HTML/CSS. And in the book's intended fashion, these concepts will be repeated and reinforced throughout the book.

And even if you're familiar with these concepts, scanning through the next chapter can act like a good refresher that level-sets us before we dive into the nitty-gritty of Webflow. I hope you're as excited as I am to dive in!