add header gif to HTML tutorial + other edits

codedex-io · Jan 30, 2024 · 4036344 · 4036344
1 parent 1cd2737
commit 4036344
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 20 deletions.
diff --git a/projects/run-a-website-locally-with-html/header.gif b/projects/run-a-website-locally-with-html/header.gif
diff --git a/...s/run-html-locally/live-server-button.png → ...-locally-with-html/live-server-button.png b/...s/run-html-locally/live-server-button.png → ...-locally-with-html/live-server-button.png
diff --git a/...cts/run-html-locally/live-server-demo.gif → ...te-locally-with-html/live-server-demo.gif b/...cts/run-html-locally/live-server-demo.gif → ...te-locally-with-html/live-server-demo.gif
diff --git a/...locally/open-html-in-windows-explorer.png → ...th-html/open-html-in-windows-explorer.png b/...locally/open-html-in-windows-explorer.png → ...th-html/open-html-in-windows-explorer.png
diff --git a/...-html-locally/open-html-on-mac-finder.gif → ...lly-with-html/open-html-on-mac-finder.gif b/...-html-locally/open-html-on-mac-finder.gif → ...lly-with-html/open-html-on-mac-finder.gif
diff --git a/...cts/run-html-locally/run-html-locally.mdx → ...-html/run-a-website-locally-with-html.mdx b/...cts/run-html-locally/run-html-locally.mdx → ...-html/run-a-website-locally-with-html.mdx
@@ -1,49 +1,72 @@
 ---
-title: Run HTML Locally
+title: Run a Website Locally with HTML
 author: Brandon Dusch
 uid: H7lTRTjDJ0VbnaVUJdWSclFxwiH3
-datePublished: 
+datePublished: 2024-01-30
 description: Learn to run HTML locally on your computer, including with VS Code.
-header: 
+header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/header.gif
 published: false
 tags:
   - beginner
   - html
 ---
 
-# Run HTML Locally
+<BannerImage
+  link="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/header.gif"
+  description="Title Image"
+  uid={true}
+  cl="for-sidebar"
+/>
+
+# Run a Website Locally with HTML
+
+<AuthorAvatar
+  author_name="Brandon Dusch"
+  author_avatar="/images/projects/authors/brandon_dusch.png"
+  username="Dusch4593"
+  uid={true}
+/>
+
+<BannerImage
+  link="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/header.gif"
+  description="Title Image"
+  uid={true}
+/>
+
+**Prerequisites:** HTML fundamentals
+**Versions:** HTML5, VS Code 1.85.1
+**Read Time:** 25 minutes
 
 ## Introduction
 
-In web development, HTML ultimately rests underneath the websites we use. But if we're building websites, how can we test or preview our HTML on our local computer?
+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?
 
-This tutorial shows a few ways to run local HTML into a web page locally on our computer!
+This tutorial shows a few ways to do just that!
 
-Make sure to create a new **index.html** file somewhere in your computer. Now that we have the HTML file, here are two ways to render the web page:
+Before reading on, make sure to create a new **index.html** file somewhere in your computer. And then feel free to place anything in `<body>` element so we can render it later.
 
 ## Option A: Double-Click the File
 
 The first option involves using our computer's application for location files ("Finder" for Mac; "File Explorer" for Windows).
 
 This is how to access a file with Mac's Finder:
 
-<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-html-locally/open-html-on-mac-finder.gif" alt="Using the Mac Finder to open an HTML file." />
+<img src="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." />
 
-Simply double-click the **index.html** file and it should open it in your default browser window. Boom, you got yourself a web page!
+Simply double-click the **index.html** file and it should open on your default browser window. Boom, you got yourself a web page!
 
 Remember, this web page is not on the internet; you can tell by looking at the file path in the browser. 
 
-Now you can pull this side-by-side. Everytime you make a change to your **index.html** file, just save the file in VS Code, and then refresh the browser window to get the update.
+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.
 
 If you prefer, you can use keyboard shortcuts for this:
 
 Saving on VS Code: <kbd>command</kbd> + <kbd>s</kbd>
 Refreshing a web page: <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>r</kbd>
 
-
 This is how to access one with the Windows File Explorer:
 
-<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-html-locally/open-html-in-windows-explorer" alt="Using Windows File Explorer to open an HTML file." />
+<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-a-website-locally-with-html/open-html-in-windows-explorer" alt="Using Windows File Explorer to open an HTML file." />
 
 Same thing as with the Mac finder: double-click the **index.html** file and a browser window should open with the HTML.
 
@@ -53,19 +76,19 @@ One of the most popular tools for building websites is a code editor called Visu
 
 ### VS Code Overview
 
-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) to do so.
+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.
 
 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):
 
-<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-html-locally/vs-code-activity-bar.png" alt="Activity Bar highlighted on left-side of VS Code window" />
+<img src="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" />
 
-The highlighted section is known as the "Activity Bar". The topmost icon, the "Explorer", is 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).
+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).
 
 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.
 
 One way to access and install extensions is with the icon in the Activity Bar:
 
-<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-html-locally/vs-code-extensions.gif" alt="VS Code section for Extensions" />
+<img src="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" />
 
 We can also go to the program menu ("View" > "Extensions") or use keyboard shortcuts:
 
@@ -80,16 +103,16 @@ A popular extension for running local HTML is the [Live Server](https://marketpl
 
 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:
 
-<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-html-locally/live-server-button.png" alt="VS Code Live Server button on bottom-right of window" />
+<img src="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" />
 
-This button appears while viewing an **.html** file on VS Code. When clicked, a new `localhost` server will be started and can be accessed at an address such as  `127.0.0.01.5501/filename.html`.
+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`.
 
 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):
 
-<img src="https://raw.githubusercontent.com/codedex-io/projects/main/projects/run-html-locally/live-server-demo.gif" alt="Demo of Live Server extension in VS Code" />
+<img src="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" />
 
 ## Conclusion
 
-There you have it! We explored a couple of ways to run and preview HTML on the local computer via VS Code. 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!
+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!
 
 Go ahead and try to start your next project on VS Code with what you've learned!
diff --git a/...run-html-locally/vs-code-activity-bar.png → ...ocally-with-html/vs-code-activity-bar.png b/...run-html-locally/vs-code-activity-bar.png → ...ocally-with-html/vs-code-activity-bar.png
diff --git a/...s/run-html-locally/vs-code-extensions.gif → ...-locally-with-html/vs-code-extensions.gif b/...s/run-html-locally/vs-code-extensions.gif → ...-locally-with-html/vs-code-extensions.gif