2 minutes

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

56 Comments

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.

Video run time: 27 minutes

Part 1

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website

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.

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—follow him on twitter: @_davideast.

Posts by David East
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree