UI Design
Tutorials for stunning user interface design. Yes, stunning.
Bigger HTML Checkboxes with Font Awesome and CSS
How the heck do you make HTML checkboxes bigger???
Responsive Slideshow Example with jQuery Cycle2
This tutorial offers a responsive slideshow using the jQuery Cycle2 plugin and some custom CSS. Slideshows are great for “hero” sections and many other use cases in web design. As…
Responsive Mobile Menu with CSS and jQuery
It’s time to get responsive, folks! Here’s the mobile menu you’ve been waiting for… Ok, that might have been a little aggressive… but in all seriousness this is a responsive…
Bootstrap Modal Login for WordPress Websites
Modal logins are a popular choice for any website login since they provide easy login access from any page or post. Today we’re going to build a login modal for…
CSS Image Zooming Grid
Time to get your CSS zoom on! Have you ever found an awesome site that uses some sort of grid to display images? Better yet, when you hover over those…
Bootstrap Multi-column Dropdown Menu
Bootstrap comes with a great drop down menu out of the box, but sometimes you just need more. In this tutorial I’m going to show you how to extend the…
jQuery Horizontal Slideout Menu
Today we’re going to build a smooth horizontal slideout menu using jQuery, CSS, and HTML. This type of menu is great for mobile/tablet navigation menus, filtering options, GUI features, and…
Responsive jQuery Accordions
Today we’re going to code some responsive jQuery accordions. Accordions are an extremely popular UI element on most websites and applications, especially for content rich sites. However, most accordions require…
Responsive Image Grids Using CSS
Today we’re going to build a responsive image grid using CSS. No fancy dancy JavaScript or frameworks needed, just good ‘ole HTML and CSS. Image grids are used all over…
Responsive Page Scrolling with jQuery and Bootstrap
Today we’re going to build a responsive scrolling webpage using jQuery and Twitter Bootstrap. This sort of page is very popular for simpler websites that don’t need deep navigation and/or…
jQuery Image Tabs with Captions
In this tutorial we’ll be building an image tab widget using HTML, CSS, and jQuery. This type of widget can be useful for home page hero elements, product features, main…
jQuery Image Hover Captions
Today we’re going to build some simple jQuery image hover captions. These types of captions work very well in a variety of grid formats – portfolio work, feature boxes, blog…
jQuery Slide Down Menu
Have you ever wanted to build a slick slide down menu for categories or groups? Well today’s your lucky day! This tutorial will show you how to do just that,…
CSS Transparent Drop Down Menu
Today we’re going to build a transparent drop down menu using CSS and HTML. Drop down menus are very popular for websites with deeper navigation. They improve usability by allowing…