Webflow by Example: Design, build, and publish modern websites without writing code
- Length: 356 pages
- Edition: 1
- Language: English
- Publisher: Packt Publishing
- Publication Date: 2021-12-31
- ISBN-10: 1801075395
- ISBN-13: 9781801075398
- Sales Rank: #982194 (See Top 100 Books)
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
- Why Webflow?
- The Web in a Nutshell
- Setting Up Your First Project
- Building above the Fold
- Building the Rest of the Body
- Making It Responsive
- Introduction to Interactions and Animations
- Advanced Interactions
- Getting Started with Webflow CMS
- Creating Your First CMS Project
- Creating Collection Pages
- Managing CMS Projects
- Publishing Projects to the Web
- Using Webflow Editor to Update Websites
Webflow by Example Contributors About the author About the reviewers 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 Section 1: Getting Started with Webflow Chapter 1: Why Webflow The No-Code movement What sets Webflow apart? Concern 1 – Is Webflow too difficult to learn? Concern 2 – Will Webflow scale well to larger projects? Concern 3 – What kinds of websites can I build with Webflow? Concern 4 – Is Webflow too expensive? Deciding whether Webflow is right for you Who will benefit from this book? Summary Chapter 2: The Web in a Nutshell The box model Boxes in boxes Implications for designers The anatomy of a box The basics of HTML and CSS HTML CSS Summary Chapter 3: Setting Up Your First Project Technical requirements Project overview Getting set up in Webflow Understanding Webflow's priced plans Signing up for Webflow Setting up your project Orienting yourself to the Webflow Designer UI Summary Section 2: Building a Mobile Responsive Landing Page with Webflow Chapter 4: Building Above the Fold Technical requirements Setting up the Body Building the Hero section Adding the background image Adding the copy text Adding Call to Action buttons Adding showcase images Adding the navigation menu Making it responsive Tablet breakpoint Mobile Landscape breakpoint Mobile Portrait breakpoint Large screen size breakpoint Summary Chapter 5: Building the Rest of the Body Technical requirements Adding the How it Works section The Main features section Creating the grid Adding elements to the grid Adding the final CTA section Adding the footer section Summary Chapter 6: Making It Responsive Making the How it Works section responsive Large screen sizes Tablet screens Mobile screens Making the Main Features section responsive Tablet screens Mobile screens Making the CTA section responsive Tablet screens Mobile screens Making the footer responsive Tablet screens Mobile screens Summary Chapter 7: Introduction to Interactions and Animations The basics Animating transitions on hover Simple element-triggered animations Creating custom page scroll interactions Summary Chapter 8: Advanced Interactions Building a parallax effect Animating the menu on scroll Creating a custom floating button Creating the interaction Adding the interaction Displaying text on the floating button Summary Section 3: Building a Dynamic Website with Webflow CMS Chapter 9: Getting Started with Webflow CMS What is a CMS? Why Webflow CMS? Webflow CMS – the basics Project overview Technical requirements Planning the CMS structure Summary Chapter 10: Creating Your First CMS Project Technical requirements Creating a CMS project Creating a Collection Adding content to a Collection Designing a CMS home page Importing mass content Finishing touches Summary Chapter 11: Creating Collection Pages Project overview Building the Library Collection Page Building the Main section of the Library page Building the other libraries section Putting the finishing touches to the home page Summary Chapter 12: Managing CMS Projects Managing Collection Page settings Making Collection Pages SEO-friendly Making Collection Pages ready for social media Setting up an RSS feed for a Collection Page Updating Collections Updating data in Collection fields Updating the structure of fields Managing Collection item states Summary Section 4: Additional Topics Chapter 13: Publishing Projects on the Web Publishing a Webflow project Configuring the project settings Publishing the project Exporting project code Showcasing a project Summary Chapter 14: Using Webflow Editor to Update Websites Using Webflow Editor to update a website Using the Editor to configure page settings Editing a live page Summary Why subscribe? Other Books You May Enjoy Packt is searching for authors like you Share Your Thoughts
Donate to keep this site alive
How to download source code?
1. Go to: https://github.com/PacktPublishing
2. In the Find a repository… box, search the book title: Webflow by Example: Design, build, and publish modern websites without writing code
, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.