web-design-101/tutorial.html at master · VidyaSource/web-design-101 · 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
<!DOCTYPE html>
<html>
<head>
    <title>Vidya Tutorial | Web Design 101</title>

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link href="assets/stylesheets/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="assets/stylesheets/theme.css" rel="stylesheet" type="text/css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="assets/javascripts/tutorial.js"></script>
</head>
<body>
    <header>
        <img src="assets/images/vidya_logo.png" id="logo">
    </header>
    <h1>Vidya Tutorial: Web Design 101</h1>

    <h3>The relationship between HTML, CSS, and JavaScript</h3>

    <article>
        <section>
            <p>
                HTML, CSS, and, JavaScript are essential technologies for any website. They all do different things, but
                they blend together nicely to create a great experience for your users.
            </p>
        </section>
        <section>
            <h1>HTML</h1>

            <p>
                HTML defines the structure of a web page. It has all the "stuff" in it: text, images, links, textboxes,
                buttons,
                dropdowns, etc.
                Just dump it all into the page to get started.
            </p>
        </section>
        <section>
            <h1>CSS</h1>

            <p>
                CSS makes it all pretty. It defines everything about the look of every element: colors, dimensions,
                spacing, fonts, etc. If
                you're really clever, you can use CSS to do some basic animations and other effects. This tutorial uses
                some CSS
                from the awesome <a href="http://getbootstrap.com/2.3.2/">Twitter Bootstrap</a> project.
            </p>
        </section>
        <section>
            <h1>JavaScript</h1>

            <p>
                JavaScript gives your page life. It is a programming language where you can write code, or use other
                people's code,
                to make your page do cool things. This tutorial uses the beloved <a href="http://jquery.com/">JQuery</a>
                library to
                help the button do some work.
            </p>
        </section>
    </article>

    <div class="center">
        <input type="button" value="Show me something" class="btn btn-primary btn-large" id="button">
    </div>
</body>
</html>