There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself! (note: Not anymore… but this is sorta how CSS-Tricks used to look :) )
Links from Video:
Just wanted to say your vids are really helpful for those of us learning CSS (and other stuff for web development too) and that this series of vids espescially is a huge benefit for my assignment work, so thank you.
please never take these vids down. possible one of the most valuable resources on the internet for up-and-coming developers. thank you for ur time.
This tutorial is great, but I do have a question: On about 14:41, you come in with your own stylesheet to start with, but when I start a new CSS File in Dreamweaver, it’s just empty. What do I do now?
you are awesome. do you every get to rest. big fan for awhile just thought i would post it so you know. keep it up!
Thanks for the videos Chris, though try CTRL+SHIFT+D in textmate for duplicate line.. easier than copy pasta!
just out of curiosity where the PSD file please?
Hi Chris
Great vidoe tutes. I like the idea of placing the header div outside the page-wrap.
This allows for more hooks for css backgrounds.
I also like the new trend of having deep footers with links, extra info etc. It frees up space for main content, and again, you’re placing the div outside the page-wrap!
Many books press home the wrapper-takes-all approach – boring designs ensue.
I will be a regular visitor. Keep the videos coming thanks
Kieran
I’m a newcomer to all of this CSS/HTML/Photoshop business, and your tutorials are REALLY helping me progress. Thanks a lot for all the time you’ve put in to help others like myself.
Thank! Enjoy it.
Thank you for your tutorials!
Absolutely awesome! Your help is so much appreciated!
I love the training and you have been the “Go To Site” for information but it seems that things are not working right for me on this training. I think because of the type of html format that this trianing is out dated and does not work with HTML5.
I can’t seem to get my navigation to visually show so what do you have for HTML5?