When I first started playing around with websites in the late nineties (wow, I feel old now) there wasn't much in the way of choice for development IDE's, there was really only Microsoft FrontPage and Macromedia (now Adobe) Dreamweaver. Being honest they weren't great, Dreamweaver's big claim to fame was that it generated cleaner html than FrontPage. Both where poor by today's standards, this was mainly because they where WYSIWYG editors, allowing even novices to create simple pages. When I went...
This week, we'll be creating a simple jQuery gallery that uses the Flickr API to retrieve a list of images from a photo set and display them. We'll also be using the API to get some additional information about the images and storing it using the HTML5 data-* attributes The Flickr API ... To use the API you need to register for an API key, it doesn't take long and you can start here There are 2 methods that we will be using for this tutorial, first we'll need to get name and description of the specified photo set....
Continuing on from last weeks tutorial (Creating a simple to-do application – Part 1) and the short snippet (Turning a form element into JSON and submiting it via jQuery ), this week we'll be writing a PHP page to accept and process the form submit and return a JSON response. Installing PHP on your web server ... There are several ways to install PHP to your web server, but each is dependent on what web server you are running. The two main ones I will deal with are Microsoft's Internet Information Services...
This is the first part of a series of tutorials that aim at to cover all aspects of web development. Each part in this series will build on the previous one, covering topics such as: HTML5 CSS3 jQuery We'll also be covering slightly more advanced topics such as: AJAX PHP MySQL Email Security/Authentication Where required I will go into the basics of getting a development environment installed and configured. I will also cover basic design methodologies and best practice. The Application ... To start...
Introduction ... Static headers with boring backgrounds are everywhere... why don't you try and spice yours up with a simple CSS animation? I'd like you to meet Bob, he's my friendly static image and he'd really like to wave hello to you! Let's give him the chance. First up we'll need to do a quick operation and temporarily remove his arm (Sorry Bob!) Then we're going to rotate his arm (very gently) by 45 degrees. Now we can start re-assemble him using some simple HTML <div class="logo"> <div class="arm"></div>...
Introduction ... I’m going to tell you a story, its about love, death and re-birth... Or something In the beginning there was a young html element called <table>. He had one purpose in life, to display data and life was good. But before long though he had been corrupted, his masters used him to define layout and structure. Things he was not originally designed to do, and so began the dark ages of web design. Then one day, there came a young knight called CSS, and with him he brought light to designers...
I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS. In this snippet we'll cover CSS3 transitions and using @font-face to import some custom fonts. The first thing we need to do is import out fonts, I wasn't sure what the current 'd' font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts...
Introduction ... Building on my previous tutorial, I thought it would an idea to show how to apply what we learned to the most basic of website features, the menu! I would strongly suggest reading my previous tutorial as we'll be jumping in at the deep end here. Once again, no JavaScript was used in the making of this tutorial! Every website has a menu, and there are lots of different styles that you can use. One style that is quiet popular in web applications and mini-sites is the accordion menu. The accordion...