Being a tutorial writer myself, I always like to see what other writers are doing and such. All of my tutorials are 100 percent original work from my experience with Mac OS X. On the side, when I’m not writing tutorials or helping people out with computer problems, I like to code websites. For the past couple of months, I’ve been trying to gather all of the information I need to put together a website. Being a beginner to the website world, I thought I’d share a few tips to help you get started.
Books vs Online Material
I’ll admit, when I first starting dabbling with websites, I wanted something that had easy-to-read material. Books are a great source for learning, but the web has improved significantly. Two of the most helpful sites for me have been W3Schools and CSS-Tricks. W3schools is a complete reference to every web language out there, with try-it-yourself examples. CSS-Tricks has been the most help for me when it comes to understanding the true tricks of the trade for coding with CSS.
I did buy a book, the Visual QuickStart Guide 6th Edition: HTML, XHTML, and CSS. I use it now only as a quick reference for one thing or another, but it’s nice to have for the times when you get rusty on a few coding rules and such.
Designing Beautiful Graphics
Many of you have probably heard of Adobe and what kind of programs they have. They have several that are used mostly to create web graphics such as Fireworks, Photoshop, Illustrator, etc. I personally prefer to use Photoshop for my web designs as I have become quite familiar with the program. When it comes to learning how to design graphics for websites, I have gotten a lot out of PSDtuts and Smashing Magazine. PSDtuts is an excellent resource for Photoshop tutorials. With weekly tutorials covering how to make neat graphics for web purposes and how to make an retro image. Smashing Magazine covers pretty much everything you’ll ever need to know about the web. They post articles on what makes effective web design, how to make your site attractive, and even coding tips that will greatly improve your skills.
Do-It-Yourself: DIY
I’ve really been learning a bit on my own too. With several browsers now, you can easily inspect a website and understand how the code is being used. This will be a great way for you to see how people make their sites. In Safari, right-click and choose “Inspect Element”. To enable this feature, type:
defaults write com.apple.Safari WebKitDeveloperExtras -bool true into Terminal to make it work.
In Firefox, use the Web Developer extension or the Firebug extension.