Coding School
I started Coding School because a lot of my friends said they'd love to learn to code but that they didn't have the motivation or that most tutorials confused them too much. I figured that if there were a few of us all going through exactly the same lessons, it would help, but also I remembered that I learned to code by making layout after layout. My hard drive is packed with old layouts and I even had a request thread so that I had to code something every single day. I was surprised when over 20 people actually signed up for it! XD With a combination of lessons and assignments, we had a good start but only 7 people were left by the end of lesson 3 because real life stepped in. When a couple of people asked if they could sign up now there were spaces, I decided that because real life was also cutting into my time online, I'd only continue to grade the assignments from those 7 people and open the lessons up more to anyone who wanted to keep up in their own time. So, here's how it works now. ^__^Lessons
The first three lessons were posted on TNO but I've copied them to this page as well. I strongly recommend that you follow this school in order of the lessons as they're posted, and that you do all the assignments. The more you apply the code I'm teaching to practical stuff, such as coding a table for the first two assignments, the easier it will be to learn. As you practise, you'll find that the coding language becomes second nature and that's when you'll be able to start figuring out your own problems and improvising, finding a style of your own. Also, you'll develop a visual understanding, meaning that your layouts will look better and better the more you practise too. ^__^Graduation
At the end of each lesson, I'll post a nice little certificate that you can put on your website, forum sets, and so on, if you like. I know the fact that you've coded your own layouts will go a long way to proving that you've learned, but I always think it's nice to have some kind of pat on the back. They'll not be too big and if you have a graphics programme, even MS Paint, you can insert your name, or choose the non-specific ones if you aren't able to edit them yourself. =DGood luck, but most of all, have fun. ^__~
Browsers
Before we move onto the actual lesson I wanted to make a quick note about browsers because I was asked if I was going to teach how to make layouts that would work in different browsers. I hate Firefox with a passion for many reasons, most of which you don't need to know, but here are some things to keep in mind.| Firefox does not display filters or customised scrollbars. | Internet Explorer allows invalid code. |
| Firefox only uses valid code (more on this later). | Internet Explorer displays filters and customised scrollbars. |
| I have never been able to get a layout to look exactly the same in both browsers (which isn't to say it's not possible). | |
| Netscape is a mixture of the two. | |
I use Internet Explorer, which you've probably gathered given my vehement aversion to FF. XD However, it's good practise - and common sense - to download a second browser to test your layouts in. This is because Firefox, especially, is becoming more and more popular, so more and more people will be viewing your layouts in FF and you need to ensure they're seeing what you want them to see. On the other hand, plenty of people are still using IE, and the same goes for them in reverse.
I have no experience with Opera, Sahara (in fact, I think those are the same programme...), and no real experience with Netscape except to run screaming in the opposite direction when I tried it out. AOL's browser is out of my experience too but I've heard it can be quite fussy and won't display a lot of the things IE will.
Screen Resolution
You'll often hear me (and others) talking about screen resolution. It's a display setting on your computer that determines the size of the things on your screen. Older computers have nothing but 800x600 pixels and everything is huge. Most computers now use 1024x768 pixels, which I think is a happy medium. And newer computers are starting to use 1200x1024 pixels, which is quite tiny from what I can gather.This is important knowledge because if you aren't aware of the lower screen resolutions (which ironically create a larger display), you'll code a layout that they can't see.
TIP: Ensure that the main body of your page (wherever there's text) is no more than 800 pixels wide. You can play with the space surrounding those 800 pixels to your heart's content, but it's unfair - and not good sense - to make people scroll just to read your content. Remember, they don't have to read it at all if they don't want to, so forcing them into excess scrolling is not a good idea. It's easy to work around this though. Just make sure your main text is easily accessible.
Tools of the Trade
All you need to be able to code a website is:- Computer with a keyboard, monitor and mouse (though the mouse isn't completely necessary for the actual coding) XD
- Notepad.exe. This programme should be on any computer running the Windows Operating System but you could use Microsoft Word instead, or any word processor programme that allows you to save files as .html, .css and .js.
- The ability to type, no matter how slowly.
- An internet browser such as IE or FF.
- The ability to save and open files.
Note: When you've edited your code and saved it, you need to refresh the page in your browser to actually display the changes.
When uploading your pages onto the net you will first need a webhost. You can get webspace free from places like Freewebs or Geocities. A good host for the more experienced webdesigner is Pandela - which is the host of my website here ^__^ - but they aren't taking new sign-ups at the moment. When you have your webspace, you'll be able to upload files directy from your hard drive, so you can code layouts on your computer and then move them onto the net. Just make sure you check all your links and images when you do. ^__~
Lesson 1 ->