You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<pclass="centered sidenote">(This relationship is often referred to using the terms "parent" and "child".)</p>
363
+
364
+
<pclass="centered sidenote"><strong>The innermost tag must be closed before trying to open up a new tag.</strong><br/>
365
+
This would be incorrect: <html><head><title></html></head></title> </p>
360
366
</article>
361
367
362
368
<!-- SLIDE: HTML -->
@@ -505,6 +511,7 @@ <h2>Tags with attributes</h2>
505
511
<ul>
506
512
<li><code>href</code> is the <em>attribute</em></li>
507
513
<li><code>http://ladieslearningcode.com</code> is the <em>value</em> of that attribute</li>
514
+
<li>values are typically surrounded by <em>single or double quotes</em> since occassionally values may contain spaces.</li>
508
515
</ul>
509
516
</article>
510
517
@@ -538,7 +545,10 @@ <h2>Working with images</h2>
538
545
<p>In the <code>exercises/2_WORKING_WITH_IMAGES</code> folder, there's a <code>img</code> folder. It's best practice to organize your images into its own folder.</p>
539
546
<p>Since the image is <em>not</em> in the same folder as <code>index.html</code>, if you wanted to refer to the image you would need to use a <spanclass="keyword">relative path</span>.</p>
<pclass="sidenote">The opposite of this (going <em>up</em> a folder level) would be: <code>src="../img/llc.gif"</code></p>
548
+
<pclass="sidenote">The opposite of this (going <em>up</em> a folder level) would be:</p>
549
+
<pre>src="../img/llc.gif"</pre>
550
+
<pclass="sidenote">Transvering <em>over</em> to a parallel folder level would be:</p>
551
+
<pre>src="../folder/img/llc.gif"</pre>
542
552
</article>
543
553
544
554
<!-- SLIDE: HTML -->
@@ -655,7 +665,7 @@ <h2>Getting ready for Exercise #3</h2>
655
665
<li>What's the <strong>very first line</strong> we need to type?</li>
656
666
<li>What <strong>three</strong> HTML tags should every website have?</li>
657
667
<li>How do I update the browser tab with a descriptive tab name?</li>
658
-
<li>In between which tag do I paste this code so it's <strong>visible to the user</strong></li>
668
+
<li>In between which tag do I paste this code so it's <strong>visible to the user</strong>?</li>
659
669
</ul>
660
670
</article>
661
671
@@ -745,6 +755,7 @@ <h1>Welcome!</h1>
745
755
746
756
<h1>Social Media</h1>
747
757
<p>FollowmeonTwitter!</p>
758
+
748
759
<style>
749
760
h1 {background-color: black;color: white;}
750
761
p {font-size: 18apx;}
@@ -812,7 +823,7 @@ <h2>Changing the font family</h2>
812
823
<h2>Changing the font family</h2>
813
824
<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>
<p>(Notice how the font-family for the headers are still Courier?)</p>
826
+
<pclass="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>
816
827
</article>
817
828
818
829
<!-- SLIDE: CSS -->
@@ -828,7 +839,7 @@ <h2>Changing the font size</h2>
828
839
<p>Headers have default font-sizes defined by the browser. Let's override them. </p>
<pclass="sidenote"><ahref="http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/" target="_blank">Click here for more info on font unit sizes.</a></p>
842
+
<pclass="sidenote">(When you've got more time, read <ahref="http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/" target="_blank">this article</a> for more info on font unit sizes.</p>
832
843
</article>
833
844
834
845
<!-- SLIDE: CSS -->
@@ -995,6 +1006,7 @@ <h1>Header</h1>
995
1006
<div>This is text above the header.</div>
996
1007
<h1>Header</h1>
997
1008
<div>This is text below the header.</div>
1009
+
998
1010
<style>
999
1011
h1 {
1000
1012
font-family: Courier;
@@ -1023,6 +1035,7 @@ <h1>Header</h1>
1023
1035
<div>This is text above the header.</div>
1024
1036
<h1>Header</h1>
1025
1037
<div>This is text below the header.</div>
1038
+
1026
1039
<style>
1027
1040
h1 {
1028
1041
font-family: Courier;
@@ -1047,6 +1060,7 @@ <h1>Header</h1>
1047
1060
<scripttype='coder-solution'><div>This is text above the header.</div>
1048
1061
<h1>Header</h1>
1049
1062
<div>This is text below the header.</div>
1063
+
1050
1064
<style>
1051
1065
h1{
1052
1066
font-family: Courier;
@@ -1126,16 +1140,16 @@ <h2>Assigning widths</h2>
1126
1140
<!-- SLIDE: CSS -->
1127
1141
<articleclass='slide slide-list'>
1128
1142
<h2>Assigning widths</h2>
1129
-
<p>If our site is 960px wide, then we need to ensure that our columns don't add up to a width greater than 960 - <strong>INCLUDING margins and paddings!</strong>.</p>
1130
-
<p><strong><ahref="http://paulirish.com/2012/box-sizing-border-box-ftw/" target="_blank">PRO TIP</a>:</strong> Use the box-sizing property for every website you make to make sure your math adds up.</p>
1143
+
<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 + 30 + 290 = 960)</p>
1131
1144
<pre>
1132
1145
section {
1133
1146
width: 560px;
1134
1147
border: 1px solid gray;
1135
1148
}
1136
1149
1137
1150
aside {
1138
-
width: 400px;
1151
+
margin-left: 30px;
1152
+
width: 290px;
1139
1153
border: 1px solid gray;
1140
1154
}
1141
1155
@@ -1146,6 +1160,7 @@ <h2>Assigning widths</h2>
1146
1160
box-sizing: border-box;
1147
1161
}</strong>
1148
1162
</pre>
1163
+
<pclass="sidenote"><strong>PRO TIP:</strong> Historically, padding wrecked havoc on our math. To avoid headaches, use the <ahref="http://paulirish.com/2012/box-sizing-border-box-ftw/" target="_blank">box-sizing property</a> for every website you make to make sure your math adds up.</p>
1149
1164
</article>
1150
1165
1151
1166
<!-- SLIDE: CSS -->
@@ -1161,7 +1176,8 @@ <h2>Getting columns to be side-by-side</h2>
1161
1176
}
1162
1177
1163
1178
aside {
1164
-
width: 400px;
1179
+
margin-left: 30px;
1180
+
width: 290px;
1165
1181
border: 1px solid gray;
1166
1182
<strong>float: left;</strong>
1167
1183
}
@@ -1171,7 +1187,6 @@ <h2>Getting columns to be side-by-side</h2>
1171
1187
<!-- SLIDE: CSS -->
1172
1188
<articleclass='slide slide-list'>
1173
1189
<h2>Clearing floats</h2>
1174
-
<div>
1175
1190
<p>You may notice that floats have the ability to affect the rest of the webpage in unexpected ways. It's important to always clear your floats.</p>
1176
1191
<p>One way is to use the <code>clear</code> property on an element that comes <em>directly</em> after the containers that are floating. Values can be <code>left</code>, <code>right</code>, or <code>both</code>.</p>
1177
1192
<pre>
@@ -1181,10 +1196,13 @@ <h2>Clearing floats</h2>
1181
1196
<strong>clear: both;</strong>
1182
1197
}
1183
1198
</pre>
1199
+
<p>If the elements that are floating are enclosed in another container, you can you apply <code>overflow:auto</code> to the parent container:</p>
1200
+
<pre>nav {
1201
+
overflow: auto;
1202
+
}</pre>
1184
1203
1185
-
<p>Another way is via a line break tag with a clear attribute:</p>
1186
-
<pre><br clear="all" /></pre>
1187
-
</div>
1204
+
<pclass="sidenote">Another way (when all else fails) is via a line break tag with a clear attribute: <code><br clear="all" /></code></p>
1205
+
1188
1206
</article>
1189
1207
1190
1208
<!-- SLIDE: CSS -->
@@ -1270,6 +1288,10 @@ <h2>CSS classes</h2>
1270
1288
float: left;
1271
1289
margin-right: 20px;
1272
1290
}
1291
+
1292
+
nav {
1293
+
overflow: auto; /* clear floats */
1294
+
}
1273
1295
</style>
1274
1296
</pre>
1275
1297
@@ -1322,9 +1344,11 @@ <h2>CSS id's</h2>
1322
1344
<style>
1323
1345
<strong>#centered_on_page</strong> {
1324
1346
margin: 0 auto;
1347
+
width: 960px;
1325
1348
}
1326
1349
</style>
1327
1350
</pre>
1351
+
<pclass="sidenote">I'm going to add this to my <code>exercise/website/index.html</code> file and wrap everything already currently there within the <code><body></code> tag.</p>
0 commit comments