In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time. Please let me have it with criticisms at my contact page.
Links from video:
Awesome. Thanks! (And btw, not “rough” at all, as you mentioned in the intro. Very well done).
Thanks for this amazing tutorial.You guys are doing awesome work in guiding newcomers in field of webapps…..
Nice work. Look forward to watching the rest of this short series.
However, you might want to add a link in the description to the other two parts. It would make it easier for people to follow along to the next step, instead of having to go back to the category archive and scroll all the way down.
Added cross links for this series, hopefully that will be helpful.
Just noticed this cast through your “Thank You (2008 Edition)”-post.
Simply love it.
Question: What kind of doc-type do you use on new files ?
Depends on the situation… but generally XHTML 1.0 STRICT
Nice Tut!! man!!! Congratulation
Hey Chris,
“sehr schön” like we say in Germany ;-)
I’m learning webdevelopment in school… but I don’t understand some stuff and sometimes our teacher can’t explain it at all. with your tutorials its very easy even if its in english!!
Thanx a lot!
Britta
The link to Arby’s… hilarious!
A good teacher is hard to find. An excellent one is even harder. Believe me, you are exceptionally great. I really enjoy your delivery of this difficult subject.
Thank you, thank you, thank you, thank you!
A thousand thank you to an excellent teacher is a mere drop in the ocean.
The clear, and distinct way you explained, and walked us through each steps is a great pleasure to listen. Most importantly, the reason behind each step, each action, why it has to be that way, make this tutorial and the reason for using CSS so meaningful. Your video podcast is great and exemplary.
To borrow a phrase from an old song by Tom Jones: “You got style. You got grace. You’re a winner.”
Thanks again.
Elias Ishak. Kuala Lumpur, Malaysia.
I also can borrow a song. The song is “I got a feeling that tonite gonna be a goodnite, oh yeah oh yeah auwww!
Hi Chris, you have really done a splendid job. I came across your video tutorial when I was fed up of all those text tutorials that couldn’t put anything it my head. The way you explained every detail, it was wonderful. Everything seemed to be much simpler and easy. Great job. Would be looking back for more such posts. And you are not rough at all. Great job. Keep posting.
U play wow?
Informative|Interesting|Insightful
i have a problem here :S i complte the first part every thing is according to the tutorail but the header-bg location is lil down from body-bg. how to fix it ?
you should add
margin: 0px; padding:0px; to your “body” class in the css-file.
hope this helps you out!
Hi ,
it’s very helpful tutorial for create web page from psd
Thanks
Chris,
When I use:
ul#nav {
height: 236px;
width: 800px;
margin: 0 auto;
background: url(images/header-bg.jpg) no-repeat:
}
it’s not centering on the page…and I don’t know what the deal is…
help?
Although I have not practice yet. But I am in a fix how the header comes in center as we didnt use any center attribute.
Great guide.
For the guides, what dimensions did you use?
Thanks.
WOW! Also like many others just stumbeled upon here (yes googe after getting sick of shitty books :)
… amzaing stuff! Thanks a 10000000 times :D
This was great and helped me build me first CSS site. Could anyone tell me what I need to do to use templates, or a good way to update the pages once the whole site is built?
Great work and really appreciated!
Thank you for this! Very nice
superb stuff bro… welldone…
if i need to add a horizontal div above footer (about 200px in height)
how could it be done …? is it to be floated to bottom or any simialr thing…?
cool stuff bro.
Just would like to know Is there any way to reduce the Images so that website loading time can be increased. I mean, header Image is too big and Is it possible to do something about it?
Thanks a lot.
Deepak
Hi,
So when i do this I get: http://cl.ly/3x2J0x2h0a1d2e442Z2r
For some reason not all of the image displays and it doesn’t center.
My HTML: (not sure why my list moves over in the display)
My CSS:
Chris,
You are simply the best teacher I have ever seen.
I learn lot from your tutorials, thanks lot and God Bless you :)
Hey Chris,
Stopped by to review the tutorials you built here a few years back.
Great stuff, really. Thanks.
Wondering if we’ve met? I see that you’re a fan of old-time music. I just returned from a tour of the great NW, including getting on staff at Fiddle Tunes.
I’ve lots of friends in Portland. Would love to get up with you when next I’m there. You’re welcome to stop by here in NC too, if ever you get this way. I run a little community dance once a month in Celo.
Loads of questions for you but I’ll hold off for now. You’re a serious and fun teacher! Keep up the good work.
Best regards,
Frederick
As a CSS newbie, I got a lot from your guide, thanks so much!
Yet there’s something that I thought could be improved. Now if I hover a little bit left of “history”, it actually links to “press”, and the link has no height. I wonder it might be better to write a CSS like:
Again, thx for your great work.
well, I think I just found a better trick:
Wow…..such a awesome tutorial here..
You are fabulous.. You are god for newcomers and freshers….
The mockup videos are awesome..You guys doing great job.
2016 :)
thx
Would love to see a re-make of this video/site using css-grid, flexbox. and compare the code to demonstrate the advancements since 2008.