Jajascript and Site Design price

[riptide]

I have two questions. One if if there's any free or video resources where I can learn javascript. I'm beginner but I can edit very,very basic script. I don't have the full time to study it as much as I want. I mainly tinker with webdesign in the summer.
I can't pay for or have the time to go take any college classes.


My second question is how much should I charge to build a website?
It's XHTML, CSS and some scripts. The final site is going to sell products through paypal. We haven't gotten that far yet.

What I do have is 26 pages combined into one using vanishing divs. I was told that the site would be around 700 pages. I told them I could get it down to 40. I had to do some image editing and I'm making the content and finding most of the pictures.
Strangely they are going to do the logo.

I have put about 45 hours into it.

I heard of charging by the hour or a flat rate. The flat rates I've seen have been between 600$ and 2000$. It would really help If I knew how much people expect to pay for a website. This is a small business by the way.

[keyboard]

#1 - I'd suggest Tizag's (http://www.tizag.com/javascriptT/) tutorials (they're easy to follow {text-based})

#2 - I'm not giving you an actual amount, rather a suggestion. You need to decide on how complex the websites that you're building are, and how long they'll take to make.
Then you can decide whether to charge per hour or per order.

I'd suggest you charge depending on how complex the site is (not how long it takes to build).

For instance, charge a flat fee (relitivley small, the same for all sites you build) and then add on a charge for how complex the site is (How many pages, The amount of coding needed, etc)

Hope this helps...
Keyboard1333

[riptide]

I'm not sure what the flat fee should be. This is the most complicated site I have made.
would it help if I put the sites I have made up?

I wouldn't mind some one giving me an evaluation of my work.

[djr33]

If you've kept track of the number of hours, I'd think about how much it should cost based on that. If you think you should get $10/hr, then that's $450. If you think you should get $50/hr then that's... a lot more.
However, you shouldn't be charging your clients for your time learning. Just ask yourself how much of it was spent researching and figuring out how to fix things.
Perhaps you spent half the time learning and half being productive. But then that time is more valuable. So maybe $20/hr. So the same result.
It's totally up to you.

As above, though, I think you can charge in two ways: either by how long it took you at a low rate (accounting for your learning time), or at a higher rate for less time (because you spend some time unproductively researching for new information).

I think that math like that is more relevant for a general rate, rather than the specific circumstances. It also depends on your client-- a friend? a rich company? a non-profit organization?


Before I agree to a project, I find out what the client is willing to pay and decide whether that is worth my time. I'm fair, but I also only do web design as a side project when I have extra time. Because of that, I can be a little more selective. I also do determine how much I'll accept based on the client.

Most importantly, for next time, negotiate a price that you and your client find fair. If you can't agree, then let them find someone else. Trying to negotiate the price afterwards is a bad idea, I think.

In this case, just start with your per hour rate (whatever you think is reasonable) and explain that to the client and discuss what works. Can they pay $450? Are you will to accept $100 for the whole project? Or $1000? Or $5000. Totally up to you. And the client.


I always charge by the project rather than by the hour. I may calculate hours involved. In fact, one strategy is the following: if a competent designer were to do this project, how long would it reasonably take them? Then I'd base the price on that. And depending on my skill level, I'd either do it faster or slower. If I'm an expert, it's reasonable to charge more per hour. If I'm a novice (and I certainly am in some areas I venture to), then I should charge less. In the end, having the standard of "a competent designer" seems reasonable to me.
(The exception when I would charge by the hour would be for some sort of ongoing work like updating a website every week. But that's not such a common type of job in the freelance web design world.)

[riptide]

100$ would be way to low for what I had to put into it. I'm not comfortable charging over 800$ for a project.

we are at 600$ I think it's good. But I'm probably going to thrown in free updates. Because the code may be hard for others to update. I'm using xhtml and lightbox/slimbox.

I had to spend about 25% of the time learning. I don't have to learn anything about xhtml
but I had to look one or two things up about CSS. Javascript is a whole other story but I got help here and I had some scripts for else where and did the edits in the beginning mostly.

I was told that I should start making contracts. I'm doing this now.

[djr33]

As a moderator, let me just note that (although I'm not entirely sure this is true) we're not supposed to discuss pricing publicly due to price setting and so forth. So my examples above are just that, examples. I suppose you can post what you DID charge for a project, but I'd rather avoid the specifics.

You're welcome to do what you want. I think what you're saying sounds reasonable.

I don't see why you'd never want to charge over $800 for a project-- if the client has the money and it takes you a year to design, why not charge $10,000 or $1,000,000? But for a small project, I certainly see what you mean.

It's all about supply and demand, and in the case of freelance web design, very often there is exactly one supplier because the client has or develops a personal relationship with you.



But I'm probably going to thrown in free updates. Because the code may be hard for others to update.Generally continued support is always nice.
But for the code, my recommendation is to put lots and lots of comments in it. Sometimes I comment every line just to be very clear. Even if your style is weird, they can understand the meaning, and then they can edit it, even if that's just deleting and replacing certain sections.

[keyboard]

One really importent thing, I must stress!
ALWAYS work out the price (or at least give a quote) to the employer before you start the project. If you spent 50 hours working on an amazing website, custom designed just for them, and then they're not willing to pay for it afterwoods... Well you've just wasted time, and therefore money!

[riptide]

I will work out the price first from now on!

I didn't know I couldn't give figures; I should have asked if it was okay to give prices on here.
I've put in lots of comments but there are areas where I've only put don't mess with this item. It kinda looks like code soup,that's why I'm trying in free updates and maintenance.

[keyboard]

Just some tips that you should follow if you plan on selling your websites...

1. As djr33 said, always comment your code to make it easier to see what it does. You can never have to many comments... actually you can, but that's not the point. Make them easy to read, keep them nice and short (don't write a five page essay on what the line
var x = 10; does.

2. Always indent your code. You may not like doing it at first, but it really makes the code easier to follow. Also, always indent your code the same way (build a pattern). If you're not sure what indenting is, just say!

3. Always name your variables sensibly. Say you have a field in a form called username. Then if you're doing validation or something like that, it's a lot easier to read if you name the variable username instead of chucknorrisiscool.

4. Same as above but for functions().

5. Try and keep your coding nice and neat. Don't leave random spaces everywhere and try to keep to a nice pattern of html tags.



<html><head><script type="text/javascript">alert("hi");
function doNothing(elem) {
if(elem == 1) { alert("elem = 1");
} else {
alert("elem != 1"); }
</script><title>WELCOME TO MY EPIC WEBPAGE</title>
</head><body><div>MOOO!</div><h1>Hey Guys and Gals</h1>
<a href="#" onclick="alert('fooled ya!');">
CLICK ME
</a></body>
</html>


It's hard to read and has no structure to it



<html>
<head>
<script type="text/javascript">
alert("hi");
function doNothing(elem) {
if(elem == 1) {
alert("elem = 1");
} else {
alert("elem != 1");
}
</script>
<title>WELCOME TO MY EPIC WEBPAGE</title>
</head>
<body>
<div onclick="doNothing('1')">MOOO!</div>
<h1>Hey Guys and Gals</h1>
<a href="#" onclick="alert('fooled ya!');">CLICK ME</a>
</body>
</html>

Much better! I also indented the functions (every thing rapped in a {} is tabbed foward once).

Since you're using xhtml, you probably won't have a problem with things like <script> and <SCRIPT>.

Hope you can use these suggestions (or are already doing them). (Sorry, little bit off topic, but I wanted to be helpfull :D)

P.s. I do so love Jajascript :D!

[djr33]

Regarding my comment about commenting your code, I can explain my style a bit. I think it's useful. It helps my own memory too.

0. Clearly mark all of your sections. This is common sense. //LOGIN:
Or, more clearly:
/********
**LOGIN**
********/

1. For the start of a section, such as something in an IF or a loop or a function, explain what it does. //Check if they are logged in
Immediately below that, add what's going on. //Ok, they're logged in.
At the end of the same section, say that it's over and it's time to move on. //end login check

2. Don't explain the code. Explain the meaning. If they care to deconstruct your code soup, fine for them. But comment what it does. //crazy email validation algorithm here //did they submit a valid email //does the email contain a @? etc.

3. Explain weird things you do. //bad method for checking email, but it works


As keyboard points out, naming variables and functions well is important. I'm lazy about variables when they're only used locally (like the counter in a for loop), but if they are recurring in the script, I name them well. Functions are more important (because they're often defined and used in far away places) so I pay extra attention there.

And tabs. Use whatever style of tabs you want, but use them. Use them actively, consistently, and even for when it seems like it doesn't matter.


In the end, following all of this will make your code easy to skim and easy to edit later. Your weird uses of regex or whatever hard to read sections will still be hard to read, but they'll know where they are, what they do, how they're structured, and at the very least they can deleted certain parts and replace them. You don't really need to fully understand code to modify it. Just what it does. Then you can patch it up as needed.



I didn't know I couldn't give figures; I should have asked if it was okay to give prices on here.Well, we can certainly talk about it in general. Regardless, it's not a very helpful thing to do because of the personal connection you have to your clients-- you will have many reasons to charge them more or less than I do with mine, and same for everyone else here. Few of us work by the hour-- "I always charge $20/hr." Freelance is always flexible. Again, supply and demand.

[riptide]

I try to use tabs I indent or line break anything. What I'm worried about is some one going in and deleting a <div> tag in confusion and breaking the page.
some tags can be removed others can't. I have many nestled divs.

I commented everything in the CSS sheet, I wasn't that logical with ID's and class names.

I decided to lower the price with the idea that having a nice looking website that I can show people is a trad off. The sites I do have up are unfinished or too tropical/busy/awesome to show to a company. Plus I'm looking at a referral.


Oh and yeah I should fix the misspell.

[djr33]

Oh. I'm thinking about PHP. You don't need to comment your HTML. HTML should be readable by anyone that knows what they're doing. For HTML:
1. Use tabs well.
2. Add comments for sections if it's not clear, like <!--FOOTER-->
That's it. You do NOT need to comment HTML heavily or line by line.

For Javascript and PHP, do that-- comment everything you can. (Within reason anyway. You don't need to take that literally.)

For CSS, comment the sections. No need to comment the actual properties unless something is particularly unusual. CSS, like HTML, is standard. Easy to read.

[riptide]

Actually I do have something unusual In the CSS. I should go back and comment on that. I'm thinking the people who will be trying to mod it will have little to no website building experience. I seem to attract those types of people because if they did know HTML they would do it them self.