forked from Roenok/gdi-core-html-css
/
homework.html
107 lines (98 loc) · 6.12 KB
/
homework.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Intro to HTML Homework</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/homework.css">
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<a href="#main-content" id="skipnav">Skip to main content</a>
<header>
<div class="container">
<h1>Intro to HTML Homework</h1>
</div>
</header>
<div class="container main">
<nav class="sidebar span3">
<ul>
<li><a href="#class1">Class 1</a></li>
<li><a href="#class2">Class 2</a></li>
<li><a href="#class3">Class 3</a></li>
</ul>
</nav>
<article id="main-content" tabindex="-1" class="span9">
<section>
<p>Welcome! These are homework exercises to accompany the <a href="index.html">Intro to HTML Curriculum</a></p>
</section>
<section>
<h2 id="class1">Class 1</h2>
<p>For this week's homework assignment, create a website to show off your new skills.</p>
<p><strong>Core HTML5 skills you should be able to include on your page(s):</strong></p>
<ol>
<li>A <em>nav bar</em> with a few links that either navigate to other pages or act as anchor tags.</li>
<li>A <em>heading</em> to signal something important or declare a new section/paragraph.</li>
<li>A couple <em>paragraphs</em> describing the amazing things you want to share. Remember to use <em>emphasis</em> on key words!</li>
<li>A <em>list</em> of key things to know about something in your paragraph. Why not do an ordered list and unordered list?</li>
<li>An <em>image</em> of something relevant and visually appealing. You can store your image as an asset in your project folder or link back to the source on the web. The link should be clickable, but the image doesn't need to be.</li>
<li>A <em>footer</em> at the bottom of the page declaring your copyright on such a wonderful write-up, and make sure you use the copyright <em>symbol!</em> </li>
<li>Your page should validate in this at this link: <a href="http://validator.w3.org/#validate_by_input" title="W3 Validator" target="_blank">W3 Validator</a>.</li>
<li>Keep your code <a href="https://www.smashingmagazine.com/2013/02/using-white-space-for-readability-in-html-and-css/" targe="_blank" title="Readability in HTML and CSS">readabable and maintanable</a> for your future self and future contributors.</li>
</ol>
<p>You can always check the <a href="class1.html">Class 1 slides</a> for help.</p>
</section>
<section>
<h2 id="class2">Class 2</h2>
<p>For this week's homework assignment, we will style our homework1.html file with a new homework2.css file.</p>
<p><strong>Here is what I would like to see at minimum on each lovely page:</strong></p>
<ol>
<li>Create a style sheet and link to it from your HTML</li>
<li>I like borders on images, add borders to all images you have. (Hint: border properties look like this 'border: 1px solid black;'.) Experiment!</li>
<li>Your Headings should be in Georgia font.</li>
<li>Your paragraphs should be in Helvetica.</li>
<li>Footers are probably meant to be centered.</li>
<li>Extra points for finding a nice background image.
<br><em>Hint: you're going to want to use the url() function to set up a background. If your text becomes hard to read, extra EXTRA points for setting a background color on your text-based elements.</em></li>
<li>Center those images using CSS!</li>
<li>Try to make your borders have rounded corners. Google a bit. CSS3!</li>
<li>Your page should still validate in this at this link: <a href="http://validator.w3.org/#validate_by_input" title="W3 Validator" target="_blank">W3 Validator</a>.</li>
</ol>
<p>You can always check the <a href="class2.html">Class 2 slides</a> for help.</p>
</section>
<section>
<h2 id="class3">Class 3</h2>
<p>For this week's homework, we are going to use advanced CSS to style our homework1.html. Save your homework2.css file as homework3.css and have at it!</p>
<p><strong>Here are this week's homework activities:</strong></p>
<ol>
<li>Create several divs of various widths, heights, and colors. Use margin to push them around the page.</li>
<li>Make some of the <div>'s into links (anchors). Then, make the background color of the div change on mouse over.</li>
<li>Try to position some of the <div>'s relative-ly in a vertical line down the middle of the page.</li>
<li>Create a class that you can use with <span> tags to make certain text twice the default size.</li>
<li>Extra credit: Use images as links and change them on mouseover. This one is challenging BUT VERY FUN! Try searching fro "Turn links into images CSS".</li>
</ol>
<p>You can always check the <a href="class3.html">Class 3 slides</a> for help.</p>
</section>
</article>
<aside class="span12 break clear">
<h2>References</h2>
<ul>
<li><a href="index.html" target="_blank">Class slides</a></li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/html-css" target="_blank">Khan Academy - Intro to HTML/CSS</a></li>
<li><a href="https://www.codecademy.com/learn/web" target="_blank">Code Academy - HTML & CSS</a></li>
</ul>
</aside>
</div>
<footer>
<div class="container">
<p>Homework ~ Intro to HTML/CSS ~ Girl Develop It
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a></p>
</div>
</footer>
</body>
</html>