Skip to content

Commit 1bd29be

Browse files
christinatruongchristinatruong
committed
Updated ex 9 & 10 files. Finished revising main lessons. Still to revise extra lessons.
1 parent d4cc22f commit 1bd29be

6 files changed

Lines changed: 324 additions & 62 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1539,15 +1539,16 @@ <h2>Class Exercise #7 - Positioning the Header &amp; Nav</h2>
15391539
</section>
15401540

15411541
<section class="slide" data-markdown>
1542-
##Class Exercise #8: Background Images
1542+
##Class Exercise #9: Background Images
15431543

1544-
So far, we've used `background` to add colours. We can also use it to add images. We've added images in the HTML using `img` but we can also set images as a background style using CSS.
1544+
So far, we've used `background` to add colours but it can also be used it to add images for presentation, not content.
15451545

15461546
```
15471547
background-image: url(path/to/file.jpg); /* longhand */
15481548
background: url(path/to/file.jpg);/* shorthand */
15491549
```
1550-
Since our CSS file is *inside* a folder, use `../` to go *up and out* of the folder to get to the image files. Let's add it to **index.html**. Create a `.home` declaration block so this image only displays on the homepage and spans the entire page. (There are a few to choose from in your images folder.)
1550+
1551+
Since our CSS file is *inside* of a **css** folder, use `../` to go *up and out* of the folder to link to the image files. Let's add it to **index.html**. Create a `.home` declaration block so this image only displays on the homepage and spans the entire page. (There are a few to choose from in your images folder.)
15511552

15521553
```
15531554
.home {
@@ -1571,15 +1572,15 @@ <h2>Class Exercise #7 - Positioning the Header &amp; Nav</h2>
15711572
```
15721573
</section>
15731574
<section class="slide" data-markdown>
1574-
##Background images (continued)
1575+
##Class Exercise #9: Background Images (continued)
15751576

15761577
The image is no longer repeating but it doesn't fit the space either. Your page should look similar to the below (unless your image is larger than your resolution). We'll need to add one more property to fix this.
15771578

15781579
![homepage background](framework/img/workshop/homepage-norepeat.png)
15791580
</section>
15801581

15811582
<section class="slide">
1582-
<h2>Class exercise #8: Background-size</h2>
1583+
<h2>Class Exercise #9: Background Images (continued)</h2>
15831584

15841585
<p>Thanks to CSS3, we can now change the size of a background image. </p>
15851586
<p><code>background-size</code> is the longhand property. To include it in the shorthand <code>background</code> property, it <em>must</em> be included after <code>background-position</code>, separated with the <code>/</code> character. </p>
@@ -1619,15 +1620,15 @@ <h2>Class exercise #8: Background-size</h2>
16191620
<li><a href="http://unsplash.com/">http://unsplash.com/</a></li>
16201621
</ul>
16211622

1622-
<p>Your page should now look similar to <a href="project/examples/exercise8-home.html">example 8</a>.</p>
1623+
<p>Your page should now look similar to <a href="project/examples/exercise9-home.html">example 9</a>.</p>
16231624

16241625
<div class="presenter-notes">
16251626
<p>You will probably be pressed for time at this point. Just explain what "cover" does and let them know there are other options available and there are additional resources at the bottom of this slide.</p>
16261627
</div>
16271628
</section>
16281629

16291630
<section class="slide" data-markdown>
1630-
##Forms
1631+
##Final Exercise: Forms!
16311632

16321633
Forms are used to capture information from a user. The information processing and form submission usually requires the use of a server-side language such as PHP, Ruby or Python. But there are different services available to help do the processing for us without writing any of these languages!
16331634

@@ -1644,9 +1645,10 @@ <h2>Class exercise #8: Background-size</h2>
16441645
</section>
16451646

16461647
<section class="slide">
1647-
<h2>Class Exercise #9 - Contact Form</h2>
1648+
<h2>Class Exercise #10 - Contact Form</h2>
16481649

1649-
<p>On your contact page, under the header, create a new <code>&lt;section&gt;</code> tag. Add the below markup <em>in between</em> the <code>section</code> element.</p>
1650+
<p>In <strong>contact.html</strong> under the header, a new <code>&lt;section&gt;</code> tag is required for the form content.</p>
1651+
<p>Add the below markup after the <code>&lt;header&gt;</code>.</p>
16501652

16511653
<pre><code class="xml">&lt;section&gt;
16521654
&lt;form class="contact-form" method="POST" action="" &gt;
@@ -1670,7 +1672,7 @@ <h2>Class Exercise #9 - Contact Form</h2>
16701672
&lt;/form&gt;
16711673
&lt;/section&gt;
16721674
</code></pre>
1673-
<p>Your contact page and form should look similar to <a href="project/examples/exercise9-contact.html">Example 9</a>.</p>
1675+
<p>Your contact page and form should look similar to <a href="project/examples/exercise10-contact.html">exercise10-contact.html</a>.</p>
16741676

16751677
<div class="presenter-notes">
16761678
<p>Give a general overview of what each from control is used for as you are adding in the code. There's further resources available in the homework/next steps section.</p>

‎project/examples/css/exercise10.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* GLOBAL STYLES
2+
-----------------------------------------*/
3+
html, body {
4+
height: 100%;
5+
}
6+
7+
/* apply a natural box layout model to all elements, but allowing components to change */
8+
html {
9+
box-sizing: border-box;
10+
}
11+
*, *:before, *:after {
12+
box-sizing: inherit;
13+
}
14+
15+
body {
16+
padding: 0;
17+
margin: 0;
18+
font-family: "Open Sans", sans-serif;
19+
color: #333;
20+
}
21+
h1 {
22+
font-family: "Nixie One", serif;
23+
}
24+
h1, h2 {
25+
font-weight: 300;
26+
text-transform: uppercase;
27+
margin: 0; /* removes default space */
28+
line-height: 1; /* tightens up the space between the headings */
29+
}
30+
a {
31+
color: #bf6d50;
32+
text-decoration: none;
33+
}
34+
header,
35+
section {
36+
padding: 20px 30px;
37+
}
38+
section {
39+
padding-top: 125px;
40+
}
41+
.highlight {
42+
color: #bf6d50;
43+
}
44+
45+
46+
/* HEADER
47+
-----------------------------------------*/
48+
header {
49+
position: fixed;
50+
top: 0;
51+
background: white;
52+
border-bottom: 1px solid #eee;
53+
width: 100%;
54+
}
55+
header h1 {
56+
font-size: 36px;
57+
}
58+
header h2 {
59+
font-size: 18px;
60+
}
61+
62+
/* Navigation */
63+
nav {
64+
position: absolute;
65+
right: 20px;
66+
top: 20px;
67+
}
68+
nav ul {
69+
list-style-type: none; /* removes bullets */
70+
margin: 0; /* removes default margin */
71+
padding: 0; /* removes default padding */
72+
}
73+
nav ul li {
74+
display: inline-block; /* gets the list items to line up side by side */
75+
}
76+
nav a {
77+
display: block; /* changes the element to block */
78+
padding: 5px 15px;
79+
text-transform: uppercase;
80+
}
81+
82+
/* HOME PAGE
83+
-----------------------------------------*/
84+
.home {
85+
background: url(../images/background-6.jpg) no-repeat 50%;
86+
background-size: cover;
87+
}
88+
.home header {
89+
position: static;
90+
background: transparent;
91+
border-bottom: none;
92+
text-align: center;
93+
padding-top: 100px;
94+
}
95+
.home header h1 {
96+
font-size: 120px;
97+
}
98+
.home header h2 {
99+
font-size: 40px;
100+
}
101+
102+
103+
/* ABOUT PAGE
104+
-----------------------------------------*/
105+
.profile-img {
106+
float: left;
107+
margin-right: 20px;
108+
}
109+
blockquote {
110+
clear: both; /* clears the float and returns page back to normal stacking order */
111+
text-align: center;
112+
padding-top: 20px;
113+
}
114+
blockquote p {
115+
font-family: "Pacifico", cursive;
116+
font-size: 25px;
117+
}

‎project/examples/css/exercise9.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* GLOBAL STYLES
2+
-----------------------------------------*/
3+
html, body {
4+
height: 100%;
5+
}
6+
7+
/* apply a natural box layout model to all elements, but allowing components to change */
8+
html {
9+
box-sizing: border-box;
10+
}
11+
*, *:before, *:after {
12+
box-sizing: inherit;
13+
}
14+
15+
body {
16+
padding: 0;
17+
margin: 0;
18+
font-family: "Open Sans", sans-serif;
19+
color: #333;
20+
}
21+
h1 {
22+
font-family: "Nixie One", serif;
23+
}
24+
h1, h2 {
25+
font-weight: 300;
26+
text-transform: uppercase;
27+
margin: 0; /* removes default space */
28+
line-height: 1; /* tightens up the space between the headings */
29+
}
30+
a {
31+
color: #bf6d50;
32+
text-decoration: none;
33+
}
34+
header,
35+
section {
36+
padding: 20px 30px;
37+
}
38+
section {
39+
padding-top: 125px;
40+
}
41+
.highlight {
42+
color: #bf6d50;
43+
}
44+
45+
46+
/* HEADER
47+
-----------------------------------------*/
48+
header {
49+
position: fixed;
50+
top: 0;
51+
background: white;
52+
border-bottom: 1px solid #eee;
53+
width: 100%;
54+
}
55+
header h1 {
56+
font-size: 36px;
57+
}
58+
header h2 {
59+
font-size: 18px;
60+
}
61+
62+
/* Navigation */
63+
nav {
64+
position: absolute;
65+
right: 20px;
66+
top: 20px;
67+
}
68+
nav ul {
69+
list-style-type: none; /* removes bullets */
70+
margin: 0; /* removes default margin */
71+
padding: 0; /* removes default padding */
72+
}
73+
nav ul li {
74+
display: inline-block; /* gets the list items to line up side by side */
75+
}
76+
nav a {
77+
display: block; /* changes the element to block */
78+
padding: 5px 15px;
79+
text-transform: uppercase;
80+
}
81+
82+
/* HOME PAGE
83+
-----------------------------------------*/
84+
.home {
85+
background: url(../images/background-6.jpg) no-repeat 50%;
86+
background-size: cover;
87+
}
88+
.home header {
89+
position: static;
90+
background: transparent;
91+
border-bottom: none;
92+
text-align: center;
93+
padding-top: 100px;
94+
}
95+
.home header h1 {
96+
font-size: 120px;
97+
}
98+
.home header h2 {
99+
font-size: 40px;
100+
}
101+
102+
103+
/* ABOUT PAGE
104+
-----------------------------------------*/
105+
.profile-img {
106+
float: left;
107+
margin-right: 20px;
108+
}
109+
blockquote {
110+
clear: both; /* clears the float and returns page back to normal stacking order */
111+
text-align: center;
112+
padding-top: 20px;
113+
}
114+
blockquote p {
115+
font-family: "Pacifico", cursive;
116+
font-size: 25px;
117+
}

‎project/examples/exercise10-contact.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Jane Smith | Contact Me</title>
6+
<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans:300|Pacifico' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="css/exercise10.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1><span class="highlight">Jane</span>Smith</h1>
12+
<h2>Web Developer + City Girl</h2>
13+
14+
<nav>
15+
<ul>
16+
<li><a href="#">Home</a></li>
17+
<li><a href="#">About</a></li>
18+
<li><a href="#">Contact</a></li>
19+
</ul>
20+
</nav>
21+
</header>
22+
23+
<section>
24+
<form class="contact-form" method="POST" action="" >
25+
<h2>Let's meet for coffee!</h2>
26+
27+
<p>Send me a message at <a href="mailto:hello@your-email.com">hello@your-email.com</a>,
28+
use the form below or say "hi!" on one of my social networks.</p>
29+
<p>
30+
<label for="name">Name</label>
31+
<input id="name" type="text" name="name">
32+
</p>
33+
<p>
34+
<label for="email">Email</label>
35+
<input id="email" type="email" name="replyto">
36+
</p>
37+
<p>
38+
<label for="message">Message</label>
39+
<textarea id="message" name="message"></textarea>
40+
</p>
41+
<input type="submit" value="SEND">
42+
</form>
43+
</section>
44+
45+
<footer>
46+
<p>&#169; 2014 by <span class="highlight">jane</span>smith</p>
47+
</footer>
48+
</body>
49+
</html>
50+

0 commit comments

Comments
 (0)