Coding Tutorials

Coming Soon Page :: PSD Sitebuild

Today we will be entering the third step of our Beginning to End Series, coding our Coming Soon Page. If you haven’t viewed the photoshop tutorial you can view it here.   Set up your folders like such: Slicing The PSD We need to start out by slicing the PSD. For our coming soon page(…)

HV-Tumblr Theme Pt. III – PSD2HTML Conversion

Today I am proud to bring you guys Pt. III of the HV-Tumblr Theme Series. This episode in the series we will finally begin coding up our document. In order to create the perfect Tumblr Theme you need to make sure that your HTML is full stable with filler content before starting to add the(…)

Forrst API Tutorial — Pt II

This is a follow up tutorial to the Forrst User API Tutorial – Pt. 1 and will teach you how to grab the posts for a forrst user. As of April 2011 this still works, but may change as their API is still being developed and in this case we are scraping the user’s profile(…)

Forrst API Pull Tutorial — Pt. 1

Forrst.com has become a community of over 23000 Developers and Designers in only a few months, and this tutorial will teach you how to use a simple Forrst API call to grab the public data for a forrst user. As of March 2011 this still works, but may change as their API is still being(…)

CSS3 Buttons Tutorial

With the implementation of CSS3 in most modern browsers, using it in place of images for buttons is now an option. CSS3 buttons have the advantage of being easier for screen readers to process, as well as being lighter on your page load times. Also, editing them doesn’t require you go into Photoshop, instead you(…)

Coming Soon Page :: PSD to HTML

Good evening everybody, today I’ll be walking you through the process of coding your “Coming Soon Page” into a working HTML/CSS Template. Lets get started. The Live Version You can check out the Live Version of the template by clicking here. The template has been tested in the following browsers without any problems. Firefox 2.0,(…)

Freelance CV: PSD/HTML Conversion

Good evening everybody, today I’ll be walking you through the process of coding your “Freelance CV / Resume” into a working HTML/CSS Template. Lets get started. The Live Version You can check out the Live Version of the template by clicking here. The template has been tested in the following browsers without any problems. Firefox(…)

Pop-Up CSS Navigation Pt.2

In this tutorial i’l be walking you through the process of converting the “Pop-Up Navigation” into a fully functional CSS navigation.   Creating The Navigation In Photoshop If you haven’t already created the navigation you can do so by following “Part 1” of the tutorial “HERE“. Creating The HTML Markup Start a new HTML file(…)

Learn-How to-Create a pop up style css navigation

In this tutorial I’ll be walking you through the process of creating a pop-up style navigation. In the second part I’ll be walking you through the process of coding the navigation. Lets get going!   Resources Used In This Tutorial Photoshop Icons What We’ll Be Creating Click the image to view both hover state and(…)

Carbon Fibre Style Inset Navigation: The Code

Hello welcome to another tutorial by HV-Designs. In this tutorial il be showing you how to code the “Carbon Fibre Style Inset Menu” into a working CSS/HTML Document.   Follow Part 1 If you havent already created this navigation in photoshop you can do so by following PART 1 of the tutorial here. View The(…)

Twitter Followers As Text

After launching the HV-Designs blog i started recieving alot of e-mails asking me how i displayed my twitter count as pure text. In this post il show you how.   Quick Note Now before i start i just want to say “I did not write the code” im about to show you. So don’t credit(…)

Windows 7 Navigation Code

hello, welcome, in this tutorial il be showing / explaining how to transform the windows 7 inspired navigation into a fully working CSS navigation.   Lets Get Started! Before we start diving into the HTML and CSS we need to make a few adjustments to the PSD file and create a background to demonstrate the(…)