Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2)
videos

Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2)

on May 23rd 2011 with 31 comments
Tutorial Details
  • Programs: Any Text Editor
  • Estimated Time: 2 hours
  • Difficulty: Intermediate

Final Product What You'll Be Creating

Download Source Files
Demo View It Online

It’s day four of the Basics Design tutorial! Today we’ll be finishing the final pieces of the project – specifically we’ll be writing the HTML/CSS for the support pages of the site. 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 4…

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: the full, final HTML will be available for download in the next session of this series (Day 5), so today is going to be working from the same HTML files that we created in Day 3.

Now on to Day 4, the slicing and markup session!

Day Four: HTML/CSS for the Support Pages

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 5: Styling and Coding (continued) – 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
 
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

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding) | Webdesigntuts+

  • Joel Grant

    Tx!

  • George E.

    I must say you are awesome teacher and I love this tuts. I love how you show and try to debug your errors. Very helpful.

    Keep up the great work.

    As well, will there be an episode on how to turn this into a WordPress theme/.

  • http://insfired.com S.K. (Insfired)

    This is turning out to be a great series to follow, very educating!

  • http://www.austindesignguy.com Casey

    This series has been my favorite bit of content on Web Design Tuts. Thanks for providing it

  • http://www.arnaud-olivier.fr Création de site Internet Avignon

    Great job!
    Thanks :)

  • http://www.thewebprograms.com/ Fareed khan

    Really a stunning Theme..thank you

  • http://vtimbuc.net Valeriu

    Very helful!

    Multumesc :D

  • Michael

    Perfect tuts. You are real cool;o)

    How can I download the video to my computer? I can´t use blip.tv anymore apparent after they have relaunched their website

    • http://www.e11world.com e11world

      Anyone wanted to download video from web, I use sothink web video downloader. really great plugin for firefox.
      I’m really loving this series of tutorials! Thank you soo much!

  • http://www.lukichev.org Dmitrii

    I understand why you have dropped ie6 compatibility, but ie7 is still bad-looking and this is the thing everyone should yet work on.
    P.S.: Sorry for my english.

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

      There will be a video in Day 5 addressing the browser compatibility.

  • http://amk.apokalipsis.cl Francisco Aguilera G.

    Hi Adi, great tutorial. I am following very excited.

    I think that the problem of the floating elements and the on the fullWidth section, can be fixed by adding a overflow: hidden property to the div.oneHalf elements that contains the floating images.

    Pd: Sorry my bad english.

  • http://mainual.com/ Mainual

    Thx for this experience. I hope to use it soon!

  • Luís Magalhães

    Hi Adi, and all of you.

    I’m new to CSS I usually work with Flash, but I feel I need to grow and learn CSS.

    This was really my first time I saw how CSS work and this is amazing!

    So the point is this comment:
    When you are making the gallery page and the blue button with padding does not fall down when you put the margin-top, and you try to put the “display: block”(the blue background will complete with one-third, and this you don’t want), (my question is) why you don’t put this link in a paragraph? you do that in some cases before, I think about day 2.

    That is my doubt.

    Sorry about the english, i know it’s bad

    Thank’s

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

      That would actually work I think :D

      I guess sometimes you just miss the obvious, but thanks for pointing it out Luis!

  • Gustavo Cohen

    I watch tutorials all the time and I must say that Adi is in the top of my list for best teachers!

    Many video tutorials show a scripted pre tested view of a project (Not bad for general learning) But in the computer world DEBUGGING is essential and Adi makes it REAL.

    Keep up the excellent work and hope to have many more tutorials from you in the future.

    Question… do you use html5shiv as a fallback for non html5 browsers?

    Gus.

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

      Thanks Gustavo, glad you like my tutorials. I do try to make it real, but sometimes it’s hard because I get stuck on some things that take way too long for a video tut, so I gotta be careful with that.

      I don’t use the HTML Shiv since I don’t use any HTML5 tags and it’s my understanding that shiv is only used when you need the new tags (article, header, footer, etc).

      • Gustavo Cohen

        That’s correct. You are only using the DOCTYPE not the actual tags. One more question. I am assuming that besides creating templates for themeforest you also do websites for clients. if that is the case, to maintain menus through different pages, do you use php includes?

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

          That’s one way, sure, but for clients I usually do WP, so I’m using the menu function from their framework, it’s just the way forward nowdays :)

          • http://www.webtures.de Dennis

            Hello!

            Let me first say taht this is a very cool and impressive series, thanks!

            As you mentioned it – will there be another series turning this into wordpress?

            I think there are lots of readers here who would be extremely interested… PSD to HTML ist the one thing, but you hardly find good tutorials about psd –> html –> wp!

            Anyway… thanks a lot – I learned really cool stuff from this!

            *Dennis

  • Amit Solanki

    Thanks for the video tut Adi :)

    I am new in webdesign n seen all the tuts on this site but after watching this tuts i have actually learnt alot more.

    Do webdesign consist on of the things u have showed upto here.(and the one in next video)

    by following the way u suggested can we make and upload websites on theme forest.

    thanks in advanced .

  • Alex

    Another great tutorial from a fellow Romanian designer. How can the web sustain such awesomness? :D Great job adi and bafta si la mai multe

  • manraj

    Good work Adi,”that looks pretty good…..” :)
    Learn a lot of stuff this time….

  • http://arttitude360.com Tolu

    Great Work Adi, you brought this home! Nice stuffs keep coming from Webdesigntuts+, as a matter of fact…the whole tuts+ family are a one-stop online resource place for anybody in this industry!

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding) | Webdesigntuts+

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

    thank you for this article…’
    i’m waiting the next one

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) :- Tutorial | Gadget | Game | Tips & Trick | Download | Free. | 1001 Trick And Article

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Jetcat

  • Tanktery

    I was wondering why didn’t you just create a css object and use that as a form for all forms on the site?
    Why did you create a form form#articleCommentForm and anothere form#contactForm why didn’t you make one abstract form and use classes to style it, so that it could be used on the whole of the site?

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing | Webdesigntuts+

  • http://drunkgopo.deviantart.com Miron Catalin Gabriel

    Hello Adi,

    Nice tutorial, except the part of the Right Alignment from the Full With Page. If you see there is a right space between the end of the line and the end of the actual width which is 960px. I upload a pic to view it clearly. (http://imageshack.us/f/824/basicsablogandmagazinet.png/)

    I hope that you understood what i am talking about.

    PS: Nobody told you about it ? or maybe this is what you’ve wanted :)

    Multumesc pentru tutorial si astept altele in viitorul apropiat si cine stie poate o colaborare. O seara buna.

    • Gabriel

      The spacing on the right is coming from the margin-right: 3% on the oneHalf class. You can target the last oneHalf and remove the margin-right and add it to the left side.

      #fullWithSection .oneHalf:last-of-type {
      margin-right: 0;
      margin-left: 3%;
      }

  • Samar

    thank you Adi,

    thank your for these videos , but really i am using PC not Mac so i don’t have coda

    i need to know how to link between css file and xHTML file
    if you please, could you help me with this

  • Gabriel

    Hey Adi,

    One way around the hr clearing problem is to float the hr then give it a width of 100%. By floating the hr is understands that the other floated elements exist thus making the margins work.

    Thanks for the great tutorials :) Can’t wait for you to release some new ones.

  • http://www.product-shot.co.uk/ Product Photography

    Very good tutorial.