Web design as a hobby

Riddell · 28 Dec 2011 at 09:02

Hi all,

I'm looking for a new hobby which I can really get stuck into and seeing as I spend so much time on computers already I thought web design might be quite interesting.

I've done a small amount of research and I'd be interested in learning HTML(5?) and CSS (and potentially java) and have been recommended the following websites as a good place to start:
HTML Dog & W3Schools

For anyone how does Web Design for their job (or a hobby) what would you say are the pro's and cons? Also, what software would you recommend?

Thanks.

moogle · 28 Dec 2011 at 09:40

Riddell said:
For anyone how does Web Design for their job (or a hobby) what would you say are the pro's and cons? Also, what software would you recommend?

Thanks.

Notepad++ works fine for me.

Cons for me would be to get things looking the same across all browsers (could be I'm bad at CSS, but the browsers have different ways of reading things it gets quite frustrating)

Pros - Hey you can make a website!

JimAroo · 28 Dec 2011 at 10:11

I understand you wanting to do HTML5 and CSS, but why Java?

If you are doing web stuff you may as well do some PHP.

Some good "free" text editors:

- Notepad++
- Sublime Text 2
- ConTEXT

Pros for some, Cons to others: Is that you have to constantly be updating your skill set as new technologies appear. For example, HTML > HTML5, CSS > CSS 3, PHP > PHP5.

Things are constantly becoming obsolete and you have to keep reading up on these things to keep track of the new features and improvements that come along.

These new technologies make our lives easier, for example with CSS3.. We no longer have to use divs and background images to get those pretty rounded corners, we can now just do it through CSS3.

Sure you get the idea.

FabienO · 28 Dec 2011 at 11:37

If you're using Chrome, get the Stylebot addon. Also get Firefox and Web Developer Toolbar. Or visa versa.

Stylebot is great for tweaking CSS. Firefox for debugging.

I'd recommend starting off with some simple free templates (www.oswd.org) and just try and make it look as different from when it started as possible, in a good way

.

Helps a lot.

Sherbs · 28 Dec 2011 at 11:45

He probably means JavaScript.

Riddell · 28 Dec 2011 at 13:39

Sherbs said:
He probably means JavaScript.

Yeah, excuse my ignorance, I meant JavaScript. Thanks for the suggestions everyone. I'll try and keep this thread updated with my progress.

AHarvey · 28 Dec 2011 at 14:24

I would suggest you invest in Head First HTML, CSS & XHTML as this will give you the best grounding of HTML and CSS (XHTML is pretty redundant now) and then get their HTML5 book.

Don't forget, design and development are two separate areas, being able to do one doesn't mean you can do the other.

JimAroo · 28 Dec 2011 at 19:15

A brilliant and free HTML5 book..

http://www.diveintohtml5.net/index.html

welshdragon · 28 Dec 2011 at 21:30

I've been doing the same lately. Great recommendation from here were two books, head first html/css and creating a website:the missing manual.

The headfirst book was greta at getting me started but the missing manual book is really good for moving forwards.

Cheers fabieno for that link by the way!

Bucket · 28 Dec 2011 at 21:31

You do of course need to understand design and not just code though.

edscdk · 28 Dec 2011 at 21:37

Bucket said:
You do of course need to understand design and not just code though.

Any fool can learn the code unless stupid, it's the design bit thats hard... I can knock up a web site easily with some js asp or what not on bit I find it totally impossible to make it look good...

welshdragon · 28 Dec 2011 at 21:42

Been learnign the code to get a good base. But I understand what you are saying. What design programmes for simple websites do you use? The missing manual goe son to say that once you can code you need design sofwtare really. Something like Microsofts's expression studio or dreamweaver. It says most deisgners don't code everything form scratch everytime?

Riddell · 29 Dec 2011 at 08:58

welshdragon said:
I've been doing the same lately. Great recommendation from here were two books, head first html/css and creating a website:the missing manual.

The headfirst book was greta at getting me started but the missing manual book is really good for moving forwards.

Cheers fabieno for that link by the way!

Thanks for that I'll look into it.

I've so far been following the tutorials on W3schools to get me up to speed with the basics. It's pretty fun and interesting so far.

SkidMarkKing · 29 Dec 2011 at 09:43

Yeah W3schools is brilliant. Used it a lot at college to refer too. Nice thread by the way. I finished college in June and im wanting to go in to web design but jobs are so limited. Im putting in for voluntary work in the new year to get my foot in the door. As far as design, it is a good idea to drawn/write some designs down on a notepad (hard notepad not on the computer) along with sizes of DIVs etc then when you come to create it the job is less complicated

~All the best

Randomface74 · 29 Dec 2011 at 10:28

I'm a professional / guru -

You can take this as far as you want to take it, I learnt as a hobby, it turned into a degree, and then into a career. The most important lesson isn't HOW to achieve something, it's WHY you achieve it a SPECIFIC WAY and not another.

Consider:
- Someone with IE6
- Someone blind
- Your gran
- Your child
- Someone on a mobile

In terms of software - you need a text editor, a graphics package, a bunch of browsers to test with, and the following firefox extensions help a ton:

- Colour Picker
- Web Developer Toolbar
- Firebug

People are fussy over their choice of text editor, but as someone who's taken this from a hobby to a job, I'd suggest you start with Notepad++ until you find the need to build dynamic content - then switch to Visual Web Developer. That'll take you into ASP.NET for your dynamic content, rather than PHP - this is a smart choice should it end up becoming a career you'll get paid better!

For graphics, I have a copy of Photoshop, I'm aware of something called GIMP which is free - but I don't rate it - perhaps Photoshop Elements if you're a by-the-book kinda guy.

Books!
- (motivational first read) Designing with web standards - jeffrey zeldman
- (javascript best practice) DOM Scripting - jeremy keith

FabienO · 29 Dec 2011 at 10:30

edscdk said:
Any fool can learn the code unless stupid, it's the design bit thats hard... I can knock up a web site easily with some js asp or what not on bit I find it totally impossible to make it look good...

Seems a little demeaning. Unless you're only referring to the actual front-end build. I assure you many aspects of back-end site building are just as difficult as design.

Riddell · 29 Dec 2011 at 12:41

billysielu said:
I'm a professional / guru -

You can take this as far as you want to take it, I learnt as a hobby, it turned into a degree, and then into a career. The most important lesson isn't HOW to achieve something, it's WHY you achieve it a SPECIFIC WAY and not another.

Consider:
- Someone with IE6
- Someone blind
- Your gran
- Your child
- Someone on a mobile

In terms of software - you need a text editor, a graphics package, a bunch of browsers to test with, and the following firefox extensions help a ton:

- Colour Picker
- Web Developer Toolbar
- Firebug

People are fussy over their choice of text editor, but as someone who's taken this from a hobby to a job, I'd suggest you start with Notepad++ until you find the need to build dynamic content - then switch to Visual Web Developer. That'll take you into ASP.NET for your dynamic content, rather than PHP - this is a smart choice should it end up becoming a career you'll get paid better!

For graphics, I have a copy of Photoshop, I'm aware of something called GIMP which is free - but I don't rate it - perhaps Photoshop Elements if you're a by-the-book kinda guy.

Books!
- (motivational first read) Designing with web standards - jeffrey zeldman
- (javascript best practice) DOM Scripting - jeremy keith

Thanks for that. I've been using Notepad++ so far and it seems quite nice. I use paint.NET instead of GIMP but I'm not sure if it's a bit simple? At what point do you need to start using something like Dreamweaver or do pro's hard-code all their websites?

Thanks.

Randomface74 · 29 Dec 2011 at 12:55

Riddell said:
Thanks for that. I've been using Notepad++ so far and it seems quite nice. I use paint.NET instead of GIMP but I'm not sure if it's a bit simple? At what point do you need to start using something like Dreamweaver or do pro's hard-code all their websites?

Thanks.

Use paint if you want, nobody minds - the important thing is that you can create the design you want. The more advanced you get, the more tools you need. I personally value the compression options in Photoshop, it lets you compare different versions of the same file to see how much quality you want to sacrifice to create a smaller file. It also gives you a PSD (project) file so you can easily make changes later.

I see it as three stages of editor, used by three stages of people. You'll figure this out for yourself as you get to the stage where you want more than a static page

1. Basic text editor - e.g. Notepad++
You already know about that. Useful for learning or creating basic templates.

2. WYSIWYG (what you see is what you get) - e.g. Dreamweaver
Gives you three modes: basic text, preview, and split.
You sacrifice control of your code because it doesn't always generate what's "right". Designer types usually use Dreamweaver because they like the ease-of-use and don't understand the downside. They also don't need to write any code because they're not programmers, so they pass their Dreamweaver-generated mess onto their development team.

3. IDE (Integrated Development Environment) - e.g. Visual Studio
Gives you everything above, plus an application framework for writing code to do... anything. This is what computer-science types use, usually in text mode. You learn ASP.NET C# - this is how you get dynamic content onto a web page in a professional environment. (I expect some folks to mention PHP, but I'm not going to debate that).

AHarvey · 29 Dec 2011 at 13:43

Riddell said:
Thanks for that I'll look into it.

I've so far been following the tutorials on W3schools to get me up to speed with the basics. It's pretty fun and interesting so far.

DriftKing said:
Yeah W3schools is brilliant. Used it a lot at college to refer too.

It is pretty well known that w3schools is a big pile of arse, contains lots of mistakes and isn't worth the webspace.

welshdragon · 29 Dec 2011 at 16:26

Riddell said:
Thanks for that. I've been using Notepad++ so far and it seems quite nice. I use paint.NET instead of GIMP but I'm not sure if it's a bit simple? At what point do you need to start using something like Dreamweaver or do pro's hard-code all their websites?

Thanks.

I too would like to know that. Been learning the basics with notepad++ but what is the next step? Code all things using it? Or move to something like expression web and use that, and then manual code for tweaking?

On that note anyone use expression web? Thinking of picking a copy up instead of dreamweaver.