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

Summary

In this chapter, we developed the portion of a website that is commonly known as Above the Fold, which is the portion that is visible before you scroll the page. We used our design mockups as a valuable reference that guided us in our development. In the process, we covered a lot of important concepts, some of which may have been completely new to you.

We took a look at how we can plan our development by thinking about how to break up our preexisting designs (if available) into boxes of content. Then, we split up the page into two main sections, the navigation menu and the Hero section, starting with the latter.

We explored how to add elements from containers to background images and links. We learned how to style them, add classes to them, and how to lay them out.

We saw the difference between static positioning, relative positioning, and absolute positioning. We then turned our attention to the navigation menu, starting with our breakdown of how to lay out the content...