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're finally done with patio11bot!  To get it online and served at patio11bot.com, we'll use the service https://www.netlify.com/ - which provides quick (and free!) hosting for static sites.

Instructor: [00:00] We have our patio11bot fully functioning. Now, it's time to deploy. I'm going to use a service called Netlify to do that because of how simple it is to deploy a static site, either from a GitHub repo or straight from a folder on your computer.

[00:14] The first thing that you have to do is sign up. I ended up signing up with GitHub so that I would already be connected when I wanted to access my repos later. If you choose another method, that's fine. You can connect your repo later or you can skip that altogether, like we'll see.

[00:28] Once you're logged into Netlify, you will see all the sites that you've already deployed. You'll see two ways to add a new one. You can add one by connecting your GitHub repo directly, which is nice because then you can deploy automatically when you push the GitHub, or you can upload a folder straight from your computer.

[00:45] I have the patio11bot folder here. I can just drop it in. Just like that, it's deployed. Netlify gives me a custom URL, so let's click on that. Here we are, live on the web with a static site.

[01:00] If we go back to the Netlify dashboard, we can see that the next option is to set up a custom domain. You can register your domain directly here, or if you type it in and you already own the address, it will explain how to redirect your current domain to point to your new Netlify site.

[01:15] Keep in mind that DNS changes can take a few hours to propagate. After you follow those steps, here we go. The patio11bot is live on patio11bot.com.

Course

Create and Deploy a Basic Static HTML Website

Deploy and Host a Static Webpage for Free with Netlify

Share this video with your friends