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.

Related Content you might be interested in

Current Title:

Small book image
Webflow by Example
Ali Rushdan Tariq
Dec, 2021 | 356 pages
Small book image
Practical Web Design
Philippe Hong
Apr, 2018 | 368 pages
Small book image
Mastering CSS Grid
Pascal Thormeier
Jun, 2023 | 330 pages
Small book image
Responsive Web Design by Example
Frahaan Hussain
Dec, 2017 | 292 pages
Table of Contents (20 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Section 1: Getting Started with Webflow
Section 1: Getting Started with Webflow
Free Chapter
2
Chapter 1: Why Webflow
Chapter 1: Why Webflow
The No-Code movement
What sets Webflow apart?
Who will benefit from this book?
Summary
3
Chapter 2: The Web in a Nutshell
Chapter 2: The Web in a Nutshell
The box model
The basics of HTML and CSS
Summary
4
Chapter 3: Setting Up Your First Project
Chapter 3: Setting Up Your First Project
Technical requirements
Project overview
Getting set up in Webflow
Orienting yourself to the Webflow Designer UI
Summary
5
Section 2: Building a Mobile Responsive Landing Page with Webflow
Section 2: Building a Mobile Responsive Landing Page with Webflow
6
Chapter 4: Building Above the Fold
Chapter 4: Building Above the Fold
Technical requirements
Setting up the Body
Building the Hero section
Adding the navigation menu
Making it responsive
Summary
7
Chapter 5: Building the Rest of the Body
Chapter 5: Building the Rest of the Body
Technical requirements
Adding the How it Works section
The Main features section
Adding the final CTA section
Adding the footer section
Summary
8
Chapter 6: Making It Responsive
Chapter 6: Making It Responsive
Making the How it Works section responsive
Making the Main Features section responsive
Making the CTA section responsive
Making the footer responsive
Summary
9
Chapter 7: Introduction to Interactions and Animations
Chapter 7: Introduction to Interactions and Animations
The basics
Animating transitions on hover
Simple element-triggered animations
Creating custom page scroll interactions
Summary
10
Chapter 8: Advanced Interactions
Chapter 8: Advanced Interactions
Building a parallax effect
Animating the menu on scroll
Creating a custom floating button
Summary
11
Section 3: Building a Dynamic Website with Webflow CMS
Section 3: Building a Dynamic Website with Webflow CMS
12
Chapter 9: Getting Started with Webflow CMS
Chapter 9: Getting Started with Webflow CMS
What is a CMS?
Webflow CMS – the basics
Project overview
Technical requirements
Planning the CMS structure
Summary
13
Chapter 10: Creating Your First CMS Project
Chapter 10: Creating Your First CMS Project
Technical requirements
Creating a CMS project
Designing a CMS home page
Importing mass content
Finishing touches
Summary
14
Chapter 11: Creating Collection Pages
Chapter 11: Creating Collection Pages
Project overview
Building the Library Collection Page
Putting the finishing touches to the home page
Summary
15
Chapter 12: Managing CMS Projects
Chapter 12: Managing CMS Projects
Managing Collection Page settings
Updating Collections
Managing Collection item states
Summary
16
Section 4: Additional Topics
Section 4: Additional Topics
17
Chapter 13: Publishing Projects on the Web
Chapter 13: Publishing Projects on the Web
Publishing a Webflow project
Showcasing a project
Summary
18
Chapter 14: Using Webflow Editor to Update Websites
Chapter 14: Using Webflow Editor to Update Websites
Using Webflow Editor to update a website
Summary
Why subscribe?
19
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts

Making the CTA section responsive

If you switch back to the base breakpoint and scroll down to the Final CTA element, you'll recall that the section contained an image that was laid out using relative positioning and placed alongside some CTA texts and download buttons.

We'll explore how we may be able to adapt this section to smaller screens. We'll also leave it to you to explore adjustments you can make to the large-screen breakpoint.

Let's begin by switching over to Tablet mode.

Tablet screens

Let's begin making this section responsive on tablet screens:

  1. Switch to the Tablet view and scroll down to the Final CTA section. At the breakpoint of 768px, the section should resemble Figure 6.28:

    Figure 6.28 – The final CTA section on tablet screens

  2. Select the Left element. Change its Top Padding property to 24px.
  3. Next, select the H2 Heading element and change its font size to 24px. Also, change its Height property to 1.2-. Recall...
Previous Section
End of Section 4
Next Section