The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
videos

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

on Dec 27th 2009 with 217 comments
Tutorial Details
  • Technology: HTML, CSS
  • Difficulty: Beginner

This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.

Please note that, even if you haven’t read the first two tutorials, you’ll be able to follow along with this video quite easily.

Update

Please note that this tutorial series was originally posted on Nettuts+ about sixty days ago. However, it’s recently come to my attention that many of you had trouble watching the screencast for Section 3. This has now been resolved. Enjoy!


Part 1: Build a Promotional iPhone App Website Wireframe in Fireworks



Part 2: Create a Promotional iPhone App Site in Photoshop


Final Design

Part 3: Converting Our Design to a Nicely Coded HTML and CSS Website

Final
  • Section 1: Slicing the PSD – 0:00
  • Section 2: Coding the Markup – 18:43
  • Section 3: Adding the CSS – 47:11

Other Viewing Options

Series Complete!

If you followed along for this entire series, congratulations are in order! If enjoy the idea of tutorial series’ that span multiple TUTS sites, be loud and let us know! I hope you learned a bit from this third entry; and thanks again to Sean Hodge (Psdtuts+/Vectortuts+ editor) for writing the first two tutorials in this series.


Tags: CSSVideos
 
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.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://www.jeffrey-way.com Jeffrey Way
    Author

    If your connection isn’t fast enough to stream this video (it’s a bit large due to the length), I’m currently exporting a Flash and iTunes version. I’ll update this posting when they’re ready. :)

    • w1sh

      Was wondering about that. Thanks.

      • jose

        me 2. thanks

    • Anders Therkildsen

      Hi Jeff,

      Just like everybody else i would like to thank you for this awesome and detailed tutorial! I felt like sharing a tip with you as thanks, i noticed that when you were slicing the background you “flattened the image” and then sliced it, this could be done much faster, without having to flattened the image and going back.

      You should simple follow these 3 steps:

      1. Select the area that you want to slice, with the “Rectangular Marquee Tool” (don’t think of the layers)
      2. Hit: (fn + cmd + C) – This will copy the selected area, as if you had flattened the image and copied it.
      3. Insert it in a new document.

      I look forward to more great tutorials!

      All the best
      Anders

      • Anders Therkildsen

        Hi again :)

        I just wanted to ask you, if there was a reason why you rasterize (cant spell it) the styled layer, before you make it into a smart object? I noticed that its possible to skip the rasterizing (you know what i mean) and convert it directly into a smart object, but does this do something different? I’m not able to see any difference myself, maybe some details but that could just be me :)

        Regards
        Anders

  • http://taimurian.com Taimur

    This kind of tutorials is very useful for the designers who are confused about the right way to design an actual website .. Thank you Nettuts

  • http://www.urbanvideos.tv alan

    ok will check the iTunes ,this is loading to slow.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’ll probably be a couple hours before it shows up.

  • Arun Mariappan K

    Nice Tutorial… Thanks a lot… :)

  • http://www.jadgraphics.net/blog Jad Graphics

    Nice. Great job Jeffrey.

    I just wish that you guys would do the same thing, but add one more section at the end, converting a site into WordPress. :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Oh it’s very possible that we’ll do that in November. :)

      • http://www.imblog.info Muhammad Adnan

        Converting to WordPress will be GREAT ! but its great compilation so far :)

      • http://www.jadgraphics.net Jad Graphics

        That’s awesome. By the way, quick tip. Instead of merging some of the layers, you can just hit CMD+C and it will copy whatever is selected, even if it is on different layers.

        Try it out! It should be quite useful.

      • Lukas

        One more for WordPress!
        Pretty please!!! :)

      • http://www.destinysagent.com Steve Smith

        Excellent tut, I really enjoyed watching it and even made it to the end! I’d also like to do the same in WordPress.

        Cheers!

  • http://fwebde.com/ Eric B.

    This looks like it would be helpful to people new to web design.

  • Luan Fernandes

    Can you please post the download link here? I really need it

  • http://www.twitter.com/tylorskory Tylor

    I really liked how this series spanned three of the tutsplus sites. Really cool idea!

    • Meshach

      Yeah, I agree.

  • http://laranzjoe.blogspot.com lawrence77

    I want a download link… :(

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Patience. :)

      • http://laranzjoe.blogspot.com lawrence77

        I thought u forget to add that link :D

  • http://tristen.ca Tristen

    Jeffery! did you design this website??
    Its very good.

  • Tanha

    Hi
    It is worth enough to say, thank you very much … but could you please provide the download link as well.

  • http://www.jeffadams.co.uk Jeff Adams

    I haven’t watched this yet, and to be honest I haven’t really been aware of the other tuts about these but kudos for what looks like alot od detail about an iPhone App cos as far as I know no-one else has even touched on that as a subject yet.

    Well done Jeff.

    • me

      This is why you really should’ve watched before commenting.

  • http://designintheraw.com Roy Ho

    Although this is targeted towards beginner designers, it is a good refresher for seasoned pros as well. I commend you for your job well done and keep up the good work!

  • http://www.nicolas-cabot.com Nicolas

    Thank you so much for this series Jeffrey. I’ve never used Fireworks, so it’s gonna be a good start !

  • http://www.someblog.de Timo Huber

    Nice work, Jeffrey.

    Thanks :)

  • Cameron

    Great tutorial!
    Just a couple quick tips/different ways to copy things in photoshop.
    -You merged and rasterized some things before copying. But if you select, then Ctrl+Shift+C, it “copies flattened.” And it does what it says, basically copying exactly what you see on screen, layer styles included.
    -When you select an object, the selection does not include any outer effects (outer glow, outer stroke, drop shadow, etc.) My method of copying such objects is to solo the layer (alt click the layer’s ‘eye’con) then go to Image>Trim, select Transparent Pixels (so that it includes the drop shadow and such), trim on all sides, OK.

    • http://designintheraw.com Roy Ho

      Those are indeed good tips however I have yet another way of doing it. If you right click on the layer with the effects and click duplicate, you will get a dialog box with the option to duplicate this layer to a new document with effects intact. This way you have accomplish two things at once — isolating the layer and copying over the effects.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Ahh – good tips guys!

    • http://twitter.com/ptamaro ptamaro

      Good points Cameron, I love the Ctrl+Shift+C combo (that’ll definitely be useful) since I still do things the old way then Ctrl+Alt+Z my way back… Thanks!

    • http://www.moxiedisplays.com Mike

      Great tip! I usually make my selection, then flatten all the layers before copying and pasting the file in a new document for saving. Then I have to Command-Z to un-flatten everything. Your shortcut could save a little time. I’m going to have to print out a shortcut cheat sheet and refresh myself!

  • Fariborz

    I watched whole video and honesty you cover every little detail that one might to consider with different browsers.

    It presents professional way of coding a website from scratch and it is a great deatiled tutorial. I am really thankful.

    :-)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      That’s great. Thanks so much! I’m glad you enjoyed it.

  • http://www.secretspedia.com Waseem

    That’s amazing

    I’m always had trouble in coding PSD to XHTML/CSS
    Thank you

  • http://www.shresthasuman.com.np suman

    nice tutorials and converting psd to html always help in many ways. i hope, you will post the screen-cast converting this website in wordpress in November. we are waiting jeff.

  • http://www.000webhost.com/205252.html Hamza Oza

    Thanks Jeff. Really helpful.

  • Matheus

    hey guys,

    well, i’ll leave here a suggestion: why not provide closed captions on all videos, or at least on many videos, because many people (as me) do not understand english very well, and with cc, it ll be much easier understand what is said on the tutorials.

    thanks.

  • Rob

    Looks very nice, will have to get the time to watch it all. Pity I have to keep supporting IE6 at work though, pain in the b-hind.

  • http://www.designfollow.com designfollow

    thanks for this great post

  • Stoian Kirov

    Amazing tutorial! :)

  • http://watchallsawmovies.com/ Saw

    Looking really good tut again, Thanks Jeff

  • Al

    love your tuts but please don’t do them white on black, very hard for me to read, old eyes you know

    Al

    • Marshall

      Not sure if you’re on a mac or not, but if you are you can hit cmd+option+ctrl+8 (on the number row) to invert the colors onscreen. Sorry that I can’t offer a similar solution for windows, you might try asking “The Google” :-P

  • raymi

    thank you very much Jeff for this new tutorial. I’m a plus member so i got the psd and convert it also so i guess we I can check if i got it right :P. Thanks again :D

  • http://ethan.luffle.com Ethan

    All I see is a black box. MP4 link, s’il vous plait?

    • http://www.gabri.me Ahmed

      same here , plz provide a download link

  • George

    Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.

    getting the same black box rather than the video.

  • Chris K.

    This is AWESOME!

    Seriously, how you explain everything and work with the files: super easy to understand and to learn from.

    You did a really, really good job! Thank you so much!

  • http://cajebo.com Michael

    hmmm, there must be some tremendous server-strain going on over this screenCast. Waiting for nearly an hour for it to load…

    I did get a chance though during that time to look over the other to segments.
    Again, great job Jeffrey and crew.

  • Bretticus

    I just downloaded the mp4 last night and dragged it into my movies folder on iTunes. Been watching all morning (almost done.) In my company, I do the website programming and the design is done by others. Perhaps that’s why I am giddy like a geek on Christmas morning. :) Perhaps it is because I come form the old school of design (chop up a huge image and suffer why you try to modify anything or pull your hair out trying to program layout!) This is excellent Jeffrey! I couldn’t believe this wasn’t a plus tutorial. I think I am becoming a Jeffrey Way fan boy ;-) I lack the patience for long text tutorials and the visual learning is better than being in a classroom even. So I look for video tuts quite often and, @jeffrey, yours are the best hands down.

    On another note, you can learn a lot about a person watching them write code. :) Like when Jeffrey couldn’t see an “r” because he was expecting a “4.” I have a slightly dyslexic friend who does stuff like that. It’s interesting that all the really smart people I know in development are mildly dyslexic or have attention deficit disorder, etc. :) Not saying you are dyslexic @jeffrey. Just interesting.

    Thanks again for an awesome tut!

    • http://cajebo.com Michael

      Where did you download the mp4? as a tutsPlus member? or via iTunes?

      • Bretticus

        Oddly enough, I downloaded it through flashgot. :)

    • http://insatsu.us Yulka Plekhanova

      same question.. how did you download the video? i still don’t see the link.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Brett! That’s really nice of you to say. :)

  • http://ronnieblogg.com Roaa

    Awesome work, Jeffrey Way. That’s a amazing tut you got there. Keep up the good work – Cheers!

  • http://darthmonkey.net Josh

    Hey Jeff,

    Great tutorial, I think its great. Just a quick thing about using an image as a logo though, I know there are issues with using text indent however, what I do is just use a span tag within the h1 or h2 tag, apply the background to the h1/h2 tag and set the span tag to display:none.

    I dunno what you think of that method but I find it works the best.

    • Thomas Drake-Brockman

      That technique can be bad to screen readers. Text indent never seems to do anything bad.

  • http://www.imicreation.com vipin

    Great tut, very nice
    Keep more coming…
    Thanks

  • awake

    about time you started using Fireworks Mr. Way

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Sean does. :)

  • Evan Jones

    okay…go somewhere else

  • http://www.insidethewebb.com/ Inside the Webb

    I’ve been waiting so long to find a good tutorial about how to slice up a PSD file, glad NetTuts is on it!

  • http://www.totalcreation.co.uk internet

    Website planning is probably the most important part of building a website. It can also be the most frustrating if you don’t start with a good understanding of how the Internet works and or have unreasonable expectations about how your site should be designed.

  • http://os.laroouse.com esranull

    thanks jeffrey you greats

  • http://mokshasolutions.com Moksha

    Thanks JW for another great tutorial.

    I can’t see the video hmm will wait for bandwidth. but I know this tutorial is also same as your previous one. thanks again.

  • Rez

    Fantastic tutorial, but the video isn’t loading up. Wouldn’t it have been better if you did it in multiple parts?

    Also, could you put a downloadlink please? I’ve been searching everywhere for it, its not on iTunes!

  • Val

    OMG! THANK YOU SO MUCH! This is honestly one of my favorites sites. Im sucha proud nerd, I love CSS.
    Thanks cuz this is so much better than my uni teachers, lol. :D

  • Mike Webs

    This is huge Jeff. I learn a lot from you.

  • Brandon

    I’m excited to see this! Where is the video?? Usually there is no problem viewing these. I’ll check back later…

  • Al

    started watching video this am, then had to go, now cannot get video at all.

    what do I need to do to see the video? clicking on the other options does not seem to work either.

    can this be fixed?

    Al

  • Al

    test

    last message is lost in the ether

  • Al

    trying again, watched part of this in morning, now trying to watch the rest, no go, cannot get into it.

    alternate links no good either.

    is this going to be fixed, is this a problem with screencast??

    Alf

  • Moneyxl

    Blip tv one is not working and i tunes, well it keeps resending me to download page for itune!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Not a great day for video hosts. :( It seems that Blip.tv is currently down. It’s been that way for a couple hours now.

      • raymi

        yeah same here i will keep trying tho i don’t wanna miss this tut :D since i know it’s gonna be great like all the things Jeffrey does. I’m actually starting some tutorials myself in spanish and i wanna say thank you Jeffrey you were my inspiration n_n

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        That’s great! Be sure to send us links once they go up.

      • raymi

        i already have six videos you can watch them here http://www.vimeo.com/raymicha/videos they are also psd to xhtml/css videos :D or maybe you have an email from were i can contact you directly and send you the links :D

  • Moneyxl

    And Itunes? Couldn’t you have added this to plus content too so we can download, I had to download the Itune programme just to watch this and it’s not coming up….it’s 3:23am, I’ll try in the morning.

Newer Comments →