For someone that knows little about designing sites w/ CSS, I’m looking for advice on the best learning material that shows how to design a site using CSS. I have CS4 and want to find out what steps from beginning to end that will take me from the page layout design, slicing, and css layout in dreamweaver to create a complete website? There’s so much information out there I thought this would be a great place to start. By the way, I’m a visual learner so please suggest any tools that will assist.
I would not suggest using CS4 for site development. use Photoshop for images, and maybe Fireworks to build a prototype, but thats it. Use a basic program like notepad or wordpad for the code. As far as resources go, I learn from books and online resources. www.htmldog.com
I recommend learning to code your HTML and CSS by hand rather than slicing using Adobes built in visual tools, they are intended for people who want fast results (without caring about the quality of what comes out). Learning to build websites and using stuff like HTML and CSS is pretty easy to get started with. If you want some books to get you started, I would recommend the Head first HTML and CSS guide, it’s aimed at total beginners and is VERY visually orientated (pictures and useful tips in the sidelines to guide you). Have you checked out SitePoint’s own books? There’s some decent titles which you could check out too.
Never use notepad (mentioned above) to build a web site. It is a very primitive editor indeed, with few, if any, changes or improvement in the last ten or 15 years.
Those who recommend it want to give the impression that they are a hardcore raw code writer, but notepad has no useful facilities for anyone writing code of any sort.
Use Notepad++, a totally different editor with lots of things that will help you, not hinder you. It is designed to be used by coders. (But please, let’s not convert this to the first “Which text editor do you use” thread of the year, there will be a dozen or so others later on, of course.) All other text editors are vastly superior to notepad - it’s not even worth the dignity of an uppercase latter to start its name.
I use notepad :). I think beginners should use it (not that I’m a beginner lol) just to not let a program with self closing stuff. Get in the habit of coding it correctly, and then you can let a program speed things up for you
IMHO there’s nothing wrong with using Notepad. HTML, CSS, javascript, PHP, are all text (not binary) files after all. Sure, you could compare it to a mechanic using a socket wrench instead of an air wrench, but it still works. And for starting out you don’t have to worry about learning the editor, you can concentrate on learning how to write code. Then if you want a power editor with bells and whistles, go for it.
What about syntax highlighting, that is a very useful feature to have when coding, things like variables, constants, built in fuctions, comments, etc can he highlighted in different colours.
It’s useful yes, but I personally find that it makes my eyes droopy and I can’t get much work done.
I prefer notepad because it’s just straight up coding, no flashy colors or anything.
Off Topic:
Oh, and the fact I can’t afford dreamweaver ;). I have notepad++ and gvim (or whatever it’s called, Tommy recommended it) but I just am used to notepad
Well despite what the others are saying about using a simple editor, if you’ve got Dreamweaver already, and you’ve paid good money for it, it makes no sense to not use it from the start, as long as you stay out of design view and use it as a fully-featured text editor and not a visual editor. CS4 apparently creates better code in visual design than its predecessors did, but if you want to learn how to code CSS & HTML properly, then using design view’s not going to help. Use it as a text editor and take advantage of all the features that enable you to create code quicker than having to type it all out manually.
Beginners struggle with notepad’s habit of saving files as .txt (or rather index.htm.txt for example). And many struggle to find out where they are going wrong when the folder listing clearly shows index.htm, but it has been saved as index.htm.txt . Even if they solve that problem, it can easily return and catch them out when they are not concentrating.
I strongly agree that if you already have DW, just switch to code view - I have an ancient copy, about 6 or 8 years old I think, and I use it in code view, when not using Notepad++. (My copy of DW does not handle floated things properly in design mode, so using that is usually a waste of time.)
I use DW CS3 all the time as a code editor as there are no other editors that I’ve tried that come close to its code handling, highlighting, syntax checking, formatting options and code collapsing etc. I can’t live without it and believe me I’ve tried.
The only problem with it is it is very slow and unusable on large files and very expensive, if as I do you only use it for code. (I never use design view and the only other feature I use is the built in ftp.) If they sold it as a code editor only and stripped all the other stuff out it would be great.
I have CS4 and want to find out what steps from beginning to end that will take me from the page layout design, slicing, and css layout
Regarding slicing and dicing I wrote a series of articles a long time ago on how to how to go from psd to html which may prove useful if you haven’t done this before.
As others have said you do need to learn the basics first because a lot wont make much sense unless you’ve got a grasp on how things work.
Study the FAQ sticky thread at the top of the forum and also the FAQ tips thread has a lot of useful links in there also.
Dr John, I started out on notepad (like many others) before the likes of Notepad++ even existed. And sorry to call you out but it’s simplicity is part of it’s appeal. While Notepad++ (which I do use now) has a lot of useful stuff like syntax highlighting which can prove useful in visualising your code, there is absolutely nothing wrong with using a plain text editor (with no bells a whistles) if you want to rapidly produce something quick and dirty with no requirement to install another piece of software.
I use it because I’m too lazy/scared to try any other editor.
You are in the perfect condition to learn vim. : )
Some colleagues of mine have started using Genie (if I’m spelling that right) which gives code tips and shows possible functions etc (they write PHP and it has a PHP setting).
There’s an IDE written in Perl called Padre which, it’s not finished but is usable, and the idea was to be that it can be a Notepad when you start with it, but can be as complicated as Eclipse, etc (plans are for it to have modes for HTML, Perl 5 and 6, Java, Python… not sure what else they’ll add in there).
