Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts)
videos

Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts)

on May 29th 2011 with 71 comments
Tutorial Details
  • Program: Text Editor
  • Difficulty: Intermediate
  • Estimated Time: 2.5 hours

Final Product What You'll Be Creating

Download Source Files
Demo View It Online

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:

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

Adi Purdila is AdiPurdila on Themeforest
Tags: Videos
 
Enjoyed this Post?

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

By

Rollover to read this author's bio or click through to see a full list of posts by this 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.  

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

    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 =(

    • Rich

      Are you sure? I personally manage my clients Analitycs and stadistics says only 2% of visitors disables JS

      • Karyl

        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.

        • Tholithemba

          I don’t think many people do since Google and facebook use JS in 1 way or the other :)

  • James Zabiella

    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.

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | Shadowtek | Hosting and Design Solutions

  • Luís Magalhães

    Fantastic!

    Adi your tutorials are very didactic and easy to understand.

    5 stars! Glad to you!

    thanks

  • karan

    Just to point out that Page Title shows Day 4:Coding instead of Day 5:Final

  • Musukwa

    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?

  • samir

    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!!!!!!!!!

  • Luís Felipe

    Congratulations for the tutorials, and thank you for the serie.

    I learn a lot

    Cya

  • manraj

    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.

  • Marcel

    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.

  • ed

    is this for wordpress?

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      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

      • Ollie

        Hi,

        Just wondering if you are still going to create the tutorial for converting deign into a WordPress theme. Would be great to see the final WP theme.

        Thanks and keep the great tutorials coming.

        Ollie

  • JVladaJ

    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 :)

    • http://www.adipurdila.com AdiPurdila
      Author

      I’m using ScreenFlow for the screencasts, awesome app, I highly recommend it for anyone who wants to make professional screencasts.

  • samir

    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

  • Kurei

    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+.

  • http://www.originsite.ru Dima

    Very, very nice!
    I’ ll waiting your tuts!
    Thanks for great job!=)

  • chrisw

    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!

  • Frank

    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 ;-)

    • Kurei

      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.

  • http://simacom.de/webdesign تصميم مواقع

    nice themes ..
    thank you for sharing ..

  • http://www.adipurdila.com AdiPurdila
    Author

    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

  • Frank

    Thank you !

    Have a good time off.

  • Pingback: Web Design & Dev Community News #3 | Splashnology

  • Russell

    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.

  • john

    Is there any way to save the videos for future reference?
    I am a subscriber to tutsplus.

  • http://tinyurl.com/photoguy2801 Nathaniel

    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}

    • http://www.adipurdila.com AdiPurdila
      Author

      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 :)

  • Michael

    Dear author, make a template for wordpress – and I will gladly buy it from you.

  • Richard

    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.

    • http://www.adipurdila.com AdiPurdila
      Author

      That’s a Coda function: “Cmd+/” – it comments the selected text ;)

  • lee

    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!

    • Kurei

      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 :)

      • lee

        although maybe i can not see it, but thank you all the same!

        • Kurei

          what is your email? i`ll send them now… :)

  • http://landodesign.com lando

    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?

  • ollie

    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

  • david

    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

    • mark

      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

  • http://photosbyluis.net Luis Camberos

    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.

  • mark

    You are a genius Adi, many thanks, I have learned a lot here!

  • http://landodesign.com lando

    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!

    • Mark

      Hi Lando, would you know which template files the ‘full width page’ and ‘gallery page’ equate to please?

      Cheers, Mark

  • Ron

    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.

  • Tatiana

    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

  • Ns

    This is how you design mortal fellas.

  • http://www.qwinki.com/country.html Qwinki.com

    Thanks for this video!

  • Chris

    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 :/

  • http://n/a Marc

    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

  • http://chefkhawla.com Ahmed Abbouh

    thank you so much for this serie it’s help build my own blog

  • Mark

    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

  • http://alexandrawd.wordpress.com Alexandra

    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!

  • cos

    Nice work adi,

    but what about the implement in the wordpress ?

  • knee

    Great tutorial!!
    I am wondering where is the video talking about javascript you mentioned in this tutorial.

    plz help, thank u~!

  • http://www.adipurdila.com AdiPurdila
    Author

    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

    • Cos

      Well, we are November now and still nothing’s there =(

  • Douglas

    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

    nice the website validated too on wc3 (Y) lol lol jus saying

  • Malik

    This was very easy and simple to follow, great job to the author!

  • Pingback: كيف ترسم طريقك نحو مصمم مواقع محترف !! ‹ نحن هنا | مكانك حيث أفكارك

  • Ollie

    HI Adi,

    Thank you for posting this awesome tutorial, but we are still waiting the WP tutorial.

    Thanx for all the great tuts.

    Ollie

  • http://www.johnhughesdesigner.com John

    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?

  • Robert Smith

    Outstanding tutorial.

    Great job, Adi.

    Hopefully, another tutorial will be posted soon.

  • http://www.vision-ps.de irfan

    Good tutorial Adi. we are waiting for the wordpress version

    • Cos

      There is no wordpress version comming =( i’m waiting since mounts

  • Ramesh

    Please could you show how to integrate this site to wordpress

  • turbodog

    Can’t get to 2nd page of comments?