Webflow by Example: Design, build, and publish modern websites without writing code

Description

Build modern responsive websites without writing code by making the most of the power and flexibility of Webflow Key FeaturesGet to grips with Webflow to build and launch responsive websites from scratchLearn how to put Webflow into practice and take advantage of its power and flexibilityBuild your own modern responsive websites from scratch and without any codeBook 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 learnBuild and customize websites without any codeUnderstand how to approach designing and developing for the modern webBecome familiar with the main functionalities of WebflowFollow best practices for Webflow development while working on a practical project, from its design to launchHarness the power of the Webflow CMS to create dynamic contentAdd modern flourishes to a website using pre-defined and custom animations and interactionsWho 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 ContentsWhy Webflow?The Web in a NutshellSetting Up Your First ProjectBuilding above the FoldBuilding the Rest of the BodyMaking It ResponsiveIntroduction to Interactions and AnimationsAdvanced InteractionsGetting Started with Webflow CMSCreating Your First CMS ProjectCreating Collection PagesManaging CMS ProjectsPublishing Projects to the WebUsing Webflow Editor to Update Websites Cover Title page Copyright and Credits Dedications Contributors Table of Contents Preface 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 About Packt Other Books You May Enjoy Index