First and foremost, a user needs to be able to create an account. This will give them access to the rest of the site's functionality.

As it stands, when a user visits our app, they're greeted with our "sales" page, which encourages them to click the "Sign Up" button in the top right of their screen:

The home screen of our app

Clicking that "Sign Up" button directs the user to /signup.php—our first order of business should probably be to build that page.

Creating the Sign-Up Form

In our app's root directory, create a file ...

It’s time to get our hands dirty with some markup!

We know we have a couple different pages to deal with here. The main page of course, which acts as both our list page and sales page depending on login status. But then we have sign in and sign up pages and account pages. So let’s be smart and work modularity. That means we’ll make files like “header.php” and “close.php” that we can include on multiple pages so we don’t have to repeat common code (e.g. the DOCTYPE, analytics code, and ubiquitous things ...

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to ...

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxes a bit, and about their behavior.

What we haven’t talked about much is the box itself. How is the size of the box calculated exactly? Here is a diagram:

If you are a Firebug user, you might be used to the diagram like this, which does a nice job of showing you ...

Many of us have many “homes” on the interwebs. Personally I use Twitter, Flickr, ScrnShots, and Facebook. These web services are cool enough to offer ways to interact with them and pull data out of them without even necessarily visiting the site itself. This is called an API (or Application Programming Interface).

You can think of an API as a lot like an RSS feed. If you read CSS-Tricks through a feed reader like Google Reader, you know that you don’t even need to visit the site to read my content, because that data is being served up another ...

LearningjQuery.com has a pretty cool presentation of the dates of their blog posts. Check it:

The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup:

Sprites at Their Best

Hopefully it’s fairly obvious that each date doesn’t have it’s own unique graphic. The dates are pieced together from a single graphic (css sprites!), where different smaller parts of the graphic are shown in the three different regions ...

Until now we have not had a licensing option available for developers. This has meant that web designers who wanted to use our themes for their clients had to go through the trouble of registering new accounts. To rid this hassle, and to make things more affordable for developers, I have added an Developer’s License for purchase from within the member’s area. The price is a one time fee of $89, and gives you permission to use the themes for all of your client web design ...

I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it!

I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It’s just so tempting to see if a beautiful website is built with beautiful code as well, or ...

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here...
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www ...