How to Make a Single Page Responsive Website with Flat UI Pro

• 2 minutes READ

How to Make a Single Page Responsive Website with Flat UI Pro (Part 1)

David East takes you step-by-step through the process of creating a simple website using Designmodo’s Flat UI Pro framework.

In this video tutorial, you will learn to create a simple, single-page responsive website using components from Flat UI Pro.

East takes you through the process of using the kit and customization to create a website from start to finish, from creating simple navigation to adding specific fonts, colors and images. As an added bonus, this kit works with the Twitter Bootstrap framework, making it fully responsive. The tutorial will help you build the site, fix any issues that pop up between screen sizes and publish.

While you do need some knowledge of coding and web design basics, this tutorial is easy to follow and can have you on the way to building a great website in a matter of minutes!

What you will learn in this tutorial: How to create a single-page website using Flat U Pro. The video is designed to help small business owners create a company website, but the tools showcased can be used to create a variety of different types of websites.

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

Video run time: 27 minutes

Part 1

Now that you have the tools to create a single page website, David East helps you add animation to the site using tools from Designmodo’s Flat UI Pro kit.

In this video tutorial, you will learn to create simple animations.

East first shows you how to code simple text animations in CSS3 for an already-built website and explains how to write the animation code so that it views properly on different devices. (Note that the animation technique taught here does not work for iOS devices.)

East then takes you through how to create a simple hover animation effect in a matter of minutes, showing you how to stretch, spin or shake an element.

The animation technique used by East in this video is simple and looks professional, making it a tool that will work for a variety of projects.

While you do need some knowledge of coding and web design basics, this tutorial is easy to follow, making the addition of animation to a website easier than you might think.

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

What you will learn in this tutorial: How to create simple animation using CSS3. This video is best viewed after the tutorial How to Make a Single Page Responsive Website with Flat UI Pro.

Video run time: 12 minutes

Part 2

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles.

Posts by David East