WATCH, READ, THEN TRY

How our website works.

The transcript of our 4 minute, 43 second lesson. Follow an idea from the files to the browser, then try one safe edit with a grown-up. Watch the video, download this transcript, or download the captions (SRT).

How does our website work? 00:00

Hey, team. You can change your website, but understanding the journey makes you a much better builder.

Let's follow one sentence, from an idea in your head to a page someone opens on their phone.

Along the way, we'll meet the files, the notebook, the publisher, and the browser.

The browser builds the page. 00:19

A website isn't just a picture. It is a collection of files and instructions.

Your browser, like Chrome or Safari, reads those files and turns them into what you see.

HTML describes the content. CSS controls its appearance. JavaScript can make it respond when you do something.

HTML gives words a job. 00:41

Here is our sentence: We make useful things. The tags around it tell the browser that it is a heading.

The opening tag starts the heading. The closing tag, with a slash, ends it.

Change the words inside, and you change the message. Keep the tags so the browser still knows their job.

CSS changes how it looks. 01:02

Now keep the words exactly the same. Make the heading orange, change its font, and give it some breathing room.

That's CSS: rules for things like color, spacing, and layout.

A rule can style many headings at once. That is why changing a style can affect more than one spot.

JavaScript responds to actions. 01:24

Think about the practice shop. You click plus, the quantity becomes two, and the total changes from six dollars to twelve.

JavaScript can listen for that click, update a number, and change what the page shows.

A working demo cart isn't a real shop checkout. Taking payments needs extra services and safeguards.

GitHub keeps the project. 01:47

GitHub stores the project's files in a folder called a repository. Think of it as the team's notebook.

A commit is a saved checkpoint, with a note explaining what changed.

The history lets you compare saved versions and ask a grown-up to help undo a mistake. Unsaved typing isn't a checkpoint.

One edit creates a new checkpoint. 02:10

With a grown-up, open the right repository, then index dot HTML, usually the homepage. Click the pencil to edit.

Let's change useful to tiny. The heading tags stay exactly the same.

Click Commit changes, write a short note, and confirm. In GitHub's web editor, that saves your checkpoint on GitHub.

Cloudflare publishes a copy. 02:34

Our setup watches the branch called main. Think of a branch as one line of saved versions.

When main changes, Cloudflare Pages picks up the files and publishes a new website version. That process is called a deployment.

It takes time. A saved commit doesn't mean publishing has finished; check that the deployment succeeded.

An address helps visitors find it. 02:59

When someone types our web address, their browser needs to find the computers that can answer.

DNS works like an address book. Then the browser requests the page, and Cloudflare sends back the published files.

The browser reads them and draws the page. The address, the stored project, and the visible page are different parts.

Refresh, then investigate. 03:22

After publishing finishes, refresh the website to check your change. Browsers sometimes reuse stored copies to load pages faster.

Still seeing the old sentence? Check the right file, the right branch, and whether publishing succeeded.

If the layout looks strange, compare your last saved change. One small edit is much easier to investigate.

Public pages are for everyone. 03:48

A private GitHub repository can still publish a public website. Those are two different doors.

Visitors can inspect the code sent to their browser. Hiding a password in HTML doesn't keep it secret.

Our family-only areas use separate sign-in protection. Leave those settings alone, and keep personal details off public pages.

Your turn: predict, then try. 04:14

Before editing, predict: if you change only a heading's words, should its color change too? Usually, no. The CSS stayed the same.

Now try one safe edit with a grown-up. Commit it, wait for publishing, refresh, and compare the result with your prediction.

You just followed the whole journey. Idea, files, GitHub, Cloudflare, browser. That's how your website becomes real.

Keep learning

How to Update Your Website has the step-by-step guide and safe-edit reminders.

This lesson uses a stock synthetic narrator generated with Kokoro. No voice cloning.