<Code_Punk>'s

Web Tutorials

Code Tutorials



Site Development



Downloads



Help!!


Welcome!


This site contains free tutorials on how to make your own website using HTML, CSS, and JavaScript. It also has web development tips and links to great web development freeware and shareware. You'll find something here whether you're a rank beginner or pro.

Good News: You don't need any special software. Everything you need to get started is already on your computer. You'll need a web browser, like Internet Explorer or Netscape, and a basic text editor like Notepad or SimpleText. That's it.

More Good News: You don't have to be a computer expert to begin writing your own web code. Check out the prerequisites to make sure you have the basic file management skills to begin coding. The page includes links to some great Windows tutorials to help you along if you need it.

Now get giddy with good news: You don't need a "server" account to make web pages. Web pages are made on your machine and saved on your hard drive. You upload them to a server whenever you feel like it. And, there are plenty of good free servers to choose from.

So, what are you waiting for? Dive right in to Beginning HTML!




What's New
1 July 2009



I've completely updated the Pro Servers page with data from Web Hosting Search.com. They will be giving me some new data from time to time from their main site.



I've added a link to Tim Midgett's site. He's done some amazing stuff with JavaScript producing the leanest, most configurable slideshow-menu I've seen. He used the code from this site, so it should be easy to understand his source code if your familiar with my code formatting.

I've also added a link to ENSware's HintLibrary. It's full of a lot of good information an advice. It requires a free registration. ENSware also brings us a favorite FTP manager BatchFTP.

I've also corrected some typos and fixed some links. I really appreciate it when you bother to drop a line about an error, no matter how small. I usually collect several and then make a single "slip ups" update every month or so.



Some of you may have noticed that I've made a small update. I've been making small updates for the past year, but I rarely remember to change the date on this main page.

I've updated the date comparison JavaScript page. I've been updating the CSS and JavaScript sections throughout 2008 so as to keep up with the next generation standards. I'm currently rearranging my entire HTML section to upgrade it to XHTML. I hope to upload a quick XHTML primer for those familiar with HTML 4.0 this winter.

I'm also considering starting a new bulletin board if anyone out there is interested. I answer all emails, although I'm limited by time with the amount of work I can do. In short, things can be slow. A bulletin board can put other Punkists on the case once the board gets going. If you'd like to see an active Code_Punk bulletin board, e-mail me.



I've updated some problems you have been nice enough to email me about. I've also updated the banners for UKWebGuy who hosts this site. If you really want *fast* and reliable service, you owe it to yourself to check him out.



I've made several small changes. Among the most important are the change in BatchFTP. It's now a commercially published software and better than ever. If I didn't have a good FTP client bundled with some other stuff, I'd actually break down and buy BatchFTP. It does everything, just check out the the trial version

I've also added a site to the Punkist Page's. It's the site for The Melbourne Meditation Centre by Matthew. I'm glad this site was helpful to him. If you've gotten help from <Code_Punk>, and would like your site listed, please email me.



I've added a very good Advanced CSS Tutorial that explains your options when your content is too large for your <div>. It even includes the easiest way in the world to make a scrolling box without frames or scripting. The new tutorial is here.

I'm working on a whole sections of tutorials explaining how to add multimedia to your website using the <embed> and <object> tags. I'm just about finished.

I'm also still working on the first three PHP tutorials which explain how to set up your own server on your home machine so you can test these "backend" scripts with a real server before uploading them. This will also include the first simple PHP scripts.



I've been updating all of the older tutorials to include support issues by some new browsers like Safari and FireFox. (Neither is very good code support-wise.) This has become much more of an endeavor than I first anticipated and consumed my enitre autumn.

I'm caught up now, and hope to have tutorials on embedding multimedia up soon - this month. I hope all had happy holidays and look forward to a new year.



Due to popular request, I've heavily expanded the CSS tutorials on laying out a page with CSS Positioning (CSS-P). They cover how to make columns by using CSS <div> boxes. The new tutorials begin here. There are three new tutorials in all and more on the way. These tutorials have been added to the CSS-P Layout section of the the Advanced CSS Tutorials.

Coming up in the next couple of weeks - Adding Multimedia (sound and video) to your pages!



I've received several editing tips from all of you out there. I've spent quite some time upgrading the existing tutorials, fixing spelling and syntax problems and fixing examples. Special thanks to: Pierre, and Mesa Design House.

I got a neat script sent to me by someone who only wants to be known as a "site user". It's a JavaScript that will store viewer style selections in a cookie and then dynamically style a page based on this cookie data. You can download a zipped copy of this script here.

My next updates will wrap up the shopping cart in Advanced JavaScript and expand on CSS Positioning techniques including fixes for some new cross-browser problems that have come up.

I've also cleared out all of the old "Punkist Site" links. If you've moved your site and want to be listed, please email me. Also send in your site if you've learned something here. I'll post the link on my Punk Pages.



I've begun a new section of Advanced JavaScript Tutorials. The new section is about advanced array methods. These are easy ways to manipulate arrays with native JavaScript methods. The first two tutorials show you how to easily add elements to the bottom or top of an array with only one statement. The new tutorials begin here.

The third new tutorial introduces the powerful splice( ) method. These methods will become very important as we continue into more professional shopping carts and professional site services.

I'm getting the beginning PHP section together. Most of the first tutorials will show you how to set up a server on your local machine along with PHP and a compatible database.

I may go back to my original plan to introduce Perl first. It's much easier to set up. Anyway, you can expect detailed step-by-step instructions that won't leave you confused on how to set up PHP on your local machine.



I've started a new <Code_Punk> forum hosted by Bravenet. I'll be using it until I code my own. You don't have to register or logon to use it. I expect mayhem to ensue. It has smileys and message icons. Give it a try here!

It is HTML *disabled* so you can print your code right in the messages. Just one big hitch. You have to use &lt; for "<" and &gt; for ">". Tip: Use a good text/code editor to open a copy of your code and use a universal search and replace function to convert the tags. Now copy and paste. If you don't have a text editor with universal search and replace, get the free version of NoteTab.

So, go over there now and tell me what you think. Feel free to post anything about any area of Web Development.

I've also added a link to Swatch-O-Matic. It's a fabulous, free color picker. Just move the red, green, and blue slides until the color in the box is exactly what you want. Then click a button to copy the hexadeciaml value for your color to your clipboard for ready pasting into your page.

Alan, a <Code_Punk> fan, has put up a really good Introduction to HTML. It uses screenshots to guide the beginner on how to save a file as a HTML file when using a text editor. Good work, Alan.



I've added a link to Web Dwarf. It's the best freeware WYSIWYG web page maker out there. It offers many of the features you'd expect in pro products. Very simple to use. Most operations just require selecting an area and then adding content, editing, and styling as desired.

I've also added a couple of other links to some neat web apps. ColorCombo Color Pickeris a great free online color picker. It will give you the hex or RGB code for just about any color. Offers multiple ways to pick and preview a color.

Leecher is a downloadable app that runs in your browser that lets you view all of the images on your hard drive. Nice, very small image viewer. Coded entirely in HTML and JavaScript.

I've been working on some of the Site Development tutorials and will be getting them up shortly. I've repaired many links and example pages on the site. Thanks to everyone that's pointed out errors, particulary Misto-Roboto. There's no way I could edit this site without your help.



I've uploaded the next tutorial on JavaScript Shopping Carts. It's about adding a "total" feature.

I've gladly added Diana Pahman's site called Memories Forever to the Punkist Pages. She learned a lot from this site, especially JavaScript, and it shows on her main page.



Jesse P sent me an important message telling me that the last JavaScript Cookie tutorial's on Using Pointers had a flawed example. I've corrected this and uploaded the new example. I've also rewritten that tutorial to make it a little clearer.

If you ever run into a tutorial that is confusing to you, please write me. I'll help you through it and make a priority to rewrite that tutorial to make it easier to understand.



I've uploaded the next step in making a JavaScript Shopping Cart. It regards using "pointers" on a cookie to access unimited data. The new tutorial is here.

I've got Dan to thank for reminding me that the Comparing Times JavaScript Tutorial needed to be updated. It counts down the days until Christmas and I needed to update to 2003.

Also, kudos to John for pointing out an error in my <!DOCTYPE> tutorial. The "EN", or other language code, indicates the language in which HTML tag elements and attributes are coded. It does not have any bearing on the language that the content contains. Many non-English websites use English elements and attributes in their HTML tags. Thanks, John. The tutorial has been updated and clarified.

I've added a really good web tutorials site to my Other Tutorials page. It's Tech-Sites Web Design and Development. It's a very comprehensive site and includes graphics development stuff that I don't have here.

Please write me if you find anything incorrect or confusing about the site. No detail is too small. Also feel free to write if you run across any problems.