-
Notifications
You must be signed in to change notification settings - Fork 0
/
nanoprog_notes.html
380 lines (373 loc) · 16.8 KB
/
nanoprog_notes.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html>
<head>
<title>Nanodegree Notes: Intro to Programming</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='style/css'>
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<link rel="stylesheet" href="./fonts/font-awesome-4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="./scripts/script.js"></script>
</head>
<body>
<div class="container-whole"> <!--thought I needed this for the header to persist during scroll-->
<header class="header">
<!--soon to be slide-out navigation outline-->
<div class="fa nav-icon">
<div class="fa-list-ul fa-2x"></div>
</div>
<div class="nanodegree">
<a class="head-link" href="http://udacity.com">
<h1>Intro to Progamming nanodegree</h1>
</a>
</div>
<!--link to project page. empty right now-->
<a class="head-link author" href="http://stevoblevo.github.io/intro-to-programming-nanodegree/"> <h1>stevoblevo</h1></a>
<div class="outline" hidden>
<ul>
<li><a href="#stage-1">Stage 1: Webpages, Documents, and Structure</a>
<ul>
<li><a href="#lesson-1-1-1">What <em>is</em> this "World Wide Web" anyway?</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div class="container-body">
<div class="expand-all">[expand all]</div>
<div class="collapse-all">[collapse all]</div>
<!--ids not used yet. will come in handy with slide-out nav outline-->
<section class="stage" id="stage-1">
<h2>Stage 1: Webpages, Documents, and Structure</h2>
<header class="lesson" id="lesson-1-1">
<h3>The Basics of The Web & HTML</h3>
</header>
<section class="lesson-container">
<article class="note" id="lesson-1-1-1">
<header class="note-title">
What <em>is</em> this "World Wide Web" anyway?
</header>
<div class="note-text">
<p>
The "web" is a collection of "pages" or documents on different
computers all over the world and all linked together.
These documents
are usually written in a special way so other computers know how
to display them properly. We use computer programs called
"web browsers" to interpret these documents. When we (the "user")
go to a website (e.g. udacity.com) our browser sends an "HTTP
request" for the
computer on the other end (called a "server") to send us the
document at that address. Our computer is called the "client" in
this model.
</p>
</div>
</article>
<article class="note" id="lesson-1-1-2">
<header class="note-title">
HTML! What is it good for?
</header>
<div class="note-text">
<p>
Documents on the Web are written in HTML for other computers to read.
An HTML document is regular text (for the humans) with funny marks
interspersed (for the computer). These marks tell the computer how
the text should look. Browsers take HTML documents and translate them
into human-pleasing text using the "markup". Later we'll learn how
"CSS" can take HTML and make the page look even more fancy for us
(the user) to read.
</p>
</div>
</article>
<article class="note" id="lesson-1-1-3">
<header class="note-title">
Markup - Tags, Elements, and <em>Attributes? Oh My!</em>
</header>
<div class="note-text">
<p>
HTML is made up of Elements which contain tags. Tags don't show up on
the page but instead are read by the web browser to know how the text
should be shown. Elements include the text content as well as other
things like attributes which modify tags. Here's an example of an
element: <em>this text is italic</em>. In this case
<em></em> is the tag. A more complex element would be:
<a href="https://www.udacity.com" class='link'><a
href="https://www.udacity.com"> click me! </a> </a>.
Can you guess what that does? In this case
<em>href="https://www.udacity.com"</em> is an attribute.
</p>
<p>
Tags usually have a beginning and end but not all. Tags that don't
need an ending tag (</em> is the end) are called "void" tags. A
good example of a void tag would be <br> which tells the
browser to display the next text on a new line.
</p>
</div>
</article>
<article class="note" id="lesson-1-1-4">
<header class="note-title">
It's Elementary! or get inline and build blocks!
</header>
<div class="note-text">
<p>
Elements are either <em>inline</em> or <em>block</em>. Block elements
have a virtual box around the content. HTML documents are lots of
boxes as we'll find out more.
</p>
</div>
</article>
</section>
<header class="lesson" id="lesson-1-2">
<h3>Creating a Structured Document with HTML</h3>
</header>
<section class="lesson-container">
<article class="note" id="lesson-1-2-1">
<header class="note-title">
Webpage: a Recipe
</header>
<div class="note-text">
<p>
Websites contain HTML, CSS, and Javascript files. HTML provide
structure and content, CSS provide style and defines how that
content looks, and Javascript provide interactive functions.
</p>
</div>
</article>
<article class="note" id="lesson-1-2-2">
<header class="note-title">
Plant a Tree-like Structure
</header>
<div class="note-text">
<p>
HTML is written in a nested style with elements inside of
container elements. This resembles the structure of a webpage:
a bunch of boxes inside of boxes inside of other boxes. The HTML
code is indented to make the nested structure easier to read and
identify which boxes are inside of others.
</p>
</div>
</article>
<article class="note" id="lesson-1-2-3">
<header class="note-title">
Identical HTML Twins with Style
</header>
<div class="note-text">
<p>
Two websites can have the exact same HTML but look completely
different using CSS to change font, color, size, or more.
CSS which has it's own language and syntax works with HTML
to specify the style of the page.
</p>
</div>
</article>
<article class="note" id="lesson-1-2-4">
<header class="note-title">
Who is this "DOM" guy?
</header>
<div class="note-text">
<p>
DOM or "Document Object Model" is the name we give to the tree
of HTML code: the DOM Tree. Browsers take HTML documents and
parse them into a DOM.
</p>
</div>
</article>
<article class="note" id="lesson-1-2-5">
<header class="note-title">
Every Shape a Box
</header>
<div class="note-text">
<p>
HTML only makes boxes. CSS can change the look of these boxes
into circles by adding a border-radius property. Nevertheless
the box remains and what looks like a circle is still contained
in the box by rounding the edges of the border box.
</p>
</div>
</article>
<article class="note" id="lesson-1-2-6">
<header class="note-title">
Classy Boxes
</header>
<div class="note-text">
<p>
Give html elements/boxes a descriptive class attribute and
modify the look/style of that class in CSS.
</p>
In HTML:
<p class="indent-text">
<div class = "note-description"> I'm describing
my note here </div>
</p>
In CSS:
<p class="indent-text">
class = "note-description" {<br>
background-color: blue;<br>
border-radius: 12px;<br>
max-width: 1000px;<br>
max-height: 1000px;<br>
}
</p>
</div>
</article>
<article class="note" id="lesson-1-2-7">
<header class="note-title">
Texting the Editor
</header>
<div class="note-text">
<p>
Using special text editors helps programmers by automatically
generating closing tags, color-coding, and sometimes even
letting you know when you missed putting a semicolon at the end.
</p>
</div>
</article>
</section>
<header class="lesson" id="lesson-1-3">
<h3>Adding CSS to HTML Structure</h3>
</header>
<section class="lesson-container">
<article class="note" id="lesson-1-3-1">
<header class="note-title">
Three Ways of adding Style
</header>
<div class="note-text">
<p>
The first and best way to add CSS to HTML is with a separate
CSS style sheet. This way you can stay organized. Second,
one can add CSS code into the <head> section of an HTML
document. Third is adding CSS inline with each element.
The third way should be avoided. It causes lots of repetition
and muddies the HTML document making it longer, more cluttered,
and just harder to read for humans.
</p>
</div>
</article>
<article class="note" id="lesson-1-3-2">
<header class="note-title">
The Heir of Cascade
</header>
<div class="note-text">
<p>
The "Cascading" part of CSS relates to the tree-like structure
(DOM) of HTML. Each element within an element inherits the CSS
style of it's parent element. More specific rules, meaning those
assigned to the most inner element will apply to that element
only if they replace the inherited rules.
</p>
</div>
</article>
<article class="note" id="lesson-1-3-3">
<header class="note-title">
Go to Class!
</header>
<div class="note-text">
<p>
Defining rules for HTML elements, CSS uses the element tag
or the class assigned to the element. The second way is best
as it is more versatile and can single out groups of elements
or single elements. The difference is between defining a rule
for <div> or defining a rule for the div with class
"title." The first will affect all div elements and the second
will only affect divs with the class specified "title."
</p>
</div>
</article>
<article class="note" id="lesson-1-3-4">
<header class="note-title">
Boxes can flex too
</header>
<div class="note-text">
<p>
Position boxes next to each other by using the flex box layout.
Change the display attribute of the parent container to a value
of "flex". The child elements will then position next to each
other.
</p>
</div>
</article>
<article class="note" id="lesson-1-3-5">
<header class="note-title">
Trust but Verify
</header>
<div class="note-text">
<p><a href="http://validator.w3.org/#validate_by_input">HTML</a> and
<a href="http://jigsaw.w3.org/css-validator/#validate_by_input">
CSS</a> can be verified using online varidators.
</p>
</div>
</article>
</section>
</section>
<section class="stage" id="stage-2">
<h2>Stage 2: Telling Computers What to Do</h2>
<header class="lesson" id="lesson-1">
<h3> Introduction to Serious Programming <h3>
</header>
<section class="lesson-container">
<article class="note" id="lesson-1-1">
<header class="note-title">
Toaster's are limited
</header>
<div class="note-text">
<p>Most machines are built to only do one thing. They are limited. A Computer can do many things but only if it has a program to tell it how. Programs are written in a programming language such as Python. When written in a language like python the code is passed to another program called an interpreter which converts the python language into something the computer knows what to do with.
</p>
</div>
</article>
<article class="note" id="lesson-1-2">
<header class="note-title">
a new language for computers
</header>
<div class="note-text">
<p>Natural languages have ambiguity. A sentence or phrase or even word can mean more than one thing. This doesn't work with computers which need to know <em>exactly</em> what to do.
</p>
</div>
</article>
<article class="note" id="lesson-1-3">
<header class="note-title">
Call your Grammar
</header>
<div class="note-text">
<p>Computer programming languages have their own grammar and syntax which much be adhered to.
</p>
</div>
</article>
</section>
<header class="lesson" id="lesson-2">
<h3> Variables and Strings <h3>
</header>
<section class="lesson-container">
<article class="note" id="lesson-2-1">
<header class="note-title">
Very able variables
</header>
<div class="note-text">
<p>Variables, which are names given to expressions, can change simply by assigning a new expression to the name. This is done in the same fashion as the initial assignment and can even use the variable in the new expression for assignment (e.g. days = days + 1)
</p>
</div>
</article>
<article class="note" id="lesson-2-2">
<header class="note-title">
Get Stringy with it
</header>
<div class="note-text">
<p>A string is a sequence of characters surrounded by quotes. One can use either a single quote or double quote but must use the same type to end the string as the one beginning the string.
</p>
</div>
</article>
<article class="note" id="lesson-2-3">
<header class="note-title">
String plus String
</header>
<div class="note-text">
<p>In Python Strings can be combined or "concatenated" by simply using the + operator between two strings. Numbers cannot be combined with strings. They must be converted to strings first
</p>
</div>
</article>
</section>
</section>
</div>
</div>
</body>
</html>