1-HTML-CSS-JavaScript/install-extension.html at master · chaparin/1-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
<!DOCTYPE html>
<html LANG="en">
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex,nofollow">
    <title>VS Code Live Server Extension Setup</title>
</head>
<body>
    <h1>How to install and use VS Code's Live Server Extension</h2>
        <nav>
            <a href="#install">Install</a> | <a href="#use">Use</a> | <a href="#video">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" /> Extensions icon in the left column toolbar.
            </li>
            <li>
                In the search bar that appears, type <em>Live Server</em>.
            </li>
            <li>
                Select the Live Server extension. It 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 context menu that appears, select Open with Live Server.
            </li>
            <img src="https://storage.googleapis.com/nucamp-production.appspot.com/learnfiles/open-with-live-server.png" alt="&quot;Open with Live Server&quot; screenshot" />
        </ul>
    </section>
    <section>
        <h2 id="video">Video</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>