Coding a Beautiful Website From Scratch: Premium Tutorial

Marko Prljic on May 13th 2009 with 144 comments

As a sequel to last week’s popular tutorial, “Design a Beautiful Website From Scratch”, we will be converting our beautiful design into a valid HTML/CSS website. Even though we used the 960.gs template, we will not use its CSS framework to build the site. Instead, we will be coding this design from scratch! It’s always important to create strong and clean markup first, Why is that? One of the reasons is because, if we need to change our design or rearrange some things in our web site, we only need to make modifications to our CSS file and never touch our markup.

If you’re a Premium member, let’s get started! If not, join now!

Join Tuts Premium

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 at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Have the Chops to Write a Premium Tutorial?

If you have the writing/video tutorial skills, and would like to create your own Plus tutorial, email nettutsblog@gmail.com to discuss compensation.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Marko Prljic is segen on Codecanyon

Enjoyed this Post?

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

By Marko Prljic

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

Hi my name is Marko, I'm web designer from the beautiful Croatia and I design high-fly, cool looking, modern websites. I'm also on Themeforest and a Graphicriver author and like to write tuts. When I'm not designing websites I spend the time with my kids or thinking about The Next Big Thing. Oh, and like everybody else, I use Twitter.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

James
Thanks! I never really used h tags ^^

http://www.quizzpot.com crysfel
too bad :S

http://www.xqlusive.nl xQlusive
Head tags are important to use in your website(s), at least define one H1.
What i’m wondering if this sliced design isn’t using to much H tags (from H4 and on)

http://jallits.com/ Daniel Craig Jallits
‘h’ tags are very important when it comes to SEO, that is if you care about that sort of thing. Which I am betting you do, since you are taking the time to build websites, I am sure you want to drive traffic to them.
http://www.kevinquillen.com Kevin Quillen
How could you have never used an H tag?
http://www.rafaelrp.com.br/ rafaelrrp
Wow never? rofl x.x

http://www.designtank.ws Chris Raymond
Nicely done. The one thing I would mark up differently is what you have as an h4; to me, it’s a blockquote, if anything, not a heading. Or perhaps a p with a specific class for a quote.

http://markoprljic.iz.hr/ Marko
Author
Yeah, good point, I was considering this and then at the end I totally forgot to revisit it. I guess I lost it somewhere on the 40th step :)

http://www.mydevwares.com/ myDevWares
Wasn’t this tutorial up a few days ago for free?

http://www.jeff-way.com Jeffrey Way
No. The design portion was up. This is the coding part. It’s much more in depth.

Miguel Hernandez
Well, the design portion´s not up, either. What a bummer.
Nate
Look harder. it’s up.

http://www.joaojoaquim.com Joao Joaquim
nice tut. that’s pretty much the way I structure my websites. It keeps the site well organized and the code clean.
http://dronix.me dronix
link to “Design a Beautiful Website From Scratch” is broken
http://chrisberthe.com/ chrisberthe
Finally, a newly added article to nettuts+, thanks.

http://www.jeff-way.com Jeffrey Way
What do you mean by “finally”? We post a new one each week, like clock-work.

http://chrisberthe.com/ chrisberthe
Didn’t mean that as a bad thing. What I meant by that was ‘yay! a new article for the premium bonus tutorials’. Considering the 3-4 (or more) tutorials that come out each week on nettuts+, there aren’t that many that make it as ‘premium’ content.
That’s not to say that the ‘premium’ content that is already available to us is not packed with detail, because that is definitely not the case (especially this article).

Evan
One of the best tutorials I’ve read from you guys. Very in depth. Showed me the proper way to slice and save in psd hehe.
Keep them coming!
http://www.rule-twentynine.com Starstuff
Thank you so much for listening to all our requests to make a coding tut as well. Now I know how I’m gonna spend the next evenings.
Thank you, thank you, thank you. :)
http://www.atlantisnet.com Leo A. Novelli
Absolutely perfect!
tyler durden
way to push for people to subscribe to you site. ever science you have do that the quality of content on this site has dropped
http://laranzjoe.blogspot.com lawrence77
why this is a plus tut while the designing part is free :cry:

http://laranzjoe.blogspot.com lawrence77
while reading that design part I’m really happy and expecting this coding part…
but my expecting all goes down while seeing this PLUS word :cry:
why Marko Prljic why????? :roll:

http://www.mindred.co.uk Steve
Lawrence, simply spend a measly $9 to get plus – its worth it.
http://laranzjoe.blogspot.com lawrence77
Steve , I had money thats not a problem, but not in $ and not in paypal…. :(

kjelsson
Well i think it was obvious that the latter part would be +tut. It was sooo waited and drooled tut :D
I´m thinking very seriously purchasing +membership just because of this tut.
Daniel
To offer part 1 for free then charge for part 2 is classic Bait and Switch. I’m pretty disappointed and to be honest I’m now less likely to join plus. I think it’s a pretty crummy move. I understand you guys want to make a buck, but then both parts should have been plus only. Just my opinion.

Chris
Disagree. I’m more inclined to join plus now, since I enjoyed the design portion, and the coding portion looks interesting. It’s certainly not bait and switch. They are simply enticing you to read by giving something away, and charging for a separate item which is far more valuable.
My take on it, anyway.
http://agentfusion.com Jason Barone
+1, I’ve been checking Google Reader every day to wait for this tutorial, finally comes up, but I have to join to see it. This looks great, and in-depth, but if you were planning on charging for it, you should done the same to Part 1.
You guys do awesome stuff, but I would stay away from tactics like this…

http://www.wrong.be aCej
9$… really they aren’t asking the world…
http://www.jeff-way.com Jeffrey Way
Is it any different than Lynda.com offering the first few videos in a series for free, and then charging for the rest?
I had to offer Marko more money for this tutorial because it obviously requires more work. I apologize if some of you guys think that it should be free, but we have to pay our authors somehow.
Marko’s first tutorial is great and can stand on its own.
http://laranzjoe.blogspot.com lawrence77
Yeah Jeff now I Realize that…
Thnks…
Daniel
It is different. With Lynda.com I know up front that I’m viewing videos that if I want to see the conclusion I have to pay up. I know that going in. It’s presented that way. What you guys did was low because since the first part was free, naturally people (myself included) thought that part 2 (if there was to be a part 2) would be free also.
Again, I have no problem with the plus model and this SHOULD be a plus article. But the first one should have been plus as well. I have no gripe with the author, or with the idea of PLUS articles. My gripe is the bait and switch technique. You guys are better than Lynda and that why I come here instead of there. But It’s disappointing what you guys did. That’s all.
http://blog.insicdesigns.com insic
a very long arguments for just $9.
http://eyoosuf.blogspot.com Yoosuf
jeff, any offers for 1 year subscription, 3 moth is going faste and so lazy to resubscribe. introduce a 1 year plan with a good price
http://agentfusion.com Jason Barone
Wow, the response of this tutorial was so great I definitely gotta join, I feel like I’m missing something. Sounds like you did a great job with this one Marko.
Andrei
How would I know this tutorial is worth the buy, if I didn’t see the first part for free. Maybe I get it now, otherwise I’d never get it.

Brian
How is this even a topic of conversation people?
Colin McFadden
9 bucks, man. It’s not that much, and this tutorial is worth far more than that.

Daniel
Your right, it’s not a lot. But it’s NOT about the money. It’s about the sleazy bait and switch tactics.
http://www.nickbrowndesign.com/ Nick Brown
I don’t get it. Why would you want both halves to be paid for, this way you at least get -some- information for free. If both halves have been paid only you would have complained about there being “too many paid tutorials not enough free.”
I really don’t get everyone complaining every time a new premium tut comes out. The ratio of free to paid content is roughly 10:1, and the free content on this site is about 10x better than content on any other site, free or not.
In addition, people keep throwing around the term “bait and switch” like it’s a bad thing. In bait and switch you take a loss for one item and -hope- to make up the difference on a regular price item. However, those who choose not to purchase the regular price item are simply reaping the benefits. Do you write a letter to all the department stores that offer a few really low prices on items on Black Friday? No, because it would sound stupid.
There’s 4-5 other tuts just like this one for free on this site, and at least 3 of them use the -exact- same design techniques as this one. If you can’t follow those, learn the tools, and then just eyeball the rest, this one premium tut isn’t going to save you.
Daniel
No you don’t get it. But that’s ok. If this was presented in such a way that going into this, we were told that part 2 was plus, then I would not care. But part one was free. I can’t talk for everybody, but I don’t think it is unreasonable to think that since part 1 was free, then part 2 would be free as well. It was not presented as a PLUS series. People did the part one tut, got ready part 2 and BAM! Pay up. It think that sucks.
But whatever, I’ll end up buying the damm thing anyways because it may be too good to pass up.
All I’m saying is IF this was presented as a PLUS TUT in the beginning we would not be having this conversation.

Nate
Joining Tuts+ to get this tutorial!!

Euan
This is a great Tutorial

http://codingpad.maryspad.com mary
Even though I’m a plus member, I have to agree with the other commenters here. Both parts should either have been free or plus. To make one free and one plus is kind of an aggressive technique IMHO and not fair on your audience.
http://chrisberthe.com/ chrisberthe
I just feel the need to say something about the plus membership / I have no intention of starting a debate. For the people that do in fact have a premium membership with tut+, you’ll understand what I’m talking about.
It’s obvious how much work goes into maintaining a site such as this one, let alone trying to finance the server / tutorial writers / etc. Tut+ have without a doubt some of the most worthy tutorials on the net, and I’m sure most of you will agree. Whether or not it was a ‘bait and switch’ move, it’s still worthy of being premium quality simply because of the amount of detail that Marko goes into.
My opinion is that most tutorials on the site (including Part 1) should have a premium fee, no matter what. They stand out above all other tutorials that you’ll find online. And I mean seriously, it’s 9$/month. Don’t buy one subway sandwich and pay for this instead. It’s well worth it.

Daniel
I don’t disagree about the content. My issue is that it IS a bait and switch tactic. That is the issue for me. I have no problem with the plus model in any way shape or form. These are great tuts and they should be paid for them. But I think it is a low blow to have the start of something be free and the rest of it be paid. BOTH should be paid tuts. (or free) Again, just my opinion.

http://chrisberthe.com/ chrisberthe
OK, this I have to agree with.
http://blog.bogojoker.com Joseph Pecoraro
“But I think it is a low blow to have the start of something be free and the rest of it be paid.”
That is the core idea behind “try before you buy.” Thousands of software applications are available with this model (textmate, bbedit, heck nearly any mac application). Thousands of websites offer free/limited accounts and a paid upgrade to a more capable account (github, google appengine, etc.). Thousands of books online offer their first chapter free, while keeping the rest of the book hidden. This is not bait and switch. Switch in that phrase implies some premeditated malicious change. Its more of the same try before you buy. You were given free access to an entirely valid limited portion of a tutorial. The only catch being if you were really interested in going more in depth you would naturally take the next step.
From another perspective: if there wasn’t a glimpse of what is available in the Plus tutorial you probably wouldn’t see why its worth buying a membership. Knowing what is available will help you decide if its worth it.
All that being said, I honestly don’t currently have a tut+ membership. I recognize the value, but I know I don’t have the time. I’m more then happy with free until I can give myself the luxury of the plus.

http://jarodtaylor.com Jarod
Dude, what the hell do you order at Subway for $9?
:(

http://chrisberthe.com/ chrisberthe
9$ in Canadian dollars!
Royal Design
Come to Australia a foot long can cost upto $12 :p
Stephanie
lol! No kidding! I was starting to think that maybe subway’s “$5 foot long” promotion was a “bait and switch” technique. :)

http://www.mindred.co.uk Steve
I have downloaded it – but the demo isn’t working? Anyone else getting the same problem?

http://markoprljic.iz.hr/ Marko
Author
Accidentally there’s “A drawing application” demo inside. Look for HTML folder and open index.html to see the demo ;)

http://www.mindred.co.uk Steve
I see, Unfortunately I still cant unzip anything, and if I run the index.html file within the zip, it doesnt show any CSS stuff :(
http://www.mindred.co.uk Steve
Got it working, there are some unknown files included which are just blank and I had to extract one folder at a time to stop getting errors.
Looks good, thanks!

http://markoprljic.iz.hr/ Marko
Author
Hi guys. I would have to agree Jeffrey and chrisberthe here. This is really an in depth coding tut that describes in detail every step and it’s worth a Plus membership. I was offered to write the follow up as a Plus tut and accepted it. I felt that there was nothing wrong with that, sorry if you’re disappointed in any way, it was not my intention. You can always join Plus for one month only.

http://www.nickbrowndesign.com/ Nick Brown
@Marko
Great article Marko, it looks like a lot of effort has been put into it and it paid off. I hope you choose to write more for this site :)
@daniel and the rest of you complaining: Please attack the authors some more so they choose to stop writing for this website. I love it when you ruin it for the rest of us.

Daniel
Nick,
Show me where I’ve, “Attacked” the author? On the contrary I think part 1 was amazing and I said that he SHOULD get paid. I’ve also said that I have no gripe w/ the author OR the Plus model as a whole.
http://www.nickbrowndesign.com/ Nick Brown
Well let’s see, the comment above these is the author feeling the need to apologize for letting people down.
I don’t feel he should have to come apologize to people throwing a temper tantrum. Do you think all the negative feedback being posted here is going to encourage Marko or any of the other authors to write more high quality tuts? I don’t.
Daniel
Well then your an idiot. If YOU were the author and got got a little bit of criticism for your TUT, your not going to have much of a carrer as a web designer/developer if something like what I’m bitching about scared you off. lol.
BTW He agrees with what the site did and ‘sorry’ to those who don’t like it. That’s his position and there is nothing wrong with that. Marko is a pro and can handle a bit of criticism, which BTW is not even directed at him.
Grow up. Please.

Neil
How sleazy is that?? Write part 1 for the masses, and charge nine bucks for the sequel!
http://jarodtaylor.com Jarod
I like that you utilized the H tags effectively. Search engines get boners from stuff like that.
:)
AcidArt
is this a screencast?? or a written tutorial?
CtrlAltDelydcas
So many cry babies. If you people don’t like it then move on. This site offers so much free material it’s ridiculous.
Bait and switch? What are you the internet police?
This site should just become member only. It would reduce a lot of the drama with people complaining about the plus material.

Daniel
Man you folks have a hard time reading don’t you? Even plus members thought this was a lame move. I would be fine if it was a members only site. I’ve made my point already. No need to rehash it.

http://www.dsaportfolio.com.br Diego SA
Cool! Nice layout!
http://www.justvouchercodes.co.uk Paul
Yeah, looks like a great tutorial. I am gonna sign up for it, a bargain if you ask me at $9. Remember guys, it takes a lot of time and money to run a website.
awake
You guyz are clowns :-)
http://www.cetan.ca Nathan
Stop complaining about it not being free. Honestly, can you guys not afford $9 for MANY good tutorials? Instead of wasting your money on a single fast food meal, invest in educating yourself. This tutorial could help you make $1000s if you learn to code.
http://etomco.com Tom Karels
Whats your opinion on how many tags to use?
I fee like the page should have a few… any takers?

http://markoprljic.iz.hr/ Marko
Author
I try to use them all if possible. If we count all HTML tags, there aren’t many and they should all be used to create our layout and content. The easiest way is to put something in a “div” and call it a day, but that’s not a step away from coding with tables, if you just replace every table with a “div”, you know what I mean?

http://carlolee.info Carlo
I can’t believe how much commenting space for praises of this yet another stellar presentation by tuts+ …was wasted talking trash about part 1 & 2 aand which was charged and which should have…
You all confuse the point by saying it’s worth it and la la la and yet you still cry about the ultimate fact that you must get a subscription for the tut, all Im saying just pay or be on your way.
Marko awesome tut | tut+ continue doing a gr8 job | big up Envato
http://www.kristofcreative.com/ Kristof
Thanks for the tut. But from an SEO standpoint, using H1 for the logo/site name is a bad optimization practice. Unfortunately, too many theme designers unknowingly do this.
If you code your logo/site name with H1, it assigns your site/business name as the umbrella keyword. And, with very few exceptions, that isn’t what you want.
A more search engine friendly solution is to assign the logo/site name with a DIV and use the H1 for the article headline. After-all, the focus of each page should be the content and the headline should drive the main keywords.
Yes, this will add another DIV to your code but the benefits greatly outweigh and drawback.

http://markoprljic.iz.hr/ Marko
Author
Debatable, yes. I prefer to leave that choice to yourself. I did it, and mostly do it this way. Coded correctly of course ;)

Desu
Oh no… I think I must join to the plus member… I wait this part tutorial after I read the part 1…
Alex
How can you complain when you get soooo much amazing content for free… you guys are idiots
http://www.preeminentproductions.com/blog Anthony
Haha, wow.
Not that we need someone else chiming in, but I do agree with Alex.
This site, along with the rest of envato’s amazing sites offer up so much quality content FOR FREE. These guys obviously put a lot of time into this and deserve to be compensated ever once in a while, Geez!
Palusko
Now let’s see – first part was free. Second one is not and you didn’t know it wouldn’t be. I still don’t see how that influences your decision to look at the first part. If you knew the second part would be a plus tutorial, what would you do differently with the first part? How can you feel cheated if you get something for free and no promises were made? If money is not an object, than pay $9. If it is an object, than be glad you got the first part for free. And BTW, the first part was a nice stand alone tutorial. Maybe if the first part was unusable without the second one, I’d consider it a little dirty trick. This way, it is just a normal business decision.
As for the tutorial, I will definitely check it out over the weekend. These are the kind of tutorials I expect from the plus membership.
Lenin
Hello Marko, you are mind blowing man. I have visited many sites and seen many tutorials but never tried them caz i know they are not easy to follow or not that much interesting( generally can be seen on many sites)
When i first saw you step by step guide with illustration ie awesome, i than you for you hard work and your designs and user interface, feel everything was superb thanks foe this. Have a great time and plz post more just like these.
JR
Thanks for a great tut marko!
The only ones complaining are those who think they are entitled to something for free just because it’s on the internet.
http://www.bvdcomp.ch Burim
Very nice site.
Where can i see it in action?
Thank you

http://markoprljic.iz.hr/ Marko
Author
You have a demo available when you download the tut from Plus.

ardhian.satrya
I read recently that you shouldn’t use H1 for your logo. Even tutsplus websites are not using h1 for the logo. But the author is using it for the logo, would it be misleading people?

http://markoprljic.iz.hr/ Marko
Author
No, it’s your choice. You can use it as a logo, or not. I usually do it. Nothnig wrong about it as long as you do it the right way ;)
http://www.mindred.co.uk Steve
Really? I did not know that. How come you’re not supposed to use it?

http://www.stevenknight.info Steven
Amazing tutorial, if I had any money to spare I’d happily sign up. I’ll follow Part 1 and then code it myself, will be great to get something like this done. Keep up the good work :)
http://www.larishteriastudio.com rishteria
Good job, really good for begginers ;)
RocDaMike
As a new follower of this website, just wanted to express my thanks to Marko, Jeffrey and everyone else at tutsplus. I can’t believe the quality of content on this site. As a new web designer, I have learnt so much that I just had to subscribe to the plus membership!
Thanks again ;)
http://www.crearedesign.co.uk Martyn Web
Good Stuff,
I probably wouldn’t advise people to use a logo as a H1 as I believe it should be your first real heading not the name of your company. Search engines have no interest in the name of your company just what you can offer the searcher.
I Really like the design!
http://www.prop-14.com Randy
At the start of the plus subscription program it was clearly mentioned that there would be “bonus” material from time to time added to the free articles. Isn’t that what this is?
Not exactly bait and switch.
http://www.itsnotthatfunny.com Michael
Signing up simply for the heck of it. No, actually due to the accolades. I’ll probably read the free one too.
Secondly, one thing seems overlooked in this lengthy debate, by both pro-sers and conners.
the + Plus membership is good for ALL OF THE PLUS sites if i’m not mistaken, not just Nettuts+
Thanks as well to the initiator. Good discussion brings fruit too. But with this, let’s put it to bed already.
Thanks again Marko!
Daniel
Here are the cliffnotes for people who have a hard time reading. I think this is a great site with great content. This is a wonderful tut and the author did a fantastic job. Part 1 is equally as good. Both tuts should have been Plus. I feel it’s a sleazy move to offer one for free then charge for the other that is part of a series. It’s not about the money, it has nothing to do with the sites content, it has nothing to do with the author. I just think that Envato made lame move with this. Nothing more nothing less. Maybe I just thought Envato was better than this. Ok I’ve said my peace and if you still don’t get it, you never will.

Mr. Henry
This is the most ridiculous rant I’ve ever heard. “Sleazy” move because the first tutorial (a separate topic) was given for FREE? How dare they! The emotional distress you have suffered must be unbearable, you will probably never trust another website. In the amount of time you’ve spent defending your argument, you could have gone to the store, bought a $30 book on how to accomplish what Marko offers, and had a great day if you really feel this website doesn’t present itself in accordance with your business ethics.

Daniel
LOL I’m having emotional distress? Dude…. relax. It’s just a little criticism. I’m sorry some of you take this so personally. You shouldn’t. It’s not directed at Marko or the article or the plus program as a whole. It’s directed at Envato and the decisions they made in regards to this particular article.
They can take it or leave it, makes no difference to me. But if they are going to provide comments then they can expect some critics from time to time. They are adults and they can hack it. Maybe they will think about it next time or maybe not. It’s not like I’m never going visit again! NOBODY said anything bad about the authors like Marko and the contributions they have made to this site. Nobody.
Sheeesh.

PhuckTutsPlusWhatARipOFF
I phuckingCouldn’tAgreeWithYouMoreBUddyI’mSoLame?PhuckYou

Kyle Petersen
Well, I for one, would like to express my gratitude to Marko for his contributions to this site and to JW for bringing us all some of the best content on the web.
http://imanto.com Anto
Should make this into a video tut.
Good job.
http://mokshasolutions.com Moksha Solutions
i never use h tag, but it seem its really good to use it for SEO thanks for it
Alan
Sometimes people tend to be selfish and miserly, not everything is for free. Just remember that Marko is a designer, and he also writes tuts which involves lots of work, it’s more than fair to pay for this. You’re paying for education, if you don’t feel comfortable with PLUS membership, use Google, there are gazillion tutoriales out there, and they are free.
rbrtdowney
great tut for a great price. i spent $900 for one semester at school and learned more here in 15 mins.
consider it an investment — i signed up for + just to get it, and I’m already digging the paid content.

http://www.razerdesign.com Kevin Kirsche
Same thing here, Def a great investment!

jzigbe
Why is it so difficult to download a plus file than a non-plus file?
I know you need to have security … but managing to download a 3 MB file after numerous tries lasting several hours is too much!