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

http://www.darrenmcpherson.co.uk Gafroninja
Good tut, I disagree on the heading hierarchy though.
Each heading relates to its parent heading, (in my opinion). A blind user listening to the site will understand the structure and hierarchy of the site. Like a book.
It looks like, in my opinion you are deciding which heading to use based on looks and visual hierarchy rather than document hierarchy.
But that’s just me:D
http://www.darrenmcpherson.co.uk Gafroninja
hmm it cleared my header tag example lol
h1
–h2
—-h3
—-h3
–h2
—-h3
——h4
—h3
hope this gets through lol
MixOughT
so when i be plus member i will be able to download the design in html template ?

http://www.jeff-way.com Jeffrey Way
Yes – you will!

Matt M
Fantastic. Thank you so much for this. I’m looking at redoing my website soon and this will prove invaluable. Time to purchase my plus membership and get coding! Never done it before so I’m hoping it’s easy to follow.
Thanks again
http://mashbourne.com Michael
Being able to pay 9$ a month and get content like this is simply awe inspiring. You guys have over delivered again!
Jacky
Did anyone have problem with the sliding menu in the middle of the page? It doesn’t work in IE 7. But works in Chrome and Firefox…
Please help.

http://markoprljic.iz.hr/ Marko
Author
Hi Jacky, all works fine here. Tested in all browsers. Maybe you can send us a link to check?

Norm
People complaining about having to pay usually want or expect almost everything for free. What are these people giving back or providing for free? Would they spend hours creating high quality tutorials for free?
Great job Marko! And to those creating tutorials, I hope you aren’t discouraged by some of the pettiness displayed.
Shakeel
Thanks but I do the same things every time in my designs.
PhuckTutsPlusWhatARipOFF
Alan,rbrtdowney from where I come from it’s impossible
http://www.squareonemd.co.uk Web design cheltenham
Great follow up to the original post I ran through the other day, when going through the first part I thought it would be great to follow up the with next process – brilliant!
http://www.razerdesign.com Kevin Kirsche
This got me to buy a PLUS membership and gotta say wow it was worth it. Extremely in depth! Thanks so much.
nilsdenon
Very nice tutorial, but as a paid subscriber I’m frustrated that the psd files for slicing are not provided with the download!
It made perfect sense to me that it would be bundled with the download…
http://www.hipervinculo.net Raul Riera
Why is this tutorial broken? it teaches you to create a website with a horizontal scroll bar in it (you can even see it in the screenshots they provide)

http://markoprljic.iz.hr/ Marko
Author
I’ve noticed that after releasing it. It’s a minor bug that can be easily fixed. Instead of having the main content area over 960px wide, the tabs shadow can be placed/positioned inside the main_content wrapper and the scrollbar is gone.
btw. it appears only on 1024px ;)

http://www.nitroxt.com Tim
wow very nice tut
Ali
i am not sure where to download this tutorial…It seems to download a file under joshuaclayton_blueprint, ….I am sorry but i cannot see where to download this tutorial..please help!
thanks!
http://shootdatarget.com shootdatarget
i don’t care!! i will sign up… hmm need to get a credit card/ debit card first lol ^_^
Knowledge is Power!!!
http://blogmekani.com/ falcon
Finally, a newly added article to nettuts+, thanks.
Didi
What is a high-fly website, if I may ask?
http://www.GOINTERNETWEBSITE.COM design own website
helpful.
esck21
Hello
Aaron
awsome,
http://www.aceinfowayindia.com/blog ajay
Great post, thanks for sharing this fantastic tutorial.
http://www.markoprljic.iz.hr Marko
Author
Hi guys, this template is now available full coded at Themeforest.net for sale. Check out http://themeforest.net/item/bvd-beautiful-website-design-html/47316
http://www.vianos.de webdesign nürnberg
i would have liked to get a little more information about the tutorial before spending the money :-(
Sarah
I don’t understand this at all. I’m extrememly disappointed.
The tutorial about how to design the layout was very thorough, but this one is not.
To me it seems like an after thought.
I just wasted 5 hours making a layout I can’t code.
Alex
Hi,
I am a plus member but cannot see the whole tutorial?! How do you get to it?
http://www.extanet.com Eric
Decent tut but I agree with previous posters saying you can get equal or better quality tuts for free.
To be honest, I don’t bother with coding anymore, I just use some of the good PSD to HTML/CSS coding services out there. They do it better and faster then me and I can use the time to better elsewhere.
http://www.videooynat.net Video seyret
thankss adminss very nicess
Banar
Where is the PSD file? I’d like to test my skills now and do it myself, but I cannot really find PSD file. Please help
http://www.werk26.de Webdesigner
Thanx for sharing.
Palestinan Citizen
Hey Guys , i am new for the web in 3 month Ago , i will ask you ,How I became A ninja Programmer and from where i will start , I Will Never work in Programming before ,just I Will Work in CSS2,CSS3 , and HTML5 and a few little tricks JQuery and Plugins . Which the right way to start learning Programming , like php,jQuery , MySQl ,
Z A K
Am I missing something or are the images with tags the tutorial? I thought there would be some written content associated with this images, reason I paid for the premium service.
Z A K
Sorry for previous post, I realized I had to download the source. Thanks for this amazing tutorial, very good work.
http://0d23412gfdg3df4jf56j08fgg9fg.com/8h88ds/ Reggie Raneses
Alma
TSHIRTMAN4CHRIST
Any suggestion on a good coder/freelancer for website I am trying to launch, needs PHP or MAGENTO coding any help will be appreciated…
http://www.trans66.com transport münchen
super. Thank you so much for this.
Kevin Short
Responsive design is the only way to go these days if you ask me. You can view some nice ones here.
http://templatz.co/templates.php