Permalink
Browse files

more html files added

basic html level code
  • Loading branch information...
1 parent afe64fc commit c75269b43402b81cdb2fcd896fd502011c80d895 @robertmccraith robertmccraith committed Apr 13, 2012
View
Binary file not shown.
View
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,55 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="stylesheet.css">
+<title> My Awesome website</title>
+</head>
+<body>
+ <h3>The list</h3>
+ <ul>
+ <li>The first</li>
+ <li>The Second</li>
+ <li>The Third</li>
+ <li>The Fourth</li>
+ <li>The Fifth</li>
+ </ul>
+ <h3>Another List</h3>
+ <ol>
+ <li>The first</li>
+ <li>The Second</li>
+ <li>The Third</li>
+ <li>The Fourth</li>
+ <li>The Fifth</li>
+ </ul>
+ <a href="http://coderdojo.com/"><img src="https://github.com/CoderDojo/CoderDojo-Design/raw/master/logo/logo.png" width="300" height="300" /></a>
+
+ <table>
+ <thead>
+ <tr>
+ <th colspan="2"><style="color:red;">Items on This Page</th>
+ </tr>
+ <tr>
+ <th><em>Item</em></th>
+ <th><em>Count</em></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>List</td>
+ <td>2</td>
+ </tr>
+
+ <tr>
+ <td>Images</td>
+ <td>2</td>
+ </tr>
+
+ <tr>
+ <td>Tables</td>
+ <td>1(hopefully)</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+</body>
+</html>
@@ -0,0 +1,10 @@
+body{
+ background:white;
+}
+th{
+ border: 1px solid #999;
+ font-size:20px;
+}
+td{
+ border: 2px dashed green;
+}
View
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,28 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="stylesheet.css">
+<title>Time to switch it up a little bit!</title>
+</head>
+<body>
+<h4>Its time to add some nice UI touches!</h4>
+
+<div id="smallBox">
+ Lets start off with a simple box.<br />
+ Nothing to fancy just some tesxt inside a little div of ours.<br />
+ We've got a nice border going on stayed with the white background fairly standard affair.<br />
+ Now try putting the mouse over me.<br />
+ <h1>Thats a little more room!</h1>
+ Note how the absolute positioning makes the div grow in size in a different direction
+ For getting this far you get a special prize!
+ <iframe width="560" height="315" src="http://www.youtube.com/embed/FnF2ROKtdMY" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<div id="mediumBox">
+ We can also do some fun things such as add a scrollbar to the div or allow it to be resized. Check out this div with its fancy pants scroll bar going down the side.
+</div>
+<h3> you should spend most of this session messing around with different div style things such as the positioning and such.</h3>
+
+<code>Your now at the stage where you can make a small webiste so you should start thinking of something to make with the kids for the next few weeks.</code>
+
+</body>
+</html>
@@ -0,0 +1,44 @@
+body{
+ background:white;
+}
+div#smallBox{
+ position: absolute;
+ bottom:30%;
+ right:100px;
+ width:400px;
+ height:100px;
+ background: white;
+ border: 2px solid #124234;
+ overflow: hidden;
+}
+div#smallbox:hover{
+ background:blue;
+ width:700px;
+ height:400px;
+ border: 10px dashed #999;
+ overflow: scroll;
+ z-index: 2;/*z-index might be a bit much to go into at the minute so maybe save it for later*/
+}
+div#mediumbox{
+ position: relative;
+ top:20px;
+ left:150px;
+ margin: 20px;
+ width:40px;
+ min-height: 45px;
+ overflow:hidden;
+ overflow-y:scroll;
+ resize:both;
+ max-width: 700px;
+ max-height: 90px;
+}
+code{
+ opacity: 0.3;
+ -moz-opacity: 0.3;
+ filter:alpha(opacity=3);
+}
+code:hover{
+ opacity: 1;
+ -moz-opacity: 1;
+ filter:alpha(opacity=1);
+}
View
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,19 @@
+<html>
+<head>
+ <title>Thinking Caps on guys</title>
+</head>
+<body>
+ <h3>Time to start your own website!<br />
+ some ideas include:</h3>
+<ol>
+ <li>A Page about themselves,</li>
+ <li>A site about a there hobbies,</li>
+ <li>An event in the area</li>
+ <li>A Page to display all of the different things they have done in HTML</li>
+ <li>A small blog</li>
+ <li>A page with links to all of there favorite things online</li>
+ <li>Whatever you can think of, maybe even ask the kids and see what they would like.</li>
+</ol>
+Generally you may want to also build up there skills during these weeks and go over some of the previously covered topics before moving on to javascript.
+</body>
+</html>
View
Binary file not shown.
File renamed without changes.
View
@@ -0,0 +1 @@
+These Session plans are only a rough guideline to the way you introduce topics. The best way to operate the courses is to sometimes follow the directions of the kids themselves as it tends to engage there interests more and make programming seem useful and cool. You may also want to get feedback from the kids and see what they want to learn allowing them to develop skills in areas they are interested in and show them different things they can do.

0 comments on commit c75269b

Please sign in to comment.