<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Design for Everyone | Home </title>
<meta name="description" content="HTML5, CSS3, JavaScript, Bootstrap tutorial">
<meta name="author" content="Colleen van Lent">

<!-- Mobile Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Favicon -->
<link rel="shortcut icon" href="images/newlogo.png">


<!-- Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,300&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>

<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<!-- Font Awesome CSS -->
<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Plugins -->
<link href="css/animations.css" rel="stylesheet">

<!-- Worthy core CSS file -->
<link href="css/style.css" rel="stylesheet">

<!-- Custom css -->
<link href="css/custom.css" rel="stylesheet">
<style>
div.row.my_dark a{
color: black;
font-weight:bold;
text-decoration:underline;
}
div.row.my_dark a:hover,div.row.my_dark a:focus{
color: blue;
text-decoration:underline;
}
</style>
</head>

<body class="no-trans">
<!-- scrollToTop -->
<!-- ================ -->
<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

<!-- header start -->
<!-- ================ -->
<header class="header fixed clearfix navbar navbar-fixed-top dark">
<div class="container">
<div class="row">
<div class="col-md-4">

<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">

<!-- logo -->
<div class="logo smooth-scroll">
<!-- <a href="#banner"><img id="logo" src="images/newlogo.png"alt="WD4E"></a> -->
</div>

<!-- name-and-slogan -->
<div class="site-name-and-slogan smooth-scroll">
<div class="site-name"><a href="index.html">WD4E</a></div>
<div class="site-slogan"> <a target="_blank" href="http://www.intro-webdesign.com">Web Design For Everybody</a></div>
</div>

</div>
<!-- header-left end -->
</div>
<div class="col-md-8 fix-nav">

<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">

<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">

<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default">
<div class="container-fluid">

<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="html5.html">HTML5</a></li>
<li><a href="css3.html">CSS3</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="responsive.html">Responsive Design</a></li>
<li class="active"><a href="resources.html">Resources</a></li>
</ul>
</div>

</div>
</nav>
<!-- navbar end -->

</div>
<!-- main-navigation end -->

</div>
<!-- header-right end -->

</div>
</div> <!-- End row -->
</div>
</header>
<!-- header end -->


<!-- section start -->
<!-- ================ -->

<div class="section clearfix object-non-visible" data-animation-effect="fadeIn">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="resources" class="title text-center"><span>Resources</span></h1>
<p class="lead text-center">This site will contain many of the files, images, and other resources used in the Introduction to Web Design.
</p>
<p class="lead text-center">To use any of these files you can click on the link to open the file in your browser. Then if you can do a "right click" with your mouse you can select View Source and then copy and paste the code.</p>
<img src = "images/ViewPageSource1.png" style="border:3px solid black; margin:auto; width:60%;"><br>
<p class="lead text-center">You can also get to View Source by going via the View option on your browser.</p>
<img src = "images/ViewSource2.png" style="border:3px solid black; margin:auto; width:60%;">
<p class="lead text-center">The Page source will show you all of the HTML code that makes up a page.</p>
<img src = "images/PageSource.png" style="border:3px solid black; margin:auto; width:60%;">
<hr>
<p class="lead text-center">Another option is to Right click directly on the link and select Save Link As. To be honest, it is pretty easy to not know where it is saved after that sometimes....</p>
</div>
</div>
<div class="row my_dark">
<div class="col-md-6">
<h2>HTML5 resources</h2>
<h3>Week One</h3>
<ol>
<li>From Lecture Video 01-05: <a href = "HTML5/week1/01-05-firstPage.html">01-05-firstPage.html</a></li>
<li>From Lecture Video 01-05: <a href = "HTML5/week1/01-05-secondPage.html">01-05-secondPage.html</a></li>
<li>Starter template: <a href = "HTML5/week1/starter_template.html">starter_template.html</a></li>
</ol>
<h3>Week Two</h3>
<ol>
<li>From Lecture Video 02-04: <a href = "HTML5/week2/02-04-index.html">02-04-index.html</a></li>
<li>FontAwesome files:<br>
<a href = "HTML5/week2/fontawesome_demo1.html">FontAwesome Part One</a><br>
<a href = "HTML5/week2/fontawesome_with_sizes_demo2.html">FontAwesome With Sizes</a><br>
<a href = "HTML5/week2/fontawesome_more_icons_demo3.html">FontAwesome With More Icons</a><br>
<a href = "HTML5/week2/fontawesome_accessibility_demo4.html">FontAwesome With Accessibility</a><br>
</li>
<li>From Lecture Video 02-06: <a href = "HTML5/week2/02-06-links.html">02-06-links.html</a></li>
<li>From Lecture Video 02-07: <a href = "HTML5/week2/02-07-multimedia.html">02-07-multimedia.html</a><br>
<a href = "HTML5/week2/BoxCar.MOV">BoxCar.MOV</a></li>
<li>From Lecture Video 02-08: <br>
<a href = "HTML5/week2/02-08-simple-table.html">02-08 a simple table</a><br>
<a href = "HTML5/week2/02-08-table-with-headings.html">02-08 table with headings</a><br>
<a href = "HTML5/week2/02-08-table-example.html">02-08 final table code.</a><br>
</li>
<li>From Lecture Video 02-09: <br>
<a href = "HTML5/week2/02-09-common-block-tags.html">02-09 common block tags</a><br>
<a href = "HTML5/week2/02-09-common-inline-tags.html">02-09 common inline tags</a><br>
<a href = "HTML5/week2/02-09-special-tags.html">02-09 special tags.</a><br>
</li>
</ol>
</div>
<div class="col-md-6">
<h3>CSS3 resources</h3>
<p class = "lead">List of resources here.</p>
</div>
<div class="offset-md-2 col-md-6">
<h3>JavaScript resources</h3>
<p class = "lead">List of resources here.</p>
</div>
<div class="offset-md-2 col-md-6">
<h3>Other resources</h3>
<p class = "lead">List of resources here.</p>
</div>
</div>
</div>
</div>
<!-- section end -->

<!-- footer start -->
<!-- ================ -->
<footer id="footer">

<!-- .subfooter start -->
<!-- ================ -->
<div class="subfooter">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-center">Copyright &copy; 2015 by Colleen van Lent</p>
</div>
</div>
</div>
</div>
<!-- .subfooter end -->

</footer>
<!-- footer end -->

<!-- JavaScript files placed at the end of the document so the pages load faster
================================================== -->
<!-- Jquery and Bootstap core js files -->
<script type="text/javascript" src="plugins/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

<!-- Modernizr javascript -->
<script type="text/javascript" src="plugins/modernizr.js"></script>

<!-- Isotope javascript -->
<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>
<!-- Backstretch javascript -->
<script type="text/javascript" src="plugins/jquery.backstretch.min.js"></script>

<!-- Appear javascript -->
<script type="text/javascript" src="plugins/jquery.appear.js"></script>

<!-- Initialization of Plugins -->
<script type="text/javascript" src="js/template.js"></script>

<!-- Custom Scripts -->
<script type="text/javascript" src="js/custom.js"></script>

</body>
</html>