Here’s a video showing you how to build a basic HTML/CSS website. It explains the core concepts and also shows you how to learn on your own and look things up for yourself instead of just copying exactly what I do. I prefer to teach website basics this way so that you can go do your own ideas. Teach a man to fish and all that.
You can download all the code I use in the tutorial here.
You can also view it below.
Sorry the audio skips in a few places, first video.
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>My Website: a journey into noob tutorials</title> <style type="text/css"> .yellowbox { background-color:red; } .yellowbox { background-color:purple; } </style> </head> <body> <div class="shadow"> <header> <h1>My Website</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="http://sitebeyondsight.com">Blog</a></li> <li><a href="http://sitebeyondsight.com">Contact</a></li> </ul> </nav> <main> <p> Lorem <strong style="color:red;font-size:20px;">ipsum</strong> dolor <strong>sit</strong> amet, consectetur adipiscing elit. Quisque mollis efficitur ultricies. Morbi lectus ligula, feugiat a placerat sed, finibus ut massa. Etiam urna lectus, pellentesque a molestie a, tempor sed tellus. Suspendisse vestibulum bibendum dui ac dictum. Proin vel semper felis. Integer enim dolor, mollis eget ullamcorper eu, tincidunt et tortor. Ut pharetra gravida nibh, a porttitor tortor elementum sit amet. Integer efficitur venenatis libero, vitae finibus mauris rhoncus in. Nam sit amet ligula quis nulla tristique sollicitudin in quis dolor. Mauris congue mi eu urna pretium lacinia. Fusce hendrerit purus in tellus tempus, ac venenatis nisi elementum. Etiam pellentesque ultrices sapien a aliquam. Morbi lacus nisi, pulvinar vitae eros vel, lobortis tempor risus. In blandit suscipit lorem. </p><p class="yellowbox" style="background-color:blue;"> Pellentesque ultricies mauris vitae auctor mollis. Maecenas pellentesque nisl eget orci tristique rutrum. Curabitur sodales, libero eget efficitur ornare, velit erat mollis magna, eu ornare est risus eu augue. Sed lacinia, est mattis fermentum ultrices, sapien mauris mattis ligula, ut bibendum diam est eu felis. Sed sit amet viverra velit. Aliquam viverra molestie risus eget fringilla. Duis eu ipsum sodales, feugiat nisl sit amet, placerat arcu. Integer mollis nunc sollicitudin, aliquet nunc sed, mollis justo. Cras non eros nec nulla dapibus semper quis in ante. </p><p> Nulla nec bibendum est. Ut luctus mi vestibulum odio convallis mattis. Proin pretium iaculis urna, vitae euismod eros semper eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra sed orci id convallis. Cras dictum porta imperdiet. In hac habitasse platea dictumst. </p><p> Aliquam a finibus neque. Duis vel vehicula mi. Aliquam at dui odio. Suspendisse nec accumsan neque, sit amet malesuada augue. Vestibulum rhoncus nunc at tristique pellentesque. Donec gravida, mauris nec fermentum mattis, mi metus cursus lorem, sed convallis tellus leo imperdiet lectus. Nunc ut turpis sed sapien consectetur consectetur. Cras aliquet sollicitudin nulla ac ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque posuere nec elit id molestie. Sed bibendum dapibus efficitur. Suspendisse felis massa, condimentum id mattis quis, sollicitudin sit amet magna. Donec ac ipsum eget massa pellentesque euismod. Pellentesque sit amet metus sit amet nunc iaculis vulputate. Suspendisse gravida vulputate urna nec blandit. </p><p> <img src="images/sunset.jpg"><br>Vestibulum non vulputate mauris. Etiam nec est maximus, interdum erat nec, tempor quam. Fusce at aliquet dui. Proin quam quam, aliquet at feugiat accumsan, faucibus id justo. Suspendisse sit amet pulvinar purus. Nulla facilisi. Maecenas sit amet velit pulvinar, viverra neque vel, auctor dui. Proin porta diam quis nibh hendrerit, sed mattis arcu vehicula. Nunc finibus rutrum semper. Fusce fringilla metus massa, quis placerat sapien ultricies a. Phasellus viverra sit amet orci nec placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer congue venenatis cursus. </p> </main> <footer> © 2014 SiteBeyondSight.com </footer> </div> </body> </html>
about.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>My Website: a journey into noob tutorials</title> </head> <body> <div class="shadow"> <header> <h1>My Website</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="http://sitebeyondsight.com">Blog</a></li> <li><a href="http://sitebeyondsight.com">Contact</a></li> </ul> </nav> <main> <p> Lorem <strong>ipsum</strong> dolor sit amet, consectetur adipiscing elit. Quisque mollis efficitur ultricies. Morbi lectus ligula, feugiat a placerat sed, finibus ut massa. Etiam urna lectus, pellentesque a molestie a, tempor sed tellus. Suspendisse vestibulum bibendum dui ac dictum. Proin vel semper felis. Integer enim dolor, mollis eget ullamcorper eu, tincidunt et tortor. Ut pharetra gravida nibh, a porttitor tortor elementum sit amet. Integer efficitur venenatis libero, vitae finibus mauris rhoncus in. Nam sit amet ligula quis nulla tristique sollicitudin in quis dolor. Mauris congue mi eu urna pretium lacinia. Fusce hendrerit purus in tellus tempus, ac venenatis nisi elementum. Etiam pellentesque ultrices sapien a aliquam. Morbi lacus nisi, pulvinar vitae eros vel, lobortis tempor risus. In blandit suscipit lorem. </p><p class="yellowbox"> Pellentesque ultricies mauris vitae auctor mollis. Maecenas pellentesque nisl eget orci tristique rutrum. Curabitur sodales, libero eget efficitur ornare, velit erat mollis magna, eu ornare est risus eu augue. Sed lacinia, est mattis fermentum ultrices, sapien mauris mattis ligula, ut bibendum diam est eu felis. Sed sit amet viverra velit. Aliquam viverra molestie risus eget fringilla. Duis eu ipsum sodales, feugiat nisl sit amet, placerat arcu. Integer mollis nunc sollicitudin, aliquet nunc sed, mollis justo. Cras non eros nec nulla dapibus semper quis in ante. </p><p> Nulla nec bibendum est. Ut luctus mi vestibulum odio convallis mattis. Proin pretium iaculis urna, vitae euismod eros semper eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pharetra sed orci id convallis. Cras dictum porta imperdiet. In hac habitasse platea dictumst. </p><p> Aliquam a finibus neque. Duis vel vehicula mi. Aliquam at dui odio. Suspendisse nec accumsan neque, sit amet malesuada augue. Vestibulum rhoncus nunc at tristique pellentesque. Donec gravida, mauris nec fermentum mattis, mi metus cursus lorem, sed convallis tellus leo imperdiet lectus. Nunc ut turpis sed sapien consectetur consectetur. Cras aliquet sollicitudin nulla ac ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque posuere nec elit id molestie. Sed bibendum dapibus efficitur. Suspendisse felis massa, condimentum id mattis quis, sollicitudin sit amet magna. Donec ac ipsum eget massa pellentesque euismod. Pellentesque sit amet metus sit amet nunc iaculis vulputate. Suspendisse gravida vulputate urna nec blandit. </p><p> <img src="images/sunset.jpg"><br>Vestibulum non vulputate mauris. Etiam nec est maximus, interdum erat nec, tempor quam. Fusce at aliquet dui. Proin quam quam, aliquet at feugiat accumsan, faucibus id justo. Suspendisse sit amet pulvinar purus. Nulla facilisi. Maecenas sit amet velit pulvinar, viverra neque vel, auctor dui. Proin porta diam quis nibh hendrerit, sed mattis arcu vehicula. Nunc finibus rutrum semper. Fusce fringilla metus massa, quis placerat sapien ultricies a. Phasellus viverra sit amet orci nec placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer congue venenatis cursus. </p> </main> <footer> © 2014 SiteBeyondSight.com </footer> </div> </body> </html>
style.css
body { margin:0 auto; padding:0; max-width:800px; background-color:silver; font-family: Arial, helvetica, sans-serif; } .shadow { -webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.75); } .yellowbox { background-color:yellow; } header { height:175px; background-image: url("images/sunset.jpg"); background-position: center; text-align:center; } nav { background-color:black; color:white; } nav ul { list-style-type:none; padding:0; margin:0; } nav ul li { display:inline-block; padding:10px 20px; } a { color:white; text-decoration: none; padding:10px 20px; } a:visited { color:silver; } a:hover { background-color:white; color:black; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; } header h1 { margin:0; } main, footer { background-color:white; padding:15px; } footer { text-align:center; } main img { height:auto; max-width:200px; } @media (max-width: 600px) { nav ul li { display:block; padding:10px 20px; text-align:center; } main img { height:auto; max-width:100%; } }
Leave a Reply