Try Tuts+ Premium, Get Cash Back!
Adaptive Blog Theme: Initial HTML Markup
videos

Adaptive Blog Theme: Initial HTML Markup

on Nov 9th 2012 with 52 comments
Tutorial Details
  • Screencast duration: 46 mins
  • Difficulty: Beginner
  • Topic: HTML
Download Source Files
Demo View It Online
This entry is part 5 of 14 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

We’ve finished working in Photoshop, so now it’s time to begin translating our designs into working web pages. Let’s begin by setting up a project and setting out some basic markup.

Homepage and Header Markup


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Article Markup


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Sidebar and Footer Markup


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

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
  • Sharjeel Hassan

    wow now we are on Client Side Development

  • Felix

    Love the Tutorial! But there’s an error when trying to download the source

    • ianyates

      Dangit – sorry (so many files to manage with this series!) Permissions altered, download at will…

  • DED

    Hey guys, I just wanted to congratulate you on the timely postings of this series. It has been much better organized than some series in the past where some series never published the final piece or left us waiting months for the next installment. You all of done a great job getting this out and the content is first rate.

  • dude

    Great job guys!

  • Al

    trying to watch this in Chrome, the sound is like Adi is underwater. sounds good on IE8 tho, even tho IE8 is not supported by Disqus

    enjoying the series and looking forward to the wordpress part, there have been quite a few PSD –> HTML series on Envato but not a lot of HTML –> wordpress, still irks me that Jeffrey didn’t finish his series as he promised quite a while back

    Al

    • dj

      Amen to that brother. I even playfully nagged on him about it in the past until he responded to me in a annoyed manner so I quit taunting him. Glad to know someone else had the same feeling.

      • ianyates

        Probably worth noting that Jeffrey is the most prolific tutorial writer and screencaster I’ve ever come across – if he snapped at you it will have been because of a million other things on his plate!

        Anyway, this one is all wrapped up – the drip feeding will continue over the next couple of months :)

    • http://www.facebook.com/brendanmcoffey Brendan Coffey

      I was also waiting for that series to finish with the WordPress theme. Looking forward to seeing the end of this one.

  • Al

    Adi, thanks for using lorempixel.com, looks like a neat way to get images for a web page, never knew about it

    Al

  • BD

    Found if funny where he used the javascript instead of the placeholder element on the search input so that people knew what the input was for …. wouldn’t the with the contents of “Search” be a dead give away?

    • Adi Purdila
      Author

      True, but you might not always have a widget title to say “Search”… :D

  • dj

    Guys TWO issues:

    First: I just wrote this comment over the past 8 or so minutes then used your (webdesignTuts) “login with G+” when trying to post it. It logged me in, BUT then completely erased my comment! (Not the first site Discus has done it to me on – you’d think I’d learn – BUT you guys NEED to warn us to log in before writing a comment. And/or climb all over Discus for creating the problem. Why do you need to use Disqus anyway??)

    Second: Adi – I know I’ve commented on this to you before BUT please, would you consider putting a mouse-pad or something under your microphone stand?! Listening to you pound away on your keyboard through this long of a tutorial is: a) terribly distracting and distressing; and b) completely needless when there are such easy fixes. Other ways of isolating vibration from a microphone are to hang it from a boom and/or put Styrofoam or rubber under the keyboard or both. I’m NOT just talking about hearing you click on the keys – I’m talking about the thunderous thumping being transmitted through your desktop into the microphone stand and then into the microphone. Don’t you hear it yourself when you watch your video for editing?

    • Adi Purdila
      Author

      Hi dj,

      My sincere apologies for that, I realized I was making a mistake after I casted all the coding videos and there was no going back I’m afraid (remaking 20+ videos was nearly impossible). I did correct it on the WP videos where I put a thick cloth under my keyboard and the thumping is gone.

      With that said I can promise you there won’t be an issue like this in the future videos because:

      1. I learned the lesson :D
      2. I got a RODE NTG2 shotgun microphone this week which will replace my Blue Snowball, so the sound quality of the future videos will be greatly improved.

      I hope you’ll enjoy the rest of the series despite the sound issue.

      Adi

    • Richard

      you are such a douchebag, all you do is complain on every tutorial

    • ianyates

      Hi dj, the Disqus thing can be irritating if you’ve written a comment and *then* go to login – something worth mentioning to them I think.

      Aside from that, it’s a great service and we chose it for a number of reasons. Firstly, we deal with a serious amount of comments across the Tuts+ network, using a 3rd party system spares us quite some server resources.

      Secondly, it enables far better interaction – authors can now subscribe to threads enabling them to maintain conversations and properly help out. You’ll also have been notified that I replied to your comment – you didn’t need to come back and randomly check!

      Lastly, the community value is great. Relevant comments, valuable participants and best threads can all be given priority by being voted up. Plus, additional content is also suggested at the bottom of each thread.

      Besides the login hiccup, I hope you’ll see the benefits of Disqus over time :)

  • dj

    Adi… You state that “applying the border” would “mess up the grid” – could you explain that statement more in depth? Wouldn’t applying ” *: {box-sizing(border-box); } ” like everyone seems to be doing now help, or does that still leave the border hanging while including all the rest in the box model? Or, is it an inherent problem in the grid you’re using? The grid system I’ve begun using (Chris Coyier’s “don’t overthink it grids” I don’t think would have that issue on the containing element.

    Also, since you’re using html5 – when would you use the <section> tag if not to surround the section containing the articles?

    • Adi Purdila
      Author

      Hi dj,

      You’re absolutely right about the border issue. That parent div is not necessary, I don’t know why I used it in the first place. Using border-box will include the border as well in the rendered width/height of the box.

      Now, about the section tag. I didn’t want to add extra markup. Seemed like a good idea at the time, but I should have wrote it to make everything more semantic :)

      Thanks for pointing out these issues.

  • iNoX

    Adi Purdila, YOU RULE! That site is amazing!

  • bs

    Really good tutorial. Thanks Adi!

  • website design

    Really helpful tutorial.love this.thanks to share

  • Erik

    When I download the source files, all the work is already done, I think you uploaded the wrong ones. I go to edit the index.html and start coding, but all the work is already done…

    • ianyates

      We’ve just made the final files available as reference during each stage of this session: the final PSD for the Photoshop stage, the final HTML and CSS files for the static site build, plus the completed WP theme will be made available during the WordPress stage.

      It would have been considerably more involved if we’d have made exercise files for any given stage in the process, so I hope you’re willing to just dig in and build along from scratch!

      • Erik

        I’m trying to start this coding tutorial, but I don’t know how he made his index.html file, and his styles.css with the mixins(or what mixins are), he should go over at the beginning setting up to begin coding. I’ve been trying to copy the code by pausing the video but its very tedious.

        • ianyates

          Fair comment Erik – sometimes we can take for granted the details which trip others up in the beginning :) If you download the source files again, you’ll find I’ve added a “starting_blocks” folder, which has everything you need to start off.

          You’ll be styling using the styles.less file, which Adi compiles with livereload. All your LESS styles are taken, processed with variables and mixins, then churned out into a single CSS file. Check out this introduction to LESS if you’d like to learn more before you start.

          Hope that helps!

          • erik

            ah you are a god thank you

  • Alix

    Hey,

    What’s the name of the Coda plugin who allows to transform text in HTML tags ?

    • Adi Purdila
      Author

      It was called ZenCoding, now it’s rebranded as Emmet: http://docs.emmet.io/ :)

      • Alix

        Thank you very much Adi !
        And by the way, great tutorial :D

  • http://www.facebook.com/fabio.serembe Fabio Ruvec Serembe

    Sorry guys for the stupid question but: in “article markup” video, why the comments element is the first element to add in the article header?

    • Adi Purdila
      Author

      The comments element needs to be floated to the right so it has to go before all the other elements :)

  • sajid

    is there any plugin for Dreamweaver cs6 which transform text into tags? like u do.. div.classname>…..

    • Adi Purdila
      Author

      Well, ZenCoding used to support Dw, but since it’s changed to Emmet, I don’t think it does anymore.
      http://docs.emmet.io/

      However, I see the Google Code page is still up, so you could try installing the old ZenCoding, see if that works: http://code.google.com/p/zen-coding/

      • sajid

        Thanks Adi. i can’t find it for Dreamweaver but now using this feature with Aptana.

  • Ralph

    I don’t get .less file to work. can somebody help me? do i have to make some changes in my texteditor?
    if i work along after setting the variables i don’t see any change in my browser.

    • Adi Purdila
      Author

      Hi Ralph,

      Did you install LiveReload or less.js? Those are used to compile your LESS file in CSS. If you’re using Windows, you can also use WinLESS to compile LESS files.

      • http://www.facebook.com/rosa.guns Rosa Guns

        Hi Adi, must say this was a brilliant tutorial up to this point. but this whole “Less” stuff I would really appreciate if you could elaborate bit more.

        I havent dealt with Less before. I read all the comments and installed Less app into mac. Still have no clue.

        @ Variables in the Less files,
        @link-color: #4599C8; works perfectly, but
        @body-font: "Helvetica Neue", Helvetica, Arial, sans-serif; doesnt work. Any thing I’ve missed?

        • http://www.facebook.com/rosa.guns Rosa Guns

          further more

          color: darken(@ light-text-color, 30%);

          box-shadow: (0px, 0px, 5px, @border-color:);

          }

          something defo went wrong. Would really appreciate some advice.

          Thanks

          • Adi Purdila
            Author

            Hi Rosa,

            How did you use the @body-font variable? Also, the darken color one shouldn’t have any spaces after the @. So, it should be color: darken(@light-text-color, 30%); The box shadow one is a call to a function (mixin) and it must be declared first.

            As a resource, I recommend you have a look at http://lesselements.com/, it’s a collection of useful mixins :)

  • Ralph

    can anyone explain me how i can see changes made in the less file

  • http://twitter.com/danielmoreno Daniel Moreno

    Hi Adi. How do you expand that initial html template at the beginning. I have Emmet working at Coda, but i cant get that either with html:xt or html:5

    • Adi Purdila
      Author

      I’m using TextExpander to do that :)

      • http://twitter.com/danielmoreno Daniel Moreno

        Thanks Adi, I’ll probably go for that then, I liked it ;-)

  • John Drach

    lol, It’s such a pain in the A*! to install Emmet in Sublime. Sucks!

  • theb

    I’m having problem with installing style less and how to run it as it is not well explained on their web page. They have a download link but it just opens in another window. Can someone help with this?

    • Adi Purdila
      Author

      Are you using Mac OS or Windows?

      • http://www.facebook.com/profile.php?id=1409411974 আহমদ শরীফ

        @adipurdila:disqus & @ianyates:disqus I think many of them facing problem with styles.less and mostly who are using windows.Please give more specific explanation on styles.less.

        I am working plenty of hours.But still confusing to me this.Please don’t ignore my comment.

        • Adi Purdila
          Author

          Hello,

          I’ll try to explain it. LESS allows you to write faster CSS code, it’s a dynamic stylesheet language. The LESS file is compiled in a CSS file (which is ultimately loaded by your page as the main stylesheet). You can compile that LESS file using tools like LiveReload (if working on MAC) or WinLESS (if working on Windows).

          That’s basically it. I recommend you read this for a more in-depth tutorial on LESS: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/

  • sayed mohammad ehsan

    Hi Dear

    Is Great to find out such a kind of tutorial. its really great and helpful. One thing i want to know how did you type just a single line and all the tags and division are come.

    Is their any shortcut of notepad.

    • Adi Purdila
      Author

      Using Emmet for that :)

      http://emmet.io/

      • sayed mohammad ehsan

        thanks adi.
        one thing i can not under stand that is , how can i find the style.less file and how to use it in notepad++

        • Adi Purdila
          Author

          Well, the LESS file should be in the CSS folder and you can edit that in any editor you want. It’s the compile part that’s crucial here, you need to use something like LiveReload to compile the LESS file into CSS.