Try Tuts+ Premium, Get Cash Back!
How to Build a Newspaper Website with a Grid
plusvideos

How to Build a Newspaper Website with a Grid: New Premium Tutorial

on Jan 7th 2010 with 44 comments
Download Source Files

In this week’s Plus video tutorial, you’ll learn how to utilize a grid to create a simple newspaper-like website. Along the way, you’ll learn helpful techniques, such as easy ways to target IE7 and IE6 with only a single character, using the 960 grid system, and even using CSS3 to create columns! It’s an hour long; ready to dig in? Join Premium!


Final Preview

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Write a Premium Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://vasili.duove.com/ Vasili

    I’ve been contemplating buying my plus account again. Tutorials like this really make me want to.

    I’m loving your titles by the way. Your real life magazine would be an instant hit! ;)

    • http://rickbrossgraphics.com/ Rick Bross

      You definitely should, I just finished the tutorial and it taught me even some HTML stuff I didn’t know such as DD , DT and DL tags.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Yeah – definition lists are great…and underused. :)

    • http://rickbrossgraphics.com/ Rick Bross

      Jeffrey Way, whats the best tip you have for a 16 year old freelancer?

  • carcas

    again a not have money :P for buying plus account holy shit :(

  • Paul

    Ahahaha! Boy Trapped in Refrigerator Eats Own Foot! Airplane references are the best! This made my friggin day

  • CodeDude

    HAHAHA….rofl. That has got to be the best headline ever!

  • WallMountedHDD

    Looks like something anyone could make with notepad and some divs (super easy with tables, if you’re daring and old-school).

  • http://kreativtstudio.no Roaa

    Awesome – New content!, gonna watch this tomorrow :)

  • Ben

    CSS3 isn’t exactly standard yet

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks. Progressive enhancement.

      • http://seowisedesigns.com Yheng

        I agree! html5 age is coming tho.

    • http://logic.butai8.com Ben Carroll

      CSS3 is actually becoming more and more usable. IE9 should be out this year which will greatly improve CSS3. IE is the main browser that holds CSS3 back, along with Opera. While full support isn’t available for CSS3 now, enough is there that we can use it.

      I think 2010 will be the year we see CSS3 really become used more. I still won’t touch HTML5, not until W3C decide what is and isn’t going to be in it. Last I heard the video tag was going out…

      • Jason

        Take a look at Opera 10.5 It supports border-radius 2d transitions and much more :)

  • http://bloggerzbible.blogspot.com/ jdsans

    Is this on for members

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yes. $9 a month gives you access to the Plus tutorials for ever Tuts site. :)

      • http://www.freshclickmedia.com Shane

        Do you get sick of saying the same thing to the same points?

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    Is it only for members…

  • http://sonergonul.com Soner Gönül

    Thanks !

    That’s great !

    Cool !

  • Giovanni

    I need to get a better chair for these long tuts man. 20 minutes in and my back is killin me! Great stuff though…

    I’m pondering what you said about the text-indent technique. Wouldn’t that hide the h1′s text in browsers that don’t display images? Not sure…just a thought.

    New to the grid stuff so thanks :)

    Peace

    • Giovanni

      P.S Any chance of this going to WP later on?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        It shouldn’t hide alt text. :)

  • http://smashingwebs.com SmashingWebs.com

    Really Great Tutorial for all type of designers :)

    :) :) :)

  • http://inspiredbywordpress.co.uk Daniel Groves

    Wants… Plus…

    But I have spent way to much money recently.

  • http://spotdex.com Davidmoreen

    There’s a lot of design jam packed into this design. The page is pretty large.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s the standard 960 width.

  • http://www.awmcreative.com Aaron

    I don’t see how this is useful …unless you’re a beginner.

    • http://johnathanbarrett.me Johnathan

      Well that’s exactly how it’s useful. Not everyone knows how to do it.

  • http://www.flyingcloudmedia.com Casey Becking

    Thank you again for amazing tuts

  • http://www.filmgauge.com.au Stephan

    We still can learn from this…

  • dejan mikanovic

    When will we know who won three-month Plus Membership?
    Thanks

  • http://rickbrossgraphics.com/ Rick Bross

    Can I suggest something Jeff?

  • Paul

    Great tut! Love all the little tips and tricks sprinkled throughout, especially the instant IE hacks.

  • Webfreak05

    I hope we can turn this into a working wordpress theme in the next plus tutorial

  • http://www.workbysimon.com/ Simon Carr

    This is a good tutorial on grid based design. I have used a similar technique when building my site… I find it helps to vary up the grid to produce a few different interior page templates.

  • Scott E.

    Jeffrey-

    Great tutorial and explanation. I love learning better methods to solve a problem, especially that for definition lists and IE workarounds. Thanks again!

  • Amanda W

    Very useful. The IE hacks will come in handy for me right away! Also would like to see this turned into a WP Theme. :) Maybe you have a tut for this already. I will look for it. Thanks again.

  • http://www.ev4n.com ev4n

    that headline is gold!

  • http://www.employeratlas.com Eric Di Bari

    Great tutorial. Thanks.

  • Mampranx

    Hi Jeff,

    I want to purchase the tuts+ membership just for a month, can i do that?
    I’ve got problem when I want to pay it via Paypal. In the paypal order menu is asking me to verify my credit card and yes my credit card is not valid anymore. But i still have some cash in my paypal account.

    Thank’s

  • Jo

    3 questions

    1) is there a way to code css on the fly like you did in Windows? Can I do the same in Firebug?

    2) How do I zoom in fast on my FF browser like you did?

    3) In DreamWeaver can I duplicate and paste the previous line quickly like you did?

  • Sylwia

    I am a premium user and I am logged in but I can’t see the tutorial. Please help.

  • http://www.hawktimewebdesign.net Gary Calhoun

    Just another solid reason to contribute to the envato family and net tuts

  • Jason Julias

    I am a premium member, yet I see no video tutorial. Am I missing something?