TutorialWebpage/JSTutorialWebpage.html at master · kjayres24/TutorialWebpage · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript Tutorial Webpage</title>
    <link rel="stylesheet" ref="text/css" href="JSTutorialWebpage.css">
    <link rel="stylesheet" href="animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

</head>

<body>


    <!-- NAVBAR-->
    <section class="sidebar">

        <nav>
            <sidebar>
                <ul>
                    <li class="list"><a href="">Home</a></li>
                    <li class="list"><a href="#objects">Objects</a></li>
                    <li class="list"><a href="#arrays">Arrays</a></li>
                    <li class="list"><a href="#loops">For Loops</a></li>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <h3 class="headersidebar">Helpful Links</h3>
                    <li class="list"><a href="https://www.w3schools.com/" target="blank"> W3Schools</a></li>
                    <li class="list"><a href="https://developer.mozilla.org/en-US/" target="blank">MDN Docs</a></li>
                    <li class="list"><a href="https://www.codecademy.com/" target="blank">Code Cademy</a></li>

                </ul>
            </sidebar>
        </nav>

    </section>

    <!--HEADER-->

    <section id="header">
        <div class="wrapper">
            <header class="animated bounceInDown">
                <h1>JavaScript Concepts</h1>
            </header>
        </div>


    </section>
    <!--BODY-->

    <section id="body">
        <article class="article1" id="objects">
            <h2>Objects</h2>
            <p>Objects are a collection of properties. My dog is an object and he holds many properties such as breed,
                name, age, etc. The property values differ from object to object or more specifically in my case, dog to
                dog. Each variable contains an object that contains values. Objects can hold a lot of related
                information. Example: my dog, which is the object has a key of ‘name’. His name, which is the value, is
                “Groot”.</p>
            <h5 class="margin">Example:</h5>
            <ul class="list1">
                <li>Let dog = { </li>
                <li>Name: “Groot”,</li>
                <li>Breed: “Great Dane”,</li>
                <li>Age: 2,</li>
                <li>Weight: 150lbs,</li>
                <li>Good Boy: True</li>
                <li>}</li>
            </ul>
        </article>
        <article class="article2" id="arrays">
            <h2>Arrays</h2>
            <p>Arrays are a type of variable. They can hold many values under a single name. An array's length can
                change at any time and its data can be stored at non-contiguous locations. Arrays are usually in
                brackets [ ] and are separated by commas. The index of an array starts at 0 and continues upward.</p>

            <h5 class="margin">Example:</h5>
            <ul class="list2">
                <li>Let dogBreeds = [“Great Dane”, “Newfoundland”, “Beagle”, “Corgi”];</li>
                <li>Console.log(dogBreeds[0]) ↢ this will spit out the dog breed Great Dane because it is in the 0
                    index. </li>
            </ul>
        </article>
        <article class="article3" id="loops">
            <h2>For Loops</h2>
            <p>A For Loop runs through a block of code a number of times which loops through the properties of an
                object. If you want to run a code over and over again, then a For Loop is your answer. It changes the
                value of the code you inputted. For loops are divided into three statements. The first sets a variable
                before the loop starts (i = 1). The second defines the condition for the loop to run (i < 9) and the
                    third increases the value each time (i++). With the example below, the answer will come out as 1, 2,
                    3, 4, 5, 6, 7, 8, 9.</p> <h5 class="margin">Example:</h5>
                    <ul class="list3">
                        <li>For (i = 1; i < 9; i++) {</li> <li>console.log(i);</li>
                        <li>}</li>
                    </ul>
        </article>

    </section>

    <!--FOOTER-->

    <section id="footer">
        <p> Copyright © Katie Ayres at Eleven Fifty Academy</p>


    </section>


</body>

</html>