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?"

Comments

Mmmm, XHTML is tasty

[Southpaw018]

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
tag being replaced with />. 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!
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 :)

Re:Mmmm, XHTML is tasty

[Cyphertube]

I concur with the XHTML and CSS. If you don't know these, you don't know the full extent of what you CAN do in the browser. While I don't think every site has to be in XHTML, it makes it much easier to transition over to working with XML docs if you already tag in an XML format.

PHP is a great language for coding the dynamic side. While there are lots of places that use ASP, I found that ASP is awkward and really isn't built well. So stick with PHP. Learn to write SQL queries too, and integration with MySQL won't be so tough.

While I promote hand-coding, look into getting a good IDE of some kind, like TextPad. That way you can validate your code and make sure you don't screw up every five minutes. XMLSpy Home Edition is also pretty good for such things.

CSS is great stuff, and while you'll be frustrated when browser X, Y, or Z doesn't support something, there are ways to make the page degrade gracefully. Start looking for CSS Hacks and you'll find plenty of workarounds. Always write for a good CSS-compliant browser and then fix for the broken (like IE).

Re:Mmmm, XHTML is tasty

[b4k3d b34nz]

Having learned the things I'm about to list in a less-preferred order, I recommend learning in this order. Some may overlap a bit.

First, learn a lot more about HTML than you know. Learn how to create the correct structure in your sites, and try to avoid excessive tags such as tables and divs. Use page headers (h1, h2,...) and paragraph (p) tags and avoid line breaks (br) unless you're actually attempting to do a line break and not just creating space. Here's a good article to read: http://brainstormsandraves.com/articles/semantics/ structure/.

Learn XHTML, and while you're at it, learn a little bit about basic XML and how it works. W3Schools has a good introduction. XHTML, XML. Don't go too far just yet with XML.

While you're learning XHTML, you'll inevitably encounter CSS. The W3C has plenty of links to articles. Make absolutely sure that you learn CSS, it is the pivot point of learning truly professional looking web development (even if you don't want to do it professionally).

Eventually, you'll need to either build your own system for a blog (as you mentioned you'd like to do), or use a blog management system such as Wordpress. If you choose to do it yourself, you need to learn 2 things. SQL and PHP. I recommend using MySQL (an implementation of SQL) because it's free. Most webhosts will support PHP and MySQL as well, so it's more widespread. W3Schools has the easiest introduction to SQL that I've seen. PHP.net has a complete PHP reference. Make sure to check out the mysql section, because that's what you'll be using most.

Scripting comes next. DevGuru has a pretty good, although incomplete reference for basic JavaScript. Basically, just do a search on Google for Javascript reference and you'll pretty much be able to find anything you want. As you get more advanced, try to understand more complex JavaScript such as the Prototype library, among others.

At this point, you'll have a firm grip on web development. Go back and refresh your skills with XHTML and CSS and you'll find out how much you still have left to learn.

There are many other things to learn about web development, specifically if you want to do web programming and application development. That's a whole other can of worms though.

web design or web programming?

[CanSpice]

You really sound like you're talking about two different things. First off, you say you want to learn better and more advanced web design. If this is the case, then you should check out the CSS Zen Garden for inspiration. Use that as a basis for learning about advanced CSS (Cascading Style Sheets) techniques, page layout, colour integration, and so on. They have links there for places you can steal from. Eric Meyer also has excellent ideas. A List Apart has excellent columns and tutorials.

Second, you talk about the alphabet soup of AJAX, XML, Perl, etc. This is web programming. It doesn't have anything to do with web design, it has everything to do with web content. I don't know about advanced web programming (I've done all mine in Perl, PHP, ASP, and ColdFusion, and those last two were five years ago). Others can chime in on that count.

Web guides

[wanerious]

I was in your shoes, too --- just a smattering of HTML. I needed to create pages for my students and local sailing association, so I availed myself of Web Schools from W3C, which is pretty straight from the horses mouth, but no tricks or advanced techniques, and then studying layout like CSS Zen Garden and Boxes Tutorials. I tried to go XHTML 1.0 Strict, and validated my pages with the W3C validator, which gave useful feedback. (Don't look at my "home" page indicated by my ID --- it's just a stub). You're welcome to look at my amateurish example at my school home page. Good luck.

some tools

[kwench]

A true (X)HTML freak will probably use a sophisticated text editor (like EditPad for Windows, nedit, bluefish or even emacs for Linux...), but for beginners a tools like Dreamweaver or Mozilla Composer or its next version nvu might be a good place to start. With NVU / Mozilla Composer, if you need something special in your source, you can switch to source-edit-mode and change or insert it.

A big disadvantage of many hight-level tools is their inability to cope with PHP. (By the way, the parent is right to say that PHP is a much better beginner's choice, since it is not as cryptic in syntax.)

On the client's side, you might find javascript useful. With a HTML layout tool, PHP and javascript, you can probably do most pages.

Random assortment of advice

[Bogtha]

You'll hear lots of people talking about how you should use XHTML. Ignore them. You'll hear lots of people talking about how you shouldn't use XHTML. Ignore them too.

There's little practical difference between the two languages. Browser support isn't quite there for XHTML, so the chances of there being any practical benefit to you using it are small. People will say that the added strictness will help you learn, but you aren't going to notice that strictness unless you serve it in a special way or validate, and you can validate HTML 4.01 just as you can with XHTML.

A much more important distinction to be made is the difference between Strict and Transitional. Transitional includes all kinds of old-fashioned crap that you shouldn't be using. You should use Strict.

After every edit to a document, run it through a validator. The W3C has free validators that you can use. If you do it this way, you will quickly notice when you are doing something wrong.

Ignore all the buzzwords like Ajax for now. Most buzzwords are things you can learn afterwards and use to enhance what you already know; you should learn the foundations first. You need to have a good working knowledge of HTML, CSS, URIs, and HTTP. Javascript, a server-side language and SQL will come in handy later; PHP is far from ideal, but it's easiest to get hosting with it. Same goes for MySQL.

Remember that the foundation for a website is its HTML. Everything else is an optional extra. Don't write Javascript that breaks things for non-Javascript users, write good alt attribute text so that people with images unavailable can read your pages, etc.

There's a hell of a lot to learn, but don't be intimidated, because most of it's simple, and most of it you can learn piece-by-piece.

Lurk on the relevant Usenet newsgroups: comp.infosystems.www.authoring.*, comp.lang.javascript, etc. Read their FAQs. Read the specifications for things like HTML, CSS, etc - they aren't that hard to read. Use Google before asking anybody anything. Ask smart questions.

When debugging something, save it to a temporary test page, and reduce it to the smallest amount of code possible that reproduces the bug. Nine times out of ten, you will find the bug by doing this. The rest of the time, you have a testcase to show people on the newsgroups.

Learn to hate Microsoft in advance. It saves time. You will wish you could travel back in time to kill Internet Explorer's dev team before they release it. It's that bad.

Not too hard

[Metasquares]

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).

Re:a few random ramblings on places to start

[dslauson]

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.