• HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 3Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll slice the PSD. Read More…
  • HTML & CSS
    Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 2Title image
    Continuing on with our Photoshop to HTML session, in this lesson, we'll begin constructing the markup for our website. Read More…
  • HTML & CSS
    Quick Tip: Work Backward to Understand Structural Pseudo ClassesCss structural pseudo classes
    Have you ever seen those scary looking CSS structural pseudo classes, like li:nth-child(4n+2)? Can you enunciate exactly what that means? If not, don't worry; I'll teach you how easy this is to understand -- once you work backward! Read More…
  • HTML & CSS
    Quick Tip: Mimic a Click Event with CSSClickeffectwithcss
    In today's video quick tip, I'll show you a nifty technique: we'll use plain and simple CSS to mimic click events. The key is to use the helpful :target pseudo class. Read More…
  • Site Builds
    Convert a Warm, Cheerful Web Design to HTML and CSSTitle image
    Not long after our newest Tuts+ site, Webdesigntuts+, launched, they posted an excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we'll take that completed design and convert it into a standards-compliant HTML and CSS web page. Along the way, we'll review a variety of nifty techniques that will help you to improve your own workflow. Even better, when we hit 80,000 RSS subscribers, we'll take things even further and convert the finished product into a custom WordPress theme. Read More…
  • Lectures
    The Top 5 Mistakes of Massive CSSMassivecss
    Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+. This presentation, by Stoyan Stefanov and Nicole Sullivan, primarily details the huge performance benefits to using Object-Oriented CSS, as well as a crop of other common CSS hurdles. Read More…
  • Web Development
    From PSD to HTML: Building a Set of Website Designs Step by Step200
    Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. Today I'm going to take you through my entire process of getting from Photoshop to completed HTML. We're going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It's a massive tutorial, so if you're going to follow through to the end, make sure you have a few hours to spare!Read More…
  • General
    But it Doesn't ValidateBut it doesnt validate
    I have a small pet peeve that I'm going to share with you. On the nights when I finish up a new CSS3 tutorial for Nettuts+ -- typically while listening to my favorite Biebster songs -- I click publish, and then wait to see how long it'll take before a reader leaves a comment containing the phrase, "But it doesn't validate." Read More…
  • HTML & CSS
    Quick Tip: Detect CSS3 Support in Browsers with JavaScriptDetect css support with js
    Isn't it fun that we get to play with the latest CSS techniques, like shadows and transitions? There's only one problem: how do we compensate, or more importantly, detect the browsers that do not support them? Well, there's a few solutions. In this tutorial and screencast, though, we'll create a JavaScript function that will accept a CSS property name as its parameter, and will return a boolean, indicating whether or not the browser supports the passed property. Read More…
  • PHP
    How to Squeeze the Most out of LESSPreview
    During a sick day a few weeks ago, I got around to something I've been meaning to look at for about a year: LESS. If anything web technology is worth a look, I promise LESS is. In this article, we'll look at the amazing power of LESS and its ability to streamline and improve your development process. We'll cover rapid prototyping, building a lightweight grid system, and using CSS3 with LESS.Read More…
  • HTML & CSS
    The Easiest Way to Create Vertical Text with CSSVertical text with css
    Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today! Read More…
  • HTML & CSS
    Crash Course: YUI Grids CSSYuigrids
    The Yahoo User Interface Library is a rather extensive set of JavaScript tools for developers. Often left unnoticed are a few other useful components of the library that will speed up your coding: some CSS libraries. Today, I'd like to give you a tour of the YUI Grids CSS library.Read More…