Getting started with Responsive web design.
I was recently asked to design a responsive template for a client, the concept is new to me so i decided to follow a couple of tutorials and write one of my own. So, what is a responsive website? Well, it’s a website that has a dynamic layout – those viewing the site on a normal desktop pc (1024×768 for example) might see a standard layout, while those browsing on an iPhone may see a modified, more minimalistic layout.
It is important to consider the different media used to browse the web today. Smartphones, ipods and tablets are ubiquitous and could be used by a significant proportion of your user-base.
This tutorial will cover the basics only, showing you how to create a bare-bones responsive web template. Try re-sizing your browser to see the results.
Read more
What to look for in a wordpress theme
If you are thinking about creating, or buying, a wordpress theme you are looking at the right post. I’m currently in the process of creating a new wordpress theme for my portfolio site, and this got me thinking about what i can do to make the theme as useful as possible.
The following page describes a number of things that separates a good wordpress theme from a bad one. The below items are listed in no particular order.
Multiple page te
mplates
What are they?
Page templates define how information is displayed on your wordpress site, and what’s quite useful about them is that you can set a different template for each and every page. This gives you the ability to control and configure your pages without writing a single piece of code (if you have the right theme anyway). Page templates are made up of HTML, CSS and Javascript. Basically the same as a normal website page, but modified to be compatible with wordpress.
Finally, remember that all wordpress pages are based on page templates. This includes blog posts, normal pages, archive pages and the home page.
Style a spacious grey form using CSS3
This tutorial will show you how to create a stylish grey form using CSS and a couple of simple images. It wont take long to complete and beginners with a basic understanding of CSS should be able to follow.
To add some effects, such as rounded corners, or drop-shadows, CSS3 will be utilised. These means that the form styling will only work properly in modern browsers.
A couple of external sources were used to produce the images, a link to these will be included - so you will also learn of a couple of valuable source sites too.
Read more
Beginner javascript: How to use arrays and functions. Includes task.
This tutorial is aimed at beginners who are just starting to learn Javascript or any other programming language. The tutorial will consist of a couple of paragraphs explaining what a function is, what an array is and show an example of how they can be used.
There will also be a small programming task near the end to help you improve your skills, so make sure you read carefully! Lets get started.
Part 1: What is an array
As a programmer you will need to use arrays regularly. They are similar to variables in that they are used to store a value of some description. However, unlike a variable an array can hold multiple values. And they do so in a structured format.
Each value within an array is referred to as an array element and has an index, or ID, number associated with it. You can access these individual values by using the index assigned to them. As a final note, remember that the indexing is zero-based, meaning that the index starts at 0 rather than 1.
Free wordpress portfolio theme
I was recently hired by a newly launched company to create a wordpress portfolio theme. The hiring company was Tech-Sect Web solutions, who offer services such as CMS development, PSD to xHTML, Logo design and more! If your looking for a website consider checking them out…
Quick preview:
Get the free wordpress theme.
Anyway, the theme is given away totally free on their website. You can find a link below. Read more
How to debug scripts in IE7
So, i just finished up a project on which i had quite a few problems. The majority of which were IE7 script errors, total nightmare! I have never really had to debug in IE7 before so was unsure how to go about it.
I usually use IETester for any compatibility tests, but the script was simply causing the program to crash. After realising i was going to need an alternative test environment i quickly ran to google! And thats where i found this:
Micosoft VPC image
Microsoft have a number of virtual PC’s available for download from the Windows Virtual PC VHD page. Each comes with a different version of IE installed and ready to use.
After installing this and running the site however i realised it wasnt much use! I was simply receiving a generic “A script has caused an error on this page” message and then had to stop the script. This method of testing would be good for your basic HTML/CSS browser compatibility checks though!
Read more
Cross browser CSS3 drop-down navigation menu.
This tutorial will show you how to create a browser compatible navigation menu using HTML and CSS3. The navigation will be built using our drop-down menu template.
On that note i would like to mention that the primary purpose of this tutorial is to show how the template can and should be used. If you are looking for a tutorial showing each and every step of the drop-down process you may want to look elsewhere.
The navigation menu has been testing in IE7+, Firefox 3.6+, Chrome, Opera and Safari.
Step 1 – Download required files for menu.
Below are all the files required for this tutorial.
1a – The navigation template.
First of all you will need our drop-down menu template, you can download the template below.
Browser compatible drop-down navigation menu template.
Read more
Cross-browser drop-down navigation framework / template
I have been working on a number of CSS drop-down navigation menus recently, some for tutorials and others in actual projects. The amount of times i found myself repeating the same piece of code was getting ridiculous. So, i have created a cross-browser drop-down menu template.
With some simple modification you can now create a drop-down nav in a matter of minutes. All the main functionality is done for you in the template, you really just need to style things as you see fit.
The navigation menu template
Take a look at the demo below for a preview of the template, as you can see it is a straight-forward drop-down nav containing the bare essentials.
Read more
Looking for writers.
Well, i am about to return to university for my final year and am pretty sure that i wont have time to keep the site updated. I’ve been trying to keep the site updated as regular as possible, and i would like to keep that going.
So i have decided that i will hire someone to write the occasional tutorial for the site. I don’t expect to provide too much work but it will be a little extra money for anyone who’s interested.
If you have any experience writing tutorials, or think you would like to give it a shot, please get in contact with me. I will need the following information to consider your application:
Using the CSS Child selector – useful for dropdown menus
This quick tutorial was written to describe the CSS child selector, explain how it is used and give a great example of when it can and should be used.
I didnt actually know about the child selector until recently and have been finding it very useful. It is compatible with all modern browsers including IE7+.
What is the Child selector.
The child selector allows you to select, and apply styles to, immediate children of a specified element exclusively. It basically allows for more precise and specific CSS.
Example use:
The css:
body > p {
border:1px solid black;
color:green;
}
Premium PSD Template 
Grey colorful wordpress theme