Skip to content

Commit f5b3938

Browse files
author
Pearl Chen
committed
Renamed "img" folders in exercises to be "images" for clarity.
Also included a reference website for lunch time exercise. And fixed a few typos/unclear areas in the slides.
1 parent 7539015 commit f5b3938

File tree

26 files changed

+113
-66
lines changed

26 files changed

+113
-66
lines changed

‎exercises/2_WORKING_WITH_IMAGES/img/images.html renamed to ‎exercises/2_WORKING_WITH_IMAGES/images/images.html

File renamed without changes.

‎exercises/3_CSS/img/llc.png renamed to ‎exercises/3_CSS/images/llc.png

File renamed without changes.

‎exercises/3_CSS/img/pearl_avatar.png renamed to ‎exercises/3_CSS/images/pearl_avatar.png

File renamed without changes.

‎exercises/3_CSS/index-reference-final.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Fun</title>
5+
<style>
6+
7+
body {
8+
background-color: gray;
9+
color: white;
10+
font-family: Helvetica, Verdana, Arial, sans-serif;
11+
}
12+
13+
h1 {
14+
font-family: Courier;
15+
font-size: 25px;
16+
font-weight: normal;
17+
}
18+
19+
h2 {
20+
font-family: Courier;
21+
font-size: 22px;
22+
font-weight: normal;
23+
}
24+
25+
</style>
26+
</head>
27+
<body>
28+
<h1>CSS with Ladies Learning Code</h1>
29+
<img src="images/llc.png" width="650" height="300" alt="LLC Logo" />
30+
<h2>About me</h2>
31+
<img src="images/pearl_avatar.png" width="72" height="72" alt="Pearl Chen's Twitter avatar" />
32+
<p>My name is Pearl Chen. I like robots and kittens and ice cream.</p>
33+
<p>My website is <a href="http://karma-laboratory.com">karma-laboratory.com</a>.</p>
34+
</body>
35+
</html>

‎exercises/3_CSS/index-reference.html

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎exercises/3_CSS/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
</head>
66
<body>
77
<h1>CSS with Ladies Learning Code</h1>
8-
<img src="img/llc.png" width="650" height="300" alt="LLC Logo" />
8+
<img src="images/llc.png" width="650" height="300" alt="LLC Logo" />
99
<h2>About me</h2>
10-
<img src="img/pearl_avatar.png" width="72" height="72" alt="Pearl Chen's Twitter avatar" />
10+
<img src="images/pearl_avatar.png" width="72" height="72" alt="Pearl Chen's Twitter avatar" />
1111
<p>My name is Pearl Chen. I like robots and kittens and ice cream.</p>
1212
<p>My website is <a href="http://karma-laboratory.com">karma-laboratory.com</a>.</p>
1313
</body>

‎exercises/website-reference/about.html renamed to ‎exercises/website-reference-final/about.html

File renamed without changes.

‎exercises/website-reference/contact.html renamed to ‎exercises/website-reference-final/contact.html

File renamed without changes.

‎exercises/website-reference/img/llc.gif renamed to ‎exercises/website-reference-final/images/llc.gif

File renamed without changes.

‎exercises/website-reference/img/llc.jpg renamed to ‎exercises/website-reference-final/images/llc.jpg

File renamed without changes.

‎exercises/website-reference/img/llc.png renamed to ‎exercises/website-reference-final/images/llc.png

File renamed without changes.

‎exercises/website-reference/index.html renamed to ‎exercises/website-reference-final/index.html

File renamed without changes.

‎exercises/website-reference/styles.css renamed to ‎exercises/website-reference-final/styles.css

File renamed without changes.

‎exercises/website-reference-linking/about.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>About</title>
5+
</head>
6+
<body>
7+
8+
<nav>
9+
<a href="index.html">Home</a>
10+
<a href="about.html">About</a>
11+
<a href="contact.html">Contact</a>
12+
</nav>
13+
14+
<p>This is my About page.</p>
15+
16+
<img src="img/llc.jpg" width="655" height="300" alt="LLC jpeg" />
17+
18+
</body>
19+
</html>

‎exercises/website-reference-linking/contact.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Contact</title>
5+
</head>
6+
<body>
7+
8+
<nav>
9+
<a href="index.html">Home</a>
10+
<a href="about.html">About</a>
11+
<a href="contact.html">Contact</a>
12+
</nav>
13+
14+
<p>This is my Contact page.</p>
15+
16+
<img src="img/llc.png" width="655" height="300" alt="LLC png" />
17+
18+
</body>
19+
</html>

‎exercises/website/img/llc.gif renamed to ‎exercises/website-reference-linking/images/llc.gif

File renamed without changes.

‎exercises/website/img/llc.jpg renamed to ‎exercises/website-reference-linking/images/llc.jpg

File renamed without changes.

‎exercises/website/img/llc.png renamed to ‎exercises/website-reference-linking/images/llc.png

File renamed without changes.

‎exercises/website-reference-linking/img/llc.gif

14.4 KB
Loading

‎exercises/website-reference-linking/img/llc.jpg

19.9 KB
Loading

‎exercises/website-reference-linking/img/llc.png

34.7 KB
Loading

‎exercises/website-reference-linking/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Homepage</title>
5+
</head>
6+
<body>
7+
8+
<nav>
9+
<a href="index.html">Home</a>
10+
<a href="about.html">About</a>
11+
<a href="contact.html">Contact</a>
12+
</nav>
13+
14+
<p>This is my homepage.</p>
15+
16+
<img src="img/llc.gif" width="655" height="300" alt="LLC gif" />
17+
18+
</body>
19+
</html>

‎exercises/website/images/llc.gif

14.4 KB
Loading

‎exercises/website/images/llc.jpg

19.9 KB
Loading

‎exercises/website/images/llc.png

34.7 KB
Loading

‎index.html

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,9 @@ <h2>2. Code Editor</h2>
134134
<p>Although you could write code in Notepad or TextEdit, choose a text editor with code colour highlighting and other helpful features.</p>
135135
<p>There are many, <em>many</em> free and paid options. I recommend this one that's free to evaluate:</p>
136136
<div class="centered contains_sidebyside_icons">
137-
<div class="centered contains_sidebyside_icons">
138-
<a href="http://www.sublimetext.com" target="_blank"><img src="assets/SublimeTextIcon.jpg" width="125" height="125" alt="Sublime Text 2" /></a>
139-
<br />
140-
<a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a>
141-
</div>
137+
<a href="http://www.sublimetext.com" target="_blank"><img src="assets/SublimeTextIcon.jpg" width="125" height="125" alt="Sublime Text 2" /></a>
138+
<br />
139+
<a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a>
142140
</div>
143141
<br clear="all" />
144142
</article>
@@ -741,7 +739,7 @@ <h2>Working with images <span style="font-size: 22px;">(Group exercise - Part 2)
741739
<p>It's based on using the html file that you're working on as the starting point to find your image source.</p>
742740
<p>Right now, <code>llc.gif</code> in the <strong>same folder</strong> as <code>index.html</code>.</p>
743741
<ol class="spacey_list" start="2">
744-
<li>Open the <a href="exercises/2_WORKING_WITH_IMAGES/img/images.html" target="_blank"><code>images.html</code></a> file in the <code>img</code> folder in Sublime Text.</li>
742+
<li>Open the <a href="exercises/2_WORKING_WITH_IMAGES/images/images.html" target="_blank"><code>images.html</code></a> file in the <code>img</code> folder in Sublime Text.</li>
745743
<li>Click on the above link to also view <code>images.html</code> in Chrome. </li>
746744
<li>Note that there's already an <code>img</code> tag in <code>images.html</code> trying to embed <code>llc.gif</code>.</li>
747745
</ol>
@@ -770,17 +768,17 @@ <h2>Working with images <span style="font-size: 22px;">(Group exercise - Part 3)
770768
<h2>Working with images <span style="font-size: 22px;">(Group exercise - Part 4)</span></h2>
771769
<p>However, it's best practice to organize your images into its own folder to keep your website's file structure tidy.</p>
772770
<p class="sidenote">We tend to also organize JavaScript files into their own "js" folder and CSS files into their own "css" folder.</p>
773-
<p>So let's <strong>move all of our images into the <code>img</code> folder</strong> of <code>2_WORKING_WITH_IMAGES</code>.</p>
771+
<p>So let's <strong>move all of our images into the <code>images</code> folder</strong> of <code>2_WORKING_WITH_IMAGES</code>.</p>
774772
<p>Uh oh! Now our image will be broken in <code>index.html</code> since the image is no longer in the same folder. Let's fix that...</p>
775773
</article>
776774

777775
<!-- SLIDE: HTML -->
778776
<article class='slide slide-list'>
779777
<h2>Working with images <span style="font-size: 22px;">(Group exercise - Part 5)</span></h2>
780778
<p>To write a <span class="keyword">relative path</span> that goes <strong><em>into</em></strong> a folder, start path with the <strong>folder name</strong> followed by a backslash (<code>/</code>).</p>
781-
<pre class="prettyprint">&lt;img src="<strong>img/</strong>llc.gif" /&gt;</pre>
779+
<pre class="prettyprint">&lt;img src="<strong>images/</strong>llc.gif" /&gt;</pre>
782780
<ol class="spacey_list">
783-
<li>Return to <code>index.html</code> and add <code>img/</code> infront of <code>llc.gif</code>.</li>
781+
<li>Return to <code>index.html</code> and add <code>images/</code> infront of <code>llc.gif</code>.</li>
784782
</ol>
785783
<br /><br /><br />
786784
<hr />
@@ -791,7 +789,7 @@ <h2>Working with images <span style="font-size: 22px;">(Group exercise - Part 5)
791789
<!--
792790
Bonus: Give this file structure? How would you include the image?
793791
<p class="sidenote">Transvering <em>over</em> to a parallel folder level would be:</p>
794-
<pre>src="../folder/img/llc.gif"</pre>
792+
<pre>src="../folder/images/llc.gif"</pre>
795793
-->
796794

797795
<!-- SLIDE: HTML -->
@@ -1010,14 +1008,14 @@ <h2>CSS selectors and properties</h2>
10101008
<h2>Changing the page's background colour</h2>
10111009
<p>View <code><a href="exercises/3_CSS/index.html" target="_blank">exercises/3_CSS/index.html</a></code> in your browser. Notice how we're using a transparent PNG so it's hard to read all the white letters on a white background.</p>
10121010
<p>Let's add a <code>&lt;style&gt;</code> tag between the <code>&lt;head&gt;</code>. Then add this:</p>
1013-
<pre>body { background: gray; }</pre>
1011+
<pre>body { background-color: gray; }</pre>
10141012
</article>
10151013

10161014
<!-- SLIDE: CSS -->
10171015
<article class='slide slide-list'>
10181016
<h2>Changing the font colour</h2>
10191017
<p>Now the text is a bit hard to read on the gray background. Because the <code>&lt;body&gt;</code> tag is the highest possible visible HTML tag, the <code>body</code> selector will also allow us to target the font color on the <em>entire</em> page.</p>
1020-
<pre>body { background: gray; <strong>color: white;</strong> }</pre>
1018+
<pre>body { background-color: gray; <strong>color: white;</strong> }</pre>
10211019
</article>
10221020

10231021
<!-- SLIDE: CSS -->
@@ -1040,7 +1038,7 @@ <h2>Changing the font family</h2>
10401038
<article class='slide slide-list'>
10411039
<h2>Changing the font family</h2>
10421040
<p>Not all fonts are installed on all computers so it's recommended that you use a list of fonts. If the first font in the list isn't available, it will try to use the next.</p>
1043-
<pre>body { background: gray; color: white; <strong>font-family: Helvetica, Verdana, Arial, sans-serif;</strong> }</pre>
1041+
<pre>body { background-color: gray; color: white; <strong>font-family: Helvetica, Verdana, Arial, sans-serif;</strong> }</pre>
10441042
<p class="sidenote">(Notice how the font-family for the headers are still Courier? That's the "cascading" part of Cascading Style Sheets in action. Inline styles take precedence, then innermost tags, then outer tags.)</p>
10451043
</article>
10461044

@@ -1081,7 +1079,7 @@ <h2>Formatting CSS</h2>
10811079
&lt;style&gt;
10821080

10831081
body {
1084-
background: gray;
1082+
background-color: gray;
10851083
color: white;
10861084
font-family: Helvetica, Verdana, Arial, sans-serif;
10871085
}
@@ -1678,12 +1676,12 @@ <h2>Assigning widths</h2>
16781676
<p>Let's go ahead and set the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> to be 960 pixels wide. We'll add a gray border too, so we can see what's going on.</p>
16791677
<pre>
16801678
header {
1681-
width: 960px;
1679+
<strong>width: 960px;</strong>
16821680
border: 1px solid gray;
16831681
}
16841682

16851683
footer {
1686-
width: 960px;
1684+
<strong>width: 960px;</strong>
16871685
border: 1px solid gray;
16881686
}
16891687
</pre>
@@ -1692,17 +1690,17 @@ <h2>Assigning widths</h2>
16921690
<!-- SLIDE: CSS -->
16931691
<article class='slide slide-list'>
16941692
<h2>Assigning widths</h2>
1695-
<p>If our site is 960px wide, we need to ensure that our columns don't exceed 960 - <strong>including margins!</strong> (e.g. 540 + 20 + 300 = 960)</p>
1693+
<p>If our site is 960px wide, we need to ensure that our columns don't exceed 960 - <strong>including margins!</strong> (e.g. 640 + 20 + 300 = 960)</p>
16961694
<pre>
16971695
section {
1698-
width: 560px;
1696+
<strong>width: 640px;</strong>
16991697
padding: 30px;
17001698
border: 1px solid gray;
17011699
}
17021700

17031701
aside {
1704-
margin-left: 20px;
1705-
width: 300px;
1702+
<strong>margin-left: 20px;</strong>
1703+
<strong>width: 300px;</strong>
17061704
border: 1px solid gray;
17071705
}
17081706
</pre>
@@ -1755,7 +1753,7 @@ <h2>Clearing floats</h2>
17551753
<hr />
17561754
<p class="sidenote">If the elements that are floating are enclosed in another container, you can you apply <code>overflow:auto</code> to the parent container:</p>
17571755
<pre>nav {
1758-
overflow: auto;
1756+
<strong>overflow: auto;</strong>
17591757
}</pre>
17601758

17611759
<p class="sidenote">Another way (when all else fails) is via a line break tag with a clear attribute: <code>&lt;br clear="all" /&gt;</code></p>

0 commit comments

Comments
 (0)