Coding for Career Changers

Module 1: Getting Started with Web Development

Lesson 3: Hosting Your Website Online

Congratulations on creating your first HTML webpage! So far, your website exists only on your computer. In this lesson, we'll put it online for free using Firebase Hosting so you can share it with others.

What is Web Hosting?

Think of web hosting like renting space in a digital shopping mall. Your website needs somewhere to "live" online so others can visit it by typing in a web address.

Firebase is Google's platform that makes hosting websites easy and free for beginners.

Why Firebase? It's free for small projects, easy to set up, reliable (since it's run by Google), and allows you to add more advanced features later as you learn.

Step 1: Prepare Your Project

First, let's organize your website files:

  1. Create a new folder on your computer called "MyWebsite" (you can name it whatever you want)
  2. Move your index.html file into this folder

Pro Tip: As your websites grow, keeping files organized in dedicated folders becomes essential.

Step 2: Create a Firebase Account

Let's set up your free Firebase account:

  1. Go to firebase.google.com
  2. Click "Get started" or "Sign in"
  3. Sign in with your Google account (create one if needed)
  4. Once signed in, click "Create a project"
  5. Name your project something like "my-first-website"
  6. Accept the terms and click "Continue"
  7. You can disable Google Analytics for this project (click "Disable Google Analytics")
  8. Click "Create project" and wait for it to be ready

Remember: If you get stuck at any point, you can always come back to this guide or search online for "Firebase hosting setup" for additional resources.

Step 3: Install Required Tools

We need to install Node.js (a helper program) and Firebase tools:

Install Node.js:

  1. Go to nodejs.org
  2. Download the "LTS" (Long Term Support) version for your operating system
  3. Run the installer and follow the default prompts

Install Firebase Tools:

  1. Open Command Prompt (on Windows) or Terminal (on Mac)
    • Windows: Search for "cmd" in the Start menu
    • Mac: Search for "Terminal" in Spotlight (Cmd+Space)
  2. Type this command and press Enter:
    npm install -g firebase-tools
  3. Wait for the installation to complete (this might take a minute)

Don't worry: The command line might look intimidating at first, but we'll use simple, specific commands. Think of it as giving text instructions to your computer instead of clicking buttons.

Step 4: Create Firebase Configuration Files

Now let's create a configuration file that tells Firebase how to host your website. In your MyWebsite folder, create a new file named "firebase.json":

  1. Open VSCode
  2. Click "File" > "New File"
  3. Copy and paste this code:
{ "hosting": { "public": ".", "ignore": [ "firebase.json", "**/.*" ] } }
  1. Save the file as "firebase.json" in your MyWebsite folder

Also, let's create a simple error page in case someone tries to access a page that doesn't exist:

  1. Create another new file in VSCode
  2. Copy and paste this code:
Page Not Found

Oops! Page Not Found

The page you're looking for doesn't exist.

Go back to homepage
  1. Save this file as "404.html" in your MyWebsite folder

Step 5: Deploy Your Website

Now for the exciting part - putting your website online!

  1. In Command Prompt/Terminal, navigate to your project folder:
    cd path/to/your/MyWebsite

    Replace "path/to/your/MyWebsite" with the actual location. For example:

    • Windows example: cd C:\Users\YourName\Desktop\MyWebsite
    • Mac example: cd /Users/YourName/Desktop/MyWebsite
  2. Log in to Firebase:
    firebase login

    This will open your browser for you to sign in with your Google account

  3. Initialize your project:
    firebase init hosting

    Follow the prompts:

    • When asked to select a project, choose the one you created earlier
    • For "What do you want to use as your public directory?" type . (just a period)
    • For "Configure as a single-page app?" type y
    • For "Set up automatic builds and deploys with GitHub?" type n
  4. Deploy your website:
    firebase deploy

When the deployment completes, you'll see a "Hosting URL" - that's your website's address! It will look something like https://my-first-website-12345.web.app

Success Check: Open the URL in your browser. You should see your website live on the internet! Share this URL with friends and family to show off your first coding project.

Step 6: Make Changes to Your Live Site

Whenever you want to update your website:

  1. Make changes to your HTML file in VSCode
  2. Save the file
  3. Open Command Prompt/Terminal and navigate to your project folder
  4. Run: firebase deploy

Your website will update with the new changes!

Pro Tip: As you continue learning, you'll discover more efficient ways to update your website. This process is just the beginning!

What You've Learned

Congratulations! In this lesson, you've:

  • Set up a Firebase account
  • Installed Node.js and Firebase tools
  • Created necessary configuration files
  • Deployed your website to the internet
  • Learned how to update your live website

You've now completed a full cycle of web development: creating a website and publishing it online. This is a huge accomplishment!

Module 1 Complete!

You've finished Module 1 of Coding for Career Changers! You've built a foundation that will serve you throughout your coding journey:

  • You set up a professional development environment
  • You learned about common programming patterns
  • You created a website and published it online

In Module 2, we'll expand your website by adding:

  • Images and styling
  • Multiple pages with navigation
  • Basic interactivity with JavaScript

Remember: learning to code is about repetition and practice. Don't worry if you don't understand everything perfectly yet - keep building and the patterns will become clearer over time.