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.