forked from christinatruong/llc-html-css-valentines
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathnotes-en.html
More file actions
112 lines (83 loc) · 6.39 KB
/
notes-en.html
File metadata and controls
112 lines (83 loc) · 6.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Canada Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<main>
<section class="slide" data-toc data-markdown>
<script type="text/template">
##Instructor Notes
##Ladies Learning Code: Intro to HTML & CSS Animations: Valentine's Day Edition
##3 hours
<br>
#Schedule
<strong> Important note:</strong>
This is a guideline, not a rule! It is more important that the learners are following along then it is to get to the end of the slides!
* <strong>Getting Started + Intro to HTML (1 hour)</strong>: Preview of final project, setting up tools, workflow, what is HTML, tags, first exercise
* <strong>Intro to CSS (1 hour)</strong>: syntax and terminology, adding CSS, webfonts, selectors, typography, unicodes, attributes, class selectors
* <strong>CSS animations (1 hour)</strong>: Keyframes, transform, pulsing heart exercise, position and `nth-of-type`, class exercise, hackathon!
<br>
#General Notes
* <strong>Important!</strong> Please give learners enough time to download learner files from slide 1 - check in as people are entering the room to make sure they have learner files, Atom & Chrome ready so you can start the experience on time.
Encourage them to ask yourself or a mentor for help with installation!
* A common issue with leaner files - make sure Windows users extract the folder. If a learner sees the slides without any styles, that is probably why.
* Show learners how to open files. Go through the steps - e.g. Open Atom > File > add project folder. Do it slowly or show them twice if necessary.
* Show learners how to copy text from slides + paste into atom. Keyboard shortcuts can be new to some learners: Remember to mention them especially since they're invisible to them when you use keyboard shortcuts on the overhead projector. PLEASE mention both Windows & Mac shortcuts, not just 1 or the other! Most learners here will be using Windows computers in the computer lab, but some may wish to bring their own laptop.
* Remind learners to constantly SAVE + REFRESH (and show them how). Encourage them to make small changes at a time, save, and refresh. Show them how to Undo from shortcuts or the edit menu.
* Share shortcuts and tips on navigating between windows. Hot corners, shortcut keys, taskbar hovers. Whatever works.
<br>
#Specific Examples
<h2>Notes</h2>
<strong>Slide 10: HTML OVERVIEW</strong><br>
You can use the analogy of a house: HTML is like the foundation; the walls, the roof and the concrete floor. CSS determines how furniture is layed out, what colour paint is on the walls, and whether we have hardwood or carpeting.
<strong>Slide 15: MORE HTML TAGS</strong><br>
A stands for anchor, because an <code><a></code> tag can be used to bring te user to another portion of the same page.
Take a moment to explain what an attribute does - what is in between the tags is what the user can see in the browser. Attributes are hidden, but they provide essential information in order for the tag to do it's job.
Users with visual impairents experience the web using a screen reader. When a visually impaired person uses the web, they use a piece of software called a Screen Reader which will read to them the contents of the webpage. When the Screen Reader comes across an <code><img></code> tag, the value of the alt attribute is read to them. Briefly describe what is happening in the photo for people who can not see it. If there is any text in the photo itself, it must be included in the alt attribute.
<strong>Slide 24: CLASS EXERCISE: CHOOSING WEB FONTS</strong>
Take the time to walk through this process together with the class. Once they have made their font selection, encourage them to read the instructions provided in Google Fonts (which code to insert into the <code><head></code>, and which code to use in their stylesheet.)
Use 5. as an opportunity to discuss performance, and the importance of only including the resources you need.
<strong>Slide 29: CLASS EXERCISE: ADD TYPOGRAPHY STYLES</strong>
Give them the freedom to use the fonts of their choosing to personalize the project.
<strong>Slide 38: </strong>
Take your time working through the animations and explaining what is happening each step of the way.
<strong>Slide 53: Hackathon!</strong>
Walk through an example of how to Google something. For example, you can search for "align text CSS", and point out trusted resources like W3C, developer.mozilla.org, and Stack Overflow.
</script>
</section>
</main><!-- cls main section -->
<script src="framework/scripts/jquery-1.11.0.min.js"></script>
<script src="framework/scripts/slideshow.js"></script>
<!-- Uncomment the plugins you need -->
<script src="framework/scripts/plugins/css-edit.js"></script>
<script src="framework/scripts/plugins/css-snippets.js"></script>
<script src="framework/scripts/plugins/css-controls.js"></script>
<!-- <script src="plugins/code-highlight.js"></script>-->
<script src="framework/scripts/plugins/markdown/marked.js"></script>
<script src="framework/scripts/plugins/markdown/markdown.js"></script>
<script src="framework/scripts/plugins/highlight/highlight-8.4.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="framework/scripts/llc.js"></script>
<script>
var slideshow = new SlideShow();
// Grabs all the .snippet elements
var snippets = document.querySelectorAll('.snippet');
for(var i=0; i<snippets.length; i++) {
new CSSSnippet(snippets[i]);
}
</script>
</body>
</html>