2 minutes

How to Create Flat Styled Combo Box with Square UI (Part 1)

12 Comments

How to Create Flat Styled Combo Box with Square UI (Part 1)

Starting with a free version of a popular Designmodo user interface kit and free fonts, you can make a great looking and functioning combo box that is ready to use.

In this video, developer David East uses Square UI and Adobe Photoshop to create a combo box in the flat design style. He explains each of the components and HTML elements needed to create a simple and stunning box that falls in line with the flat design trend. As a bonus, East quickly explains how to use the free fonts available from Google Fonts (a great lesson if you have never used this valuable tool).

This step-by-step tutorial is easy to follow and you can watch it while working on your own combo box. After you complete this tutorial, make sure to check out Part 2: How to Make a Flat Styled jQuery UI Combo Box Widget.

What you will learn in this tutorial: Create a combo box from start to finish in Photoshop and make it available for use on your website using HTML and CSS.

Video run time: 18 minutes

Skill level: Basic to intermediate coding and knowledge of development tools, including jQuery, is recommended. Users will also need a working knowledge of Adobe Photoshop.

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

Download Source Code

Download

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

Animated Presentations Made Easy

Learn more All Products
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree