How to become HTML/CSS certified online

Monday, April 13, 2009

If you would like to become a HTML/CSS developer, I highly recommend learning from the W3Schools tutorial website.

I completed the hour long test on W3Schools HTML Certification course and received a certificate in the mail. It costs US$75 to get certified and you'll need to get a supervisor to watch over and sign the certificate afterwards. The test is based on:
  1. The Hypertext Markup Language - HTML 4.01
  2. The Extensible Hypertext Markup Language - XHTML 1.0
  3. Cascading Style Sheets - CSS1/CSS2

Free Color picker for Windows XP/Vista

Colorpic is the best free color picker I've used. It allows you to capture a colour from anywhere on the screen and easily copy the RGB or HEX values for use in Photoshop or web-design.

Free website link checker

One way to gain favour with search engines is to minimise the amount of dead links on your website. You can check them using the W3C Validator Link Checker.

If you want to check your pages offline or on your own computer before sending a page live, use the Firefox Link Checker addon which will highlight all links on a page, colouring them green for valid and red for broken links.

Free task scheduler for Windows XP

AutoRun is a full-featured, open source task scheduler for Windows XP/Vista. It can easily automate the tasks you need to frequently run and can autostart with Windows.

Create Myspace HTML code for custom header

Recently I created a Myspace for YHA Australia. The new Myspace 2.0 profile customisation tool is a much improved interface on the old, hack-laden previous version. Using a combination of CSS and HTML, you can create a custom Myspace DIV layout that allows you to keep the functionality (comments, friend lists) while adding your own content (custom image header) and div layout objects.

Part one: Setup and custom header

To start off, you'll want to create the page as normal in the Myspace 2.0 tool while avoiding the use of any templates. This allows you to have complete control of the design. The first thing most people want to know is how to add a custom banner on top of the page. This can be achieved using the following steps:

1) Insert the below code in the "CSS" field of the Myspace profile 2.0 tool. You will need to adjust this to fit your image and website design. Mess with the "margin-left" and "width" until the page lines up, then adjust the height to be the same as your custom image.



2) Now go to the "About me" section of the page and click "Edit Blurbs."
3) At the top of the "About me" field, put the following code:



4) Preview the page. Your image should now appear above the rest of your page, including ads.

[This post is to be continued.. Please comment if you have questions/tips.]

Best Freeware DVD decoder for Windows XP/Mac and Linux

The best DVD decoder in my opinion is VLC media player which is a freeware multi-format player. Used alongside an install of the Combined Community Codec Pack you should be able to open most, if not all codecs and formats found on the web.

If you would like to convert DVD to a movie file on your computer then try the one click DVD ripper (link goes to review and download from Lifehacker.)

Free Dreamweaver templates and how to make your own site

There are many places you can find free Adobe Dreamweaver CS4 templates on the web. The type you pick depends on your HTML/CSS experience. For those interested I have located some WYSIWYG (what you see is what you get) Dreamweaver templates. I also recommend checking out HTML templates. These packages contain simple images, backgrounds and templates for your use.

If you would like a guide for creating your website from PSD to HTML check out the one at PSDTuts. Check out their other tutorials, which usually include a PSD file for you to experiment on.

Those with more experience may prefer to download a free CSS template, which contains all the code needed for a clean, polished website. Make sure to use a reset.css file with any CSS template to ensure maximum compatibility between browsers. I have found an online CSS layout generator which will create a simple layout template based on your specified dimensions.

Make sure to put your finished code through a CSS cleaner to ensure maximum speed and compatibility. A final step in the process is to put your site through the W3C Validator to check for any code that is not valid or cross-browser compatible.

How to find out your computer specs

Sunday, April 12, 2009

System Information for Windows is an information gathering tool which will output various software, hardware and network information about your a computer to a CSV, HTML, TXT or XML file.

Free glass buttons for your website (PNG format)

Bittbox has an illustrator file with 72 free vector glass buttons that can be coloured and customised for your website.

Free e-mail checker with webmail support

POPPeeper is a freeware e-mail checker with support for both POP accounts and many online web-mail services including Hotmail, Yahoo and Gmail.

View media information from video and audio files

MediaInfo will analyse many audio and video formats to give you media information such as codec, bit-rate as well as author/artist information.

Optimize your HTML and CSS files

HTML Tidy is a well known HTML cleaner which can reduce the size of HTML pages, decrease page load times and remove erroneous code. There is also a specific CSS Tidy which will compress and clean your CSS files. To further reduce file size, you can also use a HTML compressor to optimise your code.

Free screenshot program

Greenshot is a full-featured open source screenshot capture utility.

Free web-based word processor

Zoho is a free web-based word processor that allows you to work online and offline to edit and store documents. Zoho is favouringly compared to Google Docs in this review.

Edit startup programs on Windows to speed up computer

Autoruns is a Microsoft-supported freeware utility that allows you to view and edit the programs that start up with Windows or on boot. This is a better way than msconfig to speed up your computer. This works well in conjunction with CCleaner as a routine system cleanup.

Test your site in different versions of Internet Explorer

IETester is a free web-browser tester that has Internet Explorer 8, 7, 6 and 5.5 built in for Windows.

Freeware open source encryption utility

Truecrypt is a free on-the-fly encryption system for Windows, Mac OS X and Linux.

How to add a "Buy me a beer" button to your blog

There's a lot of ways to make money from your website using ads, but some have taken to adding "Buy me a beer" buttons. This is easily achieved by signing up to Paypal and then following the "Merchant services" link to the "Website Payments standard" menu. Follow the links to "Sell single item." Paypal gives you the option to choose your own image, you can use the image below if you want - from there just copy the code into your blog.







Designer Knowledge gets a new layout!

I've finally done something I've been intending to do for ages. The blog now has a new dark layout. For a short time, you can see the previous layout on Google cache here.

How to skin Facebook on your browser

You can now finally customise your Facebook page using Stylish addon for Firefox. Simply install the addon by clicking here, then visit UserStyles.org to browse the available skins. It is a one click process to install a new skin and they are easy switched. I am currently a fan of the Vista Ultimate Skin Beta.

Freeware file recovery

Recuva is freeware utility designed to rescue files that you have accidentally deleted.

Clean your temp files and cache

CCleaner is a great freeware system cleaner that will clean your registry, remove unnecessary files as well as clear your cache and web history. Also try Defraggler, a freeware defragmenter by the same company.

Free web server with ASP support

Baby Web server is a freeware Microsoft IIS alternative with native ASP support.

Free HTML editor / notepad replacement

HTML Beauty++ is one of the best free notepad replacements for HTML editing that I have found. Supports code colouring and browser integration.

Burn any movie format to DVD

DVD Flick is a free, open source DVD authoring program that will convert many video formats easily. There is a guide to using it here: Lifehacker DVD Shrink guide.

Aviary - free online design suite

Friday, April 10, 2009

Aviary is a free online design suite with the following tools:
- Phoenix: an image editor (similar to Adobe Photoshop / Gimp)
- Raven: a vector editor (useful for logos / and clothing design)
- Toucan: a color editor
- Peacock: an effects editor

100 resources for web developers

blog-well.com has put together a list of over 100 resources to help make your life as a developer easier; where to find snippets of code, sites that automate processes, cheat sheets, lessons, useful tools and a couple of silly videos to give your brain a break if you make it through to the end.

Anonymous - the font for coders

Anonymous is a font designed to improve readability for code programmers.

Universal file format video converter

MediaCoder is an open source (freeware) video and audio converter. I find I have had success using it with video conversion where Super(C) will not work.

Push Photoshop to the limit

Noupe has a great list of ways to maximise the effectiveness of Photoshop in your web design work.

Free online Photoshop clone

SumoPaint is a great free online Photoshop interface for you to make simple adjustments to your photos.

Free iPhone GUI Photoshop file (PSD)

Teehanlax blog has a great free iPhone interface for you to use for your Photoshop concepts.

Free online photoshop tutorials

100 Photoshop Photo effects is a list of great tutorials to help you improve your photo-editing ability in Photoshop.

Also check the following sites for great tutorials:

Free SuperPNG Photoshop Plugin

SuperPNG is a free Adobe Photoshop plug-in for using PNG ("ping") files. It is faster than Adobe's own PNG plug-in and saves considerably smaller PNGs.

PNG is an open source file format that supports tight lossless compression. It can be read on any platform by most graphics applications and is fully supported by all modern web browsers.

Free online tools for evaluating web design

SixRevisions.com has a great article on 7 tools that you can use to measure the effectiveness of your web design.

How to edit photos online for free

Pixlr is a free online retouching photo editor. Uses a similar interface to Photoshop, very simple to learn and fast.