created template for assignments page

webdesigndecal · Feb 14, 2024 · e927df0 · e927df0
commit e927df0
Show file tree

Hide file tree

Showing 63 changed files with 2,533 additions and 0 deletions.
diff --git a/assignments/hw1/.DS_Store b/assignments/hw1/.DS_Store
diff --git a/assignments/hw1/.idea/.gitignore b/assignments/hw1/.idea/.gitignore
diff --git a/assignments/hw1/.idea/hw1.iml b/assignments/hw1/.idea/hw1.iml
diff --git a/assignments/hw1/.idea/misc.xml b/assignments/hw1/.idea/misc.xml
diff --git a/assignments/hw1/.idea/modules.xml b/assignments/hw1/.idea/modules.xml
diff --git a/assignments/hw1/assets/.DS_Store b/assignments/hw1/assets/.DS_Store
diff --git a/assignments/hw1/assets/css/style.css b/assignments/hw1/assets/css/style.css
@@ -0,0 +1,141 @@
+body {
+    margin: 0px;
+    font-family: 'Karla';
+    background: #f7f5f2;
+    padding: 60px;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.img-scaled {
+    width: 100%;
+}
+
+.img-scaled-wh {
+    width: 100%;
+    height: 100%;
+}
+
+.clear {
+    clear: both;
+}
+
+* {
+    outline: none;
+}
+
+#data {
+    display: none;
+}
+
+#container {
+    width: 720px;
+    margin: 0px auto;
+    background: white;
+    box-shadow: 0px 0px 5px #edeae5;
+    border-radius: 2px;
+    position: relative;
+    padding: 30px 0px;
+}
+#header {
+    background: #78c272;
+    padding: 15px;
+    color: white;
+    width: 270px;
+}
+#header-caption-logo {
+    width: 20px;
+    float: left;
+}
+#header-caption-name {
+    float: left;
+    margin-left: 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 15px;
+}
+#header-caption {
+    margin-bottom: 6px;
+    opacity: 0.6;
+}
+#header-title {
+    font-size: 18px;
+    font-weight: 300;
+    float: left;
+}
+#header-due {
+    float: left;
+    font-size: 18px;
+    font-weight: 300;
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 2px solid rgba(255, 255, 255, 0.15);
+}
+.section {
+    margin: 30px 0px;
+    padding: 0px 30px;
+}
+#submission-header, .info-title {
+    text-align: left;
+    color: #78c272;
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 15px;
+}
+#submission-content, .info-content {
+    padding: 15px;
+    background: rgba(120, 194, 114, 0.1);
+    border-radius: 2px;
+    color: #4c5765;
+}
+.info-required {
+    font-size: 13px;
+    font-weight: 700;
+    opacity: 0.75;
+    margin-bottom: 10px;
+}
+.info-intro {
+    line-height: 24px;
+    font-size: 16px;
+    opacity: 0.75;
+}
+.info {
+    margin-bottom: 30px;
+}
+.body-header {
+    font-size: 24px;
+    font-weight: 700;
+    color: #78c272;
+}
+.body p {
+    line-height: 24px;
+}
+.body img {
+    width: 100%;
+}
+.body a {
+    color: #78c272;
+}
+.body li {
+    line-height: 24px;
+    padding-left: 15px;
+    padding-bottom: 5px;
+}
+.body {
+    color: #4c5765;
+}
+.body .caption {
+    opacity: 0.6;
+}
+#submission {
+    padding: 0px 30px;
+}
+#submission-content p, #submission-content li {
+    line-height: 24px;
+    opacity: 0.75;
+}
diff --git a/assignments/hw1/assets/img/example1.png b/assignments/hw1/assets/img/example1.png
diff --git a/assignments/hw1/assets/img/logo.png b/assignments/hw1/assets/img/logo.png
diff --git a/assignments/hw1/index.html b/assignments/hw1/index.html
@@ -0,0 +1,131 @@
+<html>
+
+<head>
+	<title>WDD Homework 1</title>
+	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
+	<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
+</head>
+
+<body>
+	<div id="container">
+		<div id="header">
+			<div id="header-caption">
+				<div id="header-caption-logo"><img class="img-scaled" src="assets/img/logo.png" /></div>
+				<div id="header-caption-name">Web Design DeCal</div>
+				<div class="clear"></div>
+			</div>
+			<div id="header-content">
+				<!-- ASSIGNMENT NAME -->
+				<div id="header-title">Homework 1</div>
+				<!-- DUE DATE -->
+				<div id="header-due">February 15th</div>
+				<div class="clear"></div>
+			</div>
+		</div>
+		<div class="section">
+			<div class="info">
+				<!-- ASSIGNMENT TITLE -->
+				<div class="info-title">1. Your First Website</div>
+				<div class="info-content">
+					<!-- REQUIRED TOOLS -->
+					<div class="info-required">Required Tool: Text Editor (We recommend VS Code)</div>
+					<!-- INTRODUCTION -->
+					<div class="info-intro">In the programming section, you learned about various HTML tags. In design
+						section, you learned about what makes a good website. Let's do a little more!</div>
+				</div>
+			</div>
+			<div class="body">
+				<p><strong>Before you begin</strong>, please sign up for the Ed page for this class
+					<!-- PIAZZA. UPDATE THIS EACH SEMESTER --> <a href="https://edstem.org/us/join/DcJQMN"
+						target="_blank">here</a>. Ed is where you can ask and answer questions about this class and web
+					design in general. It is also where a bunch of important annoucements about the class will be made!
+				</p>
+				<div class="body-header">Assignment</div>
+				<!-- CONTENT -->
+
+				<!-- Styled Tags; P, UL, LI, .caption, A, IMG-->
+				<!-- Add P Tags for each paragraph -->
+				<!-- Use UL LI Tags for each lists -->
+				<!-- Use P Tags with "caption" class for paragraph captions (60% opacity) -->
+				<!-- Use IMG Tags for images -->
+
+				<p class="caption"><strong>Note:</strong> Please review the <a
+						href="https://docs.google.com/presentation/d/18EcDKIO5l9D8qr30I7zJYWyVk1p4YUNY0lCJjX7i1hI/edit?usp=sharing"
+						target="_blank">lecture slides</a> before you go through this assignment.</p>
+				<p>In this assignment, You will be creating your first website as well as answering some questions on
+					design.</p>
+				<p>To start off, let's create a folder that will house all our files.</p>
+				<ol>
+					<li>Create a folder (call it whatever you want).</li>
+					<li>Now open up your code editor, create a new file and save it in that folder as
+						<strong>index.html</strong>. By default, a web browser will always open the index.html file in a
+						folder if there are multiple html files.</li>
+					<li>Go back into that folder and create another folder called 'assets'. To keep files organized, we
+						like to make a separate folder specifically for non-html content like images.</li>
+					<li>Within the assets folder, create another folder called 'img' and go place your favorite selfie
+						in that folder.</li>
+				</ol>
+				<p>Now that your workspace is all set up, you are ready to start making your very first website. If you
+					double click on the index.html file right now, it should open a blank page on your default browser
+					(we recommend Google Chrome). When you make changes to your code, you can refresh that page to see
+					the changes.</p>
+				<p>Now try doing the following steps. You'll notice that we encourage you to google things!</p>
+				<ol>
+					<li>Write your name in huge, bold text. <em>(Hint: look at the "Headings" slide)</em></li>
+					<li>On the next line, write your major and year in italic text. <em>(Hint: "Bold and italic text"
+							slide)</em></li>
+					<li>Add a paragraph about yourself. <em>(Hint: "Text" slide)</em></li>
+					<li>Create a bulleted list of your three favorite places to eat in Berkeley. <em>(Hint: "Lists"
+							slide)</em></li>
+					<li>Add a picture of yourself so we can recognize you in class! <em>(Hint: "Images" slide)</em></li>
+					<li>Add a link that, when clicked, directs you to the your favorite website. The text within the
+						link should be the name of the website. <em>(Hint: "Links" slide)</em></li>
+				</ol>
+
+				<p>
+					<strong>Some common troubleshooting:</strong>
+				<ul>
+					<li>Images not showing up? Make sure that in the img tag, you match the image name <em>exactly,
+							including capitalization</em>. .jpg and .JPG are not the same! We recommend keeping all
+						image file names in <strong>lowercase</strong> for consistency. Make sure image types are also
+						matched: .png and .jpg are not the same!</li>
+				</ul>
+				</p>
+				<p class="caption">If you are lost during this assignment, do not fret! Post to Ed or come to office
+					hours.</p>
+				<p>Your first website should look something like this:</p>
+				<img class="img-scaled" src="assets/img/example1.png" />
+				<h2>Part 2: Reading Responses</h2>
+				<p>In this part of the assignment, you will be reading <a
+						href="https://uxdesign.cc/how-to-develop-an-eye-for-design-c5a4c64bb26c" target="_blank">this
+						article</a> related to web design principles and responding to a few questions. The purpose of
+					this section is to prompt design thinking and awareness -- we are a design course, after all.</p>
+				<p>Please answer the following questions and add your responses to your index.html using <strong>a
+						list</strong> (Hint: 'ul' tag).</p>
+				<ol>
+					<li>What is something you learned from this article? (2-3 sentences)</li>
+					<li>What was your favorite part of this article? (2-3 sentences)</li>
+					<li>Copy and paste a quote you found compelling, interesting, or cool.</li>
+					<li>On a scale from 1 to 10, how much did you enjoy reading this article? If you scored below a
+						five, please briefly explain why.</li>
+				</ol>
+			</div>
+		</div>
+		<div id="submission">
+			<div id="submission-header">Submission</div>
+			<div id="submission-content">
+				<p>Submit your files to your GitHub Submission Repository by copying all the files into the hw1 folder
+					of your submission repository (replace the index.html originally in it).
+					In your terminal, from your GitHub Submission Repository, run the following Git commands:</p>
+				<ul>
+					<li>git add -A</li>
+					<li>git commit -m 'finished hw1'</li>
+					<li>git push</li>
+				</ul>
+				<p>This assignment is due <strong>Thursday, February 15th</strong> at <strong>6:30PM PST</strong>.</p>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/assignments/hw2/.DS_Store b/assignments/hw2/.DS_Store
diff --git a/assignments/hw2/hw2-starter.zip b/assignments/hw2/hw2-starter.zip
diff --git a/assignments/hw2/hw2/assets/css/style.css b/assignments/hw2/hw2/assets/css/style.css
@@ -0,0 +1,58 @@
+body {
+	font-family: 'Karla';
+	background: #edeae5;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	margin: 0px;
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+    color: rgba(0,0,0,0.5);
+    font-style: italic;
+    transition: 0.4s;
+}
+
+a:hover {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+div {
+	transition: linear 0.2s;
+}
+
+#container {
+    width: 480px;
+    height: 480px;
+    position: absolute;
+    top: calc(50% - 240px);
+    left: calc(50% - 240px);
+}
+.circle {
+    width: 60px;
+    height: 60px;
+    background: white;
+    display: inline-block;
+    margin-right: 30px;
+    border-radius: 50%;
+}
+.square {
+    width: 60px;
+    height: 60px;
+    background: white;
+    display: inline-block;
+    margin-right: 30px;
+}
+.row {
+    margin-bottom: 30px;
+}
+.green {
+    background: #78c272;
+}
+.fancy {
+    border: 3px inset rgba(74, 74, 74, 0.25);
+    width: 54px;
+    height: 54px;
+}