Need tips for one starting with web design

[Deleted]

Hi.
Been doing a lot of things over the years but now I want to learn web design.
It would be great if you could give me any guidelines/recommendations, such as dont use Dreamweaver use this instead, links to good tutorials, good starter advice in general basicly.



Cheers

[Fuzzykins]

Take it from me to you, you'll start to learn it, and give up. Take a proper class as opposed to trying to teach yourself. If the website is for personal use, use WordPress.

[snaek]

Read plenty on color theory (...but not too early. Learn the basics first.), is my main tip for starters. It's essential in the business, and it will make your websites infinitely prettier. The right colors make all the difference.

And stay away from gifs, please! But you strike me as the more intelligent kind, so you knew that already I guess.

[Deleted]

Believe me, it's not easy to do it, and to get good is even harder. I'm still trying, myself. I HIGHLY recommend Jeffrey Way's set of videos, I'm not sure if you have to pay for it. He teaches so well, in such a concise and clear way, it's easy to follow what he does, and understand key aspects of it, and apply them yourself later.

I hate Dreamweaver, I personally use Notepad++, if you have a Mac, go for Coda, I love it .

[skatblast]

Start doing basic webpages with a wordpad before you use dreamweaver, so that way you understand whats actually going on in the code. Its probably best to go to a local community college to take classes because its not something thats easy to learn by yourself. If you cant do that go to http://www.w3schools.com/html/default.asp .

The reason i suggest to take some classes is because your teachers can give you good hints from there personal experience and it can go along ways compared to teaching yourself everything from appealing layouts to your site hierarchy.

Also i do suggest dreamweaver i took a whole semesters class on it and it is one neat but complicated program, and expensive unless you know your way around the net.

[Deleted]

Take it from me to you, you'll start to learn it, and give up. Take a proper class as opposed to trying to teach yourself. If the website is for personal use, use WordPress.

Well I'm not one who gives up easily and if I get into something I'll stick with it and force myself to learn it. Tho I will as it is now take a course later on, but I would like to try and learn on my own first.

And stay away from gifs, please! But you strike me as the more intelligent kind, so you knew that already I guess.

Yes :P


Anyone familiar with Php storms and/or Netbeans?
And more feedback regarding Dreamweaver would be great kinda in between if its good or not so good, especially if you're new to web design. Is it something commonly used in the buisness nowadays?

[Tyrianth]

www.htmldog.com; For basic frontend coding (html/css). Stay away from w3schools.

For actual design I suggest books from sitepoint, more specifically The Principles of Beautiful Web Design

Stay away from dreamweaver, use a text editor like TextMate (Mac only. I don't have any experience with Windows based ones but I hear notepad++ is good). No professional web developer/designer uses dreamweaver. If you insist on using dreamweaver stay away from the WYSIWYG editor and stick to the code editor.

[Drunkenvalley]

Take it from me to you, you'll start to learn it, and give up. Take a proper class as opposed to trying to teach yourself. If the website is for personal use, use WordPress.

Ah, you've given up? :<

[Deleted]

Start doing basic webpages with a wordpad before you use dreamweaver, so that way you understand whats actually going on in the code.

This. WYSISYG-editors should be used as a helper in your work, not do the work for you. They have a habit of producing a lot of junk-code (although better nowadays than before) especially when in the hands of amateurs who often do things "the way they shouldn't be done". I have customers who loves putting tables within tables within tables within tables... Well, you get the point.

If you want a simple "get started" homework, do this:

1) Create a simple web page, by hand. By hand equals typing everything by hand, no copy & paste and no WYSIWYG-editor. A logotype, a simple menu (no dropdown, just 3-4 simple different pages to click), a content area with a few images with text. Try aligning the images differently of the text, left, right, around etc. And a footer! lipsum.com is commonly used to get text to play around with. Try using different stuff you can think of, like icons in front of every menu item, a big nice background on the website, a header with a background. You know, stuff like that. Play around!

After all that is done and you've played around a bit, do this:
2) Recreate another website (well, only 1 of their pages, not the entire site). Like maybe the frontpage of mmo-champion. Copy their graphics like the logotype and other stuff you gonna need, use a snippet tool or good ol printscreen to cut out pictures you struggle to find or similar. Then just use coding to position all of this to make it look like the website you're recreating.

Use stuff like W3 validator to help you while coding, if you validate your code it can tell you simple things you're missing, like forgetting to close a element or that you've named the ID of a element by starting with a number and not a letter. My point is mainly: Get a good grasp of the basics in your head, after that you can continue on and do the cool stuff you really wanna do!

Edit: Oh, and also let a person who knows coding take a look at your code - it helps a lot! If you don't have friends who knows web design, well you got the whole internet to ask!

[whyfish]

First of all, you want to not be using Dreamweaver unless you're only using it as a IDE to code in.
Dreamweaver is for lazy coders, and as someone who is newly starting out, it's generally not a good idea as the Dreamweaver UI is very user-friendly in terms of "Click this and you're done". It hardly requires any personal intellect or brain power whatsoever. I'd only recommend using Dreamweaver if you're confident you know the coding behind what you're clicking.

The basic framework for coding a website is HTML, and thanks to HTML5, HTML has never been easier to code. However, unfortunately, HTML is all it is - just a framework. To properly and graphically organize your page, you'll want to pick up CSS down the track. CSS is also simple once you get use to it, but it can be a pain to get used to. However, the good thing about CSS is that once you've set out your CSS properties then it applies to all of your HTML pages (so long as you link them appropriately in your HTML code).

Javascript is also a nice way to integrate user-friendly user interfaces into your site, such as News Sliders and real-time displays (such as a drop down menu dropping down when you hover your mouse over it).

wwwa.w3schools.com (remove the 'a' because I can't post links yet) is a good place to start for coding, but you will definitely want to look for eBooks specifically for a language if you want a much more advanced and in depth analysis of how stuff works.

[Tyrianth]

wwwa.w3schools.com (remove the 'a' because I can't post links yet) is a good place to start for coding, but you will definitely want to look for eBooks specifically for a language if you want a much more advanced and in depth analysis of how stuff works.

Can people please stop referring him to w3schools. It is a terrible site to learn from full of missinformation. Check out w3fools for some examples of just how bad that site is.

htmldog is much more reliable.

[AetherMcLoud]

This flowchart might help: http://8.mshcdn.com/wp-content/uploa...-flowchart.jpg

[Drunkenvalley]

Can people please stop referring him to w3schools. It is a terrible site to learn from full of missinformation. Check out w3fools for some examples of just how bad that site is.

htmldog is much more reliable.

Man, I've only used w3schools for vague reference for years now. Interesting alternatives there for sure on w3fools. o.o

[Deleted]

Great answers, really what I needed!
Yeah the thing whats dangerously appealing with Dreamweaver is how easy things are, linking a css to a html is 1 click etc. But I guess I'll learn how to do that without any tools soon enough.
I guess I'll try notepad++ then.
What about php? Just trying to figure out some kind of order in whihc to learn things, at the mo, html, CSS and Java I know those three will take a while to grasp but would be nice to know where to go after that.
Thanks again for all the replys!

Cheers

[Tyrianth]

Great answers, really what I needed!
Yeah the thing whats dangerously appealing with Dreamweaver is how easy things are, linking a css to a html is 1 click etc. But I guess I'll learn how to do that without any tools soon enough.
I guess I'll try notepad++ then.
What about php? Just trying to figure out some kind of order in whihc to learn things, at the mo, html, CSS and Java I know those three will take a while to grasp but would be nice to know where to go after that.
Thanks again for all the replys!

Cheers

PHP is a backend server side language. It's easy enough to learn, if you plan on going that route I would also suggest learning Python or Ruby.

In the order you should learn things:

1. HTML
2. CSS
3. JavaScript

For the backend:

1. PHP/Python/Ruby (Pick one, doesn't matter what order. I suggest Python)
2. SQL (Just basic shit like INSERT, SELECT, and DELTE should do for your needs)

[Fuzzykins]

Can people please stop referring him to w3schools. It is a terrible site to learn from full of missinformation. Check out w3fools for some examples of just how bad that site is.

htmldog is much more reliable.

They're just picky. The misinformation listed is minor. It's just another crusade against a few errors. It's a great resource for beginners. If we're going to judge based on errors, I'm going to discount everything you say because your signature was against the guidelines.

[Tyrianth]

They're just picky. The misinformation listed is minor. It's just another crusade against a few errors. It's a great resource for beginners. If we're going to judge based on errors, I'm going to discount everything you say because your signature was against the guidelines.

It wasn't against the guidelines when I first created it, and I don't around teaching people how to make signatures. And "it's just a few errors"? These people are teaching plenty of bad practices to people who are just beginning to learn web development.

Just a few examples:

Browser Support. The <q> tag is supported in all major browsers, except Internet Explorer.

Completely false (and how is this a minor error)
Edit: though this has been recently updated.

The <tt>, <i>, <b>, <big>, and <small> tags are all font-style tags. They are not deprecated, but it is possible to achieve richer effect with CSS.

Big and tt are not only deprecated but they are obsolete. Also a site that is supposedly the leader in html/css tutorials should never advocate using ANY of these tags as they are style tags and should be done with CSS.

Internet Explorer does not yet support the @font-face rule.

Again completely false. (Microsoft actually invented the @font-face)

[Drunkenvalley]

I don't think you grasp the concept of being picky, Tyrianth. While I most certainly think it's time to change to a different source and that w3schools is growing increasingly out of synch, w3schools still teaches its students well.

[Fraza]

Take it from me to you, you'll start to learn it, and give up. Take a proper class as opposed to trying to teach yourself. If the website is for personal use, use WordPress.

< Self-taught, now working professionally. The classes I was in I taught the teacher. It's very hit and miss with those.

Some tips:
Forget about Dreamweaver (and Wordpress, Frontpage, Publisher etc). Learn proper HTML/CSS for a few years, then start using it if you so wish. Of course by then you're so used to doing stuff by hand you'll probably never use it anyways. Get a decent IDE, Notepad++ is perfect for smaller stuff. Practice, practice, and practice. Start out with small stuff and go from there. You will find tons of resources on the internet to help you on the way, if you just know what to google.

You will probably want to pick up a graphics program as well (paid - Photoshop, free - GIMP) and learn that. You don't need to be pro at it, just to learn how to cut up designs for HTML/CSS (Photoshop at least has an automatic function to generate HTML with images for you - do not use it; do it by hand).

If you also learn PHP, you can make dynamic web pages on your own, which is pretty cool if you ask me.

It took me 2-3 years from start to land a first freelance job and 3 years doing that to start working full-time. You can probably pick it up faster if you're dedicated, although much of what you pick up comes with experience and actually doing stuff, not reading stuff.

Best of luck in your ventures!

PS: Also, nothing wrong with W3Schools. Tons of great information there and I still use it today when I need a quick reference on something.

[Tyrianth]

I don't think you grasp the concept of being picky, Tyrianth. While I most certainly think it's time to change to a different source and that w3schools is growing increasingly out of synch, w3schools still teaches its students well.

I don't think expecting the "leaders" in web dev tutorials to post accurate information is being picky. Especially when a lot of the errors are major.