Week 1: Fast Start: Websites, Files, cPanel and FileZilla

Goal: Cover the original Week 1 and Week 2 in one session: understand how websites work, create the first pages and upload them safely.

Build this week: Create and upload a two-page website.

Skills: Domains, Hosting, public_html, FileZilla, index.html, about.html, Safe publishing

What she should understand

A website is a group of files stored on a hosting server. The domain name points visitors to the server. The server sends files to the visitor's browser. The browser reads the HTML, CSS and JavaScript and turns them into a webpage.

This week she should learn the big picture first, then quickly build something real. The goal is not perfection. The goal is to understand the path from local file to live website.

The website map

Your computer:
  project-vera-practice/
    index.html
    about.html
    assets/
      style.css
    images/

Hosting server:
  public_html/
    project-vera/
      index.html
      about.html
      assets/
        style.css
      images/

Step-by-step build

Create a folder on the computer called project-vera-practice.
Inside it, create index.html.
Create a second page called about.html.
Create a folder called assets.
Create a folder called images.
Add basic HTML to both pages.
Open both pages in the browser before uploading.
Use FileZilla to upload the folder to public_html/project-vera-practice/.
Visit the live URL and test the links.

index.html starter

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project Vera Practice Website</title>
  <meta name="description" content="A beginner website for learning HTML, CSS, JavaScript and AI website building.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Project Vera Practice Website</h1>
  <p>I am learning how websites work.</p>

  <h2>What I Will Learn</h2>
  <ul>
    <li>How to create website files</li>
    <li>How to upload pages with FileZilla</li>
    <li>How to make calculators with JavaScript</li>
    <li>How to improve pages for search engines</li>
  </ul>

  <p><a href="about.html">About this project</a></p>
</body>
</html>

about.html starter

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>About Project Vera Practice</title>
  <meta name="description" content="About my beginner website learning project.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>About This Project</h1>
  <p>This website is where I practise making pages, tools and calculators.</p>

  <h2>My Website Rules</h2>
  <ol>
    <li>I will not publish private information.</li>
    <li>I will test pages before uploading.</li>
    <li>I will ask an adult before publishing anything new.</li>
  </ol>

  <p><a href="index.html">Back to home</a></p>
</body>
</html>

FileZilla upload checklist

Local folder is on the left side.
Server folder is on the right side.
Upload into the correct folder, not the whole hosting root by mistake.
After uploading, refresh the browser using Ctrl + F5.
If the page looks unchanged, check whether the file uploaded to the correct location.

Parent safety checkpoint

Create a restricted FTP account that can only access the learning folder. Avoid giving full access to the whole hosting account. Check every page before it goes live.

Extension task

Add a third page called goals.html. It should list five things she wants to learn. Add links to it from the homepage and about page.