Simple Google News Parser in PHP

Requirements: HTML (basic understanding), PHP (basic understanding)

Ever needed to put an automatically updating Google News feed for a specific topic on your website? This simple PHP script parses the Google News RSS feed and displays it in a customizable layout.

Want to see how it works? Click here for a demo.
(more…)

April 20, 2013 at 2:05 am | Posted in: Tutorials, Web Design | No comments

Simple yet effective animated photo gallery in CSS and JavaScript

Requirements: HTML (basic understanding), JavaScript (very basic understanding), CSS (basic understanding)

Whether you’re creating a photography website or a personal webpage, there are many uses for a sliding gallery. I’m going to show you an extremely simple way to make a beautiful navigable gallery with animated slides, automatic timing, and little load time. It’s super easy to use, customize, and expand!

Click here to see a demo!
(more…)

April 6, 2013 at 2:14 am | Posted in: Tutorials, Web Design | No comments

Easily Add a Windows 8 Charm-Style Sidebar to Your Website

Requirements: HTML (basic understanding), CSS (basic understanding)

With Microsoft’s movement to the Metro interface, Windows 8 has gotten a beautiful new look. The simple, clean look of Metro drives the focus to the content as opposed to the UI.

One of the cool new features of Windows 8 is the “Charm” sidebar, which is basically a context-sensitive sidebar with buttons for things such as settings, devices, and other useful stuff. It’s unobtrusive, yet very practical and attractive.

Today, I’m going to show you how to add a simple Charm-style bar to your website. This technique is easy to implement and shouldn’t mess around with any of the other elements on your page.
(more…)

July 12, 2012 at 11:54 pm | Posted in: Tutorials, Web Design | 3 comments

Eliminating tables: a tutorial on XHTML-compliant divs with CSS for people who are used to table-based website layouts

Requirements: HTML (basic understanding), JavaScript (basic understanding), CSS (basic understanding)

What is a table?

If you’ve been making HTML sites for a while, you should be familiar with the concept of tables. Tables are a method of displaying content in a row-by-column fashion. Tables were developed initially to display data in, well, a table form. They soon, however, became a popular method of laying out websites. Web developers would cut up their websites into rows and columns and, using a combination background images and other styling techniques, generate a website layout. Although this technique technically works fine, using tables for your web layout leads to many problems. The problem is, many web developers are too addicted or too used to using tables and they therefore find it hard to stop using them. . Don’t get me wrong – tables are still good for displaying data! The problem is that they are terrible for website layouts. Therefore, I am going to teach you how to replace tables with divs and CSS.

(more…)

June 17, 2012 at 4:20 pm | Posted in: Tutorials, Web Design | 1 comment

Quick and Easy Super-Customizable Tabbed Content in JavaScript and CSS

Requirements: HTML (basic understanding), JavaScript (basic understanding), CSS (basic understanding)

Updated April 08, 2013: New method, less dirty, easier to add tabs!

As a web designer, I’ve found many uses for tabbed content. However, all the online tutorials are all referencing external JavaScript files, or images, or you can’€™t play around with the layout without screwing up your entire page layout, or ARRRRGH I hate them!

So I devised an incredibly simple and versatile method to build a simple tabbed layout. You can customize it in any way you want, add or remove pages, change sizes, do whatever you want with it! You can make your “buttons”€ go anywhere on the page, same as your content.

(more…)

March 15, 2012 at 4:50 pm | Posted in: Tutorials, Web Design | 2 comments