peterchappell/Snippets for Intermediate Coding for the Web session

## Snippets for Intermediate Coding for the Web session
<!-- The HTML Page Stub -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>


<!-- Adding the CSS to our head -->

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />


<!-- The banner HTML -->

<header id="banner">
    <h1 class="page-title">My Test Site</h1>
</header>


<!-- Some sample css -->
<style>
#banner {
  background-color: #ccc;
}
</style>


<!-- Adding a content structure -->

<header id="banner">
  <h1 id="brand" class="page-title">My Test Site</h1>
</header>
<section id="mainContent">
  <article class="article1">
    <!-- a sample heading and one or more paragraphs -->
  </article>
  <article class="article2">
    <!-- a sample heading and one or more paragraphs -->
  </article>
  <article class="article3">
    <!-- a sample heading and one or more paragraphs -->
  </article>
</section>
<section id="sidebar">
  <aside>
    <!-- maybe a list of links preceded by a heading? -->
  </aside>
</section>
<footer id="mainFooter">
  <!-- Copyright info etc -->
</footer>


<!-- Padding and margin (but not ideal) -->

<style>
body {
  background-color: #eee;
}
#wrapper {
  background-color: #fff;
  max-width: 910px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 2.5%;
  padding-right: 2.5%;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
}
</style>


<!-- Selector priority demo -->

<style>
.page-title {
  color: blue;
}
#banner {
  color: green;
}
h1 {
  color: red;
}
</style>


<!-- Navigation block -->

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>


<!-- Navigation styling -->

<style>
nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  list-style: none;
  display: inline;
}
nav a {
  color: #fff;
  display: inline-block;
  padding: 5px 20px;
}
</style>


<!-- content for our image slideshow -->

<div id="my-slideshow">
    <ul class="bjqs">
        <li><img src="slideshow/img/banner01.jpg" alt="image 1" /></li>
        <li><img src="slideshow/img/banner02.jpg" alt="image 2" /></li>
        <li><img src="slideshow/img/banner03.jpg" alt="image 3" /></li>
    </ul>
</div>


<!-- head content for image slideshow -->

<link rel="stylesheet" href="slideshow/bjqs.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slideshow/js/bjqs-1.3.min.js"></script>
<script>
  jQuery(document).ready(function($) {
      $('#my-slideshow').bjqs({
        showcontrols: false,
        width: 500,
        height: 300
      });
  });
</script>
	<!-- The HTML Page Stub -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Hello World</title>
	</head>
	<body>
	<!-- Content goes here -->
	</body>
	</html>




	<!-- Adding the CSS to our head -->

	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css" />




	<!-- The banner HTML -->

	<header id="banner">
	<h1 class="page-title">My Test Site</h1>
	</header>



	<!-- Some sample css -->
	<style>
	#banner {
	background-color: #ccc;
	}
	</style>




	<!-- Adding a content structure -->

	<header id="banner">
	<h1 id="brand" class="page-title">My Test Site</h1>
	</header>
	<section id="mainContent">
	<article class="article1">
	<!-- a sample heading and one or more paragraphs -->
	</article>
	<article class="article2">
	<!-- a sample heading and one or more paragraphs -->
	</article>
	<article class="article3">
	<!-- a sample heading and one or more paragraphs -->
	</article>
	</section>
	<section id="sidebar">
	<aside>
	<!-- maybe a list of links preceded by a heading? -->
	</aside>
	</section>
	<footer id="mainFooter">
	<!-- Copyright info etc -->
	</footer>




	<!-- Padding and margin (but not ideal) -->

	<style>
	body {
	background-color: #eee;
	}
	#wrapper {
	background-color: #fff;
	max-width: 910px;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 2.5%;
	padding-right: 2.5%;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	}
	</style>



	<!-- Selector priority demo -->

	<style>
	.page-title {
	color: blue;
	}
	#banner {
	color: green;
	}
	h1 {
	color: red;
	}
	</style>




	<!-- Navigation block -->

	<nav>
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="contact.html">Contact</a></li>
	</ul>
	</nav>



	<!-- Navigation styling -->

	<style>
	nav ul {
	margin: 0;
	padding: 0;
	}
	nav li {
	list-style: none;
	display: inline;
	}
	nav a {
	color: #fff;
	display: inline-block;
	padding: 5px 20px;
	}
	</style>




	<!-- content for our image slideshow -->

	<div id="my-slideshow">
	<ul class="bjqs">
	<li><img src="slideshow/img/banner01.jpg" alt="image 1" /></li>
	<li><img src="slideshow/img/banner02.jpg" alt="image 2" /></li>
	<li><img src="slideshow/img/banner03.jpg" alt="image 3" /></li>
	</ul>
	</div>



	<!-- head content for image slideshow -->

	<link rel="stylesheet" href="slideshow/bjqs.css" />
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="slideshow/js/bjqs-1.3.min.js"></script>
	<script>
	jQuery(document).ready(function($) {
	$('#my-slideshow').bjqs({
	showcontrols: false,
	width: 500,
	height: 300
	});
	});
	</script>