looks good will view this when i get home..

Thanks Jeffrey

Looks Great! Will watch ASAP. Thanks

Thanks Jeffrey, these tutorials are great.

this is funnnnnnn……….

More CSS/XHTML tuts please. This is getting great!

There are always my favorite tutorials. Always can learn something new about PSD to CSS conversion.

Thanks Jeffery!

nice!

Thanks everyone. These types of tutorials take a really long time to make. I have to convert the psd (to have something to work off), then record the hour long screencast, then edit the thing, and finally upload and post.

So if it helped you, please, please subscribe to the RSS feed and/or Digg/Stumbleupon it.

Thanks!

Yes, but what does insicdesigns think of this post?

@Dizzle – That’s just hilarious.

A Gem…

Hey everyone. @lachygroom just reminded me of something that I forgot to add. Rather than simply using an image for the logo, we should probably use the image replacement technique (within an h1 tag) instead. That’s what I typically use in these screencasts. It just slipped my mind while recording.

<h1> My Site </h1>

h1 {
background: url(images/myLogo.png) no-repeat;
text-indent: -9999px;
}

Thanks Jeffrey,

It is a great tutorial.

I like it soooo much.

Fantastic Jeff, I really appreciate the hard work that you put into your screen casts, all of them are extremely helpful, informative, and well done.

Bravo.

Great Tut Thanks

The final HTML is missing an anchor tag on the second button, and the final CSS has an double baseline (baselinebaseline) in the Reset section.

I disagree with some of the choices for this HTML and CSS, but the work put in to all of NETTUTS is great. Keep up the good work!

The double baseline is a weird quirk with the plugin. I’ll fix the anchor tag error right now.

Looks like you spent a lot of time getting everything right for this tutorial.

Although, I think it might be useful to include the psd, so people can attempt it on their own. What good is all the code and documentation without the ability to try it on their own and make mistakes.

It think thats the best way to learn something new.

Great tut! Thanks.

These are always great to watch! Thank You

I did here you say the document passed as HTML STRICT as it actually passed as HTML TRANSITIONAL..

Just a funny note

No problems of course:)

Thanks Again

@Brian – For some reason, during screencasts, I say weird stuff all the time. Sorry.

@Bryan – Normally, I would. But then, Joefrey wouldn’t make any money off his hard work! If you’d like to work with this particular theme, you’re welcome to purchase it cheap via his theme page. (Just scroll to the intro paragraph for a link.)

I think that technique with image replacement (negative text-indent) which Jeffrey added in comment is wrong. Because if you turn off images, you will not see a text.

I recomend to use this technique
http://wellstyled.com/css-replace-text-by-image.html

@Cifro – I wouldn’t use the word “wrong” by any means. It’s obviously not ideal, due to the reasons you mentioned – but what is?

I’ll take a look at the article you referenced. Thanks!

I’m glad you picked my recommendation to choose this file in the TF forums

@tonyc – Me too. I would have liked to use most of the recommendations. But, this one had the right look and didn’t require TOO much effort.

despite some mistakes here and there (cmon… we´re human beans, heheh) these tutorials are great! you guys have no idea (or do) of how much information you can learn just by watching these videos or reading texts

it´s hard to find so much free html, css, psd, ajax, web 2.0 around the internet

you gathered ‘em all togheter in one place and made it desirable!

man, thanks for the iniciative

nice and brilliant tutorial thank you for sharing.

Hi Jeff..

Nice tutorial

See that you switched to Vista! I miss your shiny XP

You have no idea how much I value these types of tutorials. I’m a new web designer and I’ve spent the last year learning as much as I can about HTML + CSS. Second only to lynda.com, this site is seriously one of the best resources. The addition of video tutorials is a generous addition.

Cheers to Jeff and everybody on NetTuts team!

@Wassim – I use both. I have three computers that I switch between for these screencasts.

great tutorial, extend this tutorial with jquery!! please!

https://addons.mozilla.org/en-US/firefox/search?q=measureit&cat=all

this is a measurement tool for firefox. but will work as a ruler

thx a lot Jeffrey

great tutorial jeffrey thanks, only thing I can critise from a design translation point of view, is that by using repeat background you’ve lost the nice subtle gradient in the middle of the background that was on the .psd, I guess the only way to retain this would be to have large image in the background of the container div. keep up the good work

@Robbo – Hmm.. I guess I missed that. I’ve been on my laptop these last few days (lower-res). I’ll go back and check it.

@Ronald – Thanks! I’m downloading it right now.

Many thanks for that one – I got a lot out of it, especially when it comes to handling browser-bugs and fixing them! Very appreciated!

Great Tutorial!

If you’re still looking for a Firefox ruler plugin, you’ll find it with the Web Developer Toolbar. Under ‘Miscellaneous’, you can select ‘Display Line Guides’ or ‘Display Ruler’. Hope that helps.

Oh gee – How have I gone so long without realizing that the WDT had a ruler – which rocks!

It’s like those businesses that you pass every day and never notice. Then one day, you say “Hey – when did that open?”.

@Nathan – Thanks so much. It’ll get a lot of use.

It wouldn’t be hard to add that subtle gradient. Simply grab it from Photoshop and set it as a background image for the container div.

#container {
background: url(images/gradient.png) no-repeat center;
}

For the IE6 Double Margin bug… would not a simpler fix be to use:

display: inline;

And I was going to mention the WDT line guides, but looks like someone beat me to it. It is a handy tool I use all the time as well. Things lining up are very important!

@Brenelz – Absolutely, you can. However, sometimes it’s not possible to change the display property. But sure – you’re right.Both methods will work.

Jeffrey, you’re a riot, your quick “ok”, “ok”, “ok” sounds exactly like the Joe Pesci character’s in the Lethal Weapon films.

Awesome tutorials. You can never learn too much when it comes to slicing and coding a design, especially for “design illiterate” coders like me

great tutorial Jeffrey, thanks for putting the hard work into making it

I’m upset that I didn’t catch that subtle gradient. I would have liked to cover that.

This is a pretty helpful tut. I’ll try this now.

awesome tutorial. to the point and amazing. thanks for this.

Nice tutorial! And it seems as if I recognize those arrows from somewhere

Keep up the great work!

LOL@Dizzle. Really. I needed a laugh, and you provided it, and from a comment about slicing a PSD. Who’d've thought?

Jeffrey – I’m being an arse here, but one could argue that your “col1″, “col2″ and “col3″ IDs aren’t semantic enough. What if you wanted to redesign and lay them out differently – say, in rows? I now prefer to use ’subcontent’ classes for that reason.

In general, I’d like to sum up with ‘nice and brilliant tutorial thank you for sharing.’ Pretty though.

@Shane – Good point about the columns.

Jeffrey: I love this type of video-tutorials of coding. I dont like very much streamly pure videos without errors, I like to see a natural coding process and how you deal with the common errors we could tackle with.

It also make me to be alert with some parts, I think its a good brain training to found errors and think how to solve them.

Thanks!

Just finished watching the html vid and noticed that you are manually setting word wrap with the lorem ipsum text. Notepad++ has a wordwrap option that you should turn on. (click the icon under the menu bar)

Basic stuff, but interesting to watch other people’s methods nevertheless

Nice,

Web Developer Toolbar has a ruler built in.

Misc > Line Guides

Or you could use the actual ruler (i think that only does horizontal and vertical as well though).

Good tutorial overall, definatly worth the watch, picked up a few good ideas however a complex intricate layout would be nice to see, however the screencast time would probably be immense.

There is a Ruler in The Web Dev Tools you already have. It’s in Miscellaneous -> Display Ruler. Although, it might not be exactly what you are after.

Thanks a million for this tutorial. They are really detailed and it’s nice and easy to watch and do along with. Thanks again and I can’t wait for another one

@Jake – I agree. The problem is time. It would simply take too long.

@Sean – I know. But when recording at a low resolution, too much text is wrapped; so it makes all of the code look out of place.

very informative, thanks.

as a side note, it’s good to see more people using Notepad++

Great tutorial Jeff, and thanks a lot!

I near woke my parents dude. The part on the CSS video (ive paused to leave this comment).

The part where your working on the buttons and “view portfolio” part, you say

“Sooo, the way we can fix this is……. breathe…. i dunnnooo” lol man, priceless!

YES YES YES
I LOVE THESE!!!

This is absolutely the best place for us n00bs to get started.
Can’t wait to get home and start practicing!

Brilliant as usuall Jeffrey – your video tuts have taught me so much in a short space of time.

Is there any chance of a similar slice ‘n’ dice tutorial using the blueprint css framework in the future. I am just getting into using the BP CSS and it seems good, but it would be amazing to see it as a screencast.

Cheers – keep up the great work

Thanks Jeffrey. you are fantastic

When I check the actual screenshots of the theme in themeforest, I noticed the backround isn’t solid blue, it had a subtle noise.

Well as a designer, those little details just polish the design more

Nonetheless, great screencast Jeffrey

Jeffrey,

Could you talk about why you choose to use ems instead of pixels?

Great Tut. Really enjoyed it and learned some stuff along the way.

Thanks for taking the time to put this all together.

Cheers, TJ

Question…and…Concern
I just checked out Themeforest and the HTML themes. Am I wrong or in the HTML themes we can just go to the live views and take the HTML code out of there with out even paying for it. Is there a way for you all to “hide” the HTML when people upload them? I want to make some HTML templates but if people can “Live Preview” them from Themeforest and then view the source, what is the point of creating them if people can just take the CSS and HTML code.

You guys should check on this. Just something to safeguard your sellers and buyers. Make it so in the live preview it hides or blocks the HTML and CSS and then when a purchaser buys the template they get all the Mark up. Especially with all of the built in developer tools coming standard on browsers you can literally take a site piece by piece, images and all code and just make your own site without having to purchase this stuff.

Thanks guys, Great tutorial as always. Check on the things I mentioned above.

Yeah yeah, cool man

This was the most fascinating CSS tutorial I have ever seen! I’m not exactly proficient in CSS but I’m always looking for ways to further develop myself. I did not know about some of these hacks and I always, ALWAYS, have problems with IE that are just downright discouraging. Now that I know that there are some quick fixes to many of my common problems, I am eager to jump back into coding my website layout! Thanks so much for this tutorial!

Thank you so much for this great tutorial and especially for your in-depth explanation why to use certain lines of code and not others (e.g. not using ID’s for some styling because of possible javascript issues later).

I learned a lot and the fact that you correct your mistakes “live” is absolutely priceless – it helps to better understand the whole thing and it makes one feel so much better about one’s own mistakes.

Great job, thanks again and I am looking forward to see more of you.

havent read the comments but Web Developer has a ruler

to use the ruler (its in miscellaneous) you can click and drag to form a box whose properties are shown above

just 2 simples things:
1. the body background gradient is missing(that’s not important in the tutorial i think)
2. I think the ‘read more’ could be at its own line.

Great tutorial Jeff! you’re the man! =)

My first comments….

This is the best tutorial of nettuts… thanks!

I ♡ Nettuts

Great tutorial, I really love it Jeff!

But..what if we are out of time or not have so good coding capabilities as Jeff? Then we maybe should go with some PSD to HTML service like http://www.youweyoucoding.com or any other like that.

Just my 2 cents

I am pretty sure I have messed this up a bit, but my design will not center, it will only stay left justified. Could someone give me some ideas as to why? I’m hoping it’s a simple issue and I don’t need to upload my css and html files for viewing. Thanks very much in advance!

I almost forgot, Jeffery, this is one of the best tutorials I have had the change of reading in all my years on the web. Thank you for taking the time to do all of this. It is very, VERY much appreciated!

Cheers,

Nevermind! Found it!

It’s amazing what one little “;” instead of a “:” can do.

very well done, thanks for sharing

Thanks everyone for such nice words! I really do appreciate it.

If you’ll subscribe to the RSS feed, I’ll be more than pleased!

Very great tutorial! It helps me a lot.

btw. the psd has some shadows under the “Featured” box, how would you add that in the html/css? Crop it and save it as a png, then position it absolute? Or just include it in the featuredBG.jpg image file?

As ridiculous as this sounds, I like watching other people code (in video format), it really seems to help me more then skimming through books or website tutorials.

Jeffery, one thing to consider that speeds the processes along for me is to start everything with an internal stylesheet so you don’t have to keep alt-tabbing through your documents (it’s not uncommon to have 6+ windows open) then just copy and paste it to an external stylesheet when all is said and done.

I’m certainly not at your level of competency when it comes to coding but it helped me out a little.

Hey Jeffery,

I’m trying to use the DD_BleatedPNG Fix on background images I have set in my CSS (Not from this tutorial/template). Some reason when I target the classes/ids that hold the background images nothing changes in IE6.

Any help is appreciated! Thanks for this tutorial and I appreciate the work done on NetTuts!

Hey, keep up the good work! I know these kind of posts seem really elementary to some people but it really helps me out. Thanks!

This taught me many tricks with css, and provided me with an actual roadmap of how to approach css-ing a psd into existence, along with the most common bugs encountered by designers when dealing with Internet Exploiter 6… WOW!!! Thanks a LOT for this particular tut, it was gr8!

And Jeff you were asking for that link to a plugin for a ruler in firefox? Here it is: https://addons.mozilla.org/en-US/firefox/addon/539

Thanks again and a very happy new year

Thanks for the tutorial, i am also new to the game of slicing and dicing in css, but wanted to see what approach people would have for background gradients. Not the biggest deal, but this was missed from the original psd to html

cheers from Vancouver, Canada

Kenny

This second video is not streaming properly after reaching mid way. Well Still its a great css tutorial and makes my approach very good.

Now I can not a big deal to convert PSD to css with xhtml.

Thanks Jeff

i really love this tutorial, thanks to you now i understand more CSS.

thanks, love u

Thanks for a great Tut. Very easy to follow and great for us up and coming designers/coders.

One thing that I was a little disappointed about (and only really jumped out at me when you were doing the final comparison in PS) was missing out the nice blue radial gradient background starting from the centre of the page and in turn the subtle shadows under the feature section. In my opinion this really finishes off the site and would make all the difference to me if I were looking to purchase it.

Like I said would have been a nice addition but overall, a great TUT.

Great Tutorial Man….

Allowed me to code my new site (just about) in a day. Sweet

great stuff

Thanks man! I’m only dreaming about how to do a design like this and what I have to care, to do it well.

Very well explained, I learned a lot about css / xhtml =)

When you said, that the 3rd column it’s a bit lower.. I see the same on my design, but I looked detailed and it’s like an optical illusion.

What else… oh yeah, your template has a catchy thing and it’s very cool

Thanks again!

Fantastic Tutorial Jeffrey, you explained everything in-depth. It was so easy to follow and you made the whole process seem effortless.

Regards

Thank you for this great tutorial. Really learned a lot from this vid, including the divs, css, a little bit of hack, IE tester, and IE hacks. Thank you very much for this excellent tutorial.

By the way. Is there anyone who knows what are the web browsers that web developers or designers use when they test their newly created sites?

Please share.

Awesome! This is great! Thanks so much! For not exactly being a css newbie, this was still great to see how other people go about coding their sites. I loved the explanation of the why you used div class in part of the featured section.

Great tutorial!
Is there going to be another video to make the rest of the web page or just how to add another page?

jeffrey… THANK YOU!

Im new at html, i did like wat u did but the image wont show when i tested my html. it even says a correct html format from w3. can some1 help me on this?

thanx

hey, JW! i’m ur fan! hehehe

Hi there, are these links broken or is it just me?

Thanks for the tutorials.

Hello! I will let you know that I am from Argentina, I am doing the tutorial I can not run the line:
html (
background: url (images / bg.png) repeat;
)
someone could help me.
Thanks and regards.

Dude, is

html {
/*Your content here*/
}

**Is with brackets instead parenthesis.

thanks for answering
I apologize but I have it this way:

html {
background: url (images / bg.png) repeat;
}

I can not do that take pictures, someone happened the same?
May help, thanks.

Try this out

html {
background: url(../images/bg.png) repeat;
}

Make sure you’re on the correct images directory.

Ivor thanks but no work for me, I said that I have a folder on your desktop that is called within the same model another called images which are the same. I do not understand because I do not take pictures because the first part of the tutorial if I worked.

html {
background: url (model / images / bg.png) repeat;
}

I seems as if you’re more into design than into web accessibility. The result is nice, but not overly semantic. The headings do not follow a clear hierarchy. The “slogan” div shouldn’t even be a div. In my eyes, it is a paragraph. Div is the container element for blocks, just like span is the container element for inlines. While you can use divs to put texts into blocks, it isn’t needed for that. That is exactly what paragraphs are made for. Use divs for grouping existing blocks instead of creating blocks. Oh and the spans in that container should clearly be em or strong instead. These words are like the best examples for empathized text. Just use existing elements for what they are made for. Don’t rebuild them using unsemantic containers.

Anyways, nice insight and great tutorial, just with a few mistakes.

Great Tutorial! I have came back time after time and loaded up the videos.
Thanks for all the work you guys put into this wonderful site!

Wow Very nice tutorial set.

i also will submit to NetTuts.

I think more detailed XML / XHTML and updated skill sets should be added.

I really did love your tutorial. I never knew it could be this simple. Thank allot!

how can i download this tutorial, really great stuff

I think it would be icing on the cake if you were so kind to provide viewers the option of downloading the xhtml & css source files of the completed project.

I can’t keep up with you to work a long with you

Thanks

Hey Jeffrey. Superb – thanks. It would be really handy to have the source code for reference, rather than having to search out particular bits from the video.

THANKS. you are my hero

MeasureIt 0.3.8
https://addons.mozilla.org/en-US/firefox/addon/539
You have asked for some tool for firefox.
Try that

|Walter|

Hi Jeffery…Our instructor, Carol Ratcliff, here at WITCC, shows us alot of your tutorials… AND they are VERY helpful… at least I think so… keep up the good work!!!

This Tutorial is awesome. Very nice work, well done.
It was very helpfull to create and fix my errors especially IE errors. My mind was going to blow up because of this fu**in browser =) Thanks a lot.

greets

Well, I just watched both videos over two days and created the image files on the fly in photoshop and I have to say that I am really happy with the final outcome.

These screencasts not only show you how to do something step by step but also give an insight into how a coder thinks about a page and the problems a design throws at them.

Thank you so much Jeffrey! I am looking forward to the PSD to Wordpress over on in the woods

Thank you for this tutorial! Great work. Learned lots.

I am a newbie in css/xhtml and your tutorial shows me the way and saves time. Keep going….Thanks.

I think the one thing that was missed was the a:hover effect that you’d apply to your nav. I’m not sure what the designer had in mind; probably just an underline but that’s all I saw. Otherwise great tut!

#10 – don’t forget === particular with functions like strpos()
i remember seeing a login script that allowed users to login by not specifying a password. this was easily fixed by changing the == operator to ===

errrr wrong blog post

Very good tutorial, but please anyone can tell me how he split firefox in 2 windows side by side: in left the notepad++ and in right the firefox?
Thank you.

The css tut is a great reference, its nice to see someone else work, I’ve not used Web Developer much in the past but seeing the way the css was built I can see it’s purpose much clearly now, thanks for yet another great tut

this tutorial is waesome
i had some troubles in understanding how things work, but you explained it really well, i think i’ve watched the whole tutorial three times and learned a lot from it.
thanks for your work.

Thank you Jeffrey.
I enjoy your tuts. Cant’t wait to see more!
I recently made my website from PSD to HTML + CSS as well.

When you’re coding the CSS to the page, you have a split view on the screen, where your coding is on the left, and the internet page on the right. What do you use (how), because whenever you write the code to the left, the internet page automaticly updates to the right.

I love how detailed you go through this tutorial. Thanks for your help!

But you didnt keep the gradient in the background :’(

thanks

HEy there I was wondering if on the inside of your site there are tutorials on slicing and dicing more funky templates.

One like this

http://hv-designs.co.uk/2007/10/10/web-design-layout-2-tutorial/

I would love to see one like that being done, as it’s my downfall right now.

Could you email me and let me know.

Thanks.

hey nice tutorial there.
thx for sharing.

omg a source code available to download would help so much.

this is exactly what i want so bad~
so helpful
thank you

Thank you so much. This tutorial is very helpful to me =)

great!! tutorial but m not able to view d whole video.. can i get psd format?

You don’t have the source and demo for this project? Could you share them? Thanks. Or you can email me!

The css part made me laugh once again.

When your fixing the “View Portfolio” button, with the image.

“Soo, the way we fix this is…… I dunno”

A few months later and it still made me laugh. =P

Hey Jeff, what is the font in your avatar?

This is the best tutorial I’ve seen for CSS. It really helped me wrap my head around the concepts in a way that other tutorials haven’t. Thanks Jeffrey!

I duplicated the exercise and got everything to work with the exception of the ie.css. For some reason I couldn’t get the index.html to find it. The file is even in the same directory, and the path is right. No luck. Finally I got it working by including this in the default.css file:

#featured {
_position: relative;
_height: 100%;
}

I think you may have missed some letter-spacing during the tutorial. I’m thinking the original designer may have included some tracking and that’s why you had problems sizing the columns.

Great tutorial…. Can you give us a screencast of photoshop design??..

Hi, awesome tutorial… i was just wondering if its possible to download the html and css files that you used in this tutorial? I’d really like to be able to print it out just to have at hand while messing around with my own stuff as i’ve just started learning bout css and html and know none of the commands! Thanks!

Great tut, thanks!

that’s great! thanks alot!

Great Tutorial – i’m just getting my feet wet with css and this really helped me get my head around the process!

Quick question – when spacing out elements sometimes you use “em” and other times “px” yet in both cases you got the spacing by using the ruler tool in photoshop….

Is there a reason to use one over the other?

Great Indepth tutorial on the whole web building process.

I always experienced the double margin problem with IE and I never knew about the IE hack to sort this out, thank you very much.

Thanks for this tutorial, I’m just starting to learn HTML+CSS at College and this really helps!

Gee I hate IE6 though, it should be forbidden on the internet.

Wow, great tutorial! I consider myself more of a designer than a coder. I’ve always known how to use CSS and it’s the primary code I use for my client’s websites. I’ve only viewed half of this tutorial so far, and I’ve realized I have tried every entry but the front door! Using Photoshop as a springboard for web design is such a great thing! Thank you, thank you, thank you!

Sorry but I thing that is bad. You used sometime id sometime class, you dont know a standart. Collums. Why you didnt it by table? Do a 3 div like collums … grr.

Thanks for a great tutorial. I’m sure to more seasoned web vets the answer to this question is obvious, but could you explain why you set the container in pixels but then your padding in ems? Thanks!

Hey, just a little tip (something I use when going from PSD to HTML/CSS).

- print screen the website in your browser (or use the screen grab plugin seen in the tutorial).

- paste this as a new layer on the psd (must be the top layer).

- set the opacity of the new layer to 50%.

Now you can line up the HTML/CSS version on top of the PSD. This is really useful for getting paragraph line heights, fiddling with letter spacing and just making yourself feel good when you see it line up so damn good!!

Thanks. It was great.

May I have the PSD and css files just for learning.

Fantastic tutorial – it couldnt have been easier to follow.
Thanks.

Excellent! Very useful to watch someone else going through the process. Definitely going to subscribe here — thanks very much!

Wonderfull Videos!
Thanks a lot! Makes fun to learn that way!

Hi,
thank you for the great video tutorial!

About your question for an plugin for the grids…

I sometimes use this one:
http://gridder.andreehansson.se/

Just a JS-call to show some grid lines (vertically + horizontally) and to check if some fonts are on the same height.

Have fun

Wow, I thought I knew almost everything but I learned a lot! Never knew about that live editing of CSS in FireFox Developer! Thank you!