How to Build a Newspaper Website with a Grid: New Premium Tutorial
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!
Join Tuts Plus
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.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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! ;)
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.
Yeah – definition lists are great…and underused. :)
Jeffrey Way, whats the best tip you have for a 16 year old freelancer?
again a not have money :P for buying plus account holy shit :(
Ahahaha! Boy Trapped in Refrigerator Eats Own Foot! Airplane references are the best! This made my friggin day
HAHAHA….rofl. That has got to be the best headline ever!
Looks like something anyone could make with notepad and some divs (super easy with tables, if you’re daring and old-school).
Awesome – New content!, gonna watch this tomorrow :)
CSS3 isn’t exactly standard yet
Thanks. Progressive enhancement.
I agree! html5 age is coming tho.
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…
Take a look at Opera 10.5 It supports border-radius 2d transitions and much more :)
Is this on for members
Yes. $9 a month gives you access to the Plus tutorials for ever Tuts site. :)
Do you get sick of saying the same thing to the same points?
Is it only for members…
Thanks !
That’s great !
Cool !
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
P.S Any chance of this going to WP later on?
It shouldn’t hide alt text. :)
Really Great Tutorial for all type of designers :)
:) :) :)
Wants… Plus…
But I have spent way to much money recently.
There’s a lot of design jam packed into this design. The page is pretty large.
It’s the standard 960 width.
I don’t see how this is useful …unless you’re a beginner.
Well that’s exactly how it’s useful. Not everyone knows how to do it.
Thank you again for amazing tuts
We still can learn from this…
When will we know who won three-month Plus Membership?
Thanks
Can I suggest something Jeff?
Great tut! Love all the little tips and tricks sprinkled throughout, especially the instant IE hacks.
I hope we can turn this into a working wordpress theme in the next plus tutorial
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.
Jeffrey-
Great tutorial and explanation. I love learning better methods to solve a problem, especially that for definition lists and IE workarounds. Thanks again!
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.
that headline is gold!
Great tutorial. Thanks.
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
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?
I am a premium user and I am logged in but I can’t see the tutorial. Please help.
Just another solid reason to contribute to the envato family and net tuts
I am a premium member, yet I see no video tutorial. Am I missing something?