├── .gitignore ├── README.md ├── RESOURCES.md ├── package-lock.json ├── package.json └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🥞 3 | revealOptions: 4 | transition: 'zoom' 5 | --- 6 | 7 | # Full ✨ Stack 🥞 Development 💻 8 | ### How the Web Works 9 | 10 | --- 11 | 12 | 13 | 14 | # WELCOME! 15 | 16 | --- 17 | 18 | 19 | 20 | 21 | ## Expectations 22 | 23 |
24 | 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 | 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 | ![](https://s3.amazonaws.com/media-p.slid.es/uploads/167545/images/1645294/simple-network.jpg) 95 | 96 | ---- 97 | 98 | ## Except it's really big... 99 | 100 | 101 | 102 | ---- 103 | 104 | 105 | 106 | ## "THE CLOUD" 107 | 108 | ---- 109 | 110 | ![](https://i.imgur.com/oRo1XtL.png) 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 `<body>` 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 | <img src="https://i.imgur.com/nm5zIvg.png" class="lg-img"> 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 | <head> 341 | <title>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 `
` tag contains the form elements 398 | * The `