1
00:00:00,600 --> 00:00:06,449
Hey, team. You can change your website, but understanding the journey makes you a much better builder.

2
00:00:06,899 --> 00:00:12,816
Let's follow one sentence, from an idea in your head to a page someone opens on their phone.

3
00:00:13,266 --> 00:00:17,824
Along the way, we'll meet the files, the notebook, the publisher, and the browser.

4
00:00:19,824 --> 00:00:24,848
A website isn't just a picture. It is a collection of files and instructions.

5
00:00:25,298 --> 00:00:31,205
Your browser, like Chrome or Safari, reads those files and turns them into what you see.

6
00:00:31,655 --> 00:00:40,546
HTML describes the content. CSS controls its appearance. JavaScript can make it respond when you do something.

7
00:00:42,546 --> 00:00:48,884
Here is our sentence: We make useful things. The tags around it tell the browser that it is a heading.

8
00:00:49,334 --> 00:00:54,173
The opening tag starts the heading. The closing tag, with a slash, ends it.

9
00:00:54,623 --> 00:01:01,547
Change the words inside, and you change the message. Keep the tags so the browser still knows their job.

10
00:01:03,547 --> 00:01:10,671
Now keep the words exactly the same. Make the heading orange, change its font, and give it some breathing room.

11
00:01:11,121 --> 00:01:15,580
That's CSS: rules for things like color, spacing, and layout.

12
00:01:16,030 --> 00:01:22,631
A rule can style many headings at once. That is why changing a style can affect more than one spot.

13
00:01:24,631 --> 00:01:32,383
Think about the practice shop. You click plus, the quantity becomes two, and the total changes from six dollars to twelve.

14
00:01:32,833 --> 00:01:38,310
JavaScript can listen for that click, update a number, and change what the page shows.

15
00:01:38,760 --> 00:01:46,082
A working demo cart isn't a real shop checkout. Taking payments needs extra services and safeguards.

16
00:01:48,082 --> 00:01:55,280
GitHub stores the project's files in a folder called a repository. Think of it as the team's notebook.

17
00:01:55,730 --> 00:02:00,009
A commit is a saved checkpoint, with a note explaining what changed.

18
00:02:00,459 --> 00:02:08,977
The history lets you compare saved versions and ask a grown-up to help undo a mistake. Unsaved typing isn't a checkpoint.

19
00:02:10,977 --> 00:02:19,820
With a grown-up, open the right repository, then index dot HTML, usually the homepage. Click the pencil to edit.

20
00:02:20,270 --> 00:02:25,009
Let's change useful to tiny. The heading tags stay exactly the same.

21
00:02:25,459 --> 00:02:33,333
Click Commit changes, write a short note, and confirm. In GitHub's web editor, that saves your checkpoint on GitHub.

22
00:02:35,333 --> 00:02:41,186
Our setup watches the branch called main. Think of a branch as one line of saved versions.

23
00:02:41,636 --> 00:02:50,597
When main changes, Cloudflare Pages picks up the files and publishes a new website version. That process is called a deployment.

24
00:02:51,047 --> 00:02:57,759
It takes time. A saved commit doesn't mean publishing has finished; check that the deployment succeeded.

25
00:02:59,759 --> 00:03:05,149
When someone types our web address, their browser needs to find the computers that can answer.

26
00:03:05,599 --> 00:03:13,584
DNS works like an address book. Then the browser requests the page, and Cloudflare sends back the published files.

27
00:03:14,034 --> 00:03:21,508
The browser reads them and draws the page. The address, the stored project, and the visible page are different parts.

28
00:03:23,508 --> 00:03:32,742
After publishing finishes, refresh the website to check your change. Browsers sometimes reuse stored copies to load pages faster.

29
00:03:33,192 --> 00:03:39,652
Still seeing the old sentence? Check the right file, the right branch, and whether publishing succeeded.

30
00:03:40,102 --> 00:03:47,554
If the layout looks strange, compare your last saved change. One small edit is much easier to investigate.

31
00:03:49,554 --> 00:03:56,016
A private GitHub repository can still publish a public website. Those are two different doors.

32
00:03:56,466 --> 00:04:04,032
Visitors can inspect the code sent to their browser. Hiding a password in HTML doesn't keep it secret.

33
00:04:04,482 --> 00:04:13,343
Our family-only areas use separate sign-in protection. Leave those settings alone, and keep personal details off public pages.

34
00:04:15,343 --> 00:04:24,300
Before editing, predict: if you change only a heading's words, should its color change too? Usually, no. The CSS stayed the same.

35
00:04:24,750 --> 00:04:33,083
Now try one safe edit with a grown-up. Commit it, wait for publishing, refresh, and compare the result with your prediction.

36
00:04:33,533 --> 00:04:41,517
You just followed the whole journey. Idea, files, GitHub, Cloudflare, browser. That's how your website becomes real.