Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1)
videos

Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1)

on May 16th 2011 with 52 comments
Tutorial Details
  • Program: Text Editor
  • Difficulty: Intermediate
  • Estimated Time: 4 hours

Final Product What You'll Be Creating

Download Source Files
Demo View It Online

It’s day three of the Basics Design tutorial! Today we’ll be continuing on with the coding – specifically we’ll be writing the HTML/CSS for the homepage and the blog single post page. 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 3…

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

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

Day Three: HTML/CSS for the Homepage and Blog

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 4: Styling and Coding – 720p

Video 5: Styling and Coding – 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
  • www.phpdesign.si Jure

    This is absolutely amazing tutorial. I must say you are a great teacher. The design looks amazing, can’t wait for more.

    Sorry for my bad english.
    Jure

  • Quentin

    Amazing video ! You manage the code very well ! Go on !

  • http://varemenos.com/ Varemenos

    Why didnt you just place the reset CSS in the same file as master css?

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

      That can be done indeed when working towards page load optimization(by having just 1 CSS file you reduce the server requests by 50%) but for this tutorial my purpose is to show how to get organized with the code and the files :)

      At the end of the 5 days feel free to optimize the files in any way you want :)

  • http://www.arnaud-olivier.fr Arnaud

    Thanks for video:)

  • http://www.adoration.co.za Gavin Wood

    It’s refreshing to see it done on the fly, this way we get a better perspective of how problem solving works…… absolutely great tutorial!

    Are you going to make a tutorial showing how to take it over into wordpress?

  • http://www.amitnet.com Amit

    Fantastic! As good as the last if not better! Keep them coming…

  • Sagar Ranpise

    Awesome!!! Simply Awesome!!!

  • http://www.mark-barron.net Mark Barron

    Good job on these videos Adi! I agree that these are very helpful and am looking forward to the remaining 2 days. One question, though, when using vendor prefixes, is it best to use the standard property first, followed by the vendor specific property, or the other way around? I thought I remember hearing that it was a good idea to use the vendor prefix first, so that if the browser supports it, it will be used. Though I suppose it wouldn’t make a difference since the vendor prefixes occur later in the css file, therefore they most recent will take precedence. Just wanted to get your thoughts on that. Thanks.

    • Jason

      It actually does make a difference. The vendor properties should come first. Here is a nice article on css-tricks explaining why.

      http://css-tricks.com/ordering-css3-properties/

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

        Thanks for that Jason, really nice read!

      • gippo

        Quick tip, since it is not listed in the google zen coding documentation:

        zen coding
        expanding “brad” gives you this

        -webkit-border-radius: radius;
        -moz-border-radius: radius;
        -ms-border-radius: radius;
        border-radius: radius;

        works in coda and espresso, but in espresso you dial in the radius value in pixel in the first lines and it is updated in all the four lines.

      • Mark Barron

        Thanks Jason,
        I read the article that you linked to and that helped clear it up for me.

  • http://www.amitnet.com Amit

    Oh, I forgot to ask on my last comment, Adi, what is your ‘webdesign toolkit’, i.e. what are your apps of preference? I was a big DW user before and never considered Coda until I saw your first tutorial, its a great app!

    Thanks!

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

      Well, for me it’s Coda + ZenCoding + TextExpander (this one makes my life a lot easier). This is what I use for coding.

      For debugging, Firebug works like a charm for me :)

  • Nick Plekhanov

    Blip.tv just chaned their website structure.

    Fix please video boxes.

    thx

  • PhilKav

    The nav problem might be GC changing the anchor state to either a:active or a:visited so you might wanna change those! Which should be reset anyway a, a:active, a:visited{bla bla}

  • gippo

    Thanks again, very well done!
    and now the question (sorry I am a “learner”) what is the shortcut you use to insert those css comments? bbla? Is it a coda plugin?
    As for the day2 tutorial, just in case you have missed my question, I posted a request about the shortcut you used for the medium lorem ipsum. I am reposting here because I don’t know if old posts will be monitored.

    Thanks in advance.

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

      I’m using TextExpander for that. I’ll make a quick tutorial in my next video about it:)

      • gippo

        Thank you, I am looking forward to it!

  • manraj

    @Adi I have watched all your videos and I think you are doing an amazing job here.These sort of video tutorials helps people to see the time an effort involved in designing a theme like yours.I have a question for you

    Do you do all you designs with a fixed layout? or have you done designs in Liquid and Elastic layout?

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

      Thanks manraj, glad to see people appreciate the hard work behind the tuts :)

      I did liquid layouts, but only for UI projects (admin interfaces mostly), never for a commercial project like WP theme or company website.

  • http://vitorteixeira.co.cc victei

    H, Manraj … great tutorial!

    I did liquid layouts, but with a fixed layout for better control of design, so little use liquid layouts …

  • Eko

    Your tutorial is awesome, where do you come from ?
    Your name sound like Indonesia name.

    Keep up good work bro!

  • meer

    awesome job very informative thanks

  • gippo

    First thing first: I am quite new to coding, so my alternative way of doing things could be awful, even if they work, or what I am saying is so obvious that… well but I subscribed to tuts+ as a student!

    If I apply the overflow:hidden property to the #topHeader I discovered that I don’t need the cBoth class trick. It happens at around 18:00 of the video.

    div#topHeader {
    margin-top: 40px;
    overflow: hidden;
    }

    Then I discovered that the “Basics” logo sits on top of the text baseline of the div #topHeader, which means that there are a few pixels for the letter descenders.
    I was expecting the div#Header height to be equal to the logo image, 47px, instead it was 50px.
    In my complete ignorance I spent hours trying to figure out why: images sits on the box baseline

    In case alignment is an issue the logo image should have the style “display:block” or “vertical-align:bottom” attached. I created a imgBlock class.

    In html

    In css
    .imgBlock {display:block;} or .imgBlock {vertical-align: bottom;}

    I hope what I wrote makes sense and might be useful to whom is starting coding now like myself.

  • http://www.jintech.in/ Jyotirmay Intellisense

    I’ve seen your both video, that was very helpful to me. thanks for sharing this information

  • manozr

    u r my new teacher.

  • ollie

    Just wanted to say thank you for your AWSOME!!! tutorial. I have found it very informative and cant wait for day four!! I am very interested in seeing how you created the dropdown menues and also the top slider.

    Thank once again

  • http://www.webdesign.tutsplus.com Please

    Where are the other Videos please upload it. From 17th of April till Today coming every Hour to check if you upload the other parts. But no luck. Can you please upload it soon. What’s the point for the half tutorail.
    Pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee…………………………………..
    Thanks

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

      Day 4 is uploading as we speak – should be up in an hour or two :)

  • Please

    I meant to say “May”.
    Sorrryyyyyyyyyyyyyyyyy

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

  • irfan

    very impressive tutorial.keep up the good work.

    how we can download these videos from blip.tv

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

    My apologies for the delay on Day 4 Video, I’ve had some rough days last week and I needed a break to get my stuff together.

    I’ll make it up to you guys :)

  • Pedro

    Great Tutorial!!

    Quick question. I don’t quite understand the reason behind having the reset.css and master.css

    Could someone enlighten me! :)

    Thanks!

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

  • gherrin

    love the videos and design. one of the questions that comes to mind with respectable coders is where do you all get these nice stock images from (not necessarily this particular layout)? thanks!

  • Rafal

    @gherrin
    I mostly use http://www.istockphoto.com/ but (as learned from the vids) will be using those from http://lorempixum.com/ :)

  • Daniel Winnard

    Hi,

    Awesome tutorial, but whilst going through the videos I noticed that the onfocus part of the search form doesn’t work in Firefox 4. It works in all other browsers. I have copied your text exactly to test, and firefox 4 displays nothing, yet when you put placeholder html5 element in instead it works. Weird huh?

    Can you add both the html 5 element and the javascript onfocus to cover all bases?

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

      Hi Daniel,

      That’s weird, I’ve tested it in FF4 but it works as it should. Are you using Mac or Win?

  • dougieladd

    Many thanks Adi for these.. they’ve been very educational :)

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

  • Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Zoomfly

  • Pingback: How to Get a 2-Column List, the Elegant Way « webdesignpantea

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

  • Aldrin

    Adi there’s a simple solution for the navigation. Instead of adding a nonsense class to the markup which you named as “cBoth” you can simply add a display: block property to the anchor element ul#nav li a.
    Anchor element is set as inline by default, so display:block is used.

  • Urban

    1st of all special thx to the author for sharing his experience and for the time he spent making and uploading the tutorials… and for this great website we have that made it possible.

  • BS

    Hey Adi,

    While fixing form#searchForm, chrome is adding margin-right of 2 px. So i see white space. If I set margine-right= -2px; it fixes the prob with chrome, but the Firefox hides the right border.

    Any idea why this is happening?

    Thanks in advance.

    One more thing, thanks for the tutorial. I am coding my css step by step and then check how you do it and then compare. Waiting for js tut though.

    Cheers
    BS

  • Chris

    Just finished watching day 3 I would say the concept of the tutorial is good, but I think to much time being spent on showing more preference styles like changing the color of different elements that have nothing to do with the over all structure I feel those parts could be left out and help the video tuts stay on focus.

    I am probably one of the few that like to see his debugging process that is good to see how others step through there code and fix bugs.

    One thing that really concerns me about this (keep in mind I haven’t watched day 4 or 5 yet so maybe this will be addressed). The list items for the comment post. I don’t think this method of how he did nested list items is practical. As I experimented adding multiple reply (7 total) the box for the last reply was about 100px. This seems to be a big issue if you have many replys to one comment your going not be able to read them once you get to over 10 comments. Just my obvervasion so far.

    Overall pretty informivtive video learning a few new things, but again think the stuff that is more a prefrence I feel can be left out to make videos shorter and stay focused on the structure of the tutorial

  • altehast

    I would like to ask how to align the subscribe button on the footer to the text box? If you try to view it in firefox the textbox doesn’t align properly with the subrscribe button on the right. On chrome it works ok but not on firefox. Anybody encountered this problem?

  • http://zuikiodizainas.lt Argonas

    Great tut Adi :)

  • Jens

    Thanx for this great tutorial…

    I’ve learned a lot and now I’m trying to apply somethings on a new web project.

    Can you tell me how do you use the “bblan” shortcut in css files and where does it come from. I’ve tried zo google but can’t find.

    Best regards

  • Amr

    Awesome Tutorial and theme, I enjoyed your Screen cast and it’s very useful to enhance html and css skills and I’ve learned a lot from it

  • Joel

    Hey,

    I am complete new to this so I am following your tutorial, but I have a problem. I do exactly the same as you do but somehow, if I put reset.css in the css it does not work, and if it’s not in the css map it works fine. And the master.css is not working at all!!! And the same for the fonts, they’re also not working. I do exactly the same as you, so I don’t know why this is happening! Can you help me pls?

  • David

    This is the BEST tutorial I have ever been through. So detailed. I learned more CSS from this and pausing the video and trying to solve the problems that came up than I have from books or other video tutorials. Thanks for this.

  • Kaouthia

    Thank you, so much, for Video #4.

    I’m so glad I’m not the only one to get “why the eff isn’t this working?!?!” moments with CSS. :)