Resources: How to Design and Code an Actor Website

I read the columns on Backstage rather regularly. One such piece, by Taryn Southern, gives a list of ten online tools that an actor should be using. You can read that article by clicking here. Unsurprisingly, one of those was a website. The author warns, in another article, that you shouldn't do this solo if you don't have any web skills. Well...there's no time like the present and you can learn anything on the internet.

If you're on this blog because you're interested in acting, let me tell you that frugality is going to be essential. With that in mind, I've put in lots and lots of hours of sweat equity into this most recent project. Namely, I've been mocking up an actor website in Photoshop Elements 5 and then painstakingly coding it in pure HTML and CSS. (Caveat: For the contact form I used php in addition to HTML and CSS).

I've never done this. Ever. The closest I've come to coding was copying and pasting the embed code from youtube into blogger. This is a completely different animal. But, as I mentioned above, you can learn almost anything on the internet.

When I've got my site up and running I'll share that. For now, here's a screen capture of the site running locally on Chrome. I ended up really liking how it turned out. Hopefully, everything will go well when I upload it to a server. I'll probably do another post on how I chose my web host and the process of changing it over so that it will run online.

After the picture, you'll find some of the resources I used. I pulled from all over the internet, and I know I'm leaving things out, but I hope it will help get you started.

My self-designed and coded Actor Website

Most basic: I used Notepad ++'s online demo to code the entire thing.

The resources I kept going back to were: Lifehacker;  CSS-tricks; and W3Schools.

Photoshop Mockup (I used Elements version 5 and it still worked, you're just going to have more work-arounds if you're using an older form of photoshop.)
CSS-tricks

Where to code
Notepad ++ Demo

Basic HTML
Lifehacker
CSS-tricks (a video about converting your mockup to both HTML and CSS)

Basic CSS
Lifehacker

Putting it together
Lifehacker

Embedding Video in HTML
HTML Goodies

Downloading PDF HTML Code (for resumes)
Whirlpool Forum

Creating a Contact Form (I'm not sure if mine works yet because it needs to be tested online)
Tangled in Design

These are the basics to get you started. If you think of something specific that you want to do, just google it. There are lots of resources out there that will get your design from photoshop to the internet.

One note: Don't forget to test your site across browsers. Mine worked perfectly in Chrome, almost perfectly in IE, and not at all in Firefox and Safari. The issue was relative path vs. absolute path in the HTML. Chrome and IE recognized my absolute paths but the others didn't. I sent out a cry for help via Facebook and one of my friends solved the problem for me. Thus, don't be afraid to ask for help!