web-dev-examples/index.html at main · Lee-Rice/web-dev-examples · 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
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/index.css">
    <script src='js/index.js'>
    </script>
    <meta charset="UTF-8" />
    <title>Web Development Examples</title>
    <nav>
        <div class="examples">
            <ul class="nav_link_list">
                <li>
                    <a href=#ext_link_list>CSS Link Formatting</a>
                </li>

                <li>
                    <a href=#link_highlighting>Highlighting Selected Links</a>
                </li>

            </ul>
        </div>
    </nav>
</head>

<body>
    <h2> Purpose</h2>
    <p>
        This site is a collection of web development examples I've put together for teaching purposes. Readability has been chosen over concision in each example.

        <h3>CSS Link Formatting</h3>
        <p>
            Note how in the CSS file how the multiple links have been selected by a single class, "external_link", and the text color of the links changed.
        </p>
        <div class="examples">
            <ul class="ext_link_list">
                <li>
                    <a class="external_link" href="https://www.debian.org">Debian</a>
                </li>

                <li>
                    <a class="external_link" href="https://www.linuxmint.com">Linux Mint</a>
                </li>
            </ul>
        </div>

        <h3>Highlighting Selected Links</h3>
        <p>
            Selecting a link changes the background color of the selected link and removes the background from other links.
        </p>
        <div class="examples">
            <ul class="nav_list">
                <li>
                    <a class="nav_list_item" id="link_1" href=#link1>Link 1</a>
                </li>
                <li>
                    <a class=" nav_list_item" id="link_2" href=#link2>Link 2</a>
                </li>
                <li>
                    <a class="nav_list_item" id="link_3 " href=#link3>Link 3</a>
                </li>
            </ul>
        </div>

        <footer>
            Author: Lee Rice <br> Last updated: 09/16/2024
        </footer>
</body>

</html>