This Hatch tutorial walks through the process of putting floating animations on a webpage. We’ll make our objects float up and down in the page as if they were suspended in the air. And we’ll do it with an easy, no-code approach! Just follow these instructions and watch your page come to life! To begin…
Category: Tutorial
Use a page click to change an object’s behavior
In this walkthrough, we’ll explore how to change any object on your Hatch page, triggered by a click. By adding interactions to a page element, we can assign all kinds of behaviors to it. Click to change a color or size, make an object appear or disappear. The best part? You can set up a…
10 free web widgets to embed in your Hatch page
There are heaps of pre-built HTML and iFrame widgets you can add to your webpage or personal apps to enhance the design and functionality. Many of these widgets even have style customizations. Consider the interactivity you could add to your app with customizable widgets like weather, world clocks, countdown timers, calendars, 3D models, maps, calculators, social feeds, product catalogs, customer…
Make a hand-drawn webpage
With our new Draw feature available in the Hatch editor, you can create hand-drawn stickers and gifs, or make illustrated games and interactive stories. In this walkthrough, we’ll use Draw to make a hand-drawn webpage and get you started with this new tool. Drawing on the Hatch canvas Our landing page features a street down…
How to make a personal app with custom widgets
We love web apps here at Hatch because they are fun and fast to get up and running. It’s easy to make a personal app in Hatch and have it “installable,” appearing like other apps on your device, including a one-tap icon that launches the experience. Anyone using your web app will always already be…
How to add gravity effects to a webpage with no-code physics
Make any element on your webpage bounce, fall, float, and bump around without knowing how to code. In Hatch, it’s easy to add gravity effects to a webpage using our physics properties. In another tutorial we worked with a physics-based template by copying the core functionality. This tutorial will walk through how the physics properties…
How to customize an embedded Google Form
Google Forms are a helpful tool to gather data for event RSVPs, quizzes, sign ups and much more. In this tutorial, we’ll show you how to customize and style an embedded Google Form in your Hatch page. If you want to start from scratch, you can follow the directions immediately below. Alternatively, to get a…
How to remix a Hatch template: from infographic to storefront
In this tutorial we’ll walk through how to modify our infographic template. Using our remix function we can make some edits and create a new landing page for a cafe. We’ll also cover how to use multiple pages in one Hatch site. Remix a Hatch template for all sorts of projects, from menus to maps…
How to remix a Hatch webpage: from storybook to outer space
In this tutorial we’ll remix a Hatch webpage to get a quick start on webpage functionality. We can use the remix function to check out how an existing Hatch webpage works. Then we can change the elements that make up the page to create our own unique site. This is the site we’ll be remixing….
How to connect a custom domain name to your Hatch site
How to connect a custom domain name to your site