In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn’t actually “slicing” the Photoshop file, but looking closely at it and trying to mimic what is done there with correct markup and CSS techniques.
#72: Building a Website (2 of 3): HTML/CSS Conversion
Chris Coyier
on
(Updated on )
Have been looking forward to this all week and it didn’t disappoint.
Thanks for taking the time to share. Always appreciate it.
Ah.. I was waiting for this for since you released the part one of this series :P I use to check the site every 12 hours lol…
Wow, you added a comment edit thingy.. what plug-in did u use for it? Anyway, gonna sit back, get a glass of pepsi and enjoy this screencast now :)
Chris, I say your tweet that you were having trouble with iShowU last night… glad to see that you got the video done and up today! 1 step closer to getting my blog and future client blogs workin’ well because of you!
You really don’t need to wait till next week…hint hint… I’m ready to watch the 3 part right now…!
Chris, saw your tweet last night that you were having some trouble with iShowU… lame… I’m super glad you got it working and out for us today! Thanks to you I’m now 1 step closer to becoming a wordpress ninja! ;-)
That said… you really don’t have to wait till next week to get the part 3 out – hint hint – I’m ready to watch it right now…
These videos have been a huge help in understanding how css works. Anyways can’t wait for #3 and the conversion to wordpress. Keep up the awesome work.
Thanks Chris….Very helpful
Hi Chris, your videos are just great. Thank you so much for all the effort and great creativity I have learned so much.
I wanted to note something. In photoshop while selecting the layers that are not it. You can also alt+click and it will “inverse the hide” showing you only the one you clicked on. (I hope its a good hint/tip)
Again thank you so much for this great community of resources that you have built.
Grid-u-lar, best new word. Print it.
Hi Chris, great screencast, I notice on the live site you’ve got rid of the horizontal scrolling on the main content so it just scrolls vertically, I’d be interested to know how you achieved this?
I didn’t actually. The problem just only crops up when you squeeze the browser down really narrow and horizontally scroll. It’s really not that big of a deal though so I just left it.
That’s interesting because on my browser no matter how narrow you make the window the main content block stays fixed in position horizontally
This may work for you, Mark….
body style=”overflow-x:hidden”
…to disable the horizontal scroll bar.
great video, thanks.
I am trying to understand it all. You have changed it.
Chris, would you be be up for doing some wordpress tips sometime? I’m specifically interested to see how you keep your blog backed up in case something bad happens… And how to restore from the backup if you did ever lose your blog or needed to migrate to another host.
regarding the frillies, since the headers will usually be permalinks in wordpress, surely you could give a background to the h2, with left padding for the left frill, background to the a tag with right padding for the right hand frill, full css solution ?
instead of using a blank span, i’d just display:block; the a tag and use that for the other side
Either way, loved the screencast.. There’s something calming about watching another designer marking up a site. I enjoy the process on too many levels, I think that makes me a little bit of an oddity.
In order for that to work, both elements would have to be inline elements not block, otherwise the width would always be 100% and the frills would be aligned left and aligned right instead of on either side of the title snug. Still doable with CSS, but would require yet another wrapping tag, making 3 instead of just the 1 with JS.
ah, right you are.. I guess you don’t always see these things from the observers chair!
I started using more JS to solve design flaws after watching your little presentation on jquery, but I guess the challenge of being css pure while often daft is still fun to try hehe :)
You’d think we were trying to solve the laws of time and space the amount of thought that goes in to these things, but no.. it’s all for the frillies.
love it!
Dude! Best screencast yet. Please continue to include the rambling. That sort of freeform thought process is exactly how I work and it’s very helpful to see how another designer with the same brain patterns does his thing. Thanks so much!
Very cool screencast.
But I was screaming for you (from my side of the screen) to make the logo image fading at the bottom, position fixed and higher z-index, and then the text will neatly go under it when scrolled.
Very nice though. That negative margin + text-indent trick was new to me. It will solve many of my problems XD. Thanks, awesome screencast.
I do agree with Ben, the rambling is not only really entertaining but also very helpful. I watched this screen cast this moring at almost 2 am (Germany). Although I had to get up early today I watched it the whole way through. Loved it very much.
Keep it up!
something OT:
I don’t know if this was mentioned before somewhre else, but your poll doesn’t seem to work for me that well on FF 3.5 Win. When I vote, the vote gets counted and all but I instantly get to a white unstyled site with only the results. I guess that’s not supposed to be that way, is it? JS is enabled of course.
That poll thing has been like that forever. Never been able to fix it. Only happens to about 1% of visitors. My thinking is it’s some kind of plugin conflict.
As always really great stuff!
But I would I love if you would please elaborate a bit more on Positioning, I am pretty new in the game and your website is of great help to me, So if you don’t mind maybe do a short post explaning basic Positioning.
Thanks again for your great work
Really cool to see someone else doing a HTML/CSS conversion. Although the markup and styling isn’t that difficult I picked up a few things that I’m going to use in my own markup. Thanks for sharing!
I now you were a little annoyed that it cut off on you, but you didn’t say your usual “See you later , bye!” line. Another good screencast! Thanks Chris!
Hehe, true. It’s a subtle, but very recognizing ending..
I kinda unconsiously missed it aswell, :D
Anyone have trouble with the direct download? The video stops playing right when Chris is talking about the current navigation background.
Hey Chris,
Great Job, I would like to know if this is your normal work flow. Meaning if you code a psd->html or do you do psd -> wordpress? Just curious of the benefits or waste of time of either work flow.
It depends…. going from PSD to HTML is ALWAYS going to be useful no matter what CMS you choose, so that it what I recommend. If you have already settled on a CMS and you are good at themeing already and know that you can keep everything in your head markup-wise as you build the different parts, then I don’t see any problem with going straight to themeing.
Awesome Chris! I can’t wait to dive into this :)
Chris,
I noticed while watching that around 47:30 that you manually turn off layers in psd.
An easier way to turn off all layers other than the current layer (also known as Soloing a layer in After Effects) is to Option-Click the eyeball on the layer you would like to solo. This is a toggle so Option-Clicking the eyeball again on the currently solo’d layer will bring your document back to its original state. The nicest part is that it honors the visibility state of all layers in the document thru both toggles.
Love the site, hope this will save you some time in future photoshop sessions! :)
thanks!
-tonyp
Great Chris, thanks so much!!
Your the Best!!!
Chris,
That was a great screen cast. The rambling made things entertaining and made me feel better about the way I do things too. This was definitely a learning experience. Keep up the great work and I’m looking forward to the WordPress tutorial. Thanks
I know it’s difficult to break a habit, but an easier way to measure the pixel difference in Photoshop is to use the marque tool and under the information tab it will show you the width and height of your selection.
I wonder if Snow Leopard is causing iShowU to stop recording suddenly. Perhaps you should report the problem to Shiny White Box.
Great screencast, very useful tip for the all-caps styling.
Great Screencast. I saw you do something I’ve been going nuts trying to figure out. How do you copy to clipboard a specific text via button/script? like the way you did the Lorem Ipsum thing. Thanks again, and keep up the awsome work!!!
Excellent screen cast Chris, full of wonderful tips. I have been waiting for this 2nd part all week, now cant wait for the 3rd.
The rambling is brilliant, please keep that up. It is wonderful to hear what you are actually thinking, and the processes you go through before finally arriving at the end result.
I would love to see this cast series extended to show how you manage a project from start to finish. So concept, sketches, how you manage artwork and files, versioning and maintining/supporting a finished site.
Great site, excellent tips. Thanks
Thank you so much for your hard work on this site. It is an excellent source of new inspiration – in both design ideas and css styles.
The web is a better place because of you!
Thanks again!
I was just wondering what video player you use on the final site. I have seen it before but have been unsuccessful at finding it.
Excellent screen cast. I too enjoy the rambling. It is nice to know what you are thinking while you are working. It would be boring if everything went perfectly.
Hi Chris,
thank you for the insight into your work.
The layout is simple but yet efficient (but still took approx. 2 hours to work out so far). — I’m glad to see that even with lots of practice, good things need their time.
What I was wondering about: You mentioned, that you target this website to a younger audience that uses modern euipment (especially browsers). So … forget about all the workarounds and conditionnal tags we use for Internet Explorer??? (Kailin Yong’s site looks awful in IE6.) Is that a common approach by now?
Best regards,
Bego
Hello Chris
I like your Screencast videos and watched all and work on it. Normally your solutions work very nice.
Unfortually the Internetexplorer is not well supported by this website… And the other question is, why you change the screenresolution to somthing higher than 1024? Have all people a higher resolution?
Hi Chris,
Love the screencast.
FYI – you were turning layers on and off to trim them down. An easier way is just to duplicate the layer that you want into a new file and then trim is down. Works for me.
Hey Chris,
You mentioned in your video that you like the shortcuts in textmate to wrap text with html as you said using CMD+L wraps it in an list element.
There is also a shortcut to wrap multiple lines in tags.
The shortcut for it is CMD+CTRL+SHIFT+W
This will wrap every line in your selection with a list element, once its wrapped you can also change it to any tag just by changing the “li” to something else like a div or p tag, it will change all of them, beginning and end tags.
Hope this is helpful.
Great webcast – thanks much.
Adrian beat me to part of my feedback regarding Textmate tricks. The other part is using the OPTION key while dragging – this selects text BY COLUMN and then anything typed will go into every line in the selection.
My question — I am a coder, not a graphics guy – but I can see the need for psd slicing/manipulation/info. Are there any economical alternatives to photoshop?
By economical alternatives, I assume you don’t want to spend large amounts of money on Adobes Products.
There are a few cheaper solutions for the mac.. the first being:
GIMP (Free) – http://www.gimp.org/macintosh/
Pixelmater ($59) – http://www.pixelmator.com/
Acorn ($49) – http://flyingmeat.com/acorn/
My favourite alternative is Pixelmator, it has a very slick interface and is very similar to Photoshop
If you need to find alternatives to other software check out this site
http://alternativeto.net/
you can find alternatives to almost any application, its very helpful.
Great screen cast! Like Brian said, I enjoy the rambling and like hearing the decision making that takes place.
Great job again…
Chris, you are in a class of your own! I find your screencasts the most useful on the web! As others have said, hearing your decision making and your train of thought along the way is extremely valuable. I love your honest and down-to-earth approach. Thanks so much! I look forward to part 3.
Chris,
I don’t say thank you enough for you sharing so freely your knowledge with so many. You don’t know how much of a blessing you’ve been to me!
Your work is so inspiring and you are so gifted!
Thanks again for giving so freely!
Tim
Hey Chris,
You can option click on the “eyeball” hide/show button for Photoshop layers to hide every other layer except that layer. This can shed precious seconds, and mouse clicks, when trying to get elements by themselves so you can “trim” and export them. Keep up the AMAZING work!!!
Hi Chris,
great 2nd part of this tutorial series. You’re doing once again a great job! Those little tips and tricks here and there are what make this screen cast invaluable to any website developer.
Looking forward to part 3.
Great tutorial Chris, many thanks. Looking forward to the final instalment! Thanks be to the gods of Stumbleupon I found your site.
Hey Chris,
Awesome work. I see you disabling layers one by one. If you want, only one layer to be active, you can alt-click on the eye icon of the respective layer, to see just that layer, and again alt-click on the eye icon to restore back to the layer states before alt-clicking first time. (Alt-clicking on the layer won’t work, Alt-click on the eye icon in the layer palatte)
Hope that saves u some time :)
Its option-click on Mac I guess
Yup. Option click. I was going to say something but you beat me to it : )
An awesome screencast, once again.
Thank you for sharing!!!
Lovely screencast, sorry about the cut off bro. =P
Always enjoy seeing you work within different text editors and how you’re going about the implementation from photoshop to html/css.
I have E text editor, supposedly a windows version of textmate or something close and I like it.
I went and checked out E Text Editor – I think I’m in love. Really, thanks for the reference. I’ve never heard of it before but it’s got everything I’ve been looking for!
Chris,
Although his website visitors may have more recent computers, I still do not think that designing a website for a resolution greater than 1024 wide is a good idea. Even on a 1680×1050 screen, I only have my browser about 1024 wide anyways.
Just sharing my thoughts,
John
LOL – it just dawned on me watching your screencast to keep .js code in separate files rather than dump it into the header… *slaps face*
Hi
Thanks for everything.
Hey dude, this was one of the best screencasts on webdesign I EVER watched (…and I watch a lot, currently). It was terrific to actually follow your thinking (the rambling, as you called it), and to understand how you approached this task.
Very, very useful – keep up the good work, man!
Chris Coyier, Screencast #72:
LOL Comforting, pixel-centric, and extremely helpful. Chicken soup for the web designer. Thanks!
Thanks for the great series, love seeing your process
Chris,
Your stuff is totally awesome! I love the informal way you integrate your thinking methodology into each video tutorial. I am learning an incredible amount of practical workflow from you that I have never picked up in college classes. Thank you so very much for offering not only fabulous development/design insights but also your particular style of implementing them. Huge!
I REALLY like the way you do things…. Just wanted to tell you that. And if it is working for you GO WITH IT…. IS IT? JUST CHECKING…? BTW… these tuts you have been posting have been a HUMUNGOUS HELP! PLEASE keep it up cause it is what makes me go back to your site/blog! Keep up the amazing work!
Chris,
You might want to thing about changing the favicon on the current site from ‘KY’ to something else. A certain brand association comes to mind. If one person thought about it, you know others will.
; )
Hey Chris, if you want to add some of textmate functionality into coda maybe you can try this
http://code.google.com/p/zen-coding/
awesome screencast as usual.
Hello. I have learned CSS from this site not my school. This is the best tutorial!! ;-) Thank Cris!
Chris another great screencast. I don’t see you working through issues as rambling at all. I find myself learning MORE by watching your approach to trouble shooting your own ideas. Thanks for another great tutorial!
“Did I say h2 and then make a big deal about it and then type h1? Jeeesh…”
I love it. I didn’t notice it in this one, but I love how you type ‘wrap’ – it’s always warp (factor 7), backspace wrap. ;)
Excellent Videos Chris!, This has helped me understand and extend my knowledge of CSS. Keep up the great work.
I thank you so much for this screen cast. I have been trying to learn how to build websites by book and I understand everything. But sometimes there are the smallest things i need help with. Like positioning, and etc. Watching you figure things out and go along is very helpful.
Great stuff, Chris. I really appreciate the work you’ve done with this so far. The best part for me is seeing what other people do with their CSS/Markup.
One thing I tend to struggle with is something you mentioned – which H-tag to use where. I realize H1 is typically reserved for the header/logo.
Thanks again!
Can’t wait for part 3
Hello Chris,
I realy do enjoy the screencast, in particular the jquerry frills :).
But I tend to use “em’s” for all the font and margins – but this is just of state Oktober 2009
greetings from hamburg/germany
Chris, thank you for the time you invest in these screencasts. I was clueless until I watched your first PSD to HTML series, at which point I had my AHA! moment.
Your work is greatly appreciated! Keep up the great work.
hi chris
nice screencast and thank for this. it’s always seems easy when i see your work hehehe. always looking for psd to xhtml conversion becuase it helps me a lot. thanks again.
Thanks for the entertaining lesson. Now I now my CSS.
Dying for the next one! I love your screenies so much! You give me the confidence to go out and do it!Learned a lot!!! Can’t waite for the next one. I’m really new to word press, and web development in general. I’ve been trying to create themes for drupal. It would be awesome if you did a video on drupal theming.
Thanks for the lessons!
Chris you ROCK… Thanks soo much for the screencaste, I love the ramblings .. please don’t change your organic style.. thanks again!
I love learning the little things by watching these screencast, like PSD trim option…WOW. How did I not know about that…
I want to know name of the tool you use under firefox… with cockroach that you edit html code and then you fixed on textmate… it’s awesome
Hi Chris, I have a question, how do you bring up the meassure tool like you do in the screencast? Im a PC guy, this is perhaps a Mac feature? can you tell me the shortchut keyboard to use it?
Thank you
Command Shift 4 on a Mac (screenshot tool). Not going to help you on a PC.
“turning on stuff, turning off stuff, this is the life we have chosen to lead…” hahaha awesome!!!
Chris another video of dope shizzle! i like the way you went back and forth with your idea of the scrolling logo and the decision to stuck with was sweet.
if there is one thing i can give back right now, it’s that i have noticed when you use photoshop and you want to go back, you use the history (and history is all good) although as a lover of short-keys you can do ctrl+alt+z to undo the steps you have done, which saves you finding the history pallette and then clicking around.
(i noticed that you do this for example when you crop a pic and then save for web, and then use history to go back to where you were before. obviously ctrl+z on it’s own just toggles between what you last did and what you currently have, but if you add alt in to the mix, it works like most other programs would)
ok cool. i hope this helps, it’s a nice trick, and if you already knew it, i hope someone else reading this benefits from it.
p.s i think you’re rambling is amusing so feel free to do it whenever you feel like it.
silvers
oh and another great photoshop technique when you want to turn off the view of everything but one layer (like you were doing in the tutorial)… instead of clicking on each one to turn it off, you just alt-click the layer you want to see, and it turns off all other except for that one. alt-clicking it again turns them all on again.
again, hope i am not preaching to the choir here!
Thanks for the heads-up about those PS keyboard shortcuts. ;) It’s those kinds of things I forget about when I develop bad habits and routines.
Hey Chris,
thanks for sharing this tutorial.
Just a quick tip:
If you want to set a padding or margin for top or bottom only, you don’t need to set the 4th value.
Instead of:
#sidebar { margin: 0 0 20px 0; }you can do
#sidebar { margin: 0 0 20px; }keep up the good work!
Wow great screencast! I learned a ton, thank you.
Hi Chris,
Great screencast!! I have a question about embedding videos. What options do I have that will allow me to embed my personal vids, youtube, metacafe…etc (all video site videos). Also, sites like natgeo (http://channel.nationalgeographic.com/channel/videos/).
I find one and then find there are too many steps involved. I am looking for the easy way to include these in my post (we have users who need to post both a mp3 Podcast and/or video – uploaded or shared from youtube..etc.).
Also, how do I embed code in the post and page text editors? I have a mix of HTML and PHP and I tried both the Visual and HTML editors. Any ideas?
mz
That’s a lot of comments!
I just wanted to say that this is a great series of screencasts! Really nice stuff that you make look super simple and easy to follow.
Thanks for posting this
Haha!… “Let’s try it out this way… then you can all laugh at me and then we’ll come up with a better way.” If only all lessons were taught with such confidence. :)
As someone who self-taught herself coding and how to butcher/workaround to make it work, I’m learning so much from these screencasts. Your narrative is really fun to listen to, like the voice we all hear in our heads when working through a project and trying things out.
Thanks for posting this and keep up the great work! :)
Hi Chris,
Super great tutorial. Pleas don´t leave out the “rambling” in future tutorials. That´s what makes it real and that´s how you let us inside your head a bit. I hope that didn´t sound too spooky. :-)
Great job, looking forward to future screencasts.
thanks a lot, it’s very helpful
I really love these screencasts!
Being totally self taught by online forums and tutorials, this is just wonderful to ‘see’ the coding in action and here your thought process.
I have learned so much from watching you work.
Please keep doing these!
Actually I think I am just ditto-ing what Alexia said..but it really is true.
Thank you so much!
This is the best tutorial-series of designing and building website I have ever seen on internet.
It’s very educational, and I like how you show this step by step, without going too fast forward. And you do not skip over details that so many others do. This is very impressive and inspiring. I have added your site to my favorites.
Awesome tutorial! I learned a lot and you kept my attention… you got a new fan!
I am loving this series! Web design work is so solitary, it is great to see another person’s process. As a self-taught person, I have so many holes in what I know and it’s just great to have your narration as you go along. I’m learning all kinds of little tips and tricks.
For me the video is disappearing at around the 36 or 37 minute mark. At that point all I can see is the initial graphic for your video series. I would LOVE to see the rest of the video.
Thanks so much for sharing your knowledge!
Scratch that….I reloaded the page and started the video over, and it’s working now. Phew! It had stopped at such a cliff-hanger! Glad I get to see how you solved the issue of what to do with the logo.
Thanks again!
hi. nice site and nice videos. i’ve been following chris from a long time from all his video serious… however i have a question here the download file is actually in a text document format. i downloaded the videos from here which says it has an .mp4 format but when i try to open the videos a text file opens up and then hangs up the whole thing. i’ve media players such as vlc and km player which supports mp4 format but they too aren’t being able to open this video. if chris u can help me out on this it would be great help sir. thanks a lot. keep it up with the good work. looking forward to hear soon from u . u rock !!!
I love this tutorial! It is SO HELPFUL to see the work done from scratch and to hear you think out loud. Not only have I learned a ton of new stuff, but by thinking out loud, you have also confirmed things I have been doing that I thought were unacceptable. Now I know they’re not. :)
Love, love, love this!
Thank you!
Robin
Amazing Tut it help me a lot in improving my Html/CSS skills after watching your tutorial now i feel i have enough knowledge about Html/CSS
Thanks very much
Great screencast. It’s too bad that I’ve only recently discovered your site, I could have used this look into a real web guy’s brain several times over the last year.
That noise you made right when you realized the recording was going to cut off was priceless. I’d bet we all make similar noises when a program crashes and we realize we haven’t saved for the last half hour…(not that any of us would ever forget to save early and often. I’m just sayin’).
wounderfull sharing of CSS i have never seen this…
Very nice guide helped me alot.
Chris, first and foremost let me just say the way you go about doing the layout from scratch and showing us exactly how you would do it if it was an actual project is perfect. We need to see the thought process of how and why and what people normally go through to achieve what they want. I really enjoyed watching this series even though it’s from 2009. I was wondering, do you think there is anyway you could do another screen cast like this one from the PSD to the HTML(5)/CSS(3) to WordPress? I would love to watch it and see how you use the new HTML5 and CSS3 features and how we could implement them into our own projects. Thanks again for the great tutorial Chris!
Awesome Chris! Wish I would have found your website a long time ago!
Very nice, thanks a lot!
This is really interesting walkthrough, with some great tips along the way. Thanks. BTW your comment form is awkward to use. It took me a while to find the fields. I’m in IE8 for my sins.
What’s happend to Kailin’s site? It’s a far cry for the nice design you’ve got in your vid. Ref the link under the vid.
Anyway, great tut.
Thanks for an another awesome video (as always when it comes to your screen casts)!
However, I want to mention one thing that I would do differently.
You don’t have to use JS to make those frills around the h2 tags in the main-content area. I’m always hesitant to use JS when I can use CSS and achieve the same thing. Obviously, I come here eight years after the fact, but since the CSS I’m going to show here below is CSS2, it should have been available even back in 2009. This is how you could achieve the same thing as your JS.