web_apps_html_css_javascript/install-extension.html at master · MarsRising/web_apps_html_css_javascript · 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
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>VS COde Live Server Extension Setup</title>
    </head>
    <body>
        <h1>How to Install and Use VS Code's Live Server Extension </h1>
        <nav>
            <a href="#install">
                Install
            </a> | <a href="#use">Use<a/>
                | <a href="Videos">Video</a>
        </nav>
        <section id="install">
            <h2>Installation Instructions</h2>
            <ol>
                <li>
                    In <a href="https://code.visualstudio.com">Visual Studio Code</a>, click the <img src="images/ext-icon.png" alt="Extensions view icon"/>Extesnions icon in the left column toolbar
                </li>
                <li>
                    In the search bar that appears, type <em>Live Serve</em>.
                </li>
                <li>
                    Select the Live the Server Extension. I should be the top choice
                </li>
                <li>
                    In the page for Live Server that appears, click the green Install Button.
                </li>
            </ol>
        </section>
        <section id="use">
            <h2>Usage Instructions</h2>
            <ul>
                <li>
                    Visual Studio Code <strong>must</strong> be open to a folder to use live server.
                </li>
                <li>
                    In VS Code's Explorer, right click (Windows) or Control+click (macOS) on an html file. From the content menu that appears, select Open with live server.
                </li>
            </ul>
            <img src="https://storage.googleapis.com/nucamp-production.appspot.com/learnfiles/open-with-live-server.png" alt="Image for Open with Live Server">
        </section>
        <section id="Video">
            <h2>Videos</h2>
            <video src="videos/install-extension.mp4" controls loop>
                Your browser does not support html5 video. Here is <a href="videos/install-extension.mp4">a link to the video</a>instead.
            </video>
        </section>
    </body>
</html>