Articles tagged as ‘Tutorials’

How to Set Up Simple E-Commerce with DPD

E-commerce is obviously an enormous industry. But major players like Amazon and Wal-Mart aren’t the only ones who can make money by selling products through their websites. Many bloggers and website owners are interested in using e-commerce on a much smaller scale to sell their own products. But the technical details of setting up an e-commerce website trip up a lot of people who would like to sell products from their site.

Perhaps you already have a blog or a website and you’re not looking to create an entirely new website on an e-commerce platform. You’d rather be able to just sell some products in a simple way from your existing site. Several years ago most site owners who wanted a simple e-commerce solution were pretty much limited to using PayPal’s buy now buttons, which could get the job done, but lacked many important features, most notably automatic delivery of digital products.

In recent years a number of e-commerce systems have been developed specifially to make it quick and easy to start selling products from your existing website or blog. Many of these systems have been designed primarilly for digital products, but most can also support sales of tangible products as well. E-Junkie is probably the most well-known options, but today I want to cover another option that I think is a great fit for those who want to get started with selling their own products from a website or blog. DPD (short for Digital Product Delivery) is a simple, affordable option that also offers some impressive features. In this article I’ll go through the process of getting started with DPD and setting up your first product. I’ll also cover many of the additional features that make DPD a great choice.

DPD

Read More ».

Free Resources for Creating a Flat Design

Flat designs are taking over quite quickly it seems. I doubt anyone could argue against it being the latest and greatest for (fairly) new trends on the web, in mobile devices, and even in print. The simple description for a flat style of design is one that lacks 3D effects, such as bevels or drop shadows.

The stylistic details of a flat design can vary somewhat, just as with most design styles. Usually, though, a flat design is quite minimalist with primary-ish colors and lots of “white space”. The font is usually thin without too much flare. Boxes and buttons are, of course, without strokes or 3D effects. Some flat designs do contain shadows, but these are usually flat-ish as well.

Whether you are new to flat design or simply need some fresh, new resources for your next project, most should be able to find a few items below to help. The list below is divided into 5 categories: UI kits, icons, templates, WordPress themes, and tutorials. The best part? All are free. The ones that specifically mention “free for commercial use” are noted as well. Have fun browsing and be sure to let us know of any other amazingly free flat resources.

UI Kits

A UI kit is a user interface collection that comes with all the parts and pieces you need to design your own website. Usually they are PSD but sometimes will come with other components as well. While you can use the color scheme in the file, you can create your own color scheme. They also come with patterns, brushes, and much more. Hence, UI kits save a web designer a lot of time, improving workflow and decreasing time spent on projects.

DesignModo Flat UI

Read More ».

Generating an Automatic Table of Contents from an InDesign Template

Once you get the hang of it, the Table of Contents generator in Adobe InDesign is a breeze to use, and if you’re using an InDesign template, most of the work is already done for you, making your job flow that much easier and faster.

Here’s why:

InDesign’s Table of Contents generator works with Character Styles and Paragraph Styles to generate a Table of Contents. The generator searches your document for Styles of various titles, subtitles, headings, and subheadings, as specified by you, the user, and generates a Table of Contents based on these Styles, along with certain formatting options that you choose from the generator dialogue.

Your InDesign template most likely comes with a handful of Styles predefined, and you can make new ones easily by formatting your text with the Character and Paragraph palettes, highlighting your text, and choosing New Paragraph Style from the dropdown menu in the upper right hand corner of the Paragraph Styles palette. Be sure to name your new Style by double clicking it in the palette’s list and entering a name that you can remember.

Text styles are pre-defined

Read More ».

Create a Sidebar that Sticks Within an Element

You’ve probably seen this trick used before with social icons or a sidebar that sticks to the top of your screen as you scroll down the page.

The problem is that often they don’t stop scrolling and up either disappearing behind another element or overlapping something they shouldn’t, which looks cheap and unprofessional.

In this tutorial we’ll create a ‘sticky element’ that only scrolls until the maximum height of it’s parent element which will prevent that unsightly overflow.

Let’s start with a very basic html structure:

Read More ».

How To Code Unique Avatar Photo Styles with CSS3

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

How To Code Unique Avatar Photo Styles with CSS3

Read More ».

Displaying JavaScript Modal Windows using Bootstrap

It is true that Bootstrap has grown to include supporters from all around the globe. As there are plans for a Bootstrap 3 release I want to go into detail for one topic in particular. The Bootstrap JavaScript effects are not always useful to developers, so JS files are not necessary for running the whole framework. But they do provide quicker features to define common UI elements without having to reinvent the wheel.

I want to focus this tutorial on using modal windows within a typical webpage. We just need to include two files out of the Bootstrap framework. And the JS codes are not overly complicated to understand. My example demo allows users to dynamically update the background color, so this does admittedly have some more sample JS then you will need. But it is an excellent introduction to adding these brief components into any ordinary website.

Displaying JavaScript Modal Windows using Bootstrap

Read More ».

Build a Single-Page Sliding Navigation Bar with jQuery

Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.

In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements. Additionally the layout is standards compliant with HTML5 and CSS3 specs and the nav will still load properly in browsers where JavaScript is disabled. If you want to catch a glimpse of the final product we are building check out my demo page below.

Build a Single-Page Sliding Navigation Bar with jQuery

Read More ».

How To Build a Fullscreen Background Video Player

After looking over countless jQuery plugins I have seen a lot of new HTML5 video techniques. The audio and video elements have created a new method of publishing digital media, streaming off a web server. But developers have been hard at work customizing these features to be used within advanced layouts.

In this tutorial I want to look at using big video backgrounds within typical website layouts. I’ve chosen the jQuery plugin BigVideo.js which includes a list of resources in the documentation. We can setup genuine HTML5 videos streaming as backgrounds behind the main page content. It is not an easy setup, but I’ll provide a clear step-by-step process to follow along.

How To Build a Fullscreen Background Video Player

Read More ».

How To Code a Vertical Accordion Nav Menu with jQuery

Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.

In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.

How To Code a Vertical Accordion Nav Menu with jQuery

Read More ».

CSS3 Image Gallery with Dynamic Caption Text

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting.

For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects. Also I have been working with a number of CSS3-specific properties on this tutorial alone. It leaves room for interpretation if you wanted to implement a JavaScript frontend animation using CSS3 as a fallback.

CSS3 Image Gallery with Dynamic Caption Text

Read More ».
Page 1 of 512345