Skip to content

Commit 64eb150

Browse files
jmstriegeljmstriegel
committed
added project documentation template
1 parent db453dd commit 64eb150

File tree

110 files changed

+8791
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+8791
-0
lines changed

‎template/projects/example_project/assets/images/createproject.jpg

13.2 KB
Loading

‎template/projects/example_project/assets/images/feature_full.jpg

18.3 KB
Loading

‎template/projects/example_project/assets/images/feature_sml.jpg

3.42 KB
Loading

‎template/projects/example_project/index.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html itemscope itemtype="http://schema.org/Product">
3+
<head>
4+
<title>Project Title | Coder Projects</title>
5+
<meta charset="utf-8">
6+
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico" />
7+
<link href="../../shared_assets/css/project.css" media="all" rel="stylesheet" type="text/css"/>
8+
<script src="../../shared_assets/js/jquery.min.js"></script>
9+
<script src="../../shared_assets/js/ace-min/ace.js" type="text/javascript" charset="utf-8"></script>
10+
<script src="../../shared_assets/js/project.js"></script>
11+
<meta itemprop="name" content="Project Title | Coder Projects">
12+
<meta itemprop="description" content="Things to make. Stuff to learn. Make fun web stuff on Raspberry Pi.">
13+
<meta itemprop="image" content="http://googlecreativelab.github.io/coder-projects/assets/images/coder_projects_640.jpg">
14+
</head>
15+
<body>
16+
<div id="project_nav">
17+
<div class="project_home"><a href="../../">Coder</a></div>
18+
<div class="project_info">&lt;project&gt; steps(12)</div>
19+
<h1>Example Project Title</h1>
20+
<a href="http://goo.gl/coder" class="what_is_coder">What's CODER?</a>
21+
</div>
22+
<div class="section intro">
23+
<img class="feature" src="assets/images/feature_full.jpg" />
24+
</div>
25+
<div class="section description">
26+
<div class="details">
27+
<h2>Description</h2>
28+
<p>This is a short introduction to your project. All the images are 640px wide, except the small ones. Make those 196px</p>
29+
<p class="whofor"><strong>A great project for:</strong>
30+
Who it's for, who else it's for, and keep it light, maybe funny.
31+
</p>
32+
</div>
33+
<div class="meta">
34+
<div class="difficulty">Easy</div>
35+
<p><span class="name">Skills Needed:</span>
36+
None! or Basic Whatever, Medium Stuff.
37+
</p>
38+
<p><span class="name">Skills Learned:</span>
39+
Ie. Images, Type, Color, Positioning, Basic HTML, Basic CSS
40+
</p>
41+
<p><span class="name">Submitted By:</span>
42+
Coder Team
43+
</p>
44+
</div>
45+
<div class="clear"></div>
46+
</div>
47+
<div class="section">
48+
<h2>Stuff You Might Need</h2>
49+
<p>Before we start you might want to get more familiar with previous Coder projects or download some companion stuff to help with this project.</p>
50+
<div class="projectlink">
51+
<img src="../example_project/assets/images/feature_sml.jpg" />
52+
<div class="details">
53+
<h3><a href="">Previous Project: Dear Diary</a></h3>
54+
<p>A good introduction to Basic HTML and CSS syntax. If you’re starting from scratch this might be a better place to start.</p>
55+
</div>
56+
<div class="clear"></div>
57+
</div>
58+
</div>
59+
<div class="section steps">
60+
<div class="step">
61+
<h2>Alright, let's get started</h2>
62+
<p>As always, let’s start by making a new App in Coder. You call it whatever you want. We’ve called ours “Modern Mondrian.”</p>
63+
<p><img src="assets/images/createproject.jpg" /></p>
64+
</div>
65+
<div class="step">
66+
<h2>Step 1: Write a first step</h2>
67+
<p>Talk about what this step does. Keep it brief and entertaining.</p>
68+
<ul>
69+
<li>A list of short instructions.</li>
70+
<li>That you can follow easily.</li>
71+
<li>And work together to do one thing.</li>
72+
</ul>
73+
<p><i>Here's some CSS:</i></p>
74+
<div class="codeview">
75+
<div class="data" data-type="css">
76+
#canvas {
77+
background-color: #fff4db;
78+
width: 750px;
79+
height: 750px;
80+
margin-left: auto;
81+
margin-right: auto;
82+
box-shadow: 10px 10px 1px #8d8d8d;
83+
}
84+
</div>
85+
</div>
86+
<p><i>And here's some HTML:</i></p>
87+
<div class="codeview">
88+
<div class="data" data-type="html">
89+
&lt;div>
90+
&amp;amp; This needs to be escaped carefully.
91+
&lt;/div>
92+
&lt;/script>
93+
</div>
94+
</div>
95+
96+
<p>Point out any gotchas or key takeaways that were introduced in this step.</p>
97+
</div>
98+
<div class="step">
99+
<h2>Step 2: Write another step!</h2>
100+
<p>Talk about what this step does. Keep it brief and entertaining.</p>
101+
<ul>
102+
<li>A list of short instructions.</li>
103+
<li>That you can follow easily.</li>
104+
<li>And work together to do one thing.</li>
105+
</ul>
106+
<p><i>Here's some Javascript:</i></p>
107+
<div class="codeview">
108+
<div class="data" data-type="javascript">
109+
alert('whee!');
110+
</div>
111+
</div>
112+
113+
<p>Point out any gotchas or key takeaways that were introduced in this step.</p>
114+
</div>
115+
116+
117+
118+
119+
</div> <!-- end all steps section -->
120+
121+
122+
123+
<div class="section">
124+
<h2>Bonus Rounds</h2>
125+
<p>Congrats on the finished project. If you’re interested in a challeng, try to do one of the excersises below.</p>
126+
<div class="projectlink">
127+
<img src="../example_project/assets/images/feature_sml.jpg" />
128+
<div class="details">
129+
<h3>Give it 100% <span class="difficulty">Easy-ish</span></h3>
130+
<p>So far we’ve been dealing with pixel dimensions on everything. What happens if we change <b>height</b> and <b>width</b> to percents? Can you create a Mondrian-style image that fills the entire browser and scales to any dimension the window takes?</p>
131+
</div>
132+
<div class="clear"></div>
133+
</div>
134+
<div class="projectlink">
135+
<img src="../example_project/assets/images/feature_sml.jpg" />
136+
<div class="details">
137+
<h3>Give it 100% <span class="difficulty">Hard</span></h3>
138+
<p>So far we’ve been dealing with pixel dimensions on everything. What happens if we change <b>height</b> and <b>width</b> to percents? Can you create a Mondrian-style image that fills the entire browser and scales to any dimension the window takes?</p>
139+
</div>
140+
<div class="clear"></div>
141+
</div>
142+
</div>
143+
144+
<div class="section projects last">
145+
<h2>Coder Projects to Try Next</h2>
146+
<p>Like drawing with code? There’s more than just CSS/HTML and static blocks. Try these other coder projects to make more cool things and learn more useful stuff.</p>
147+
148+
<!-- Starting Coder -->
149+
<div class="project left">
150+
<span class="projectid">&lt;project&gt;</span>
151+
<img class="feature" src="../example_project/assets/images/feature_full.jpg" />
152+
<div class="details">
153+
<h3>Starting Coder</h3>
154+
<p>You've just opened the box. Inside is a new Coder device! Learn how to connect to it and program it from your computer's web browser.</p>
155+
<a href="../example_project/" target="_blank" class="button inline">Open Project</a>
156+
<div class="difficulty">First-timer</div>
157+
</div>
158+
</div>
159+
<!-- end project -->
160+
161+
<!-- Dear Diary -->
162+
<div class="project right">
163+
<span class="projectid">&lt;project&gt;</span>
164+
<img class="feature" src="../example_project/assets/images/feature_full.jpg" />
165+
<div class="details">
166+
<h3>Dear Diary</h3>
167+
<p>Pour your heart out, speak your mind, and look great doing it with this project. Learn to style text, place images, and create a simple web page design that’s uniquely you.</p>
168+
<a href="../example_project/" target="_blank" class="button inline">Open Project</a>
169+
<div class="difficulty">Beginner</div>
170+
</div>
171+
</div>
172+
<!-- end project -->
173+
174+
175+
<div class="clear"></div>
176+
</div> <!-- end next projects -->
177+
<div class="footer">
178+
<div class="madewith bottom"></div>
179+
<div class="links">
180+
<a href="http://www.google.com/intl/en/policies/" class="trackout">Privacy and Terms</a>
181+
<div class="plusholder">
182+
<div class="g-plusone"></div>
183+
</div>
184+
<script type="text/javascript">
185+
(function() {
186+
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
187+
po.src = 'https://apis.google.com/js/plusone.js';
188+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
189+
})();
190+
</script>
191+
</div>
192+
</div>
193+
<script>
194+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
195+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
196+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
197+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
198+
199+
ga('create', 'UA-41998892-3', 'googlecreativelab.github.io');
200+
ga('send', 'pageview');
201+
202+
$(document).ready( function() {
203+
$('a.trackout').click(function() {
204+
var destination = $(this).attr('href');
205+
ga('send', 'event', 'outbound', 'click', destination );
206+
});
207+
});
208+
</script>
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)