Serve a Static HTML Page for Development

Use a Custom Font from Google Fonts on a Static HTML Webpage

Add Emojis to a Static HTML Page

Make a Responsive Web Page Without Using a CSS or JavaScript Framework

Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

Accept User Input with a Styled Input Tag, a Button, and Vanilla JavaScript

Add and Remove CSS Classes with Vanilla JavaScript

Make a One-time CSS Animation that Does Not Revert to its Original Style

Add a Dynamic Tweet Button to a Webpage

Turn an SVG Into a Favicon and Link it

Deploy and Host a Static Webpage for Free with Netlify

Create and Deploy a Basic Static HTML Website

We'll be building www.patio11bot.com from start to finish as a staic HTML document - so the first step is to setup a mini web server, so that we can view the webpage locally.

There are three easy ways to do that:

`// python 2:`

`> python -m SimpleHTTPServer 8000`


`// python 3:`

`> python -m http.server 8000`


`// node:`

`> npm install -g http-server`

`> http-server`

Instructor: [00:00] Let's start with a blank text file. We'll paste in a basic HTML document. This Web page, we'll call the "Patio11 Bot" because it's going to give out quotes from Patio11's blog posts. We can save that as index.html.

[00:16] If we find that folder on the disk, then we can see the Web page by right-clicking and opening in Chrome. There we go. We can see the content of that page in Chrome. There's no styles yet though. Back in a text editor, let's make a new file called "style.css." We can paste in some styles for that page.

[00:40] Back in index.html, we want to use those styles. If we just link the stylesheet like we normally would think to do, then when we refresh the Chrome browser, those styles aren't applied. If we open the console, we can see that Chrome can't fetch the style files because we're not actually serving the Web page. We're just viewing the local file in Chrome.

[01:04] Let's head over to the terminal. In the folder with the index.html and style.css files, we can start a mini-web server. The first way we'll do that is with Python. We can call Python and then use -m, which lets Python search the Python module namespace.

[01:21] In Python 2.0you can use SimpleHTTPServer and then a port, like 8000. If you have Python 3.0installed, like I do, then instead of SimpleHTTPServer, you can use http.server. Now Python is running a mini-web server in that folder. If we switch back to the browser and go to localhost port 8000, then we get the site.

[01:44] If you want an alternative to Python's simple Web server, then we can go back to the terminal and install the Node version from npm with npm install -g httpserver, which will install the httpserver command globally. Then we can just run httpserver. Back in the Web browser, we can visit port 8080 to see the site running.

Course

Create and Deploy a Basic Static HTML Website

Serve a Static HTML Page for Development

Share this video with your friends