Tutorials
Facebook pages are becoming more and more popular with brands, bands, organisations and celebrities who want to boost their social exposure on the web. Facebook’s social plugins and widgets are a great way to link your Facebook page with your website. Let’s look at how to not only insert the popular Like Box code onto your website, but also how to customize it to fit with your design, and make sure the code correctly validates.
Over the last couple of weeks we’ve been through the process of creating a stylish blog design in Photoshop, coding it up into a static HTML and CSS concept, and now we’ll put the whole thing together as a fully working WordPress theme. Follow this step by step walkthrough of the various WordPress theme files, and see how the HTML is split up and injected with PHP tags to provide the complete blogging functionality.
Last week we went through the process of designing a stylish blog layout in Photoshop. Now let’s take our visual concept and cut it into slices for use with neat HTML and CSS code. All our browser testing will be done on this coded concept before converting the design into a full WordPress theme.
One of my current projects is a redesign of my personal blog over at ChrisSpooner.com. The aim is to move away from the current fun and cartoony theme and give it a more sophisticated, minimal and stylish design. I thought this would be the perfect opportunity to create a blog design walkthrough. This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.
jQuery makes it easy to spice up our search bars and form input fields with simple touches that really enhances the user’s experience. Let’s look at how jQuery can be used to show/hide a default value inside a field and provide visual user feedback when the field is selected.
The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs.
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.