Beginning basic web design, what kinds of tools to use? - Developers

So I've been programming in C++ making games/educational software for universities etc. for a while, but I've gained some interest in designing functional web pages to host on a server. I've so far got a server up with SFTP/Apache/MySQL/PHP and I've been working my way through tutorials... but eventually I'd like my websites to not be comprised of basic HTML headers and text :v:. I remember back in high school I did some work with dreamweaver on the school computers and was able to make some decent looking, if useless, web pages. What other tools are out there for designing websites? Do you guys use visual tools like this at all, or do you just write entirely in code? It'd be nice to get some info like this from some experts, because aside from firebug and dreamweaver I haven't been able to find much info in between all the blog posts about freewebs-style website templates.

Never, ever use visual tools for the actual coding. When designing the website, Photoshop is the industry-standard. The code-view in Dreamviewer is decent but the rest is just unnecessary and just bloats the entire application. Get Sublime Text (Windows), TextMate (Mac) or Vim (Linux). I'd recommend that you start out with HTML and CSS which you can learn [url=http://htmldog.com]here[/url]. HTMLdog is by far the best site for learning HTML & CSS. After that, you can move on to server-side languages and there's tons of them. There's no way we can tell you which one is the best - it's all based on preference. Do some googling and find out some pros and cons. PHP is the most common one since it's so simple to deploy and most web hosts support it. However, many "experts" hate it. The most common server-side languages are PHP, Ruby, Python and C#. But don't worry about server-side languages yet. Get comfortable with HTML and CSS then continue with some server-side language. If you want, you can learn JavaScript before a server-side language but it won't be very fun because you can't utilize Ajax fully.

[QUOTE=theJohn;31457452][b]Never, ever use visual tools for the actual coding.[/b] When designing the website, Photoshop is the industry-standard. The code-view in Dreamviewer is decent but the rest is just unnecessary and just bloats the entire application. Get Sublime Text (Windows), TextMate (Mac) or Vim (Linux). I'd recommend that you start out with HTML and CSS which you can learn [url=http://htmldog.com]here[/url]. HTMLdog is by far the best site for learning HTML & CSS. After that, you can move on to server-side languages and there's tons of them. There's no way we can tell you which one is the best - it's all based on preference. Do some googling and find out some pros and cons. PHP is the most common one since it's so simple to deploy and most web hosts support it. However, many "experts" hate it. The most common server-side languages are PHP, Ruby, Python and C#. But don't worry about server-side languages yet. Get comfortable with HTML and CSS then continue with some server-side language. If you want, you can learn JavaScript before a server-side language but it won't be very fun because you can't utilize Ajax fully.[/QUOTE] I kinda figured I'd get answers like that from facepunch :v:. Thanks for the link for learning HTML and CSS. I'm guessing what you mean by using photoshop is drawing out the layout, cutting it up, and placing it into tables in the HTML? (Sorry if that sounds kinda retarded, it's what we did in dreamweaver all those years ago minus actually writing the HTML out, so it's the most I know how to do at the moment). Also I've already started writing out some PHP and controlling an SQL database with it so I'll probably end up sticking with PHP (I'm not very good with ruby or python anyways).

No w3schools.com (I sometimes peek if i forget a tag but seriously try to avoid them) [editline]31st July 2011[/editline] I use Notepad++ and GIMP. Photoshop is probably better for web design though.

[QUOTE=Elspin;31457629]I kinda figured I'd get answers like that from facepunch :v:. Thanks for the link for learning HTML and CSS. I'm guessing what you mean by using photoshop is drawing out the layout, cutting it up, and placing it into tables in the HTML? (Sorry if that sounds kinda retarded, it's what we did in dreamweaver all those years ago minus actually writing the HTML out, so it's the most I know how to do at the moment). Also I've already started writing out some PHP and controlling an SQL database with it so I'll probably end up sticking with PHP (I'm not very good with ruby or python anyways).[/QUOTE] Most of the design done in Photoshop can actually be implemented using CSS3 and no images but some things will have to be sliced out and then placed out but [b]not[/b] using a table. Tables are for data presentation and divs are to be used for layout. Go for PHP if that's what you prefer. I prefer Ruby though - it's beautiful!

if you're using Dreamweaver and the excuse is "IT HAS FTP CONNECTION" well, Notepad++ also has a plugin for that. [url]http://sourceforge.net/projects/nppftp/[/url]

[QUOTE=zzlawlzz;31460032]if you're using Dreamweaver and the excuse is "IT HAS FTP CONNECTION" well, Notepad++ also has a plugin for that. [url]http://sourceforge.net/projects/nppftp/[/url][/QUOTE] Did you read the thread? I said I used it back in high school as part of a class and haven't used it since :v:. Besides, I just made my own dropbox style sftp server with freesshd and goodsync so I'm not really that concerned about it. [editline]31st July 2011[/editline] By the way, htmldog is fantastic, some of the most neatly organized tutorials I've seen. Thanks for that again theJohn.

They probably didn't recommend you to use dreamweaver's visual editor because sometimes it displays the webpage incorrectly. It displays my webpage horribly even though it meets standards and works in all main browsers. Also some common mistakes of web design is using html to do layouts and styling. CSS should be used for both of them. Also don't use frames, they're very outdated

[QUOTE=djjkps3;31537313]They probably didn't recommend you to use dreamweaver's visual editor because sometimes it displays the webpage incorrectly. It displays my webpage horribly even though it meets standards and works in all main browsers. Also some common mistakes of web design is using html to do layouts and styling. CSS should be used for both of them. Also don't use frames, they're very outdated[/QUOTE] Yeah, thanks to the info posted I've learned a lot about why tables are a bad idea and why CSS is the way to go, both for performance and readability reasons. Between htmldog and a few templates I've looked up online, I've been getting a lot better at understanding the organization. Also, aside from a few gripes PHP has been really handy (email,sql,cookies,etc) - I just find it kinda strange going from C++ where design is based off of the program constantly looping to PHP where it runs once and then just serves the result.

For me, I started with w3schools, WAMP, and Dreamweaver. I had Dreamweaver from school and still use it. I do use Notepad++ too, but sometimes I prefer to use Dreamweaver depending on what I am coding.

[QUOTE=Woovie;31596213]For me, I started with w3schools, WAMP, and Dreamweaver. I had Dreamweaver from school and still use it. I do use Notepad++ too, but sometimes I prefer to use Dreamweaver depending on what I am coding.[/QUOTE] w3schools dreamweaver aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Nothing wrong with Dreamweaver :v: The design view in Dreamweaver, well... That's another story (although apparently CS5's design view is significantly improved).

[QUOTE=Woovie;31596213]For me, I started with w3schools, WAMP, and Dreamweaver. I had Dreamweaver from school and still use it. I do use Notepad++ too, but sometimes I prefer to use Dreamweaver depending on what I am coding.[/QUOTE] I myself wondered for quite a while why everyone hated w3schools because it appeared to be very extensive and contained some visual examples to help clarify certain points. [url=http://w3fools.com/]However, it turns out, there's actually an entire website dedicated to telling you how much and why they suck[/url]

[QUOTE=BrettJay;31596525]Nothing wrong with Dreamweaver :v:[/QUOTE] dreamweaver's code view is terrible compared to software like textmate or sublime.

[QUOTE=tanraga;31599771]dreamweaver's code view is terrible compared to software like textmate or sublime.[/QUOTE] Dreamweaver's everything is compared to everything's everything. I don't like waiting 13 minutes until Dreamweaver managed to finally get it's arse up. It's Eclipse like performance makes me want to jump out of a window.

[QUOTE=tanraga;31599771]dreamweaver's code view is terrible compared to software like textmate or sublime.[/QUOTE] Oh don't get me wrong, I agree there are much better applications out there than Dreamweaver, but nothing is offensively bad about Dreamweaver except for its design view.

[QUOTE=BrettJay;31596525]Nothing wrong with Dreamweaver :v: The design view in Dreamweaver, well... That's another story (although apparently CS5's design view is significantly improved).[/QUOTE] I'm using CS5[b].5[/b] and it's still bad

Oh okay, I did say [i]apparently[/i].

Well if w3schools is so bad where is another good place to learn?

htmldog

[QUOTE=benc1213;31607426]Well if w3schools is so bad where is another good place to learn?[/QUOTE] [url]http://w3fools.com[/url] some links are included in this site. (Btw, opera web thing is really good, but its removed to w3c wiki tho., i dont have link, you have to look a bit)