You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: projects/run-a-website-locally-with-html/run-a-website-locally-with-html.mdx
+23-27Lines changed: 23 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,80 +39,76 @@ tags:
39
39
40
40
## Introduction
41
41
42
-
In web development, HTML ultimately rests underneath the websites we use. But how can we test or preview the websites we build with HTML on our local computer?
42
+
HTML ultimately rests underneath the websites we use. But how can we test or preview the websites we build with HTML on our local computer?
43
43
44
44
This tutorial shows a few ways to do just that!
45
45
46
-
Before reading on, make sure to create a new **index.html** file somewhere on your computer. And then feel free to place anything in the `<body>` element so we can render it later.
46
+
**Note:** Make sure to create a new **index.html** file somewhere on your computer. Then place anything in the `<body>` element so we can render it later.
47
47
48
48
## Option A: Double-Click the File
49
49
50
-
The first option involves using our computer's application for location files ("Finder" for Mac; "File Explorer" for Windows).
50
+
The first option involves using our computer's file manager ("Finder" for Mac; "File Explorer" for Windows).
51
51
52
-
This is how to access a file with Mac's Finder:
52
+
This is how to access a web page in Mac:
53
53
54
54
<imgsrc="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/open-html-on-mac-finder.gif"alt="Using the Mac Finder to open an HTML file." />
55
55
56
-
Simply double-click the **index.html** file and it should open on your default browser window. Boom, you got yourself a web page!
56
+
If you double-click the **index.html** file, it should open on your default browser window. Boom, you just opened a web page!
57
57
58
-
Remember, this web page is not on the internet; you can tell by looking at the file path in the browser. It only lives on your computer.
58
+
**Note:** This page is not on the internet; you can tell by looking at the file path in the browser. It exists locally on your computer.
59
59
60
-
Now you can pull this side-by-side. Everytime you make a change to your **index.html** file, just save the file and then refresh the browser window to render the updated web page.
60
+
Every time you make a change to your **index.html** file, just save the file and then refresh the browser window to render the updated page.
61
61
62
-
If you prefer, you can use keyboard shortcuts for this:
62
+
You can also use keyboard shortcuts for this:
63
63
64
-
Saving on VS Code: <kbd>command</kbd> + <kbd>s</kbd>
65
-
Refreshing a web page: <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>r</kbd>
64
+
-Saving on VS Code: <kbd>command</kbd> + <kbd>s</kbd>
65
+
-Refreshing a web page: <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>r</kbd>
66
66
67
-
This is how to access one with the Windows File Explorer:
67
+
To open a page in Windows:
68
68
69
69
<imgsrc="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/open-html-in-windows-explorer.png"alt="Using Windows File Explorer to open an HTML file." />
70
70
71
-
Same thing as with the Mac finder: double-click the **index.html** file and a browser window should open with the HTML.
71
+
Like with the Mac Finder, double-click the **index.html** file and a browser window should open the page.
72
72
73
73
## Option B: Live Server (VS Code Extension)
74
74
75
-
One of the most popular tools for building websites is a code editor called Visual Studio Code (VS Code). As of now, there is nothing built into VS Code for running HTML locally. But we can get around this with VS Code extensions!
75
+
Visual Studio Code (VS Code)is a popular code editor for building websites. It uses extensions for added functionality, including running HTML locally!
76
76
77
77
### VS Code Overview
78
78
79
-
If you're not familiar with VS Code, or you don't have it installed on your computer, you can follow the steps in [this tutorial](https://www.codedex.io/projects/set-up-your-local-environment-in-python#setting-up) to do so.
79
+
If you're not familiar with VS Code, or you don't have it installed, you can follow the steps in [this tutorial](https://www.codedex.io/projects/set-up-your-local-environment-in-python#setting-up) to do so.
80
80
81
-
After installing, launch VS Code by double-clicking the icon. When the window opens, there should be a group of icons vertically arranged on the left-side (highlighted below):
81
+
After installing, launch VS Code by double-clicking the icon. When the window opens, there is a group of icons located on the left-side (highlighted below):
82
82
83
83
<imgsrc="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/vs-code-activity-bar.png"alt="Activity Bar highlighted on left-side of VS Code window" />
84
84
85
-
The highlighted section is known as the "Activity Bar". The topmost icon is the "Explorer", where you can create files and folders for your projects! Let's select the "Explorer" icon and then create a new **index.html** file (if needed).
85
+
This is known as the "Activity Bar." The topmost icon is the "Explorer", where you can create files and folders for your projects! Let's select this icon and then create a new **index.html** file (if needed).
86
86
87
-
When first installed, VS Code is already powerful. But it can be taken even further with extensions! They give special abilities to VS Code such as code highlighting and formatting. Thousands of extensions are available in VS Code, many of which support HTML.
88
-
89
-
One way to access and install extensions is with the icon in the Activity Bar:
87
+
Extensions give us special abilities such as code highlighting and formatting. Thousands of extensions are available for install via the "Extensions" icon in the Activity Bar:
90
88
91
89
<imgsrc="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/vs-code-extensions.gif"alt="VS Code section for Extensions" />
92
90
93
-
We can also go to the program menu ("View" > "Extensions") or use keyboard shortcuts:
91
+
Alternatively, we can access with "View" > "Extensions" or keyboard shortcuts:
Now that we can view extensions on VS Code, let's explore some that support HTML!
96
+
Let's now explore one that supports HTML!
99
97
100
98
### Live Server
101
99
102
100
A popular extension for running local HTML is the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
103
101
104
-
When installed, Live Server can start a new `localhost` server for an **.html** file via a "Go Live" button near the bottom-right corner of the VS Code window:
102
+
When installed, it can start a new `localhost` server for an **.html** file via a "Go Live" button near the bottom-right corner of the VS Code window:
105
103
106
104
<imgsrc="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/live-server-button.png"alt="VS Code Live Server button on bottom-right of window" />
107
105
108
106
This button appears while viewing an **.html** file on VS Code. When clicked, a new `localhost` server is started and can be accessed at an address such as `127.0.0.01.5501/filename.html`.
109
107
110
-
If changes are made and saved on the file while the server is still running, the content is automatically updated on the browser (no refresh necessary):
108
+
If you edit and save the file while the server is still running, the browser automatically refreshes the page:
111
109
112
110
<imgsrc="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/live-server-demo.gif"alt="Demo of Live Server extension in VS Code" />
113
111
114
112
## Conclusion
115
113
116
-
There you have it! We explored a couple of ways to run and preview HTML on the local computer. Even though VS Code itself doesn't have a built-in feature for running HTML locally, we have the command line along with an ecosystem of extensions!
117
-
118
-
Go ahead and try to start your next project on VS Code with what you've learned!
114
+
Congrats! You learned two ways to run and preview local HTML. Whether you're using your file manager or a VS code extension, you have options for your next project!
0 commit comments