Convert a Warm, Cheerful Web Design to HTML and CSS: Chapter 4


Continuing on with our Photoshop to HTML session, in this lesson, we'll learn how to use the 960 grid framework.

Chapter 4: Integrate the 960 Grid System

Press the HD button for a clearer picture.
Related Posts
  • Computer Skills
    Improve Productivity With Virtual Desktops From TotalSpaces2Totalspaces400
    TotalSpaces2 from BinaryAge is the, self-described, "ultimate grid spaces manager". It is built on top of OS X's Mission Control and provides a great deal of control over your Mac's work environment. In an earlier tutorial, I taught you about Speeding Up Your Life With Launchbar. In this tutorial I'll show you how to use a grid of spaces to efficiently swap between applications to improve your productivity.Read More…
  • Web Design
    Applications and Tools
    Building Semantic Grids With GumbyGumby semantic retina
    In this tutorial we're going to build ourselves clean, readable markup with the help of Gumby's semantic grid structure. We'll continue working with the example we started in the previous lesson, getting rid of as much unnecessary mess from our code as possible, plus we'll be using Sass to speed things up.Read More…
  • Web Design
    Design Theory
    Choosing a Grid SystemDsfd grid choice retina
    In the previous article, I introduced you to grid systems. With any luck, by now, you should have a good understanding of what they are and why they’re a good weapon to have in your design arsenal.Read More…
  • Design & Illustration
    Interface Design
    How to Create a Retro Website Design in Adobe IllustratorDesign and illustration
    This tutorial aims to introduce many of Adobe Illustrator's tools which are essential to any designer's toolkit and would help beginners and intermediate Web Designers gain confidence in using Illustrator for Web Design. Read More…
  • Web Design
    Life Beyond 960px: Designing for Large ScreensPreview2
    The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It's about setting our content free so that it can be experienced by whatever means necessary - and that includes at large scale. Let's take a look at the design considerations behind the often neglected huge desktop screen.Read More…
  • Web Design
    Web Design Workshop #4: VideoBloggerPreview
    Web Design Workshop is our weekly community project where we ask readers to submit their work for your friendly, constructive criticism. It's the perfect way to learn, offer opinions and have your own work critiqued! This week, we have an interesting one for you because the final product will be the basis for a tutorial..Read More…