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.
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.
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.
Over the past few years a number of prominent CSS3 tutorials have been published online. These are perfect for beginners who don’t have a lot of experience coding webpages. But developers who do have that experience may also find the more detailed articles quite insightful.
Take a look over this collection of posts related to newer CSS3 properties. There may be some you’re already familiar with, and others that you’ve never even heard about before. CSS3 provides developers with many different solutions used to solve individual problems. Also if you know any other great posts I’ve forgotten you can share with us in the post discussion area.
I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.
So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:
Web development has grown far beyond the typical HTML/CSS/JS code structure. Modern web services like Facebook and Twitter are built with something called an Application Programming Interface. This allows developers to connect into 3rd party services and pull out data to be displayed on another website.
For this post I’ve collected a number of free online tutorials which delve into API development. These are perfect for anybody new to the scene who wants to learn a bit more about typical web services. Some will require an API key while others may simply return XML/JSON data on command. Either way these articles detail many popular development techniques in an easy-to-understand fashion.
Today, I would like to go over a quick and simple way to allow your users to switch page layouts by using CSS and jQuery.
Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.