Skip to content

Commit c4cc961

Browse files
christinatruongchristinatruong
committed
Separate exercise 6 into smaller exercises and reordered content.
1 parent 69ab6c1 commit c4cc961

3 files changed

Lines changed: 263 additions & 134 deletions

File tree

‎index.html‎

Lines changed: 140 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1212,41 +1212,6 @@ <h2>Block & Inline Example</h2>
12121212

12131213
Let's go back to the previous slide's example and try using the `display` property.
12141214
</section>
1215-
1216-
<section class="slide" data-markdown>
1217-
##CSS Float Property
1218-
1219-
Remember, block-style HTML elements like `&lt;p>`, `&lt;div>` and `&lt;section>` automatically start on a new line and stack on top of each other. To get two block elements to align side-by-side, the `float` property can also be used.
1220-
1221-
CSS floats can float elements left or right.
1222-
1223-
**However**, we have to break the natural stacking flow when an element is floated. This will cause any element *after* the floated element to try to move up beside it or just not display properly because we've disrupted the natural stacking flow. The parent container will also collapse.
1224-
1225-
**Also**, if no width is set, the element will float but the width will automatically be the width of its content.
1226-
</section>
1227-
1228-
<section class="slide centered">
1229-
<h2>Huh?</h2>
1230-
<img src="framework/img/workshop/huh.gif">
1231-
1232-
<p class="delayed">Not to worry, we can fix it.</p>
1233-
</section>
1234-
1235-
<section class="slide" data-markdown>
1236-
##Float, Clear And Clearfix
1237-
1238-
First we have to break it, then put it back together. We need to "reset" the float to get the rest of the page to go back to normal. There are a couple ways to do it.
1239-
1240-
One of the most confusing CSS concepts is when to use the different techniques, `clear: both` or the `.clearfix` class.
1241-
1242-
Rule of thumb: if there's is an element that *follows* the floated element, apply `clear: both` to that element. This will clear the float. If all the elements need to be floated, apply the `clearfix` to the parent element to force clear the children.
1243-
1244-
Let's look at an example here: http://jsfiddle.net/unjcxses/
1245-
1246-
Want to know more about the clearfix trick and clearing floats? Here you go:
1247-
http://css-tricks.com/snippets/css/clear-fix/
1248-
http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
1249-
</section>
12501215

12511216
<section class="slide" data-markdown>
12521217
##Update CSS file
@@ -1279,9 +1244,7 @@ <h2>Huh?</h2>
12791244

12801245
Follow the instructions below. Check these changes on either the About or Contact page. The Home page will be styled later since it's different.
12811246

1282-
Though all the CSS is listed, try adding in one line at a time to see and understand what each property does. Feel free to leave comments for yourself in the code to explain what each line is doing!
1283-
1284-
There's a couple more concepts to go through to finish styling the header and nav, so your page should look like [example 5](project/examples/exercise5-about.html).
1247+
Though all the CSS is listed, try adding in one line at a time to see and understand what each property does. Feel free to leave comments for yourself in the code to explain what each line is doing.
12851248

12861249
1. Remove default list styles and get each item to line up in a line.
12871250
```
@@ -1303,7 +1266,9 @@ <h2>Huh?</h2>
13031266
text-transform: uppercase;
13041267
}
13051268
```
1306-
1269+
1270+
There's a few more concepts to go through to finish styling the header and nav. This is what your page should look like so far: [example 5 about](project/examples/exercise5-about.html) and [example 5 contact](project/examples/exercise5-contact.html).
1271+
13071272
**Bonus**:
13081273
If you have some extra time, try adding some comments to your CSS to organize it. See [sample here](project/examples/css/exercise5.css).
13091274
Find a background image for later or choose one from the **images** folder. Here are some resources:
@@ -1314,6 +1279,141 @@ <h2>Huh?</h2>
13141279
* http://nos.twnsnd.co/
13151280
* http://unsplash.com/
13161281
</section>
1282+
1283+
<section class="slide" data-markdown>
1284+
##Class Selectors
1285+
1286+
HTML provides ways to attach extra identifying information to target elements in a more specific way.
1287+
1288+
A `class` *attribute* can be added to any element but the value is defined by you. The class can then be used as a selector to apply styles to any element that references the class attribute. Classes can be used multiple times on the same page. In CSS, classes are denoted by a leading period.
1289+
1290+
```xml
1291+
&lt;p&gt;Regular text&lt;/p&gt;
1292+
&lt;p class=&quot;special&quot;&gt;Special text here.&lt;/p&gt;
1293+
```
1294+
```
1295+
p {
1296+
color: red;
1297+
font-family: Georgia, "Times New Roman", serif;
1298+
}
1299+
.special {
1300+
text-transform: uppercase;
1301+
}
1302+
```
1303+
</section>
1304+
<section class="slide" data-markdown>
1305+
##Mini-Exercise
1306+
1307+
Let's create a class called `highlight` and assign it an accent colour. Add this class to any element and it will apply this style.
1308+
1309+
```
1310+
.highlight {
1311+
color: #bf6d50;
1312+
}
1313+
```
1314+
1315+
Using a span tag, wrap it around your first name on the homepage and apply this class.
1316+
1317+
```xml
1318+
&lt;h1&gt;&lt;span class=&quot;highlight&quot;&gt;Jane&lt;/span&gt;Smith&lt;/h1&gt;
1319+
```
1320+
1321+
Now it looks like this! Add this anywhere you want some highlighted text!
1322+
1323+
![](framework/img/workshop/highlighted-text.png)
1324+
</section>
1325+
<section class="slide" data-markdown>
1326+
##id Selectors
1327+
1328+
`id` *attributes* are similar to `class` *attributes* because it can also be added to any element.
1329+
1330+
However, it can be used only **once** per page. IDs should be reserved for significant style rules. Some developers prefer not to use IDs at all for CSS styling because of the specificity rules and because classes can be used once or multiple times, making it more flexible.
1331+
1332+
In CSS, IDs are denoted by a leading hash symbol (`#`).
1333+
```
1334+
#header {
1335+
width: 800px;
1336+
}
1337+
```
1338+
ids can also be used to link within the same page. [Read more about this technique here](http://www.webweaver.nu/html-tips/link-within-a-page.shtml).
1339+
</section>
1340+
<section class="slide" data-markdown>
1341+
##class and id Names
1342+
1343+
When choosing a class or id name, choose a descriptive name and do not use spaces. Hyphens (-), underscores (_) and camel case are acceptable. CSS is also case sensitive, so while these three examples look similar, CSS will read these as three different classes so it's important (for you own sanity) to pick one style and be consistent.
1344+
1345+
```
1346+
class="content-wrapper"
1347+
class="content_wrapper"
1348+
class="contentWrapper"
1349+
```
1350+
</section>
1351+
1352+
<section class="slide" data-markdown>
1353+
##CSS Float Property
1354+
1355+
Remember, block-style HTML elements like `&lt;p>`, `&lt;div>` and `&lt;section>` automatically start on a new line and stack on top of each other. To get two block elements to align side-by-side, the `float` property can also be used.
1356+
1357+
CSS floats can float elements left or right.
1358+
1359+
**However**, we have to break the natural stacking flow when an element is floated. This will cause any element *after* the floated element to try to move up beside it or just not display properly because we've disrupted the natural stacking flow. The parent container will also collapse.
1360+
1361+
**Also**, if no width is set, the element will float but the width will automatically be the width of its content.
1362+
</section>
1363+
1364+
<section class="slide centered">
1365+
<h2>Huh?</h2>
1366+
<img src="framework/img/workshop/huh.gif">
1367+
1368+
<p class="delayed">Not to worry, we can fix it.</p>
1369+
</section>
1370+
1371+
<section class="slide" data-markdown>
1372+
##Float, Clear And Clearfix
1373+
1374+
First we have to break it, then put it back together. We need to "reset" the float to get the rest of the page to go back to normal. There are a couple ways to do it.
1375+
1376+
One of the most confusing CSS concepts is when to use the different techniques, `clear: both` or the `.clearfix` class.
1377+
1378+
Rule of thumb: if there's is an element that *follows* the floated element, apply `clear: both` to that element. This will clear the float. If all the elements need to be floated, apply the `clearfix` to the parent element to force clear the children.
1379+
1380+
Let's look at an example here: http://jsfiddle.net/unjcxses/
1381+
1382+
Want to know more about the clearfix trick and clearing floats? Here you go:
1383+
http://css-tricks.com/snippets/css/clear-fix/
1384+
http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
1385+
</section>
1386+
1387+
<section class="slide" data-markdown>
1388+
##Class Exercise - classes and floats
1389+
1390+
1. Add a class of "profile-image" to the image tag in your **About** page. Add a left float to get the text to wrap around it.
1391+
1392+
```
1393+
.profile-image {
1394+
float: left;
1395+
}
1396+
```
1397+
1. The text floats now, but it's a little squishy. Try setting the image width to be 50% of the page and add some margin on the right to create space.
1398+
1399+
```
1400+
.profile-image {
1401+
float: left;
1402+
width: 50%;
1403+
margin-right: 20px;
1404+
}
1405+
```
1406+
1. That looks much better but look what happened to the footer! All elements that come after floated elements want to float too as long as there is space for them. Let's put the page back to its natural stacking order by clearing the float. We put the `clear` on the footer because that's where we want things to go back to normal.
1407+
1408+
```
1409+
footer {
1410+
clear: both;
1411+
}
1412+
```
1413+
1414+
Your page should now look similar to [exercise6a-about.html](project/examples/exercise6a-about.html).
1415+
</section>
1416+
13171417
<section class="slide" data-markdown>
13181418
##Positioning in CSS
13191419

@@ -1394,77 +1494,7 @@ <h2>Position: fixed</h2>
13941494
</section>
13951495

13961496
<section class="slide" data-markdown>
1397-
##Class Selectors
1398-
1399-
HTML gives us a couple ways to attach extra identifying information to target elements in a way that is more specific. Two *attributes* called `class` and `id` can be used.
1400-
1401-
A `class` *attribute* can be added to any element but the value is defined by you. The class can then be used as a selector to apply styles to any element that references the class attribute.
1402-
1403-
Classes can be used multiple times on the same page. In CSS, classes are denoted by a leading period.
1404-
1405-
```xml
1406-
&lt;p&gt;Regular text&lt;/p&gt;
1407-
&lt;p class=&quot;special&quot;&gt;Special text here.&lt;/p&gt;
1408-
```
1409-
```
1410-
p {
1411-
color: red;
1412-
font-family: Georgia, "Times New Roman", serif;
1413-
}
1414-
.special {
1415-
text-transform: uppercase;
1416-
}
1417-
```
1418-
</section>
1419-
<section class="slide" data-markdown>
1420-
##Mini-Exercise
1421-
1422-
Let's create a class called `highlight` and assign it an accent colour. I can now add this class to any element and it will apply this style.
1423-
1424-
```
1425-
.highlight {
1426-
color: #bf6d50;
1427-
}
1428-
```
1429-
1430-
Using a span tag, wrap it around your first name on the homepage and apply this class.
1431-
1432-
```xml
1433-
&lt;h1&gt;&lt;span class=&quot;highlight&quot;&gt;Jane&lt;/span&gt;Smith&lt;/h1&gt;
1434-
```
1435-
1436-
Now it looks like this! Add this anywhere you want some highlighted text!
1437-
1438-
![](framework/img/workshop/highlighted-text.png)
1439-
</section>
1440-
<section class="slide" data-markdown>
1441-
##id Selectors
1442-
1443-
`id` *attributes* are similar to `class` *attributes* because it can also be added to any element and given any value.
1444-
1445-
However, it can be used only **once** per page. IDs should be reserved for significant style rules. Some developers prefer not to use IDs at all for CSS styling because of the specificity rules and because classes can be used once or multiple times, making it more flexible.
1446-
1447-
In CSS, IDs are denoted by a leading hash symbol (`#`).
1448-
```
1449-
#header {
1450-
width: 800px;
1451-
}
1452-
```
1453-
</section>
1454-
<section class="slide" data-markdown>
1455-
##class and id Names
1456-
1457-
When choosing a class or id name, choose a descriptive name and do not use spaces. Hyphens (-), underscores (_) and camel case are acceptable. CSS is also case sensitive, so while these three examples look similar, CSS will read these as three different classes so it's important (for you own sanity) to pick one style and be consistent.
1458-
1459-
```
1460-
class="content-wrapper"
1461-
class="content_wrapper"
1462-
class="contentWrapper"
1463-
```
1464-
</section>
1465-
1466-
<section class="slide" data-markdown>
1467-
##Exercise #6 - About, Header & Nav, pt 2
1497+
##Exercise #6 - Positioning the Header & Nav
14681498

14691499
1. Position the nav to the top right of the header element.
14701500

@@ -1499,30 +1529,6 @@ <h2>Position: fixed</h2>
14991529
padding-top: 125px;
15001530
}
15011531
```
1502-
1. Add a class of "profile-image" to the image tag in your about page. Add a left float to get the text to wrap around it.
1503-
1504-
```
1505-
.profile-image {
1506-
float: left;
1507-
}
1508-
```
1509-
1. The text floats now, but it's a little squishy. Try setting the image width to be 50% off the page and add some margin on the right to create space.
1510-
1511-
```
1512-
.profile-image {
1513-
float: left;
1514-
width: 50%;
1515-
margin-right: 20px;
1516-
}
1517-
```
1518-
1. That looks much better but look what happened to the footer! All elements that come after floated elements want to float too as long as there is space for them. Let's put the page back to it's natural stacking order by clearing the float on the footer because that's where we want things to go back to normal.
1519-
1520-
```
1521-
footer {
1522-
clear: both;
1523-
}
1524-
```
1525-
15261532

15271533
Your page should look like [example 6](project/examples/exercise6-about.html). Note how the header looks the same on all three pages now... except the home page! Where did the navigation disappear off to?
15281534
</section>

0 commit comments

Comments
 (0)