30 Days to Your First Website Design

Lesson Notes * Fire FTP * JSFiddle. * Codeanywhere.net * Coda * 18 Wonderful IDEs for Windows, Mac, and Linux

Transcript Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to talk about Code Editors. We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• We’ll firstly look at what’s needed in terms of the bare minimum of software.
• We’ll then look at a few options.
• After which we’ll take a look at our project so far.
• Lastly, as ever, once I’ve handed some further reading over to you, I’ll set a small assignment.

When building a web site, there are two things which you’ll need as a bare minimum to get things going: You’ll need a text editor to write your various bits of code in and an FTP client, which is the program used to publish your files to the web server.

That’s it. You could therefore very easily use NotePad, or Text editor (depending on whether you’re on a Mac or PC) to write your files, and then upload to your webspace using (for example) FileZilla – a free and perfectly capable FTP client. There are plenty of FTP applications available, including Transmit (for the Mac), there are also plugins for your browser, such as Fire FTP for Firefox. And there are even fully blown apps available for the browser, which take care of your editing, such as JSFiddle. There’s even file storage, editing, and ftp services such as Codeanywhere.net.

There are, of course, applications for your system, and you’ll have undoubtedly heard of Dreamweaver. Some like TextMate for its simplicity – and there are tons of others which I don’t really have time to list. My choice is Coda (for the mac) and it deals with things much like many others, but I happen to like the interface. It allows you to manage your projects locally (on your own system), acts as an FTP client for uploading directly to the web once your editing is complete, and helps you out with things like code hints. Applications such as Coda are known as IDE’s (or Integrated Development Environments) as they perform various functions for developing code-based projects.

Now I’ve made a start on our project – you’ll remember we discussed the directory structure – that should look familiar to you. I’ve also prepared a background tile for our two textured areas, plus we have the sprite.png which we made in an earlier video, and the images of our friendly staff. Let’s take a look at what I’ve altered in our basic HTML document.

[Live demo not available in transcript.]

Next Steps OK, it’s time for some further reading: To help make your mind up where code editors are concerned, check out Andrew Burgess’ 18 Wonderful IDEs for Windows, Mac, and Linux. He outlines all the main contenders and lists the fundamental pros and cons of each.

And before we jump into the next video, I have an assignment for you: having chosen your IDE, open up the project so far from the download files. Familiarize yourself with what’s been done, because next time we’re going to flesh out more of the web page using our basis.

Next time on 30 Days to Your First Website Design we’re going to continue our coding and look at the web standards model. I’m Ian Yates and from all of us at Tuts+ thanks for watching!