Toluu

NETTUTS - Web development tutorials and links

Web Development & Design Tutorials

Everything you Know is Wrong!Yesterday

Everything is changing.
This weekend, I read a very interesting book: “Everything You Know About CSS is Wrong”. The book illustrates how, now that IE has passed the ACID 2 test, we can finally begin to build our websites the proper ways. Up until now, we’ve been forced to implement hacks to form the perfect layout - absolute positioning, precarious floats, etc. But that’s all beginning to change! I’ll show you how in twenty minutes.

CSS tables are so much easier to use that it’s worth adopting them as soon as you possibly can.
-Kevin Yank

This tutorial will show you how you’ll be building your layouts in the future. Actually, you should be using these methods right now! Rather than relying on floats and absolute positioning to build our layouts, we’ll instead focus on utilizing css tables.

Step 1: Creating A Two-Column Layout

Top 10 Web Dev Blunders of 2008December 2

It’s inevitable: We’re all going to screw up at least once when it comes to the highly volatile world of web development. Downtime, stupid UI mistakes, miscues on communication, bad product launches… they happen to the best of us. Literally. Over the past year, many of the top websites in the world have committed serious development no-no’s. It’s almost comforting to know that the best development teams in the world aren’t perfect either.

Instead of viewing this article as a way to bring down the big guys a peg or two, let’s look upon it as a teaching tool. Learning is all about making mistakes and finding ways to correct them. It’s nice when we can occasionally learn from other’s mistakes, instead of screwing up ourselves.

Here’s a list of the 10 biggest “Whoops!” moments of 2008 in web development.

10. Ecommerce Sites Down On Black Friday

Here’s every online retailer’s worst nightmare: A flood of people flock to your site begging to spend large amounts of money, and your site is down. Unfortunately, this past Friday it became a reality for many retail sites on the Web, large and small.

Black Friday is the biggest shopping day of the year in the U.S., and the same is true for online shopping. Many of the major sites like

It’s Web Design Week at PSDTUTS!December 2

If you haven’t already, head on over to join the party at PSDTUTS for Collis’s inaugural ‘Web Design Week‘. All week Collis will be sharing some brilliant tips, advice and in-depth tutorials on how to create high-end web designs that work.

Get things started by learning how to Turn a Texture into a Seamlessly Tiled Backround, and discover How a Simple Layout can be Mixed ‘n Matched With Patterns, Photos and Backgrounds.

Wonderful Icon SetDecember 1

Cost: Free, links back
Found Via: www.smashingmagazine.com/

Nearly a month ago, Smashing Magazine released a new icon set: Practica. “The icons are available in resolutions 64×64px, 128×128px and 256×256px, in 32-bit transparency PNG. These icons can be used for a variety of purposes — in particular, in portfolios and in corporate designs.”

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Prototyping With The Grid 960 CSS FrameworkDecember 1

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

That sounds nice, but how do we do that? There are a lot of articles on the internet blasting or supporting CSS frameworks, but none have any content to help inexperienced readers decide. This one is different. This article covers the entire prototyping process. Imagine you are given a design and you need a mock up for the client. This article explains the basics of Grid 960, planning the grid for a design, and coding the prototype. The sample design will exploit most capabilities of Grid 960 giving you a firm knowledge base to work on. After you’ve seen the design below, its time to learn about how Grid 960 works.

Making the Grid

Grid 960 works by using classes through inheritance. Grid 960 provides two grids: