Tutorial Details
- Program: Text Editor
- Difficulty: Intermediate
- Estimated Time: 2.5 hours
Final Product What You'll Be Creating
It’s day five of the Basics Design tutorial! Today we’ll be finishing the final pieces of the project – including a detailed installation of SlideDeck and some Javascript work. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you’re a seasoned veteran or a new designer, we hope you enjoy the walkthrough! Let’s start day 5…
About this Tutorial Series
Adi Purdila is going to walk us through an entire project – from design to coding – all here on Webdesigntuts this week! Here’s the outline of what we’ll be going over in each day:
- Day 1. Homepage and blog single page PSD files
- Day 2. Homepage PSD slicing and markup
- Day 3. Styling the homepage and blog single page
- Day 4. Let’s create some more pages: gallery, contact, full width
- Day 5. Finishing touches: installing and customizing SlideDeck and some JavaScript work
A note on the downloadable files for today; We’ll be working from two other resource links that you can check out if you want additional information:
- How to Build and Enhance a 3-Level Navigation Menu: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
- CSS Browser Selector
Now on to Day 5, the final PSD > HTML session!
Day Five: Installing Slidedeck and the Final Javascript
We’ve recorded these videos in full HD resolution, so be sure to turn on the full screen HD version if you’re able to! This video includes the full slicing and markup session, recorded at 720p with full audio commentary throughout.
Video 6: Slidedeck and JS – 720p
Video 7: Slidedeck and JS – 720p
About the Author
“Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs.
If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.” – Adi
){kind=link}
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Adi Purdila
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Hey, i like this theme BUT more and more users disable javascript or block it. so would be very importent. all is out of the box without js =(
Are you sure? I personally manage my clients Analitycs and stadistics says only 2% of visitors disables JS
I agree. I never understood where people get that web myth. I don’t think most users even KNOW how to turn off JS. If you are making a site for a community of developers or tech savvy people, maybe yes. But for the rest of the world…I think with computers doing more nowadays, people are able to run the interactivity no sweat. Most people like the dynamics the web provides.
Hey Adi thank you for the great tutorial. I am preaty familiar with the css but explaining the js stuff and the slide implementation was a great experience. Thank you.
Fantastic!
Adi your tutorials are very didactic and easy to understand.
5 stars! Glad to you!
thanks
Just to point out that Page Title shows Day 4:Coding instead of Day 5:Final
Brandon,
There are times when I find myself in an area where there is no internet access. Is there a way of saving these videos for later viewing?
Yep! Visit the Blip video pages and you can download them there in the sidebar :)
Hi Brandon, I can not find the video on Blip video pages can you maybe gives us an url? I am aslo planing to do this tutorial off line.
Thx! Your tutorial is assom!
Sure :) Here’s the links:
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-1-intro-5143089
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-1-design-5143054
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-2-pre-code-prep-5143110
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-3-coding-part-1-5169468
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-3-coding-part-2-5169430
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-4-coding-part-2-5196203
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-5-coding-part-1-5217840
http://blip.tv/webdesigntutspluscom/basics-create-a-clean-magazine-blog-theme-day-5-coding-part-2-5217849
thanks a lot, hopefuly there will be someone who transforme this amazing static website to dynamic wordpress website?
thank you very much sear great job!!!! so good!!!!!!!!!
Congratulations for the tutorials, and thank you for the serie.
I learn a lot
Cya
Hey Adi,
Thanks a lot for the series.I have watched all your videos and I have gotta say your videos are not be missed by anyone who wants to learn web designing/developing. I [and others]really hope you will be posting a video guiding us through the conversion of this site in to a Word Press theme.
Hello Adi.
Thank you so much for this series. It has proved invaluable to me. I refer to different sections of this series all the time to apply them to my own designs.
How about a tutorial on troubleshooting? i.e. common mistakes, places to look for errors that one may not be aware of etc.
What about a drop-down css menu with sprites?
Thanks again – simply fantastic!
m.
is this for wordpress?
Hi Ed,
Eventually I think Adi is creating a full WordPress version of this – but it might take a few weeks before it comes out.
Thanks for the comment!
Brandon
Hey Adi, thanks a lot for this great tuts :) I’m not so good at English, but your tutorials was easy to understand for me.
I’d like to ask you which software do you using for making screencasts?
The next part of this tutorial (I mean WordPress part) will be publish here on webdesign tuts+ too or i’ll be on different place?
Thanks a lot once again :)
I’m using ScreenFlow for the screencasts, awesome app, I highly recommend it for anyone who wants to make professional screencasts.
great job better than premium videos
thank you very much
hopefully you will convert it to dynamic website in http://net.tutsplus.com or in wordpress theme
What a great tutorial i really learned a lot on this series… Big thanks to sir Adi~~!! :)
I`m looking forward on the wordpress tutorial of this, i`m really excited.
It`s been a great time from the PSD to Markup to Styling to debugging and some Javascripts.
Again thank you Sir Adi, thanks webdesigntuts+.
Very, very nice!
I’ ll waiting your tuts!
Thanks for great job!=)
Great series (again)! Really like the troubleshooting bits along with explanations of how the solutions work. Learned so much for this series, really good stuff! Good job and thanks! Would really like to see this turned into a WordPress theme also.
Thanks for your hard work adi and look forward to the next video!
Don’t you ever stop making this high quality video tutorials.
Like i mentioned in another comment they are so easy to follow. That makes learning from it great fun.
Also these tutorials are giving me a lot of inspiration.
So i have a lot of new ideas to work with.
Adi, thanks for that inspiration!
Don’t forget to take some rest now and again to stay in good shape so you can make more video’s.
Don’t hurry, i’ll will be patiently waiting for the wordpress conversion ;-)
i could never agree more!!! :)
web design tuts+ have a lot of great tutorials but this is somewhat different. This series makes you enjoy what you are doing and be inspired after the work is done.
nice themes ..
thank you for sharing ..
Thanks everyone for your kind words, this really motivates me to make better and better videos. And yeah, I will take a break to recover, then make the WP version tutorial, then I’m starting a new series, dunno what the theme will be, but it’s gonna be great :D
Thank you !
Have a good time off.
Thank you for these amazing tutorials. They are just so simple to understand and learn. It was a real pleasure watching them. Keep it up! I definitely will be waiting for new tuts series.
Is there any way to save the videos for future reference?
I am a subscriber to tutsplus.
Adi,
First off wanted to say how big a help you’ve been to me and plenty others, you are really awesome for not forgetting about us newbies and helping us out. Your tutorial has been GREAT!
- My Question: Couldn’t you have used CSS3 transitions for the sub menu(s) instead of that functions.js file? I am a newbie so I probably have no idea what I am talking about, but it’s just something that I questioned while watching your AWESOME video tut.
Thanks Again,
- Nathaniel Albrecht (photoguy2801)
{Aspiring Web Designer, Hobbyist Photographer}
Hmm, I guess I could have used CSS3 transitions, like opacity transition, to go from hidden to visible. But on an older browser that wouldn’t work, so the menu effect would be lost.
I think for menus using JS is the best practice since they will always work (even if JS is disables, you still get the CSS show/hide). Plus, i think the percentage of people that have JS disabled is lower than the one of the people with older browsers :)
Dear author, make a template for wordpress – and I will gladly buy it from you.
Amazing series :) Learning some new stuff, in coding and also in photoshop, design is looking great, perfect! I just hope you will make more and more tutorials like this!
Btw i have few questions, when you write html comments in coda, you write the text, select in and then it changes into a comment, its a coda function or zencoding funcion? because i cant seem to find it in zencoding, and since im windows user and cant use coda, hope its zencoding side :D
And another one, probably when are you going to make a html to wordpress conversion tutorial? cant wait for it :P, Thanks.
That’s a Coda function: “Cmd+/” – it comments the selected text ;)
i really like your tuts, it is awesome, but i am in china, so i can’t see your video at all, can you send them all to my email? thanks a lot!
I have the copy of both the Basics magazine theme tutz & corpora tutorial videos…
i will gladly share them to you, but i have to ask permission to web design tutz + & adi first :)
although maybe i can not see it, but thank you all the same!
what is your email? i`ll send them now… :)
your design is excellent, congratulations!
Since the theme is obviously created for WordPress, I was wondering if you would ever consider adding an extra video tutorial with the PHP/Wordpress conversion?
Just wondering when this template will be converted into a WordPress Theme? I am sure this was suppose to be a template (blog) tutorial for WP.
Great tutorial and have found some very useful techniques and design flow. Awesome work Thanks
its not sooo hard to convert it into a wordpress theme. just copy the source into the right template phps and corrrect the links and ur done. i can do it if anyone like
I’m doing well at converting this to WP, except for the Gallery page. Can anyone post some links to where I can read how to do this please? Thanks, Mark
Excellent Tutorial! Are you going to finish the tutorial by showing us how to convert your Design to a WordPress Theme. I look forward to more of your articles.
You are a genius Adi, many thanks, I have learned a lot here!
Well something tells me there is never going to be an extra tutorial “HTML to WordPress” for this complete website so I thought I might as well do the job myself!
I’m currently working on it and I will post the link to the final custom theme very soon hopefully!
Hi Lando, would you know which template files the ‘full width page’ and ‘gallery page’ equate to please?
Cheers, Mark
Once again Adi, a very nice job! Thanks for making this.
You asked for suggestions and I have one: How about a joomla or drupal implementation? I’m not sure if this html/css project is suitable for that but perhaps another project in the future? I would really like to see one like that.
Thnx again, Ron.
Recently I had the chance to see your videos and I just want to say thank you for providing such an amazing interesting tutorial. Great job!!! Cheers
This is how you design mortal fellas.
Thanks for this video!
Well very nice psd->html/css tutorial, but very disappointed that yet again another author of a tutorial didn’t finish the job and take us through setting it up for wordpress. If any one has a link on how to do this for the latest version of wordpress I would be interested.
Im trying to learn my way around wordpress and be able to customize it to fit my needs with a layout and so far found a lot of out dated WP theme creation that when working through them run into a lot of issues cause it seems when those tutorials where written were for older versions of wordpress and doesn’t seem to be backwards comapatible with some stuff
again very disappointed this tutorial series was never complete :/
I really like your theme and the tutorial. Your explanations are perfect.
But i would really love to see you adapting your theme for wordpress.
It’s a wonderful theme to do this, because in the most wordpress tutorials the authors work with themes which are so simple that you’ll only scratch on the surface and the learning effect goes almost to zero.
BTW:
I like the way you did this tutorial. So that everytime you made a mistake, I was yelling at you for e.g. “LINK THE GOD DAMN STYLESHEET!!!”
Keep up this great work and I’ll hope to see more great tutorials of this kind.
Greetings
thank you so much for this serie it’s help build my own blog
Hello all, thanks to Adi
Can anyone tell me whether the gallery page would end up as: -
category-x.php
attachment.php
something entirely different?
I’m nearly there but confused by this part!
Thanks if you can help, Mark
I saw the slidedeck in a incorporated in a website before and I thought it was so amazing and it must have taken days to make. Such a nice surprise to see it’s actually a clever and easy jQuery trick. :)
I’m eager to see the WP tutorial set coming up, so keep up the good work!
Nice work adi,
but what about the implement in the wordpress ?
Great tutorial!!
I am wondering where is the video talking about javascript you mentioned in this tutorial.
plz help, thank u~!
Hey guys,
I saw some comments above about not finishing the series and I thought I should address this. Sorry for the late replies, but It’s very hard to keep track of the comments on all tutorials, so It’s only human to miss a couple.
The WP tutorial WILL BE MADE, it’s currently work in progress. I’ve talked the other day with Brandon from WPTuts+ and he said he will have a spot for it sometime next month.
I know I’ve said many times I’ll make it and I never did, but you must understand there is a tremendous amount of work behind one of these tutorials and it takes time. Coupled with some personal issues I had the past months, it lead to disapointment and frustration from certain people. I understand and believe me, I want to see this up just as much as you do, so all I’m asking is a bit more patience :)
Best,
Adi
Well, we are November now and still nothing’s there =(
I have been waiting for some time for a wordpress tutorial for this theme. I know a couple people that have kind of made their own wordpress themes from this, and I would like to do the same. Since a dynamic website will be great :D
Waiting Adi!
great work btw, it’s really nice to see a decent tutorial.
nice the website validated too on wc3 (Y) lol lol jus saying
This was very easy and simple to follow, great job to the author!
HI Adi,
Thank you for posting this awesome tutorial, but we are still waiting the WP tutorial.
Thanx for all the great tuts.
Ollie
Has anybody managed to convert this to a wordpress theme? If so would the mind sharing it with me or even selling me the theme?
Outstanding tutorial.
Great job, Adi.
Hopefully, another tutorial will be posted soon.
Good tutorial Adi. we are waiting for the wordpress version
There is no wordpress version comming =( i’m waiting since mounts
Please could you show how to integrate this site to wordpress