Skip to content

Commit e71fe70

Browse files
baruchtbarucht
authored
Merge pull request #35 from VinayApposite/Apposite_20480C_Mod06_Demo
CE complete. Ready for SME.
2 parents 7ddbbdd + 01470ba commit e71fe70

File tree

1 file changed

+70
-68
lines changed

1 file changed

+70
-68
lines changed

‎Instructions/20480C_MOD06_DEMO.md‎

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22

33
# Lesson 2: Styling Block Elements
44

5-
### Demonstration: Switching Between CSS Layout Models
5+
### Demonstration: Switching Between Cascading Style Sheets (CSS) Layout Models
66

77
#### Preparation Steps
88

9-
1. Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles.
9+
Ensure that you have cloned the 20480C directory from GitHub (**https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles**). It contains the code segments for the labs and demos in this course.
1010

1111
#### Demonstration Steps
1212

13-
#### Switch between layout modes in a web page
13+
#### Switch between layout modes in a webpage
1414

15-
1. Open **Visual Studio 2017**.
15+
1. Open Microsoft Visual Studio 2017.
1616
2. In Visual Studio, on the **File** menu, point to **Open**, and then click **File**.
17-
3. In the **Open File** dialog, browse to the **Allfiles\Mod06\Democode** folder, click **positioning.html**, and then click **Open**.
17+
3. In the **Open File** dialog box, browse to the **Allfiles\Mod06\Democode** folder, click **positioning.html**, and then click **Open**.
1818
4. Review the code with the students. This file contains an HTML **article** with four **div** elements. The file also contains styles for the **article** and **div** elements.
19-
```html
19+
```html
2020
<!DOCTYPE html>
2121
<html xmlns="http://www.w3.org/1999/xhtml">
2222
<head>
@@ -53,99 +53,101 @@
5353
</article>
5454
</body>
5555
</html>
56-
```
56+
```
5757
5. On the **File** menu, click **View in Brower (Microsoft Edge)**.
58-
6. In Microsoft Edge, if the message **Intranet settings are turned off by default** appears, click **Don’t show this message again**.
59-
7. Observe the four **div** elements laid out underneath each other, in order, within the **article** element. The **article** element has a red border to highlight its boundaries. This is block layout mode.
58+
6. In Microsoft Edge, if the **Intranet settings are turned off by default** message appears, click **Don’t show this message again**.
59+
7. Observe the four **div** elements laid out one below the other, in order, within the **article** element. To highlight its boundaries, the **article** element has a red border. This is the **block layout** mode.
6060

6161
![alt text](./Images/20480B_6_Layout-Column.png "The div elements in block layout mode")
6262

63-
8. Press **F12**.
64-
9. In the F12 Developer Tools pane, press **Ctrl+P** to unpin the window. Position the F12 Developer Tools window so that you can see the Microsoft Edge window at the same time.
65-
10. Click the **CSS** tab to display the fully expanded version of the layout rules applied to the HTML content.
66-
11. Right-click the **div** entry, and then click **Add attribute**.
63+
8. Press F12.
64+
9. In the F12 Developer Tools pane, to unpin the window, press Ctrl+P. Position the F12 Developer Tools window so that you can see it and the Microsoft Edge window at the same time.
65+
10. To display the fully expanded version of the layout rules applied to the HTML content, click the **CSS** tab.
66+
11. Right-click the **div** entry, and then select **Add attribute**.
6767
12. Type **display: inline**, and then press ENTER.
68-
13. In Microsoft Edge, notice that the four **div** elements are now laid out side-by-side aligned by text baseline with height and width properties ignored. This is inline layout mode.
68+
13. In Microsoft Edge, notice that the four **div** elements are now laid out side-by-side aligned by text baseline with height and width properties ignored. This is the **inline layout** mode.
6969

7070
![alt text](./Images/20480B_6_Layout-Row.png "The div elements in inline layout mode")
7171

72-
14. Resize the browser window to make it narrower, so you can see how blocks are wrapped onto the next line in inline layout mode.
72+
14. Resize the browser window to make it narrower, so you can see how the application wraps the blocks onto the next line in the **inline layout** mode.
7373
15. In the F12 Developer Tools window, on the **CSS** tab, click the **display: inline** rule, change it to read **display:inline-block**, and then press ENTER.
74-
16. Notice the layout is the same but the **height** and **width** properties are now preserved. This is inline-block mode.
74+
16. Notice the layout is the same but the **height** and **width** properties are now preserved. This is the **inline-block** mode.
7575

76-
>**Note:** If necessary, make the browser window wider so that blocks **One** and **Three** are on the same line.
76+
>**Note**: If required, make the browser window wider so that blocks **One** and **Three** are on the same line.
7777
7878
![alt text](./Images/20480B_6_Layout-Inline-Block.png "The div elements in inline-block layout mode")
7979

80-
17. In Microsoft Edge, resize the browser window so you can see how blocks are wrapped onto the next line in inline layout mode.
81-
18. In the F12 Developer Tools window, on the **CSS** tab, click the **display: inline-block** rule. Change this rule to **display:-ms-flexbox**, and then press ENTER
82-
19. Switch to Microsoft Edge to view the new layout. The **div** elements are displayed in a vertical column.
80+
17. In Microsoft Edge, resize the browser window so you can see how the application wraps the blocks onto the next line in the **inline layout** mode.
81+
18. In the F12 Developer Tools window, on the **CSS** tab, click the **display: inline-block** rule. Change this rule to **display:-ms-flexbox**, and then press ENTER.
82+
19. To view the new layout, switch to Microsoft Edge. The application displays the **div** elements in a vertical column.
8383
20. In the F12 Developer Tools window, on the **CSS** tab, click the **display: -ms-flexbox** rule, change it to **display:table-cell**, and then press ENTER.
84-
21. Switch to Microsoft Edge to view the new layout. The **div** elements are displayed in a horizontal table.
84+
21. To view the new layout, switch to Microsoft Edge. The application displays the **div** elements in a horizontal table.
8585

86-
#### Switch between positioning modes in a web page
86+
#### Switch between positioning modes in a webpage
8787

88-
1. In the F12 Developer Tools window, on the **CSS** tab, clear the three checkboxes next to the display attributes for **body**, **article**, and **div**.
89-
2. Right-click the **div** entry, and then click **Add rule after**.
90-
3. Type **#three** and then press **Tab**.
88+
1. In the F12 Developer Tools window, on the **CSS** tab, clear the three check boxes next to the display attributes for **body**, **article**, and **div**.
89+
2. Right-click the **div** entry, and then select **Add rule after**.
90+
3. Type **#three**, and then press **Tab**.
9191

92-
>**Note:** This action creates a new rule for the **&lt;div&gt;** element with the **id** property set to **three**. This is the **&lt;div&gt;** containing the text **Three**.
92+
>**Note**: This action creates a new rule for the **&lt;div&gt;** element with the **id** property set to **three**. This is the **&lt;div&gt;** containing the text **Three**.
9393
94-
4. Type **position: relative** and then press ENTER.
95-
5. Right-click the **#three** entry, and then click **Add attribute**.
94+
4. Type **position: relative**, and then press ENTER.
95+
5. Right-click the **#three** entry, and then select **Add attribute**.
9696
6. Type **top: 2em**, and then press ENTER.
97-
7. Right-click the **#three** entry, and then click **Add attribute**.
97+
7. Right-click the **#three** entry, and then select **Add attribute**.
9898
8. Type **left: 2em**, and then press ENTER.
99-
9. In Microsoft Edge, notice how the **three** box is positioned relative to its normal position.
99+
9. In Microsoft Edge, notice how the application positions the **three** box relative to its normal position.
100100
10. In the F12 Developer Tools window, on the **CSS** tab, click the **position:relative** rule for the **#three** selector, change it to **position:absolute**, and then press ENTER.
101-
11. In Microsoft Edge, notice how the **three** box is now positioned relative to its containing **article** block.
102-
12. In the F12 Developer Tools window, on the **CSS** tab, on the **CSS** tab, click the **position:absolute** rule for the **#three** selectore, change it to **position:fixed**, and then press ENTER.
103-
13. In Microsoft Edge, notice how the **three** box is positioned relative to the browser window. Make the window small enough to require scrolling and see how the **three** box remains stationary when you scroll (it does not scroll into view).
104-
14. Close Microsoft Edge, and then close Visual Studio 2017.
101+
11. In Microsoft Edge, notice how the application positions the**three** box relative to its containing **article** block.
102+
12. In the F12 Developer Tools window, on the **CSS** tab, click the **position:absolute** rule for the **#three** selector, change it to **position:fixed**, and then press ENTER.
103+
13. In Microsoft Edge, notice how the application positions the **three** box relative to the browser window. Make the window small enough to require scrolling and see how the **three** box remains stationary when you scroll (it does not scroll into view).
104+
14. Close Microsoft Edge.
105+
15. Close Visual Studio 2017.
105106

106107
# Lesson 4: Enhancing Graphical Effects by Using CSS3
107108

108109
### Demonstration: Styling Text and Block Elements by Using CSS3
109110

110111
#### Preparation Steps
111112

112-
1. Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles.
113+
Ensure that you have cloned the 20480C directory from GitHub (**https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles**). It contains the code segments for the labs and demos in this course.
113114

114115
#### Demonstration Steps
115116

116-
1. Read the Lab Scenario to students and point out that they should read each scenario before attempting the lab for a module.
117-
2. Point out to students that the Exercise Scenario for each exercise contains a description of what they will accomplish in the exercise, and is also essential reading.
118-
3. Start Visual Studio, and open the **ContosoConf.sln** solution in the **Allfiles\Mod06\Labfiles\Solution\Exercise 3** folder.
119-
4. On the **Debug** menu, click **Start Without Debugging**.
120-
121-
>**Note:** If the message **Intranet settings are turned off by default** appears, click **Don’t show this message** again.
122-
123-
5. In Internet Explorer, on the **Home** page, point out the styling of the items in the navigation bar. Click each page in turn, and notice how the navigation bar uses a ribbon effect to indicate the current page.
124-
6. In the navigation bar, click **Home**.
125-
7. On the **Home** page, point out the **Register Free** link. This is an ordinary HTML link created as an **&lt;a&gt;** tag that navigates the user to the **Register** page, but styled to look like a large red button.
126-
8. Hover the mouse over the **Register Free** link and point out how the link is highlighted.
127-
9. In the navigation bar, click **About**. Point out the following features of the text on this page:
128-
1. The text is formatted in three columns.
129-
2. The first letter of the first paragraph as styled as a drop cap.
130-
3. The text at the start of all the remaining paragraphs is indented.
131-
4. The block quote in the third column is styled to make it stand out.
132-
10. Close Internet Explorer.
133-
11. In Solution Explorer, expand the **ContosoConf** project, expand the **styles** folder, and then double-click **nav.css**.
134-
12. In the Code Editor window, scroll through the code. Point out that students will add the styles defined in this file to change the layout of the navigation bar.
135-
13. In Solution Explorer, double-click **header.css**.
136-
14. In the Code Editor window, summarize the purpose of the following style rules:
137-
1. **header.page-header .register**. This rule formats the **Register Free** link as a large red button.
138-
2. **header.page-header .register:hover**. This rule highlights the Register Free link when the mouse hovers over it.
139-
3. **header.page-header .register:before**. This rule adds a dotted border around the button for the **Register Free** link.
140-
4. **header.page-header .register .free**. This rule sets the font size of the word **Free** in the **Register Free** link. This word is displayed with a font size that is 80% of the size of the word **Register**.
141-
15. In Solution Explorer, in the **styles** folder, expand **pages**, and then double-click **about.css**.
142-
16. In the Code Editor window, summarize the purpose of the following style rules:
143-
1. **.about > article > section**. This rule formats the text on the **About** page in three columns.
144-
2. **.about p:first-child:first-letter**. This rule formats the first letter of the first paragraph as a drop cap.
145-
3. **.about p**. This rule indents each paragraph on the **About** page.
146-
4. **.about p:first-child**. This rule prevents the drop cap in the first paragraph from being indented.
147-
5. **.about blockquote**. This rule formats the text for the block quote on the **About** page.
148-
6. **.about blockquote:before**. This rule adds the quote mark to the start of the block quote.
117+
1. Read the lab scenario to the students and point out that they should read each scenario before attempting the lab for a module.
118+
2. Point out to students that the exercise scenario for each exercise is essential reading and contains a description of what they will accomplish in the exercise.
119+
3. Start Visual Studio.
120+
4. From the **Allfiles\Mod06\Labfiles\Solution\Exercise 3** folder, open the **ContosoConf.sln** solution.
121+
5. On the **Debug** menu, click **Start Without Debugging**.
122+
123+
>**Note**: If the **Intranet settings are turned off by default** message appears, click **Don’t show this message again**.
124+
125+
6. In Microsoft Internet Explorer, on the **Home** page, point out the styling of the items in the navigation bar. Click each page in turn, and notice how the navigation bar uses a ribbon effect to indicate the current page.
126+
7. In the navigation bar, click **Home**.
127+
8. On the **Home** page, point out the **Register Free** link. This is an ordinary HTML link created as a **&lt;a&gt;** tag that takes the user to the **Register** page, but styled to look like a large red button.
128+
9. Place the mouse pointer over the **Register Free** link and point out how the link is highlighted.
129+
10. In the navigation bar, click **About**. Point out the following features of the text on this page:
130+
- The text is formatted in three columns.
131+
- The first letter of the first paragraph is styled as a drop cap.
132+
- The text at the start of all the remaining paragraphs is indented.
133+
- The block quote in the third column is styled to make it stand out.
134+
11. Close Internet Explorer.
135+
12. In **Solution Explorer**, expand the **ContosoConf** project, expand the **styles** folder, and then double-click **nav.css**.
136+
13. In the **Code Editor** window, scroll through the code. Point out that to change the layout of the navigation bar, the students will add the styles defined in this file.
137+
14. In **Solution Explorer**, double-click **header.css**.
138+
15. In the **Code Editor** window, summarize the purpose of the following style rules:
139+
- **header.page-header .register**. This rule formats the **Register Free** link as a large red button.
140+
- **header.page-header .register:hover**. This rule highlights the **Register Free** link when the mouse pointer is placed over it.
141+
- **header.page-header .register:before**. This rule adds a dotted border around the button for the **Register Free** link.
142+
- **header.page-header .register .free**. This rule sets the font size of the word **Free** in the **Register Free** link. This word is displayed with a font size that is 80% of the size of the word **Register**.
143+
16. In **Solution Explorer**, in the **styles** folder, expand **pages**, and then double-click **about.css**.
144+
17. In the **Code Editor** window, summarize the purpose of the following style rules:
145+
- **.about > article > section**. This rule formats the text on the **About** page in three columns.
146+
- **.about p:first-child:first-letter**. This rule formats the first letter of the first paragraph as a drop cap.
147+
- **.about p**. This rule indents each paragraph on the **About** page.
148+
- **.about p:first-child**. This rule prevents the drop cap in the first paragraph from being indented.
149+
- **.about blockquote**. This rule formats the text for the block quote on the **About** page.
150+
- **.about blockquote:before**. This rule adds the quote mark to the start of the block quote.
149151

150152

151153
©2018 Microsoft Corporation. All rights reserved.

0 commit comments

Comments
 (0)