CSS for the Mentally Retarded

DampCat · 14 Jan 2009 at 09:42

Hello.

In my time here it may have become painfully obvious that i'm not very good at anything.

To try and convince people otherwise, i've gone and registered a domain and bought some hosting so that i can put up a small site to support my CV and convince people to pay me lots of money to do things that i dont fully understand.

Basically, i'm looking to build a little site that just holds like an "about me" section, somewhere to host any database projects i've done, my photography, stuff like that.

What i'm looking for then, is some form of editor or program i can use to learn CSS. I understand the basics of it, and i've previously written HTML in Notepad, and CSS isn't ludicrously dissimilar from what i've seen... but try as i might it still looks like a 4 year old has been let loose with some crayons. More Autistic than Artistic.

Do programs like Dreamweaver/VS2008 allow CSS editing? If so, which should i use? If i can build something i like the look of, i'm happy to re-write it all in notepad or whatever but to save me time, hair and girlfriend points i'd quite like some form of program that will allow me to asses my work as i go along. Not drag and drop, as such, but just a helping hand.

What do you reckon? Which could do that?

:/ thanks.

LiE · 14 Jan 2009 at 10:04

Do you produce a mock-up of your design in photoshop first?

DampCat · 14 Jan 2009 at 10:14

Oh, no i didn't think of that. Do you think i should?

What woul di do with it after? Just recreate it or does it solve some purpose?

LiE · 14 Jan 2009 at 10:19

It will be easier to create a nice looking website if you create a mock-up image. Jumping into dreamweaver and trying to make something that looks nice will be quite difficult.

Have a look here: http://www.subcide.com/tutorials/csslayout/

Also watch the videos 1, 2, 3, 12, 13 and 14 - http://css-tricks.com/video-screencasts/

dave-lew99 · 14 Jan 2009 at 11:02

To be honest, some people just aren't designers -i'm not, i'm a coder - so if someone presents me with somthing saying "make my website/program look like this" i can do it.

Install the Firebug plugin for Firefox this will make your life a lot easier trying to edit CSS - especially when you end up with complex layers and it's harder to remember what interacts with what.

Egon · 14 Jan 2009 at 11:06

msm722 said:
It will be easier to create a nice looking website if you create a mock-up image. Jumping into dreamweaver and trying to make something that looks nice will be quite difficult.

Have a look here: http://www.subcide.com/tutorials/csslayout/

Also watch the videos 1, 2, 3, 12, 13 and 14 - http://css-tricks.com/video-screencasts/

Nice links. Particularly like the first !

SteveS · 14 Jan 2009 at 11:11

microsoft expression web is pretty nice i think. quite good at css

reflux · 14 Jan 2009 at 11:14

DampCat said:
Oh, no i didn't think of that. Do you think i should?

What woul di do with it after? Just recreate it or does it solve some purpose?

It'll allow you to visualise what the site could look like before blindly rushing in and starting to code. It also means you have most of your graphics already created and ready for when you need them.

DampCat · 14 Jan 2009 at 11:34

Awesome tips, thanks guys. I really don't want to give in and get someone to do it for me without at least trying it for myself. Lots of people do it, so im sure it's not as difficult as it first looks (such are most things)!

Thanks again for links and tips, i'll give it a bash and will probably be back for more

DampCat · 14 Jan 2009 at 22:23

Just a shout guys, i'm working with the tutorials above using Macromedia Homesite+ and all is going well. Cheers!

LiE · 14 Jan 2009 at 22:40

Post a link to the website when you're finished

Mattus · 16 Jan 2009 at 01:34

dave-lew99 said:
Install the Firebug plugin for Firefox this will make your life a lot easier trying to edit CSS - especially when you end up with complex layers and it's harder to remember what interacts with what.

If you haven't done this yet, most definitely do it! CSS drives me nuts - Firebug is the only thing which makes it tolerable.

nolimit · 17 Jan 2009 at 04:24

start coding the hard way using notepad and in a month time you will get the hang of all the codes and memorise it by heart.

Then you can start using firebug / web developer tools add-on for firefox and dreamweaver to enhance your workflow.

For all the things you said you could probably use wordpress with custom plug-in and flickr api to stream the photos onto your site, saving you bandwidth and backlinks.

there are countless tutorials from the envato group.

DampCat · 26 Jan 2009 at 13:14

nolimit said:
start coding the hard way using notepad and in a month time you will get the hang of all the codes and memorise it by heart.

Then you can start using firebug / web developer tools add-on for firefox and dreamweaver to enhance your workflow.

For all the things you said you could probably use wordpress with custom plug-in and flickr api to stream the photos onto your site, saving you bandwidth and backlinks.

there are countless tutorials from the envato group.

Just noticed this reply, thanks for that! Probably going to template it up, then pull apart the templates in Firebug and make changes here and there.

I'll see how it goes. i thought about paying someone but than that doesn't look cheap either