Webflow by Example

Webflow by Example

by Ali Rushdan Tariq
Released December 2021
Publisher(s): Packt Publishing
ISBN: 9781801075398

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build modern responsive websites without writing code by making the most of the power and flexibility of Webflow

Key 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 code

Book Description

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.

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 interactions

Who this book is for

If 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.

Table of contents

  1. Webflow by Example
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  6. Section 1: Getting Started with Webflow
  7. Chapter 1: Why Webflow
    1. The No-Code movement
    2. What sets Webflow apart?
      1. Concern 1 – Is Webflow too difficult to learn?
      2. Concern 2 – Will Webflow scale well to larger projects?
      3. Concern 3 – What kinds of websites can I build with Webflow?
      4. Concern 4 – Is Webflow too expensive?
      5. Deciding whether Webflow is right for you
    3. Who will benefit from this book?
    4. Summary
  8. Chapter 2: The Web in a Nutshell
    1. The box model
      1. Boxes in boxes
      2. Implications for designers
      3. The anatomy of a box
    2. The basics of HTML and CSS
      1. HTML
      2. CSS
    3. Summary
  9. Chapter 3: Setting Up Your First Project
    1. Technical requirements
    2. Project overview
    3. Getting set up in Webflow
      1. Understanding Webflow's priced plans
      2. Signing up for Webflow
      3. Setting up your project
    4. Orienting yourself to the Webflow Designer UI
    5. Summary
  10. Section 2: Building a Mobile Responsive Landing Page with Webflow
  11. Chapter 4: Building Above the Fold
    1. Technical requirements
    2. Setting up the Body
    3. Building the Hero section
      1. Adding the background image
      2. Adding the copy text
      3. Adding Call to Action buttons
      4. Adding showcase images
    4. Adding the navigation menu
    5. Making it responsive
      1. Tablet breakpoint
      2. Mobile Landscape breakpoint
      3. Mobile Portrait breakpoint
      4. Large screen size breakpoint
    6. Summary
  12. Chapter 5: Building the Rest of the Body
    1. Technical requirements
    2. Adding the How it Works section
    3. The Main features section
      1. Creating the grid
      2. Adding elements to the grid
    4. Adding the final CTA section
    5. Adding the footer section
    6. Summary
  13. Chapter 6: Making It Responsive
    1. Making the How it Works section responsive
      1. Large screen sizes
      2. Tablet screens
      3. Mobile screens
    2. Making the Main Features section responsive
      1. Tablet screens
      2. Mobile screens
    3. Making the CTA section responsive
      1. Tablet screens
      2. Mobile screens
    4. Making the footer responsive
      1. Tablet screens
      2. Mobile screens
    5. Summary
  14. Chapter 7: Introduction to Interactions and Animations
    1. The basics
    2. Animating transitions on hover
    3. Simple element-triggered animations
    4. Creating custom page scroll interactions
    5. Summary
  15. Chapter 8: Advanced Interactions
    1. Building a parallax effect
    2. Animating the menu on scroll
    3. Creating a custom floating button
      1. Creating the interaction
      2. Adding the interaction
      3. Displaying text on the floating button
    4. Summary
  16. Section 3: Building a Dynamic Website with Webflow CMS
  17. Chapter 9: Getting Started with Webflow CMS
    1. What is a CMS?
      1. Why Webflow CMS?
    2. Webflow CMS – the basics
    3. Project overview
    4. Technical requirements
    5. Planning the CMS structure
    6. Summary
  18. Chapter 10: Creating Your First CMS Project
    1. Technical requirements
    2. Creating a CMS project
      1. Creating a Collection
      2. Adding content to a Collection
    3. Designing a CMS home page
    4. Importing mass content
    5. Finishing touches
    6. Summary
  19. Chapter 11: Creating Collection Pages
    1. Project overview
    2. Building the Library Collection Page
      1. Building the Main section of the Library page
      2. Building the other libraries section
    3. Putting the finishing touches to the home page
    4. Summary
  20. Chapter 12: Managing CMS Projects
    1. Managing Collection Page settings
      1. Making Collection Pages SEO-friendly
      2. Making Collection Pages ready for social media
      3. Setting up an RSS feed for a Collection Page
    2. Updating Collections
      1. Updating data in Collection fields
      2. Updating the structure of fields
    3. Managing Collection item states
    4. Summary
  21. Section 4: Additional Topics
  22. Chapter 13: Publishing Projects on the Web
    1. Publishing a Webflow project
      1. Configuring the project settings
      2. Publishing the project
      3. Exporting project code
    2. Showcasing a project
    3. Summary
  23. Chapter 14: Using Webflow Editor to Update Websites
    1. Using Webflow Editor to update a website
      1. Using the Editor to configure page settings
      2. Editing a live page
    2. Summary
    3. Why subscribe?
  24. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts

Product information

  • Title: Webflow by Example
  • Author(s): Ali Rushdan Tariq
  • Release date: December 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801075398