Developer Tea is the 10-minute Podcast for Webdevs

So many people are creating excellent podcasts that it’d be impossible to keep up with everything. This is especially true in the field of web design & development where information seems to change on a monthly basis. One of the shortest and most interesting podcasts is Developer Tea hosted by Jonathan Cutrell. He’s the directory […]

Coding a Toggle-Based FAQ Page with CSS3 and jQuery

Company websites often have Frequently Asked Questions for people who don’t know much about the corporation or their services. Larger pages with Q&A listed together will often have a table of contents at the top. I don’t like this method because the pages end up long and sometimes confusing to navigate.

This tutorial is based around a similar idea, but using toggle effects for each question. As the user clicks on a question the answer will slide down and toggle into view. Users can also click already-opened questions which toggles them closed again. This technique is perfect for saving room on the page while cramming together an assortment of helpful information.

css3 jquery faq toggle tutorial preview screen

28 Free CSS-Only Code Snippets for Web Developers

HTML5 and CSS3 web development has pushed the boundaries of what is possible online. Modern browsers have also jumped aboard the bandwagon to support a multitude of these newer effects. As a designer I have been amazed to find crazy CSS-based projects online. Open source is driving the future of websites and how we design layouts.

In this gallery you’ll find 28 brilliant samples of CSS-only codes. Each of these snippets are free to download or copy into your own project. As the name suggests you won’t need to rely on JavaScript at all – even for complex stuff like animations! Take a peek at these examples and see if you can utilize any of the code in future work.

CSS3 Checkbox Styles

css3 checkbox styles open source

How To Code a Forrst API Webapp using JSON and jQuery

Modern development APIs work like agents for sharing information to other 3rd party websites. I’ve written many past tutorials about API development to help anyone new to this process. There are so many web-based services that it’s tough picking something to grab people’s attention.

In this tutorial I want to demonstrate how we can access the Forrst API using jQuery. Some API wrappers actually require server-side code like PHP or Ruby. But it’s often easier to work with JSON objects instead. Then we can parse all the return data using client-side JavaScript. Take a look at my sample demo to see the final product.

forrst api tutorial howto preview screenshot

Case Study: Building an ‘About the Author’ Box in WordPress 3.2

I’m sure those of you familiar with Wordpress blogs have seen the many author box designs. Most of the popular web design and social media magazines feature some type of author display box towards the bottom of each post. This features the author name, avatar, and generally a short bio along with profile links.

Wordpress users who are up to date with the latest 3.2.x release can easily implement this feature via custom plugins to extend WP functionality. But I want to explain how you can custom-code your own author box! I feel this method gives you more control over the layout and you can manipulate the HTML/CSS much further than with plugin codes.