I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the columns including the “quick links” section. I also talk a little bit about typography.
Links from video:
Hey!!
THANKS!! good set of video tutorials!
but, the navigation never worked for me!! … well.. until i found this piece of code NOT METIONED in the videos, that fixed the bug right away
ul#nav li {
display: inline;
font-size: 1.3em;
}
I'm sending u screen caps to your gmail.
I'll apreciate further information about this, please…
THANX AGAIN, excellent work!!
Hi Chris!
Thanks a ton for making this tutorial. I learned more by watching this than I could by doing anything else. You saved me a lot of time and explained it all in a way that agrees with my thinking (this is not an easy task, mind you). Keep up the awesome work!
I can't tell you enough how helpful this set of tutorials have been!! Keep up the good work and thanks a lot Chris!
Hey Chris! Before I run off to try this out as soon as possible, I just want to take a moment to thank you for this wonderful tutorial. The presentation was superb. The content was to the point. And the explanation of each and every small thing really helped a lot. I’m sure any web design novice looking for some good pointers to start off would find this tutorial immensely helpful!
Thanks again!
Damn. Great tutorial. I agree 1000% with what everyone else has said and I can’t wait to try all of this out for myself. Thanks again. Really, well done.
I learned more from you in an hour than I have in 3 years of trying to figure stuff out myself. Truly excellent work, sir…
Manuel Minino!!!!!!! Thank you so much for your comment woow, i was having such a big problem with internet xploder because the nav kept falling down thank you so much for posting the bug fix..WOOW Appreciate it.
btw thanks for the vid i totally learned alot..appreciate it!
Thanks a lot my friend!!!
Now I’ll start seeing the other videos.
Very nice & detailed Tutorial very helpful for a newbie like me Pls Don’t stop the good work Good WIshes & Happy New Year
Great tutorials, Chris. Very interesting to listen and watch. By the way, I also enjoyed the baloons that kept popping up in the first part, kind of added some humorous squib to it. I really enjoy such stuff (ie the organisation=everything part). Anyways, really good tutorials, great site also.
Thanks!
Awesome tutorials! I’ve learned so much by watching you’re workflow with Textmate.
I also loved this part…at 25:14….”e9bc3d…..uh, ya”
Priceless man, loved it.
Great work, Chris. I’ve been hustling for a while trying to get my confidence going that web design is something worth pursuing in spare time. You did it for me. Keep it going. Thanks.
Thanks a lot for these amazing video’s! I also learned a lot! One question though: what if you would want this footer to always extend all the way to the bottom of the screen? Some people have those 30″ Apple screens and even with a lot of content, the footer would still not be at the bottom of the page. How would you solve that?
Awesome! Thank you very much.
Yup, your website is awesome! I want to become a web designer and am trying to learn on my own. I have been visiting your site on and off for about a month and am going to start a CSS-Tricks marathon! I’m going to watch every video you have and take notes! First series down…woohoo! BTW, my site is crazy right now because I am trying to design my own wordpress theme… disclaimed!
Nice straightforward presentation. Well done.
Thanks so much! so clear and learned enough to go build my own site! best video tutorial ive ever watched
It would be an absolute waste of your webspace with my words in it as no adjectives can possibly describe the gratefulness of web design amateurs like me.
Your videos really help
THANK YOU
Keep up the good work
thanks for your sharing, i allready download the file above.
Muchas gracias, a lot ;)
I’m just about to redesign my website and learn a lot about html and css along the way. Your webcasts are just fab. Thank you for sharing your knowledge. I really appreciate your very straightforward and clear style.
Learned more from your vids then 3 weeks with books. Thanks for being so free with the sharing.
Thx for the vids.
Awesome tutorial.
That was a superb task done. No words. Even a layman can now do his website. Way to go. Once I do my website, you can have a look into it and pass in your comments. Thank You very much Chris.
Great tutorials thanks…!!
I just have a question, is anyone getting the UL li in different lines? how can I solve this?
THANKS AGAIN!
Hi, Cris!
An awesome screencasts, but i’ve got a question: what’s the difference between px and em? I read somewhere that em is typography measure. So why do you use it, why not px?
Best regards, Vit.
Outstanding! People like you who take the time to share your knowledge to those of us in the learning process are very appreciated. It saves us time, money, headache, and is a great motivator. Keep up the great work!
– Patrick
Now I’ve learned a lot and able to create a css file to every design.
Thanks for sharing these videos.
Fantastic Tutorial, I have a Media Arts Minor couple with Business and have just got into designing my own web sites. For knowing hardly anything at all I feel like I can look at code and at least know what is going on now!
Thank ….Chris Coyier
great video! if you test it in chrome, the quick jumps links are underlined.
Nice video….really helpful. Thanks a lot.
Good job, this has to be one of the best tutorials i’ve seen. Keep up the good work and thanks for the help.
Just watched this and wish to repeat most of the previous comments — just learned a ton of tricks from watching! Am lone design/web person at my job — appreciate the outside help very much. Can’t wait to watch them all. Thank you!
Thanks chris for this nice video lesson for css. You are best.
this was fantastic, thanks chris
Thank you sooo much for this, it’s just what I needed for!!!
I’m a beginner and I learn more from your videos than I do with hours and hours of classes!!
Ps: excuse my english I’m French.
Thank you Chris, for your excellent tutorials! Keep up the good work and share!
Thank you so much Chris! I followed this tutorial/screen cast about a year ago and was just so behind on current CSS and HTML. I finally got around to brushing up on my knowledge and was able to follow this all the way through and it came out really. I tried a lot of things on my own before you mentioned what to do so that I could learn on my own and see what works and it was all right on point.
Thank you!
Thank you for an informative, well thought out pad cast. Your tutorial has provided me with a much better understanding of the process needed to convert PSD to HTML.
Awesome… Love your work and the way you teach!
Whoa!! That was awesome. This was just the thing I needed to get my brain working. Looking forward to watching all the episodes.
Thanks a lot Chris.
Awesome, awesome! This has been so helpful. I am just learning this stuff for my job and have been all over the world-wide-web looking for an intuitive, comprehensive tool…this is it. Thank you for sharing!
After all this time, your video is still so useful. I learnt so many practical solutions to basic problems I’ve been having in coding through this last video.
Thanks again!
Amazing! Thank you for the video :)
Hi Chris,
thanks for a great tutorial. I remember this site 5 years ago, but lost interests in CSS. Now I want to learn it from scratch again and the new CSS3.
Thanks and keep up the awesome work!
Thanks a lot, this tutorial so easy to understand..and it’s help me so much…
thanks
I have started to learn css. This website is a good place to learn designing. Thanks for these videos. I would like to learn designing by performing practicals after watching videos. So, can you provide a link to download photoshop mockup???