WEBVTT

1
00:00:00.005 --> 00:00:02.004
- The web started out as digital copies

2
00:00:02.004 --> 00:00:04.005
of text-based research documents,

3
00:00:04.005 --> 00:00:06.003
but has since grown into a lot more

4
00:00:06.003 --> 00:00:09.006
and can be viewed on a variety of devices.

5
00:00:09.006 --> 00:00:11.008
Websites can be designed as a single page

6
00:00:11.008 --> 00:00:13.006
with content divided into sections

7
00:00:13.006 --> 00:00:16.002
within the same HTML page.

8
00:00:16.002 --> 00:00:19.000
For multi-page websites related content is spread out

9
00:00:19.000 --> 00:00:21.007
over multiple HTML pages.

10
00:00:21.007 --> 00:00:24.003
These webpage are written using coding languages

11
00:00:24.003 --> 00:00:26.006
such as HTML and CSS,

12
00:00:26.006 --> 00:00:30.000
and contain other web resources such as images.

13
00:00:30.000 --> 00:00:31.001
When creating a website,

14
00:00:31.001 --> 00:00:33.005
you're basically creating a collection of files

15
00:00:33.005 --> 00:00:36.002
which are embedded or linked to each other.

16
00:00:36.002 --> 00:00:37.004
These different types of files

17
00:00:37.004 --> 00:00:40.000
are saved with specific file extensions.

18
00:00:40.000 --> 00:00:44.006
For example, HTML is contained within .HTML files,

19
00:00:44.006 --> 00:00:47.002
CSS in .CSS files.

20
00:00:47.002 --> 00:00:50.001
Other web resources like images, videos,

21
00:00:50.001 --> 00:00:53.007
or PDFs also have their own file extensions.

22
00:00:53.007 --> 00:00:55.003
Developing a website from scratch

23
00:00:55.003 --> 00:00:56.007
usually starts with creating

24
00:00:56.007 --> 00:00:58.008
and working on these files locally,

25
00:00:58.008 --> 00:01:00.004
on your computer.

26
00:01:00.004 --> 00:01:02.001
That way, you can make changes

27
00:01:02.001 --> 00:01:03.008
and test them in your own workspace

28
00:01:03.008 --> 00:01:07.002
before making your website available to the public.

29
00:01:07.002 --> 00:01:09.006
These files are stored in various folders,

30
00:01:09.006 --> 00:01:12.009
also referred to as directories.

31
00:01:12.009 --> 00:01:16.005
The main folder is referred to as the root directory,

32
00:01:16.005 --> 00:01:19.008
which is where HTML files are generally stored.

33
00:01:19.008 --> 00:01:21.005
Other files are usually grouped

34
00:01:21.005 --> 00:01:24.000
into related sub folders.

35
00:01:24.000 --> 00:01:26.000
Linking to files is an important part

36
00:01:26.000 --> 00:01:27.003
of building a website,

37
00:01:27.003 --> 00:01:28.006
so it's equally important

38
00:01:28.006 --> 00:01:30.008
to follow a consistent structure.

39
00:01:30.008 --> 00:01:33.001
Here are some conventions that can be followed

40
00:01:33.001 --> 00:01:34.008
when naming files.

41
00:01:34.008 --> 00:01:36.009
Spaces and symbols should be avoided,

42
00:01:36.009 --> 00:01:39.004
with the exception of underscores and hyphens,

43
00:01:39.004 --> 00:01:41.007
which can be used to separate words.

44
00:01:41.007 --> 00:01:44.009
Just note that Google's Search Engine Optimization Guide

45
00:01:44.009 --> 00:01:47.007
recommends separating words with hyphens.

46
00:01:47.007 --> 00:01:49.007
Some servers will also interpret

47
00:01:49.007 --> 00:01:52.002
different letter casing as different names,

48
00:01:52.002 --> 00:01:53.009
so skip the unnecessary headaches

49
00:01:53.009 --> 00:01:57.007
and keep it consistent by using all lowercase letters.

50
00:01:57.007 --> 00:02:01.000
Also, using meaningful and descriptive names

51
00:02:01.000 --> 00:02:02.008
is recommended for SEO,

52
00:02:02.008 --> 00:02:05.008
and it also just makes it easier for us to identify

53
00:02:05.008 --> 00:02:07.009
which file is used for what.

54
00:02:07.009 --> 00:02:10.000
When you're ready to go live with your website,

55
00:02:10.000 --> 00:02:12.004
all the files contained within the root folder

56
00:02:12.004 --> 00:02:14.001
are uploaded to a web server,

57
00:02:14.001 --> 00:02:17.000
so these naming conventions don't apply to the root folder,

58
00:02:17.000 --> 00:02:18.008
but you might as well get into the habit

59
00:02:18.008 --> 00:02:21.009
of keeping it consistent for the entire project.

60
00:02:21.009 --> 00:02:23.002
To make a website live,

61
00:02:23.002 --> 00:02:24.008
you'll also need a domain name,

62
00:02:24.008 --> 00:02:27.003
which is the address of the website.

63
00:02:27.003 --> 00:02:29.004
The server stores the web files,

64
00:02:29.004 --> 00:02:30.008
and the web-hosting companies

65
00:02:30.008 --> 00:02:34.000
provide access to these servers.

66
00:02:34.000 --> 00:02:37.002
However, if you use a browser-based text editor

67
00:02:37.002 --> 00:02:38.004
such as Glitch,

68
00:02:38.004 --> 00:02:41.007
these tools are already online and live.

69
00:02:41.007 --> 00:02:45.002
Each project is automatically assigned a unique URL,

70
00:02:45.002 --> 00:02:46.008
which anyone can view.

71
00:02:46.008 --> 00:02:49.004
We'll also be using a another online editor,

72
00:02:49.004 --> 00:02:52.002
CodePen, for smaller exercises.

73
00:02:52.002 --> 00:02:55.005
This will allow us to focus on individual concepts.

74
00:02:55.005 --> 00:02:58.005
Online text editors are ideal for experimental projects

75
00:02:58.005 --> 00:03:01.001
and working on small code snippets.

76
00:03:01.001 --> 00:03:02.004
For the course project, however,

77
00:03:02.004 --> 00:03:03.007
we'll be using a text editor

78
00:03:03.007 --> 00:03:05.004
to work on our files locally

79
00:03:05.004 --> 00:03:07.009
to build out our personal websites.

80
00:03:07.009 --> 00:03:10.001
This process mirrors the typical workflow

81
00:03:10.001 --> 00:03:11.001
of a web developer,

82
00:03:11.001 --> 00:03:14.002
giving you a more realistic experience.

83
00:03:14.002 --> 00:03:15.000
In this course,

84
00:03:15.000 --> 00:03:17.001
we won't be making our websites live,

85
00:03:17.001 --> 00:03:18.004
but if you're interested in learning

86
00:03:18.004 --> 00:03:20.006
about the different ways to publish a website,

87
00:03:20.006 --> 00:03:21.006
check out my course,

88
00:03:21.006 --> 00:03:23.003
"Getting Your Website Online."