An HTML and CSS tutorial building a homepage. Learn how to style and control navigation links and content, in addition explore some CSS3 techniques such as Border-Radius, Box-shadow, and Gradients.
| Download exercise files |
Building a Homepage
32 Responses to “Building a Homepage”
Trackbacks/Pingbacks
-
-
June 14, 2011
[...] Visit Source Add Comment 0 Comments… Come on! [...]
Leave a Reply
Subscribe
Nice tutorial. Thanks
Is it possible with CSS to have 3 major DIV’s (Header, Body & Footer) and only be the “Body”-div be scrollable like with frames? And if so, is it supported by IE, Firefox, Google & Safari?
Thx for your answers
PS: I like all the tutorials very much. It helps me to improve my knowledge.
How to do this with out coding using dreanviwer and Illustrator
Great Tutorial, thank you very much
Great tutorial for learner.
thanks
Hi,
Fantastic tutorial, really helped me understand some major uses for CSS.
Very clear and concise.
Thanks.
the tutorial is very…very…interesting for beginers.
thank’s sir….
i’am from indonesia.
I just want to say this video helped me alot, and thank you man! Greetings from Bosnia-Herzegowina.
good job guys… thanks
Wonderful tutorial, very easy to understand. I just have a question. What font did you use to create the My Website header?
Myriad Pro Bold, 90 pixels.
That’s the first tutorial i really understood. you are great.this step by step web design tutorial just clarified all my doubts about divs.
thanks for your help.
Hey Luis, pleasure is mine, thank you for watching!!!
Rolex,
Do you have a tutorial of “My Website” with vertical navigation bar?
Mr. Lopez,
I don’t but its quite simple, just don’t float the ul li property and so the links will stack on top of each other.
#divNav ul li {
float:left;
}
Rolex,
Thank you very much.
merci , Thank you very much!
Learn easy this tutorial thank you so much.
Very good video, thanks a lot. If u don’t mind i have a request to for website comment box, how to make a comment box as you have here of this site? plz don’t ignore me.
Have a look at: http://3rdelement.com/html/create-an-accessible-form/.
Do you have the tutorial html and css for this exercise? I followed along percisely and my image or the About Box wold not do as exercise states. I am using IE to check my work.
Thanks
Glenn,
I can send you the code, no problem with me but you should not really test things in IE, its always problematic. Try Firefox, Chrome, and Safari. Let me know, thanks!
maybe a dumb question, but what program do you use to make this? and where could i get it. its much a bit easier than notepad i think, u dont need to type everything.
lovely tutorial!
Janusz I had sent you an email right after you posted your comment, please check and let me know. Thanks!
Rigtig god tutorial, du ved hvad du laver:) Fra Danmark
thanks
soooo coool
the best tutorial ever!
I love your tutorials but I have a hard time seeing how you did the gradient… after linear-gradient what did you put before “top” and after the “;” at the end?
Lee, not sure where exactly you are referring to but try…
background:-moz-linear-gradient(top, #666, #333, #222);
or
background:-moz-linear-gradient(top, #000, #666);
got it… now having problems with the hover on the #divnav ul li a… I can’t seem to get it working…lol… been up all night… and you have the best tutorials on css that I have seen thus far… Thank you for your patience
This tutorial is a superbly presented demonstration on HTML and CSS. I found it incredibly helpful and has cleared up a lot of confusion for me. All the tutorials are the same – well presented, simple and informative. A good job well done!
Many thanks!