├── Hack-Session-1-README.md ├── Learn-Session-2-README.md ├── Learn-Session-4-README.md ├── README.md ├── html-css-step-by-step.md ├── images └── docker-ps.png └── nodejs-handlebars-README.md /Hack-Session-1-README.md: -------------------------------------------------------------------------------- 1 | # Hack-Session-1-README 2 | 3 | ## Table of Contents 4 | 5 | - HTML Setup 6 | - Useful HTML Tags 7 | - div 8 | - h1, h2, h3, ... 9 | - p 10 | - img 11 | - input 12 | - a (Links/Anchor Tags) 13 | - ol, ul, li (Lists) 14 | - b, i, u 15 | - span 16 | - Useful CSS Syntax 17 | - Including your CSS 18 | - CSS General Syntax 19 | - Useful CSS Properties 20 | - Background and Border Properties 21 | - color 22 | - opacity 23 | - background-color 24 | - background-image 25 | - background-size 26 | - border 27 | - border-bottom, border-top, border-left, border-right 28 | - Basic Box Properties 29 | - float 30 | - width, height 31 | - margin 32 | - margin-bottom, margin-top, margin-left, margin-right 33 | - padding 34 | - padding-bottom, padding-top, padding-left, padding-right 35 | - Text Properties 36 | - text-align 37 | - text-decoration 38 | - Font Properties 39 | - font 40 | - font-family 41 | - font-size 42 | - font-weight 43 | - Miscellaneous 44 | - cursor 45 | - Flexboxes 46 | - Creating a Flexbox 47 | - Useful Flexbox Properties 48 | - flex-direction 49 | - justify-content 50 | - align-items 51 | - Classes and IDs 52 | - Classes 53 | - IDs 54 | - Creating a Navigation Bar 55 | - Navigation Bar = List of Links 56 | - Creating Clickable Blocks 57 | - Changing Color on Hover 58 | - Making the Bar Horizontal 59 | - Fixed Navigation Bars 60 | 61 | --- 62 | 63 | ## HTML Setup 64 | 65 | ``` 66 | 67 | 68 | 69 | Landing page 70 | 71 | 72 | // Stuff will go here! 73 | 74 | 75 | ``` 76 | 77 | - \ lets the browser know it’s an HTML doc 78 | - \ and \ tags denote where the content of HTML goes 79 | - \ tag includes information that isn’t displayed, such as the title of the webpage 80 | - \ tag defines a title for the page used in the browser toolbar and search results 81 | - \<body> tag surrounds all visible content. 82 | 83 | 84 | 85 | ## Useful HTML Tags 86 | 87 | ### <a name="HS1-div">\<div></a> 88 | 89 | - The **div** tag is the most generic tag used to hold any content 90 | - Used to divide the website into different sections 91 | 92 | #### Example 93 | 94 | ``` 95 | <div> 96 | Content goes here. 97 | </div> 98 | ``` 99 | 100 | <img src="https://lh4.googleusercontent.com/gvtDD-gCq4wpm7_OScu0UQhW1TIOc_QsqXALtynb8pKmaHeJHzhgUdnz6LKVChWXBcd8iOw-D5AaNiKccJZn-94OiMjvxYlul3PnFvIJ1tk_ECrydVdQtwvw3bFyCVgVPTksgf1F" width="200px"> 101 | 102 | --- 103 | 104 | ### <a name="HS1-headers">\<h1>, \<h2>, \<h3>, ... (Headers)</a> 105 | 106 | - A **header** tag can be from 1-6, with 1 being the most important/largest, to 6 being the least important/smallest. 107 | - Use header tags to express section headers and other important information. 108 | 109 | #### Example 110 | 111 | <img src="https://lh4.googleusercontent.com/77DiON_TfywT5RQgmB2PgeGSdWl8-CMQCulWn9D4o-U-A8r5qONych2FiSThZ1SBBO1JGB1ewQ4s55tCj6sDg9Fddu2XKCh4gTz5tD2OJzp-lfT0q-c5Mnt2uxer7PCRi52AD76FPls" align="center" width="200px"/> 112 | 113 | --- 114 | 115 | ### <a name="HS1-p">\<p></a> 116 | 117 | - A **p** tag is a paragraph tag used to hold text, even if it’s just a small line. 118 | 119 | <u>Example</u> 120 | 121 | ``` 122 | <p>Here is some text</p> 123 | ``` 124 | 125 | <img src="https://lh5.googleusercontent.com/WDp6zOr5EQhbrh-LVKkydt_k7o8ktnW36htxEnphG7xRfQHZt60R-36B-_T3kn--hNdvAlyzzJ1A5naPECve-023somagxWFQptjLdROrcQmIBcT7a88VnFnoDiE_rGLACcsB8dA" width="200px"/> 126 | 127 | --- 128 | 129 | ### <a name="HS1-img">\<img></a> 130 | 131 | - An **img** tag is an image tag, and it is used to insert images. 132 | - img tags generally have a src attribute, whose value is a URL to an image. 133 | 134 | #### Example 135 | 136 | ``` 137 | <img src="https://i.ytimg.com/vi/ZHgtIyZX_q8/maxresdefault.jpg"/> 138 | ``` 139 | 140 | <img src="https://i.ytimg.com/vi/ZHgtIyZX_q8/maxresdefault.jpg" width="300px"/> 141 | 142 | --- 143 | 144 | ### <a name="HS1-input">\<input></a> 145 | 146 | - The \<input> tag is used to gather input from users. 147 | - It has an attribute (type) with a value of “text”, “number”, or “submit” based on what you want the user to input. 148 | - You can also have a placeholder. 149 | - Note that there are many ways to handle input; some ways are more appropriate than others in certain situations. 150 | 151 | #### Example 152 | 153 | ``` 154 | <input type="text" placeholder="input stuff here"> 155 | ``` 156 | 157 | <img src="https://lh6.googleusercontent.com/RiWsuVfuU-oJRiEJiUupGrKBFXYztDNc-g48e6njwsTtXCV5XAUKbxAy-rgT2AAypAJnc6gbKPpKR97JADqQiMWoiMqeywzYhBGWQdbprYR2buptLFGmQ0xYOGD1HRlbtHKdrwGKHgo" width="200px"/> 158 | 159 | --- 160 | 161 | ### <a name="HS1-a">\<a> (Links/Anchor Tags)</a> 162 | 163 | - An **anchor** is a piece of text which marks the beginning and/or the end of a hypertext link. 164 | - The text between the opening **tag** and the closing **tag** is either the start or destination (or both) of a link. 165 | 166 | #### Linking Web URLs 167 | 168 | - To link a web address, simply use the href attribute and assign it the URL. 169 | 170 | ##### Example 171 | 172 | ``` 173 | <a href="www.google.com">Click Here to go to Google</a> 174 | ``` 175 | 176 | <img src="https://lh3.googleusercontent.com/-MR5GH1teD2a48f4vlbeGiuF0GvLzq7uRETIOzu4_-2Ps8FIS6fHK5kKZqrR50Co3WeLQ-_7wLfJQloRgcsOnu-_N26CpiJRrD-_CDHeJbsYnOMCn31DWVk8ZMXxh29j6htAJGkkB64" width="200px"/> 177 | 178 | ##### Linking to a Place on your Website 179 | 180 | - To link to a certain line on your page you need to use <a href="#HS1-ids">IDs</a>. 181 | 182 | --- 183 | 184 | ### <a name="HS1-lists">\<ol>, \<ul>, \<li> (Lists)</a> 185 | 186 | - An **u**nordered **l**ist (ul) has no numbers, just bullets. It is contained within \<ul> and \</ul> tags. 187 | 188 | 189 | - An **o**rdered **l**ist (ol) is used for ordering, and it automatically numbers list items. 190 | 191 | 192 | - To populate our list, we use \<li>\</li> tags, which stand for **l**ist **i**tems. 193 | 194 | #### Examples 195 | 196 | ``` 197 | <ol> 198 | <li>First list item</li> 199 | <li>Second list item</li> 200 | </ol> 201 | ``` 202 | 203 | <img src="https://lh6.googleusercontent.com/H6JbFg-tFCryLOap8AwKOFVQZkB8BW853oqud_NoKJpfS9O45TrCsqCDffm93Q2i1T4PLKB2bgf6ElCm6UOGovd-rvoBhiRKa5eHnkbOnGWTkef95FGgVe7VRWnaDz1KLRWet9to0dE" width="200px"/> 204 | 205 | ``` 206 | <ul> 207 | <li>Rock Climbing</li> 208 | <li>Cooking</li> 209 | <li>ACM</li> 210 | </ul> 211 | ``` 212 | 213 | <img src="https://lh4.googleusercontent.com/uE34mFhdRGMVmkpSbF4P1PxPMt7iVJyGohJ94kxptugcrejGBULE_B_Tc7mlmNOyRDNRU1UiMOFIrdK3LokB6lnsL_gXI0aZawSFyEADQl9cSYFMqWmO_FHvY6sFLcNCuosYWF22Xbg" width="200px"/> 214 | 215 | --- 216 | 217 | ### <a name="HS1-biu">\<b>, \<i>, \<u></a> 218 | 219 | - Use \<b> to **bold** text 220 | - Use \<i> to *italicize* text 221 | - Use \<u> to <u>underline</u> text 222 | - Refer to the <a href="#HS1-CSS">CSS</a> section for more styling. 223 | 224 | #### Example 225 | 226 | ``` 227 | <b>This text is bolded.</b> 228 | <u><i>This text is underlined and italicized</i></u> 229 | ``` 230 | 231 | <img src="https://lh5.googleusercontent.com/ychGE6cA-9jgw9qtdw34sCu1n0RMkdSr0Dq1XcnIdYWTGcddXCc4BkBIVOi_dsARNSWQp3KNnTVI19IZj9cBjuYdVsOWIwVLhfvRkYmGZzJbjaMmeBWcR6_I8LJq75JXPiJkGpxM" width="500px"/> 232 | 233 | --- 234 | 235 | ### <a name="HS1-span">\<span></a> 236 | 237 | - The \<span> tag is used to group inline-elements in a document. 238 | - The \<span> tag provides no visual change by itself. 239 | - The \<span> tag provides a way to add a hook to a part of a text or a part of a document. 240 | 241 | #### Example 242 | 243 | ``` 244 | <p>My mother has <span style="color:blue">blue</span> eyes</p> 245 | ``` 246 | 247 | <img src="https://lh3.googleusercontent.com/G0fxHQDJ6qjYMoW9aSyaUXgEHOQ4DFhfX-aM4JvF5F8br6_j8DBQmfASTWXrOKJUvFdVDKMNjgHOiDzWurq3KNJF6WjkCYwHNhGeH-u_Lp77NTOe1CtZox563yr7M-I_2y0fsAkC" width="200px"/> 248 | 249 | --- 250 | 251 | ## <a name="HS1-CSS">CSS</a> 252 | 253 | - CSS stands for Cascading Style Sheets, and it can be used to add color, change element sizes, and format your page. 254 | - Main idea: select a particular element or a group of elements to apply styling to 255 | - ie. make all \<h1> tags blue, give all \<p> tags a border and change their font size, etc. 256 | 257 | 258 | 259 | ## Useful CSS Syntax 260 | 261 | ### <a name="HS1-including-your-css">Including your CSS</a> 262 | 263 | In your HTML file after your \<title> tag in your \<head>, add the following line: 264 | 265 | ``` 266 | <head> 267 | <title>Landing page 268 | 269 | 270 | ``` 271 | 272 | --- 273 | 274 | ### CSS General Syntax 275 | 276 | - property: value 277 | 278 | #### Example 279 | 280 | ``` 281 | p { 282 | text-align: center; 283 | color: red; 284 | } 285 | ``` 286 | 287 | 288 | 289 | ## Useful CSS Properties and Values 290 | 291 | ### Background and Border Properties 292 | 293 | ### color 294 | 295 | - Sets the color of text 296 | 297 | - Sample Values: 298 | 299 | - Black 300 | - Blue 301 | - Brown 302 | - DarkGray 303 | - A list of more legal names can be found at: https://www.w3schools.com/colors/colors_names.asp 304 | 305 | - Hexadecimal Colours: 306 | 307 | - A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) **hexadecimal** integers specify the components of the color. All values must be between 00 and FF. 308 | 309 | - Example 310 | 311 | ``` 312 | color: #ff0000; /* red */ 313 | color: #00ff00; /* green */ 314 | color: #0000ff; /* blue */ 315 | ``` 316 | 317 | - RGBA Colours: 318 | 319 | - An RGBA color value is specified with: rgba(red, green, blue, alpha). 320 | 321 | - The parameters red, green, and blue define the intensity of the color and each can be an integer between 0 and 255 or a percentage value (from 0% to 100%). 322 | 323 | - The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). 324 | 325 | - Example 326 | 327 | ``` 328 | color: rgba(255, 0, 0, 0.3);/* red with 30% opacity */ 329 | color: rgba(0, 255, 0, 0.3); /* green " " " */ 330 | color: rgba(0, 0, 100%, 0.3); /* blue " " " */ 331 | ``` 332 | 333 | 334 | --- 335 | 336 | ### opacity 337 | 338 | - Sets the opacity (transparency) level for an element 339 | - Decimal number ranging between 0.0 and 1.0 340 | 341 | #### Example 342 | 343 | ``` 344 | opacity: 0.5; 345 | ``` 346 | 347 | --- 348 | 349 | ### background-color 350 | 351 | - Sets the background color of a single element 352 | - Legal colors can be found above under the **color** section 353 | 354 | #### Example 355 | 356 | ``` 357 | body { 358 | background-color: yellow; 359 | } 360 | 361 | h1 { 362 | background-color: #00ff00; 363 | } 364 | 365 | p { 366 | background-color: rgb(255,0,255); 367 | } 368 | ``` 369 | 370 | --- 371 | 372 | ### background-image 373 | 374 | - Sets one or more background images for an element 375 | - By default, a background-image is placed at the top-left corner of an element, and **repeated** both vertically and horizontally. 376 | - **Tip:** Always set a background-color to be used if the image is unavailable. 377 | - To reference an image url in a .css file, use the syntax url(*your file path here*) 378 | 379 | #### Example 380 | 381 | ``` 382 | body { 383 | background-image: url("paper.gif"); 384 | background-color: #cccccc; 385 | } 386 | ``` 387 | 388 | --- 389 | 390 | ### background-size 391 | 392 | - Specifies the size of the background images 393 | 394 | #### Example 395 | 396 | ``` 397 | div { 398 | background: url(img_flwr.gif); 399 | background-size: 80px 60px; 400 | background-repeat: no-repeat; 401 | } 402 | ``` 403 | 404 | --- 405 | 406 | ### border 407 | 408 | - Sets all the border properties in one declaration 409 | - Sample Border Styles: 410 | - solid 411 | - dotted 412 | - dashed 413 | - double 414 | - none 415 | - A list of more legal names can be found at: https://www.w3schools.com/css/css_border.asp 416 | 417 | #### Example 418 | 419 | ``` 420 | p { 421 | border: 5px solid red; 422 | } 423 | ``` 424 | 425 | --- 426 | 427 | ### border-bottom, border-top, border-left, border-right 428 | 429 | - Sets the border properties of a specific side in one declaration 430 | 431 | #### Example 432 | 433 | ``` 434 | p { 435 | border-bottom: 5px double #ff0000; 436 | } 437 | ``` 438 | 439 | --- 440 | 441 | ### Basic Box Properties 442 | 443 | ### float 444 | 445 | - Specifies whether or not a box (an element) should float 446 | 447 | #### Example 448 | 449 | ``` 450 | img { 451 | float: right; 452 | } 453 | ``` 454 | 455 | 456 | 457 | --- 458 | 459 | ### width, height 460 | 461 | - Sets the width and height of an element 462 | 463 | #### Example 464 | 465 | ``` 466 | p.ex { 467 | height: 100px; 468 | width: 100px; 469 | } 470 | ``` 471 | 472 | 473 | 474 | --- 475 | 476 | ### margin 477 | 478 | - Sets all the margin properties in one declaration. 479 | - This property can have from one to four values. 480 | - **Note:** Negative values are allowed (might be used to hide things) 481 | 482 | #### Examples 483 | 484 | ``` 485 | p { 486 | margin: 2cm 4cm 3cm 4cm; 487 | } 488 | ``` 489 | 490 | - top margin is 2cm 491 | - right margin is 4cm 492 | - bottom margin is 3cm 493 | - left margin is 4cm 494 | 495 | ``` 496 | margin: 10px 5px 15px; 497 | ``` 498 | 499 | - top margin is 10px 500 | - right and left margins are 5px 501 | - bottom margin is 15px 502 | 503 | ``` 504 | margin: 10px 5px; 505 | ``` 506 | 507 | - top and bottom margins are 10px 508 | - right and left margins are 5px 509 | 510 | ``` 511 | margin: 10px; 512 | ``` 513 | 514 | - all four margins are 10px 515 | 516 | 517 | --- 518 | 519 | 520 | ### margin-bottom, margin-left, margin-right, margin-top 521 | 522 | - Sets the margin property of a specific side in one declaration 523 | 524 | #### Example 525 | 526 | ``` 527 | p { 528 | margin-bottom: 2cm; 529 | } 530 | ``` 531 | 532 | --- 533 | 534 | ### padding 535 | 536 | - Sets all the padding properties in one declaration 537 | 538 | #### Examples 539 | 540 | ``` 541 | p { 542 | padding: 2cm 4cm 3cm 4cm; 543 | } 544 | ``` 545 | 546 | ``` 547 | padding: 10px 5px 15px; 548 | ``` 549 | 550 | ``` 551 | padding: 10px 5px; 552 | ``` 553 | 554 | ``` 555 | padding: 10px; 556 | ``` 557 | 558 | - Refer to the above section on **margin** for the meaning of the above statements 559 | 560 | 561 | --- 562 | 563 | 564 | ### padding-bottom, padding-left, padding-right, padding-top 565 | 566 | - Sets the padding property of a specific side in one declaration 567 | 568 | #### Example 569 | 570 | ``` 571 | p { 572 | padding-bottom: 2cm; 573 | } 574 | ``` 575 | 576 | --- 577 | 578 | ### Text Properties 579 | 580 | ### text-align 581 | 582 | - Specifies the horizontal alignment of text in an element 583 | 584 | #### Example 585 | 586 | ``` 587 | h1 { 588 | text-align: center; 589 | } 590 | 591 | h2 { 592 | text-align: left; 593 | } 594 | 595 | h3 { 596 | text-align: right; 597 | } 598 | ``` 599 | 600 | --- 601 | 602 | ### text-decoration 603 | 604 | - Specifies the decoration added to text 605 | 606 | #### Example 607 | 608 | ``` 609 | h1 { 610 | text-decoration: overline; 611 | } 612 | 613 | h2 { 614 | text-decoration: line-through; 615 | } 616 | 617 | h3 { 618 | text-decoration: underline; 619 | } 620 | ``` 621 | 622 | 623 | 624 | --- 625 | 626 | ### Font Properties 627 | 628 | ### font 629 | 630 | - Sets all the font properties in one declaration 631 | - The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family" 632 | - The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any. 633 | 634 | #### Examples 635 | 636 | ``` 637 | p.ex1 { 638 | font: 15px arial, sans-serif; 639 | } 640 | 641 | p.ex2 { 642 | font: italic bold 12px/30px Georgia, serif; 643 | } 644 | ``` 645 | 646 | --- 647 | 648 | ### font-family 649 | 650 | - Specifies the font for an element 651 | - The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. 652 | 653 | #### Example 654 | 655 | ``` 656 | p { 657 | font-family: "Times New Roman", Georgia, Serif; 658 | } 659 | ``` 660 | 661 | --- 662 | 663 | ### font-size 664 | 665 | - Sets the size of a font 666 | - Sample sizes: 667 | - medium 668 | - small 669 | - x-small 670 | - xx-large 671 | - A full list of legal sizes can be found at: https://www.w3schools.com/cssref/pr_font_font-size.asp 672 | 673 | #### Examples 674 | 675 | ``` 676 | h1 { 677 | font-size: 250%; 678 | } 679 | 680 | h2 { 681 | font-size: 20px; 682 | } 683 | 684 | p { 685 | font-size: 100%; 686 | } 687 | ``` 688 | 689 | --- 690 | 691 | ### font-weight 692 | 693 | - Sets how thick or thin characters in text should be displayed 694 | 695 | #### Examples 696 | 697 | ``` 698 | p.normal { 699 | font-weight: normal; 700 | } 701 | 702 | p.thick { 703 | font-weight: bold; 704 | } 705 | 706 | p.thicker { 707 | font-weight: 900; 708 | } 709 | ``` 710 | 711 | --- 712 | 713 | ### Miscellaneous 714 | 715 | ### cursor 716 | 717 | - Specifies the type of cursor to be displayed when pointing on an element 718 | 719 | #### Example 720 | 721 | ``` 722 | span.crosshair { 723 | cursor: crosshair; 724 | } 725 | 726 | span.help { 727 | cursor: help; 728 | } 729 | 730 | span.wait { 731 | cursor: wait; 732 | } 733 | ``` 734 | 735 | ### Flexboxes 736 | 737 | 738 | 739 | - The main idea behind the flex layout is to give a container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). 740 | - A flex container expands items to fill available free space, or shrinks them to prevent overflow. 741 | - **Note**: a comprehensive guide to flexboxes can be found at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 742 | 743 | --- 744 | 745 | ### Creating a Flexbox 746 | 747 | In your CSS: 748 | 749 | ``` 750 | .class-name { 751 | display: flex; 752 | } 753 | ``` 754 | 755 | --- 756 | 757 | ### Useful Flexbox Properties 758 | 759 | #### flex-direction 760 | 761 | - Defines the direction flex items are placed in the flex container. 762 | - Think of flex items as primarily laying out either in horizontal rows or vertical columns. 763 | - Possible values are: 764 | - row (default) 765 | - items are left-to-right 766 | - row-reverse 767 | - items are right-to-left 768 | - column 769 | - items are top-to-bottom 770 | - column-reverse 771 | - items are bottom-to-top 772 | 773 | #### Example 774 | 775 | ``` 776 | .container { 777 | flex-direction: column 778 | } 779 | ``` 780 | 781 | --- 782 | 783 | #### justify-content 784 | 785 | - Defines the alignment of items along the main axis of the box. 786 | 787 | - Possible values are: 788 | 789 | 790 | 791 | ### Example 792 | 793 | ``` 794 | .container { 795 | justify-content: center; 796 | } 797 | ``` 798 | 799 | ------ 800 | 801 | ### align-items 802 | 803 | - This defines the default behaviour for how flex items are laid out along the "cross axis" on the current line. 804 | 805 | - Assuming your flex-box is left-to-right, justify-content will determine the position of items **horizontally** (like an x-coordinate), whereas align-items will determine the position of items **vertically** (like a y-coordinate). 806 | 807 | - Possible values are: 808 | 809 | 810 | 811 | #### Example 812 | 813 | ``` 814 | .container { 815 | align-items: center; 816 | } 817 | ``` 818 | 819 | --- 820 | 821 | ## Classes and IDs 822 | 823 | ### Classes 824 | 825 | - The class selector selects elements with a specific class attribute 826 | - Classes should be used when you want multiple HTML elements to have the same style. 827 | - To select elements with a specific class, write a period (.) character, followed by the name of the class. 828 | 829 | #### Example 830 | 831 | ``` 832 | .center { 833 | text-align: center; 834 | color: red; 835 | } 836 | 837 |

Red and center-aligned heading

838 |

Red and center-aligned paragraph.

839 | ``` 840 | 841 | 842 | 843 | --- 844 | 845 | ### IDs 846 | 847 | - The id selector uses the id attribute of an HTML element to select a specific element. 848 | - The id of an element should be unique within a page, so the id selector is used to select one unique element! 849 | - e.g. A title or header of a specific section 850 | - To select an element with a specific id, write a hash (#) character, followed by the id of the element. 851 | - **Note:** An id name cannot start with a number! 852 | 853 | #### Example 854 | 855 | ``` 856 | #para1 { 857 | text-align: center; 858 | color: red; 859 | } 860 | 861 |

Hello World!

862 |

This paragraph is not affected by the style.

863 | ``` 864 | 865 | 866 | 867 | ## Creating a Navigation Bar 868 | 869 | Having easy-to-use navigation is important for any web site. 870 | 871 | With CSS you can transform boring HTML menus into good-looking navigation bars. 872 | 873 | --- 874 | 875 | ### Navigation Bar = List of Links 876 | 877 | A navigation bar is basically a list of links, so using the \