Intro-to-Programming-Notes/IntroToProgrammingNotes.html at master · ktryber/Intro-to-Programming-Notes · GitHub

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
<!DOCTYPE HTML>
<html>
  <head>
    <title>
      Intro to Programming Notes: Stage 1
    </title>
    <link rel="stylesheet" href="css/intro.css">
  </head>

  <body>


<div class="navigation-bar">
	<ul>
		<li><a href="stage2.html">Stage 2:</a></li>
		<li><a href="Stage3.html">Stage 3:</a></li>
	</ul>
</div>

  	<div class="stage">
  		<h1>Stage 1: Make your Web Page</h1>
		  	<div class="lesson-title-box">
		  		<h2>Lesson 1: The basics of the Web and HTML</h2>

			  		<div class="concept">
			  			<div class="concept-title">
			  				<h3>HTML Notes</h3>
			  			</div>

			  			<div class="content">
			  				<p>
			  					Browsers are built to read pages of HTML code that then display text. HTML is written with a series of elements and tags that are organized in tree like structures from biggest to smallest. CSS then comes in to make that content have color, borders, flexible structure so that webpages can be viewed on different screen sizes, etc.
			  				</p>
			  			</div>
			  		</div>
			  		<div class="concept">
			  			<h3>Inline vs. Block Elements</h3>

			  			<div class="content">

			  					HTML elements can either be inline or block.
			  					<h3>Inline</h3>
			  					<p>
			  						Elements that appear inline with the text and do not have an invisible box around them.
			  					</p>
			  						<ul>
			  							<li>span</li>
			  							<li>a</li>
			  							<li>img</li>
			  						</ul>
			  					<h3>Block</h3>
			  						<p>
			  							Elements that have invisible boxes around them, most important for taking a mockup from a pdf format to HTML.
			  						</p>
			  							<ul>
			  								<li>h1,h2,h3</li>
			  								<li>p</li>
			  								<li>div</li>
			  							</ul>

			  			</div>
			  		</div>
		  	</div>

		  	<div class="lesson-title-box">
		  		<h2>Lesson 2: Creating a Structured Document with HTML</h2>

			  		<div class="concept">
			  			<h3>Text Editor</h3>
			  			  <div class="content">
			  				<p>
			  					I'm using Sublime Text, I've used it while learning PHP and Wordpress.
			  				</p>
			  			</div>
			  		</div>

			  		<div class="concept">
			  			<h3>HTML Structure</h3>
			  			<div class="content">
			  				<p>
			  					HTML code is written in a tree like structure to provide easier code readability. The indentation within the code presents to code in a readable fashion and allows you to stay organized when you have multiple elements working together.
			  				</p>
			  			</div>
			  		</div>
			  		<div class="concept">
			  			<h3>Box Model</h3>
			  			<div class="content">
			  				<p>
			  					The Box model:<br>
		              			<span class="margin-color">Margin</span> - Surrounds the box and serves as the space between the boxes<br>
		              			<span class="border-color">Border</span> - Borders the padding and the content<br>
		              			<span class="padding-color">Padding</span> - The padding clears the area around the content and takes the background color of the box, protects the content in the box.<br>
		              			<span class="content-color">Content</span> - This is the image or the text or the center of the box model.<br>
			  				</p>
			  					<div class="outer-box">
		              				<div id="box-model" class="box">
		                				Content...
		              				</div>
		            			</div>
			  			</div>
			  		</div>
			  		<div class="concept">
			  			<h3>Box Sizing Techniques</h3>

			  			<div class="content">
			  					<ol>
			  						<li>Set box sizes in % rather than pixels so that it changes with the browser size.</li>
			  						<li>Set the box-sizing attribute to border-box for every element. see the CSS for the code.</li>
			  						<li>Boxes are block style elements so before adjusting they will always take the whole width of the page. adding the display:flex; code to the surrounding div will allow them to appear next to each other.</li>
			  					</ol>
			  			</div>
			  		</div>
			  		<div class="concept">
			  			<h3>Code, Test Refine</h3>

			  			<div class="content">
			  					<ol>
			  						<li>Look for natural boxes</li>
			  						<li>Look for repeated styles and semantic elements</li>
			  						<li>Write your HTML</li>
			  						<li>Apply styles from biggest to smallest</li>
			  						<li>Fix things</li>
			  					</ol>
			  			</div>
			  		</div>
			  		<div class="concept">
			  			<h3>Looking for errors in HTML and CSS</h3>

			  			<div class="content">
			  					<ul>
			  						<li><a href="http://validator.w3.org/#validate_by_input">To verify HTML</a></li>
			  						<li><a href="http://jigsaw.w3.org/css-validator/#validate_by_input">To verify CSS</a></li>
			  					</ul>
			  			</div>
			  		</div>
		  	</div>
	</div>

<div class="navigation-bar">
	<ul>
		<li><a href="stage2.html">Stage 2:</a></li>
		<li><a href="Stage3.html">Stage 3:</a></li>
	</ul>
</div>


  </body>
</html>