Web development should be quite straight forward if you're used to other programming, the only thing is there are so many little tricks you learn along the way to achieve certain results which takes time to learn. The only way of learning them is by stumbling across all the little bugs and annoyances along the way. As with everything it's nothing more than a lot of patience, curiosity and practice.
A good web designer needs that creative eye, they are people who see something that looks good, and can make it look and feel even better. There are a lot of little things I have learned from other designers that most developers wouldn't even think of. It's actually quite crazy that a designer gets the crappiest pay in the development process. A designer is the guy who will tell you that every pixel counts, they don't allow one margin to be out of line. Most designers actually spend more time using programs like Photoshop rather than actually writing code.
When I make a website I generally take it in steps, much like baking a cake.
1. Get the content.
You need to know how you are going to structure the website, so you will need to know what the website is going to contain. Put it down on paper. What pages are you going to make? Which pages lead to other pages? A logical flow is a must for a good website.
2. Start the design.
The first step in the design process is to make the base template. The second step is then to take the template and make all the different pages and layouts you are going to need. Once you have done this the website is ready for some critique from your client.
3. Write the HTML.
Start to structure the website in code. Make sure you use good practice, don't use tables, use the HTML elements the way they are designed to be used. It doesn't take long to learn all there is to know. Don't worry if it's not all perfect yet, it's all about getting the basics at this stage.
4. Add the styling.
Start snipping the layout into the little images needed to achieve the right effect and write your along with the CSS, remember to try keep the images as small as possible, for example, rather than making a background gradient 1000 pixels wide, try making it 5 pixels wide and use the CSS background-repeat attribute to make the background repeat the way it should. Smaller files = less bandwidth wasted and faster downloads. I've seen examples where a whole website was put onto one sprite, it's crazy how much some people can optimize this stage.
5. Start on the functionality.
Some websites don't even need this step. If it's nothing more than a static website with some text, there won't be any actual scripting or programming needed. This step is done by the developers, generally you start with the server-side language, then move onto the client-side language to make the website "flow". This step can be time consuming, but luckily there are tons of resources to make life easier.
6. Test
Test the entire project, think of all the different scenarios, make a check list and check them off one by one. Fix any bugs along the way.
7. Polish
Start going through all the code, starting with the HTML and CSS, get rid of any errors, bugs or annoyances. Don't forget, every pixel counts. If you do this step right, you're done.
8. Deploy.
Upload and get paid.
If I were to give a good tip, it would be not to get lost in your code. Sure it's important to make your code look nice and keep it easy to maintain, but don't forget the client most likely doesn't have a clue what it does, and to be honest most of them don't even care. They care that the website works, and that it works they way they want it. You can get lost in structuring your code, there's nearly always a more efficient way, but inventing efficient code takes time. Time the client doesn't have nor wants to pay for. Getting it done on time is more important. Don't forget there's always a chance to make version 2 or 3.
Here's a list of good tools for development.
http://960.gs/
Comes with brilliant resources. Has template files for loads of different designing programs and some ready made CSS to make you life nice and easy. If you stick to this system you could almost use it as your CSS standard.
http://jquery.com/
JavaScript framework. Must know for front end developers, gets the job done, always works, quick and easy to learn.
http://codeigniter.com/
PHP MVC framework. Might not be exactly what you're after, but I love this thing. You will need to learn PHP.
I'd advise you to go down the .NET route as I know you have some experience in C#.
http://www.asp.net/web-forms
http://www.asp.net/mvc
Development tools I recommend:
Dreamweaver
Sublime Text
Visual Studio
Google Chrome (hit F12)
Firefox (
http://getfirebug.com/)
Opera, Dragonfly comes with some handy tools other browsers don't.
I do all my designing in Photoshop, I'd definitely recommend you spend some time using it.
Learning resources:
http://w3schools.com/html/default.asp
http://w3schools.com/css/default.asp
http://w3schools.com/js/default.asp
http://w3schools.com/php/default.asp
http://w3schools.com/aspnet/default.asp
http://sixrevisions.com/web_design/the- ... made-easy/
http://designinstruct.com/web-design/cr ... photoshop/
Handy tools:
http://jsfiddle.net/
http://css.maxdesign.com.au/floatutorial/
http://www.my-debugbar.com/wiki/IETester/HomePage