You know, we use ad-blockers as well.
We gotta keep those servers running though. Did you know that we publish
useful books and run
friendly conferences — crafted for pros like yourself?
E.g. our upcoming SmashingConf New York, dedicated to smart front-end
techniques and design patterns.
Soh Tanaka, based in Los Angeles, CA, is a passionate front-end developer and designer who recently launched a CSS Gallery called Design Bombs. He specializes in CSS driven web design with an emphasis on usability and search engine optimization. For more front-end Web development tutorials, check out his Web design blog.
Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources.
With that in mind, let's look at some clever techniques developed and used by top professionals in the Web design industry. We can use their examples to develop our own alternative solutions.
CSS has become the standard for building websites in today's industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS.
We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites: Padding vs. margin, Floats, Center alignment, Ordered vs. unordered lists, Styling headings, Overflow and Position. Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it: Background images, Image enhancement, PSD to XHTML conversion.