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
Copy file name to clipboardExpand all lines: framework/extras-form-styles.html
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -94,14 +94,14 @@ <h2>Center aligning with margin</h2>
94
94
To get the input and textarea to span all the way across the form, we can set the width to 100% so it takes up the entire width of the form. It's also possible to override the default border styles too. Add height to the textarea just to give more room for the user to type a message.
95
95
96
96
```
97
-
input,
98
-
textarea {
99
-
width: 100%;
100
-
border: 1px solid #ccc;
101
-
padding: 5px;
97
+
.contact-form input,
98
+
.contact-form textarea {
99
+
width: 100%;
100
+
border: 1px solid #ccc;
101
+
padding: 5px;
102
102
}
103
-
textarea {
104
-
height: 100px;
103
+
.contact-form textarea {
104
+
height: 100px;
105
105
}
106
106
```
107
107
Your form should look similar to the [contact-page-styles.html](../project/examples/contact-page-styles.html) example.
Under **Getting Started**, there are different options for adding the font files. If using the CDN, remember to add the "http" to make it work when you run your page "locally" (on your computer).
36
+
Under **Get Started**, there are different options for adding the font files. If using the CDN, remember to add the "http" to the `href` link make it work when you run your page "locally" (on your computer).
Simple to use, pick an icon you'd like to use and copy the supplied markup and class and that's it!
42
+
Under the [icons](http://fortawesome.github.io/Font-Awesome/icons/) menu, pick an icon you'd like to use and copy the supplied markup and class and that's it!
39
43
40
44
###Pseudo Class
41
45
A CSS pseudo-class is a selector that specifies a specific *state* of the selected element. This lesson uses `:hover` to apply a style only when the user hovers over the element specified by the selector.
42
46
43
47
More about pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
44
48
</section>
45
49
<sectionclass="slide" data-markdown>
46
-
##Home Page Drop down menu
47
-
48
-
1. Add [Font Awesome's CSS file](http://fortawesome.github.io/Font-Awesome/get-started/) to the `head` of your document and the markup for the [three-bar icon](http://fortawesome.github.io/Font-Awesome/icon/bars/) to the navigation.
The next step is to override the horizontal navigation styles that are shared among the other pages and make it specific to the home page. There is already a class of `home` in the body so we can use that to make our selector more specific.
74
+
The next step is to override the horizontal navigation styles from the existing CSS and change it back into a dropdown list just for the homepage. There is already a class of `home` in the body so we can use that to make our selector more specific. Put this CSS with the existing home page related CSS.
69
75
70
-
1. Set the list items to display block so they line up on top of each other.
76
+
Set the list items to display block so they line up on top of each other.
71
77
72
-
```
73
-
.home nav li {
78
+
.home li {
74
79
display: block;
75
80
}
76
-
```
77
81
78
-
1. Right align the icon and the list items. This can be added to the `nav` selector so icon and list items will inherit the styles. Change the font size to make it bigger too. The icon will also need a little bit of padding to make the hover target a little bigger and for alignment.
79
-
```
82
+
Right align the icon and the list items. This can be added to the `nav` selector so icon and list items will inherit the styles. Change the font size to make it bigger too. The icon will also need a little bit of padding to make the hover target a little bigger and for alignment.
83
+
80
84
.home nav {
81
85
text-align: right;
82
86
font-size: 25px;
83
87
}
84
88
.fa-bars {
85
89
padding: 15px;
86
90
}
87
-
```
91
+
88
92
89
-
1. Now hide the navigation list and show it when you hover over the icon. Hide the list first.
90
-
```
93
+
Now hide the navigation list and show it when you hover over the icon. Hide the list first.
94
+
91
95
.home nav ul {
92
96
display: none;
93
97
}
94
-
```
95
98
96
-
1. With CSS, you can apply a hover on a parent element and use the descendant selector to change the style of its child elements!
97
99
98
-
```
100
+
With CSS, you can apply a hover on a parent element and use the descendant selector to change the style of its child elements!
101
+
99
102
.home nav:hover ul {
100
103
display: block;
101
104
}
102
105
.home a:hover {
103
106
color: black;
104
107
}
105
-
```
106
108
107
109
Your home page should now look similar to the [homepage-dropdown.html](../project/examples/homepage-dropdown.html) example.
Copy file name to clipboardExpand all lines: framework/extras-sticky-footer.html
+22-10Lines changed: 22 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -40,27 +40,28 @@
40
40
41
41
We'll be following these instructions: http://css-tricks.com/snippets/css/sticky-footer/
42
42
43
-
First, we need to create a page wrapper around the page content only, not the footer content. The home page HTML will look like similar to this:
43
+
First, we need to create a page wrapper around the page content only, **not** the footer content. The home page HTML will look like similar to this:
44
44
45
45
```
46
46
<div class="page-wrap">
47
-
<nav>
48
-
...
49
-
</nav>
50
-
51
47
<header>
52
48
<h1>Jane Smith</h1>
53
49
<h2>Web Developer + City Girl</h2>
54
-
</header>
50
+
51
+
<nav>
52
+
...
53
+
</nav>
54
+
</header>
55
55
</div><!-- close .page-wrap -->
56
+
56
57
<footer>
57
58
...
58
59
</footer>
59
60
```
60
61
61
62
The about and contact pages will look like this:
62
63
63
-
```
64
+
```xml
64
65
<div class="page-wrap">
65
66
<header>
66
67
<h1>Jane Smith</h1>
@@ -70,6 +71,10 @@
70
71
...
71
72
</nav>
72
73
</header>
74
+
75
+
<section>
76
+
...
77
+
</section>
73
78
</div><!-- close .page-wrap -->
74
79
<footer>
75
80
...
@@ -80,11 +85,9 @@
80
85
<sectionclass="slide" data-markdown>
81
86
##Sticky Footer CSS
82
87
88
+
83
89
```
84
90
/* sticky footer */
85
-
html, body {
86
-
height: 100%;
87
-
}
88
91
.page-wrap {
89
92
min-height: 100%;
90
93
margin-bottom: -35px; /* must be the same height as footer */
@@ -101,6 +104,14 @@
101
104
color: #ccc;
102
105
}
103
106
```
107
+
108
+
**NOTE**: In the tutorial this lesson is based on, you will see the following CSS included but we've already added it to the CSS when creating the home page background image.
Copy file name to clipboardExpand all lines: index.html
+24-18Lines changed: 24 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -144,7 +144,7 @@ <h2>A Basic Web Page</h2>
144
144
</section>
145
145
146
146
<sectionclass="slide">
147
-
<h2>Setting Up Our Work Flow</h2>
147
+
<h2>Setting Up Your Work Flow</h2>
148
148
149
149
<p>Inside of the folder you downloaded today (<strong>llc-html-css-multi-page-site-master</strong>), there are many folders and files that contain different content.</p>
150
150
@@ -160,7 +160,7 @@ <h2>Setting Up Our Work Flow</h2>
160
160
</section>
161
161
162
162
<sectionclass="slide" data-markdown>
163
-
##Setting Up Our Work Flow
163
+
##Setting Up Your Work Flow
164
164
165
165
Let's open the project files in the browser and text editor.
<p>Tags are often nested within other tags and make up the <em>document tree</em>. The relationships are just like a family tree; branches of ancestors, parents, children, siblings, etc. Understanding this relationship will come in handy for writing CSS.</p>
224
-
225
-
<p>Also, whitespace through indentation of nested elements makes HTML easier to read.</p>
223
+
<p>Tags are often nested within other tags and make up the <em>document tree</em>. The relationships are just like a family tree; branches of ancestors, parents, children, siblings, etc. Understanding this relationship will come in handy for writing CSS. Also, whitespace through indentation of nested elements makes HTML easier to read.</p>
226
224
<pre><code><!DOCTYPE html>
227
225
<html>
228
226
<head><!-- child of html tag, parent of title tag -->
@@ -261,7 +259,7 @@ <h2>Nesting HTML tags</h2>
261
259
262
260
* `doctype` - Though not an HTML tag, it is always the first line. It tells the browser what version of HTML the document is written in.
263
261
* `<html>` - Always first, making it the ancestor of all other elements. It identifies the document as HTML.
264
-
* `<head>` - Contains information about the web page but doesn’t display on the web page itself. Examples include the page title (<title></title>) and links to external CSS files.
262
+
* `<head>` - Contains information about the web page but doesn’t display on the web page itself. Examples include the page title (`<title></title>`) and links to external CSS files.
265
263
* `<body>` - All content to be displayed in the browser window, also known as the viewport, goes between the `body` tags.
266
264
</section>
267
265
@@ -272,7 +270,7 @@ <h2>Nesting HTML tags</h2>
272
270
<sectionclass="slide" data-markdown>
273
271
##Adding text
274
272
275
-
Heading tags are used for headings / page titles. There are six headings tags ranging from `<h1>` to `<h6>` and follow a hierarchy. `<h1>` is the most significant heading on the page.
273
+
Heading tags are used for page headings. There are six headings tags ranging from `<h1>` to `<h6>` and follow a hierarchy. `<h1>` is the most significant heading on the page.
**Bonus:** If you have extra time, find an accent colour to use throughout your site and update the above color value with your accent colour. Here are the links to the color resources again.
992
+
**Bonus:** If you have extra time, find an accent colour to use throughout your site and update the above color value with your accent colour. Here is the link to the [color resources slide](#slide42).
993
+
994
+
Or, find a background image for an upcoming afternoon exercise using one of the links below or choose one contained in your **images** folder. Here are some resources:
<p>In this step, we're focusing on changing the default list styles to a horizontal layout. It will look like this sample below (also found in your examples folder, <ahref="project/examples/exercise5-about.html">exercise 5</a>).</p>
1243
+
<p>In this step, we're focusing on changing the default list styles to a horizontal layout. It will look like this sample below (also found in your examples folder, <ahref="project/examples/exercise5-about.html">exercise5-about.html</a>).</p>
To get two block elements to align side-by-side, we've used `display: inline-block` but the `float` property is often used for creating page layouts.
1344
+
To get two block elements to align side-by-side, we've used `display: inline-block` for our navigation list, but the `float` property is often used for creating page layouts.
1339
1345
1340
1346
**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.
1341
1347
</section>
@@ -1474,7 +1480,7 @@ <h2>Class Exercise #7 - Positioning the Header & Nav</h2>
1474
1480
</code></pre>
1475
1481
1476
1482
<p>Your page should look like <ahref="project/examples/exercise7-about.html">example 7</a>. Note how the header looks the same on all three pages now.</p>
1477
-
<p>Wait! Where did the footer content disappear off to on the home and contact pages!?</p>
1483
+
<p>Wait! The footer content disappeared on the home and contact pages!?</p>
1478
1484
1479
1485
<divclass="presenter-notes">
1480
1486
<p>Reinforce the ordering of CSS styles for organization during this exercise and stress the importance of keeping the styles in related groupings to keep from possibly duplicating styles or creating specificity issues.</p>
@@ -1484,13 +1490,13 @@ <h2>Class Exercise #7 - Positioning the Header & Nav</h2>
1484
1490
<sectionclass="slide" data-markdown>
1485
1491
##Home page styles
1486
1492
1487
-
The home page and contact page currently doesn't have any content in it so the footer is just "underneath" the header.
1493
+
The home page and contact page currently doesn't have any content in it so the footer is just "underneath" the header. Once content has been added, it will push the footer down the page.
1488
1494
1489
1495
However, the final design for the home page is different from the other two pages so we'll need to create special styles for the home page.
1490
1496
1491
1497
Let's use the `class` attribute to create a selector to allow us to apply specific styles just to the home page.
1492
1498
1493
-
Add the class to the `body` tag so we can override any styles for any element contained within the entire page.
1499
+
Add the `class` to the `body` tag to override any styles, for any element, contained within the entire page.
1494
1500
1495
1501
```
1496
1502
<body class="home">
@@ -1535,7 +1541,7 @@ <h2>Class Exercise #7 - Positioning the Header & Nav</h2>
Though we've covered a lot of material today, there are still lots of things to add to give your web page that extra personalization, finalize some styles and add some polish.
1701
+
Phew! We've covered A LOT of material today.
1702
+
1703
+
Here are some extra challenges and take-home lessons for you to tackle another day. These lessons will cover some more options to give your web page extra personalization, finalize some styles and add some polish. Here are the links to the additional lessons:
0 commit comments