-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (147 loc) · 7.39 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Hackademia</title>
<link rel="stylesheet" href="main/main.css">
</head>
<body>
<div class="image">
<img src="main/webdev.png">
</div>
<div id="goals">
<h1>GOALS</h1>
<p>- Teach the Basic Concepts of Web Dev in 20 minutes with less than 100 lines of code</p>
<p>- Focus on theoretical knowledge vs practical syntax</p>
<p>- Deep understanding of interconnected components of HTML, CSS, JS.</p>
</div>
<div class="image">
<img src="main/instructor.png">
</div>
<div id="Browser">
<h1>Browser</h1>
<p>
The worlds information is stored in files, from txt to png to gif to mp4.
Files are stored in folders, servers, etc, from your laptop to a dataserver.
</p>
<p>
A web browser takes you anywhere on the internet.
It retrieves information from other parts of the web and displays it on your desktop or mobile device.
The information is transferred using the Hypertext Transfer Protocol,
which defines how text, images and video are transmitted on the web.
This information needs to be shared and displayed in a consistent format so that people using any browser,
anywhere in the world can see the information.
</p>
<p>
The browser also runs a browser (rendering) engine and a javascript engine, which we will explain in a bit.
</p>
</div>
<div id="HTML">
<h1>Hypertext Markup Language</h1>
<p>
The web browser fetches data from an internet connected server
and it then uses a piece of software called a rendering engine
to translate that data into text and images.
This data is written in Hypertext Markup Language (HTML)
and web browsers read this code to create what we see, hear and experience on the internet.
</p>
<p>
Hyperlinks allow users to follow a path to other pages or sites on the web.
Every webpage, image and video has its own unique Uniform Resource Locator (URL),
which is also known as a web address.
When a browser visits a server for data,
the web address tells the browser where to look for each item that is described in the HTML,
which then tells the browser where it goes on the web page.
</p>
</div>
<div id="CSS">
<h1>Cascading Style Sheets</h1>
<p>
CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
It's changes to parent nodes cascade down to all of its children,
unless the child has a specified style,
which cascades down to its children but does not affect its parent or other siblings.
Using Class and ID, you can target specific nodes or groups of nodes.
Read the Dom if you are confused by Parent-Node Relationships.
</p>
</div>
<div id="Javascript">
<h1>Javascript</h1>
<p>
Javascript is a programming language.
The browser has a javascript engine to compile and run javascript.
</p>
</div>
<div id="DOM">
<h1>Document Object Model</h1>
<p>
The Document Object Model (DOM) is a cross-platform and language-independent interface
that treats a HTML document as a tree structure wherein each node is an object representing a part of the document.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects.
DOM methods allow programmatic access to the tree;
with them one can change the structure, style or content of a document.
Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.
</p>
<p>
When a web page is loaded, the browser creates a Document Object Model of the page,
which is an object oriented representation of an HTML document that acts as an interface between JavaScript and the document itself.
This allows the creation of dynamic web pages, because within a page JavaScript can:
</p>
<p>
- add, change, and remove any of the HTML elements and attributes <br>
- change any of the CSS styles <br>
- react to all the existing events <br>
- create new events <br>
</p>
</div>
<div id="DOMexample">
<p>
The Document Object Model is a programming API for documents.
The object model itself closely resembles the structure of the documents it models.
For instance, consider this table, taken from an HTML document:<br>
</p>
<p>
<TABLE><br>
<ROWS> <br>
<TR> <br>
<TD>Shady Grove</TD><br>
<TD>Aeolian</TD> <br>
</TR> <br>
<TR><br>
<TD>Over the River, Charlie</TD><br>
<TD>Dorian</TD><br>
</TR> <br>
</ROWS><br>
</TABLE><br>
</p>
<p>
The Document Object Model represents this table like this:
</p>
<div class="image">
<img src="main/domexample.jpg">
</div>
</div>
<div id="Resources">
<h1>Resources</h1>
<h3>Example Websites</h3>
<p>
<a href="env-sci/index.html">Environmental Science Homepage</a><br>
<a href="hackademia/index.html">Hackademia Website</a><br>
<a href="tictactoe/index.html">Tictactoe</a><br>
</p>
<h3>Web Development</h3>
<p>
w3school - Introductory Guides to creating things with HTML, CSS, JS, and much more. <br>
developer.mozilla.org - Advanced Guides to specific and complex components of web dev. <br>
f12 developer tools - Used to debug, test, and explore websites inner workings. <br>
</p>
<h3>Web Design</h3>
<p>
Instagram - Great Resource for design inspiration, tutorials, and helpful tips and tricks. <br>
Dribbble - Website specifically to showcase digital designs and creations.<br>
Awwwards - Website specifically to showcase and rank websites that are fully developed and designed. <br>
Google Material.IO Color Tool - Easy to use Color Picker. <br>
Google Fonts - Massive Library of popular fonts. <br>
</p>
</div>
</body>
</html>