Skip to content

Commit b9048c7

Browse files
jschnapperjschnapper
committed
refresh old site
1 parent 168ccac commit b9048c7

File tree

106 files changed

+4596
-449
lines changed

Some content is hidden

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

106 files changed

+4596
-449
lines changed

‎assets/css/style.css‎

Lines changed: 7 additions & 446 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<meta name="author" content="Jarrod Schnapper">
66
<link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
7-
<link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400i,700" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif|Raleway:700" rel="stylesheet">
88
<link rel="icon" href="assets/img/logo.png">
99
<title>Jarrod Schnapper</title>
1010
</head>
1111
<body>
1212
<div class="header">
13-
<p>this section of Jarrod's website is currently under construction</p>
14-
<p>sorry :( </p>
13+
<p>Jarrod's website is currently under development</p>
14+
<p>check out his old site <a href="old_personal_site/index.html">here</a></p>
1515
</div>
1616
<div id="construction-container">
1717
<div id="z-container">

‎old_personal_site/about.html‎

Whitespace-only changes.

‎old_personal_site/article_cssAnimation.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="author" content="Jarrod Schnapper">
6+
<link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
7+
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif|Raleway:700" rel="stylesheet">
8+
<title>Jarrod Schnapper</title>
9+
</head>
10+
<body>
11+
<div id="page-container">
12+
<header id="article">
13+
<div id="intro">Lessons in CSS</div>
14+
<ul>
15+
<li class="description">An assignment I made for UC Berkeley's Web Design Course</li>
16+
</ul>
17+
</header>
18+
<div id="article-body">
19+
<div class="article-header">Purpose</div>
20+
<div class="article-text">
21+
<p>
22+
For programming, this assignment goes over key positioning methods and reinforces basic box-model terminology and techniques. Additionally, this assignment allowed students to practice concepts from previous lectures, such as using html tags and pseudo-selectors. For design, this assignment goes over font and color choices.
23+
</p>
24+
<p>Key Lessons:</p>
25+
<ul>
26+
<li>
27+
The differences between <code>absolute</code>, <code>relative</code>, and <code>fixed</code> positioning
28+
</li>
29+
<li>
30+
How to add background images and html image
31+
</li>
32+
<li>
33+
Using <code>padding</code> and <code>margin</code>
34+
</li>
35+
</ul>
36+
</div>
37+
<div class="article-header">Failures</div>
38+
<p>
39+
A discussion of teachable moments and how to improve
40+
</p>
41+
<ul>
42+
<li>
43+
The assignment was way too long and many students were not able to make it the checkpoint. We only have 1 hour for the assignment, so rather than cram a bunch of material in, focus on the necessary lessons of the week and how to implement them
44+
</li>
45+
<li>
46+
Because of how crucial and difficult positioning is to learn for beginners, it would be more beneficial to come up with simpe demonstrations of the relationship between the different methods
47+
</li>
48+
<li>
49+
Definitely make shorter activities
50+
</li>
51+
</ul>
52+
<div class="article-header">Failures</div>
53+
<p>
54+
A discussion of teachable moments and how to improve
55+
</p>
56+
<ul>
57+
<li>
58+
The assignment was way too long and many students were not able to make it the checkpoint. We only have 1 hour for the assignment, so rather than cram a bunch of material in, focus on the necessary lessons of the week and how to implement them
59+
</li>
60+
<li>
61+
Because of how crucial and difficult positioning is to learn for beginners, it would be more beneficial to come up with simpe demonstrations of the relationship between the different methods
62+
</li>
63+
<li>
64+
Definitely make shorter activities
65+
</li>
66+
</ul>
67+
68+
69+
70+

‎old_personal_site/article_positioning.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="author" content="Jarrod Schnapper">
6+
<link rel="stylesheet" type="text/css" href="assets/css/style.css"/>
7+
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,600|Raleway:700" rel="stylesheet">
8+
<title>Jarrod Schnapper</title>
9+
</head>
10+
<body>
11+
<div id="article-container">
12+
<a id="back-home" href="index.html">
13+
<div id="back-wrapper">
14+
<div id="back-arrow"></div>
15+
</div>
16+
</a>
17+
<header id="article">
18+
<div>
19+
<div id="intro">Lessons in CSS</div>
20+
<ul>
21+
<li class="description">An assignment I made for UC Berkeley's Web Design Course</li>
22+
<li class="description">Try it out: <a target="_blank" href="projects/positioning/instructions/instructions.html">lesson</a> and <a target="_blank" href="projects/positioning/solutions/answer.html">final product</a></li>
23+
</ul>
24+
</div>
25+
</header>
26+
<div id="article-body">
27+
<div class="large article-image-wrapper">
28+
<img src="assets/img/cssLessons.png">
29+
</div>
30+
<div class="article-header">Purpose</div>
31+
<p>
32+
For programming, this assignment goes over key positioning methods and reinforces basic box-model terminology and techniques. Additionally, this assignment allows students to practice concepts from previous lectures, such as using html tags and pseudo-selectors. For design, this assignment goes over font and color choices.
33+
</p>
34+
<p>Key Lessons:</p>
35+
<ul>
36+
<li>
37+
The differences between <code>absolute</code>, <code>relative</code>, and <code>fixed</code> positioning
38+
</li>
39+
<li>
40+
How to add background images and html image
41+
</li>
42+
<li>
43+
Using <code>padding</code> and <code>margin</code>
44+
</li>
45+
</ul>
46+
<div class="article-header">Failures</div>
47+
<p>
48+
A discussion of teachable moments and how to improve
49+
</p>
50+
<ul>
51+
<li>
52+
The assignment was way too long and many students were not able to make it the checkpoint. We only have 1 hour for the assignment, so rather than cram a bunch of material in, focus on the necessary lessons of the week and how to implement the material
53+
</li>
54+
<li>
55+
Because of how crucial and difficult positioning is to learn for beginners, it would be more beneficial to come up with simple demonstrations of the relationship between the different methods
56+
</li>
57+
<li>
58+
Definitely make shorter activities
59+
</li>
60+
</ul>
61+
<div class="article-header">Successes</div>
62+
<p>
63+
A discussion of what went well
64+
</p>
65+
<ul>
66+
<li>
67+
Despite the fact that it was too long, it was one of the most memorable in-class lab assignments (by class survey). When making assignments, give them some sort of theme and fun qualities so it isn't boring or stressful for people who are new to programming.
68+
</li>
69+
</ul>
70+
<div class="article-header">
71+
Try it
72+
</div>
73+
<p>
74+
Want to practice your positioning and box-model technique?
75+
</p>
76+
<p>
77+
Try out the <a target="_blank" href="projects/positioning/instructions/instructions.html">full assignment here</a>.
78+
</p>
79+
</div>
80+
</div>
81+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
82+
<script src="assets/js/script.js"></script>
83+
</body>
84+
</html>
85+
86+
87+
88+

‎old_personal_site/assets/css/construction.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/*general*/
2+
3+
body {
4+
margin: 0;
5+
font-family: 'IBM Plex Serif', serif;
6+
}
7+
8+
/*Under Construction*/
9+
10+
a {
11+
color: #59ABE3;
12+
cursor: pointer;
13+
text-decoration: none;
14+
}
15+
16+
a:hover {
17+
text-decoration: underline;
18+
}
19+
.header {
20+
font-size: 1em;
21+
position: relative;
22+
text-align: center;
23+
width: 100%;
24+
color: #2D2D2A;
25+
top: 10%;
26+
min-width: 612px;
27+
}
28+
29+
#construction-container {
30+
position: relative;
31+
width: 550px;
32+
height: 80%;
33+
margin: 0 auto;
34+
min-width: 218px;
35+
top:15%;
36+
}
37+
38+
#z-container {
39+
position: absolute;
40+
left: 424px;
41+
top: 18px;
42+
width: 40px;
43+
height: 150px;
44+
z-index: 3;
45+
text-align: center;
46+
}
47+
48+
.z {
49+
position: absolute;
50+
font-size: 36px;
51+
font-weight: 700;
52+
top: 100px;
53+
54+
}
55+
56+
.snoring {
57+
animation: snore 3s linear forwards;
58+
}
59+
60+
#img-contained {
61+
height: 250px;
62+
width: 550px;
63+
position: absolute;
64+
top: 50px;
65+
left: 50%;
66+
transform: translateX(-50%);
67+
}
68+
69+
#img-contained > img {
70+
height: 100%;
71+
width: 100%;
72+
object-fit: cover;
73+
}
74+
75+
76+
77+
78+
79+
/*ANIMATIONS*/
80+
81+
82+
@keyframes snore {
83+
0% {
84+
opacity: 1;
85+
font-size: 36px
86+
}
87+
100% {
88+
opacity: 0;
89+
font-size: 8px;
90+
transform: translateY(-80px);
91+
display: none;
92+
}
93+
}

0 commit comments

Comments
 (0)