Skip to content

Commit 9e27371

Browse files
yhaideryhaider
committed
updated with assignment instructions so viewers can have a better understanding of the projects
1 parent 8f40808 commit 9e27371

29 files changed

+288
-0
lines changed

‎about_python/assignment_instructions.png

363 KB
Loading

‎color_clicker/assignment_instructions.png

373 KB
Loading

‎colorclicker.html ‎color_clicker/colorclicker.html

File renamed without changes.

‎contact_card/assignment_instructions.png

676 KB
Loading

‎contact_card/contactcard.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Contact Cards</title>
6+
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
7+
8+
<script type="text/javascript">
9+
$(document).ready(function(){
10+
$(document).on("click", "form :submit", function(){
11+
$("#cards").append("<div class='card'><span class='front'><h2>" + $("#first").val() + " " + $("#last").val() + "</h2><p>" + "Click to see description!" + "</p></span><p class='back'>" + $("#description").val() + "</p></div>")
12+
return false;
13+
})
14+
$(document).on("click", ".card", function(){
15+
$(this).children().toggle()
16+
});
17+
});
18+
</script>
19+
20+
<style type="text/css">
21+
body{
22+
display: flex;
23+
}
24+
h1{
25+
text-align: center;
26+
}
27+
#form{
28+
margin-left: 20px;
29+
margin-top: 20px;
30+
width: 241px;
31+
margin-right: 20px;
32+
}
33+
#cards{
34+
/*border: 3px solid black;*/
35+
width: 500px;
36+
}
37+
.card{
38+
width: 400px;
39+
border: 1px solid grey;
40+
margin-left: 50px;
41+
text-align: center;
42+
margin-top: 10px;
43+
margin-bottom: 10px;
44+
background-color: black;
45+
color:white;
46+
47+
}
48+
.back{
49+
display: none;
50+
}
51+
</style>
52+
53+
</head>
54+
<body>
55+
<div id="form">
56+
<h1>Fill out this form to add a contact card!</h1>
57+
<form>
58+
<label for="first">First Name:</label>
59+
<input type="text" id="first">
60+
<label for="last">Last Name:</label>
61+
<input type="text" id="last">
62+
<label for="description">Description:</label>
63+
<textarea id="description"></textarea>
64+
<input type="submit">
65+
</form>
66+
</div>
67+
<div id="cards">
68+
<!-- <div class="card">
69+
<div class="front">
70+
<h2>First Name Last Name</h2>
71+
<p>Click to see description!</p>
72+
</div>
73+
<div class="back">
74+
<p>Description</p>
75+
</div>
76+
</div> -->
77+
</div>
78+
</body>
79+
</html>

‎disappearing_ninja/assignment_instructions.png

329 KB
Loading

‎displaying_blocks/assignment_instructions.png

652 KB
Loading

‎git_blocks/assignment_instructions.png

616 KB
Loading

‎git_blocks/github-icon.png

5.21 KB
Loading

‎git_blocks/github.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/*OVERALL*/
2+
*{
3+
margin: 0px;
4+
padding:0px;
5+
font-family: monospace;
6+
}
7+
8+
#bg{
9+
background-color:#dddfd4;
10+
width:1120px;
11+
padding: 10px 10px 5px 10px;
12+
}
13+
14+
#menu a{
15+
color:white;
16+
}
17+
ul{
18+
list-style-type: none;
19+
}
20+
#gb{
21+
font-size: 15pt;
22+
}
23+
img{
24+
width:30px;
25+
height:100%;
26+
margin-left:10px;
27+
}
28+
.smhead{
29+
font-size: 15pt;
30+
color: #dee0d5;
31+
}
32+
.txt{
33+
font-size: 10pt;
34+
color:#dee0d5;
35+
}
36+
.lblue{
37+
color:#75d5c7;
38+
}
39+
40+
#header{
41+
display:flex;
42+
background-color: #5daeac;
43+
width:1100px;
44+
margin-top: 10px;
45+
margin-left: 20px;
46+
}
47+
#menu{
48+
display:flex;
49+
}
50+
#menu li{
51+
padding: 20px 20px 0px 10px;
52+
font-size:13pt;
53+
}
54+
#logo{
55+
display: flex;
56+
font-size: 20pt;
57+
padding-top: 13px;
58+
vertical-align: middle;
59+
}
60+
#initaddstatus{
61+
display:flex;
62+
margin-left: 20px;
63+
}
64+
65+
#yellowbg{
66+
background-color: #f7e79c;
67+
margin: 20px 20px 20px 20px;
68+
/*display:flex;*/
69+
}
70+
.head{
71+
font-size: 17pt;
72+
padding-top: 20px;
73+
}
74+
#secondhead{
75+
padding-top: 40px;
76+
}
77+
#what{
78+
width:230px;
79+
padding: 0px 20px 20px 20px;
80+
background-color: #213f43;
81+
color: #dee0d5;
82+
margin: 20px 20px 20px 20px;
83+
display: inline-block;
84+
height: 510px;
85+
vertical-align: top;
86+
}
87+
88+
#init, #add, #status{
89+
background-color: #213f43;
90+
margin: 20px 20px 20px 20px;
91+
width: 200px;
92+
height:150px;
93+
}
94+
#init li, #add li, #status li{
95+
padding: 10px 10px 10px 10px;
96+
}
97+
98+
#commitremoteadd{
99+
display:flex;
100+
margin-left: 20px;
101+
102+
}
103+
#commit, #remoteadd{
104+
background-color: #213f43;
105+
margin: 20px 20px 20px 20px;
106+
width: 320px;
107+
height:150px;
108+
}
109+
#commit li, #remoteadd li{
110+
padding: 10px 10px 10px 10px;
111+
}
112+
#push{
113+
background-color: #213f43;
114+
margin: 20px 20px 20px 40px;
115+
width: 680px;
116+
height:150px;
117+
}
118+
#push li{
119+
padding: 10px 10px 10px 10px;
120+
}
121+
#sideboxes{
122+
display: inline-block;
123+
}
124+
#footer{
125+
background-color: #5daeac;
126+
padding: 20px 20px 20px 20px;
127+
margin: 0px 20px 20px 20px;
128+
text-align: center;
129+
}

‎git_blocks/github.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Git Basics</title>
6+
<meta name="description" content="An easy way to understand the basics of Git.">
7+
<link rel="stylesheet" type="text/css" href="github.css">
8+
</head>
9+
<body>
10+
<div id="bg">
11+
<div id=header>
12+
<ul id="logo">
13+
<li><img src="github-icon.png" alt="GitHub's logo"></li>
14+
<li><p><b>Git Basics</b></p></li>
15+
</ul>
16+
<ul id="menu">
17+
<li><a href="">What is git?</a></li><!--
18+
--><li><a href="">What is GitHub?</a></li><!--
19+
--><li><a href="">How do you use git and GitHub?</a></li><!--
20+
--><li><a href="">More resources</a></li>
21+
</ul>
22+
</div>
23+
<div id="yellowbg">
24+
<div id="what">
25+
<p class="head"><b>What is Git?</b></p>
26+
<p>Git is a version control system; you can think of it as a series of snapshots (commits) of your code base. With the creation of each snapshot you build out a whole application, seeing the growth of a full app. During this time you can make branches to experiment and come back to a previous snapshot you took or merge those experiments into your app.</p>
27+
<p class="head" id="secondhead"><b>What is GitHub?</b></p>
28+
<p>GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere using those code snapshots that you took during development.</p>
29+
</div>
30+
<div id="sideboxes">
31+
<div id="initaddstatus">
32+
<ul id="init">
33+
<li class="smhead">Git init</li>
34+
<ul>
35+
<li class="txt"><span class="lblue">Git init</span> is the act of registering this current code base</li>
36+
</ul>
37+
</ul>
38+
<ul id="add">
39+
<li class="smhead">Git add</li>
40+
<ul>
41+
<li class="txt"><span class="lblue">Git add</span> is how we stage the integration of our current code base into our current list of snapshots</li>
42+
</ul>
43+
</ul>
44+
<ul id="status">
45+
<li class="smhead">Git status</li>
46+
<ul>
47+
<li class="txt"><span class="lblue">Git status</span> allows us to see the changes we are going to make</li>
48+
</ul>
49+
</ul>
50+
</div>
51+
<div id="commitremoteadd">
52+
<ul id="commit">
53+
<li class="smhead">Git Commit</li>
54+
<ul>
55+
<li class="txt"><span class="lblue">Git commit</span>; finally we can commit those changes we added to our last snapshot giving us a new snapshot giving us a new snapshot of our code with whatever new changes were made</li>
56+
</ul>
57+
</ul>
58+
<ul id="remoteadd">
59+
<li class="smhead">Git Remote Add<li>
60+
<ul>
61+
<li class="txt"><span class="lblue">Git remote add</span> is used to set up an online repository where we can place all of our current code. This is where the outside world can see our code base</li>
62+
</ul>
63+
</ul>
64+
</div>
65+
<ul id="push">
66+
<li class="smhead">Git Push</li>
67+
<ul>
68+
<li class="txt"><span class="lblue">Git push</span> is how we get our code to GitHub, an excellent place to store all of our repositories. Other developers might look at our existing problems to see how we approached problems, pull down our code, and add new features, or even update our code base with features they wanted to add </li>
69+
</ul>
70+
</ul>
71+
</div>
72+
</div>
73+
<p id="footer"><b>You can learn more about Git and GitHub here: <a href="">GitHub Guides</a></b></p>
74+
</div>
75+
</body>
76+
</html>

‎internet/assignment_instructions.png

742 KB
Loading

‎internet/www-images.zip

-784 KB
Binary file not shown.

‎javascript_basics/assignment_instructions.png

949 KB
Loading

‎ninja_to_cat/assignment_instructions.png

291 KB
Loading

‎plotting_blocks/assignment_instructions.png

109 KB
Loading

‎plotting_blocks/plottingblocks_yh.zip

-1.87 KB
Binary file not shown.

‎pokedex/assignment_instructions.png

506 KB
Loading

‎pokedex.html ‎pokedex/pokedex.html

File renamed without changes.

‎pokemon/assignment_instructions.png

973 KB
Loading

‎pokemon.html ‎pokemon/pokemon.html

File renamed without changes.

‎portfolio/assignment_instructions.png

1.02 MB
Loading

‎portfolio/portfolio_assignment.png

-634 KB
Binary file not shown.

‎shapes/assignment_instructions.png

146 KB
Loading

‎users/assignment_instructions.png

142 KB
Loading

‎weather/assignment_instructions.png

209 KB
Loading

‎weather.html ‎weather/weather.html

File renamed without changes.

‎web_fun_exam/README.txt

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
This is the first exam taken by student at Coding Dojo.
2+
It is given at the end of the first week to assess a student’s knowledge on HTML and CSS.
3+
4+
While I cannot provide a screenshot of the exam instructions for your comparison, I can provide the grading and comments I received from my instructor after grading. You can find my rubric in this folder.

‎web_fun_exam/graded rubric.png

173 KB
Loading

0 commit comments

Comments
 (0)