Be respectful of your classmates and volunteers.
26 |
27 |
Do not talk over each other or the volunteers.
28 |
Respect each others space.
29 |
30 |
Help each other! Use each other as a resource.
31 |
32 |
Teaching is learning.
33 |
34 |
Mistakes are OK. Mistakes mean you're learning.
35 |
Have fun!
36 |
37 |
38 |
39 | ---
40 |
41 |
42 |
43 |
44 | # Volunteer Introductions
45 |
46 | ----
47 |
48 | # CJ
49 |
50 | * Your facilitator!
51 | * Graduated from Louisiana Tech University
52 | * BA Computer Science, Minor in Mathematics
53 | * Worked as a System Administrator, QA Analyst, Software Engineer, Full Stack Instructor
54 | * I am currently the Chief Full Stack Engineer at 303 Software
55 | * I live stream myself coding and teaching on Twitch and YouTube on the channel "Coding Garden with CJ"
56 |
57 | ---
58 |
59 |
60 |
61 |
62 | # Agenda
63 |
64 |
65 |
66 |
How the Web Works
67 |
Diagram the Full Stack
68 |
Use the terminal to create folders and files
69 |
Use "VS Code" to edit code files
70 |
Create a webpage with HTML
71 |
Style a web page with CSS
72 |
Make a web page interactive with JavaScript
73 |
Create a dynamic web server with Node.js
74 |
Store and retrieve data from a database
75 |
Deploy a static web site so anyone can access it
76 |
Deploy a dynamic web server so anyone can access it
77 |
78 |
79 |
80 | ---
81 |
82 | # How the Web Works
83 |
84 | ----
85 |
86 | ## Less like this...
87 |
88 |
89 |
90 | ----
91 |
92 | ## More like this!
93 |
94 | 
95 |
96 | ----
97 |
98 | ## Except it's really big...
99 |
100 |
101 |
102 | ----
103 |
104 |
105 |
106 | ## "THE CLOUD"
107 |
108 | ----
109 |
110 | 
111 |
112 | ----
113 |
114 | ## Draw this diagram with me
115 |
116 |
117 |
118 | ----
119 |
120 | # URL
121 | ### Uniform Resource Locator
122 |
123 | * Every web site on the world wide web has a unique address!
124 |
125 | ----
126 |
127 |
128 |
129 | ----
130 |
131 | # Exercise
132 |
133 | * Take 2 minutes to find a page from at least 2 of your favorite sites on the web.
134 | * Write down the URLs and circle / identify each part
135 | * All 8 parts may not be there...
136 |
137 | ---
138 |
139 | # The Terminal
140 |
141 | ----
142 |
143 | ## The Terminal
144 |
145 | * The terminal is a way to interact with files your computer.
146 | * It is similar to the "File Explorer" but instead of pointing and clicking on icons, everything is done with text "commands"
147 | * You can:
148 | * Go in to directories
149 | * List the files in a directory
150 | * Create files
151 | * Open files or programs
152 | * MUCH MORE!!
153 | * We will use the terminal to manage our files and manage the servers we create
154 | * There are many different types of shells. Today we will use a shell called `bash`
155 |
156 | ----
157 |
158 | ## Common Commands
159 |
160 | Print the current directory path
161 | ```sh
162 | pwd
163 | ```
164 | List the files in the current directory
165 | ```sh
166 | ls
167 | ```
168 | Go into a directory
169 | ```sh
170 | cd directorynamehere
171 | ```
172 | Create a new directory
173 | ```sh
174 | mkdir directorynametocreate
175 | ```
176 |
177 | ----
178 |
179 | ### Exercise
180 |
181 | * Open "Git Bash" on your computer
182 | * At the prompt, see what directory you are in: `pwd`
183 | * Create a directory called workspace: `mkdir workspace`
184 | * Go into the workspace directory: `cd workspace`
185 | * Check what directory you are in: `pwd`
186 | * Open a File Explorer window in the current directory: `explorer .`
187 | * Move this window to the side so you can see the other folders being created
188 | * Create a directory called my-full-stack-app: `mkdir my-full-stack-app`
189 | * List the files / folders in the directory: `ls`
190 | * Go into the directory: `cd my-full-stack-app`
191 | * Create a directory called client: `mkdir client`
192 | * Create a directory called server: `mkdir server`
193 | * List the files / folders in the directory: `ls`
194 | * Open VS Code in the current directory: `code .`
195 | * Use the File Explorer to verify all of the folders you have created.
196 | * When you are done: Help others around you!
197 |
198 | ---
199 |
200 |
201 |
202 | ----
203 |
204 | # VS Code
205 |
206 | * A file editor.
207 | * There are many other editors. VS Code is a popular one.
208 | * We will use VS Code to edit all of the files that will make up our full stack app.
209 |
210 | ---
211 |
212 | ## HTML
213 |
214 |
215 |
216 | ----
217 |
218 | ## HTML
219 |
220 | * Hypertext Markup Language
221 | * HTML is the foundation of the World Wide Web and the foundation for every web page.
222 | * Every page you view in a web browser is made up of HTML code (and other things...).
223 |
224 | ----
225 |
226 | * HTML describes the structure of a web page
227 | * HTML elements are represented by "tags"
228 | * HTML tags label pieces of content such as "heading", "paragraph", "image" etc.
229 | * Web Browsers do not display the HTML tags directly, but use them to "render" the content of the page
230 |
231 | ----
232 |
233 | ### A Heading Tag
234 |
235 | ```html
236 |
Hello World
237 | ```
238 |
239 | ### A Paragraph Tag
240 |
241 | ```html
242 |
Hello World
243 | ```
244 |
245 | ----
246 |
247 | ## Tags can be nested to create hierarchy
248 |
249 | ```html
250 |
251 |
Hello World
252 |
This is a web page.
253 |
254 | ```
255 |
256 | ----
257 |
258 | ## Anatomy of a Tag
259 |
260 |
261 |
262 | ----
263 |
264 | ## Exercise:
265 |
266 | * Take 2 minutes to find a page from one of your favorite sites on the web.
267 | * Press CTRL+U (in Chrome) while on the web page to open the HTML source code of the page.
268 | * Write down at least 10 different types of tags you see
269 |
270 | ----
271 |
272 | ## Exercise:
273 |
274 | * Go to VS Code
275 | * In the Explorer on the Left, "right click" the "client" folder and choose "New File"
276 | * Create a file called "index.html"
277 | * Write the following HTML code in the "index.html" file
278 | ```html
279 |
280 |
281 |
282 | My Full Stack App
283 |
284 |
285 |
286 |
287 | ```
288 |
289 | ----
290 |
291 | * `` let's the browser know this is an HTML5 document
292 | * The `` tag is the root of the document.
293 | * The `` tag contains information about our page. The content of the `` tag is not actually rendered on the page.
294 | * The `` tag sets the title of the page displayed in the tab
295 | * The `` will contain all of the content of the page.
296 | * Notice that each tag has a corresponding closing tag.
297 |
298 | ---
299 |
300 | # A Local Static File Server
301 |
302 | ----
303 |
304 | # Exercise:
305 |
306 | * Open "Git Bash"
307 | * Navigate to the "client" folder: `cd client`
308 | * Start the server in the client directory: `lite-server`
309 | * Google Chrome should automatically open `http://localhost:3000`.
310 | * You should see a blank page with the title of your web page in the tab.
311 | * In VS Code, add an `h1` title to the `body` of your `index.html` file.
312 | * Switch back to Google Chrome and you should see the title!
313 |
314 | ----
315 |
316 | ## What just happened?
317 |
318 | * lite-server is a static file server running on port `3000` on your computer
319 | * `localhost` means _your_ computer
320 | * When you visit `http://localhost:3000` in the web browser:
321 | * A GET request is made to the root of static file server
322 | * The server responds with the `index.html` file
323 | * The web browser renders the file
324 |
325 | ---
326 |
327 | # CSS
328 |
329 |
330 |
331 | ----
332 |
333 | ## CSS
334 |
335 | * Cascading Style Sheets
336 | * CSS allows us to apply styles to HTML elements on the page.
337 | * CSS can be defined in a separate `.css` file and linked to an HTML page.
338 |
339 | ```html
340 |
341 | My Full Stack App
342 |
343 |
344 | ```
345 |
346 | ----
347 |
348 | * CSS is made up style rules
349 | * A rule has a "selector"
350 | * Which element(s) on the page should have these styles
351 | * A rule has many "declarations"
352 | * A declaration has a "property" and a "value"
353 | * There are many CSS properties that can be changed!
354 | * Some common ones include: font-family, color, text-align, margin, padding, width, height
355 |
356 | ```css
357 | body {
358 | font-family: sans-serif;
359 | }
360 | h1 {
361 | color: dodgerblue;
362 | text-align: center;
363 | }
364 | ```
365 |
366 | ----
367 |
368 |
369 |
370 | ----
371 |
372 | # Exercise:
373 |
374 | * Go to VS Code
375 | * In the Explorer on the Left, "right click" the "client" folder and choose "New File"
376 | * Create a file called "styles.css"
377 | * Add a style rule to select the `body` tag and change the `font-family` to be `sans-serif`
378 | * Add a style rule to select the `h1` tag and change the `color` to be your favorite color and the `text-align` to be `center`
379 | * Open "index.html", in the `head` element add a link to the css file.
380 | * Go back to `http://localhost:3000` and the styles should be applied!
381 | ```html
382 |
383 | My Full Stack App
384 |
385 |
386 | ```
387 |
388 | ---
389 |
390 | # User Input
391 |
392 | ----
393 |
394 | ## HTML Forms
395 |
396 | * HTML Forms allow us to take in user input!
397 | * The `