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 $9 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Marko Prljic
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Electerious - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+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
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
hmm it cleared my header tag example lol
h1
–h2
—-h3
—-h3
–h2
—-h3
——h4
—h3
hope this gets through lol
so when i be plus member i will be able to download the design in html template ?
Yes – you will!
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
Being able to pay 9$ a month and get content like this is simply awe inspiring. You guys have over delivered again!
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.
Hi Jacky, all works fine here. Tested in all browsers. Maybe you can send us a link to check?
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.
Thanks but I do the same things every time in my designs.
Alan,rbrtdowney from where I come from it’s impossible
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!
This got me to buy a PLUS membership and gotta say wow it was worth it. Extremely in depth! Thanks so much.
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…
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)
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
wow very nice tut
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!
i don’t care!! i will sign up… hmm need to get a credit card/ debit card first lol ^_^
Knowledge is Power!!!
Finally, a newly added article to nettuts+, thanks.
What is a high-fly website, if I may ask?
helpful.
Hello
awsome,
Great post, thanks for sharing this fantastic tutorial.
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
i would have liked to get a little more information about the tutorial before spending the money
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.
Hi,
I am a plus member but cannot see the whole tutorial?! How do you get to it?
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.
thankss adminss very nicess
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