Slashdot Mirror
Webpage Building Guides for the Uninitiated?
smilingbandit2 asks: "For the past several months, I've wanted to dive into the world of webpage design. I'm not looking to creative anything cutting edge or even terribly useful, just hobby pages and weblogs that look professionally made. Unfortunately, my knowledge of website design consists of one basic HTML class I took in highschool, about 8 years ago. I feel comfortable enough coding in HTML, but it doesn't give me the results I want, and I know nothing about any other coding languages. Now, I'm not scared of learning new software or languages - in fact, I'm eager to expand my skillsets - but I don't know what to study. XML, Perl, AJAX - nothing but alphabet soup to me. I don't about anything beyond HTML. I'm completely uninitiated in advanced web design. Now, I turn to Slashdot for help. Where should I begin on the path to design enlightenment? What're the languages, programs, or whatever that are worth knowing? Are there good guidebooks, useful websites, or insightful forums? Are formal classes worth a damn? What do you frequently use on your websites? Any helpful advice, generally?"
Good news, friend. XHTML, CSS, and PHP are the three major languages of the web today, and you already know one. XHTML is very, very similar to HTML. One change, for example, is the/>. The reason is that all tags must have a closing tag, like <a> </a> does. Lots of other stuff is mostly the same. The one big change you'll need to make is that all style tags have been dropped from XHTML. No more <b>! You use CSS now. Grab a book on moving from HTML to XHTML. There are lots out there! :)
tag being replaced with
As for programming languages, you'll probably be more comfortable with PHP than Perl. Again, I'd grab a getting started with PHP book and work your way in.
As for programs...I do everything by hand in Notepad. It makes for very sleek webpages, and there's no other way to get full control over your page's code.
Stick with it. I was in your shoes about 3 years ago, and now I do this for a living
ACs are modded -6. I don't read you, I don't mod you, I don't see you. Don't like it? Don't be a coward.
XHTML, CSS, and one server-side language (I like Perl, but use whatever you want) are really all that you need. You might benefit from some Javascript knowledge, but lack thereof won't kill you.
DO NOT hack up CSS unless you must. I've been developing websites, often professionally, for the last 10 years, and I have NOT ONCE needed to use a CSS hack because IE or some other browser is displaying something incorrectly. You can almost always fix these problems using standard XHTML + CSS without relying on hacks, and your code will be more robust as a result.
Browser tests in script are bad; check for functionality rather than a particular browser (quirksmode had a great article on this).
Remember that every new language/plugin that you use in a page shuts out certain groups. Use them where you must, but don't rely on fancy things such as flash for the core functionality of your website.
Use the right tool for the job, even if it's *gasp* a table or iframe. You'll be much faster than those trying to use some long and complex CSS to do something that you can do with a table, and the result will be indistinguishable (and will probably work on more browsers, since tables have been around for so long).
I think it's probably a good idea to have a few "JavaScript tricks" up your sleeve. After all, why make a round trip to the server when something can be done quicly on the client side?
A good web developer knows how and when to do something on the client side or the server side, and can make the two play nice with each other.
Personally, I have to agree with everything you said.
I'm still a beginner in web design, but I have found that some people can design and some can't. Some people can write books on design, but can't do it worth crap, and vice versa, the same applies to teaching it. Some people go for what works (the KISS method); others work on making their components applicable to multiple projects (make a template and fill in content). I can make a website that does just about anything I want it to do, but I can't make it (or the markup) even look presentable. I have friends that can do fancy designing in CSS, but don't understand what simple PHP statements like "if(!isset($_POST['submit']))" checks for, or how to build a whole multi-page form in a single file.
To elaborate on what you said, I believe any person can be plotted on a graph.
As far as web design goes, I believe you can plot people on a graph with the x axis to be considered creativity and a y axis to be considered logic.
Everyone falls into quadrant I or along the positive x-axis/y-axis (I don't know anybody that has negative creativity or logic, do you?)...
(I'll go with simple equations for ease)
Just to clarify before we start, whenever I use the percent sign, I'm talking about percentile...
Anybody under the curve "y=10+(100/x)^2 {100>x>0}" should be considered hopeless in the world web design and programming.
(If you are less than 10% in creativity or logic, even if you are 99% in the other, you'll never get anything accomplished...if you are balanced logical or creative; you need to be at least 25% in both)
Anybody over the curve "y=60+(100/(x-50))^2 {100>x>50}" is extremely well suited for pretty much any aspect of web design and programming.
(They must be at least 65% in both... If they are as low as 65% in one, they are 99% in the other... if they are a completely balanced person; they will be 75% in each...)
Between the 2 lines is the area where everyone has the potential to be a good web designer, but very few actually pursue it... as you move from the first line to the second, the people become, in general, better web designers
Remember I'm talking about POTENTIAL, not actual skill; a very creative and logical person has the POTENTIAL to be a great web designer, but may lack interest or initiative...someone who isn't creative or logical doesn't have POTENTIAL, but they could become a web designer with some effort...
"but for beginners a tools like Dreamweaver or Mozilla Composer or its next version nvu might be a good place to start."
;-)
No no no, no nono, nonono.
If you learn using a WYSIWYG editor you learn to use the editor - you don't learn to code websites. Learning to write code by hand is slightly more time-consuming while you're learning, but you're learning the skill you need to do the job, not learning how to instruct one of a selection of flaky, inconsistent, inefficient tools that, imperfectly, do the job for you.
"With NVU / Mozilla Composer, if you need something special in your source, you can switch to source-edit-mode and change or insert it."
Indeed. But how many users who learn using a WYSIWYG editor ever go on to properly learn the code that it writes for you? Almost none, comparatively - people are lazy.
Generalising wildly for a moment, I know two types of web designers: those who learned by hacking code, and those who learned by using Frontpage or HoTMetaL or Dreamweaver.
The ones who learned by writing code may subsequently use Dreamweaver or the like to quickly prototype pages, but they almost always end up dropping back into the code and optimising it by hand (especially with XHTML and semantic markup, which visually-oriented HTML editors almost by definition can't do for you).
The ones who learned by using an HTML editor use the editor, but it's because they find writing code difficult or frustrating, not generally through choice. It also means that when you want to do something unusual and you're forced to drop into the code-view, it's ten times harder because you aren't already familiar with the structure of the code in the way you would be if you'd written it yourself from first principles. And this is without even touching on the more advanced issues of bloated, tautological, machine-written code, or the undue influence on your design process of the visual angle over the semantic/navigational/informatics angles.
X/HTML isn't hard - it's not nearly as complicated as even the most basic programming language, and it doesn't come with all sorts of overhead and boilerplate code-cruft that makes using an IDE of any kind worthwhile (unlike, say, Java or Visual C++).
Short version: if a programming language requires three pages of boilerplate on every task, or you just want to get a job done quick 'n' dirty, use a visual editor.
If you want to learn a useful skill, and do the job right, use a text editor with syntax highlighting and a good reference resource.
Editors start you off quicker, but later on actively hamper your development into a coder. And by the time you've learned all the quirks and weird bits of a particular editor, I can guarantee you'll have less motivation to learn the actual stuff you need to know.
Everything in moderation, including moderation itself