1
00:00:00,630 --> 00:00:01,630
Welcome back.

2
00:00:01,630 --> 00:00:04,920
I hope you had fun experimenting with your
first webpage and

3
00:00:04,920 --> 00:00:07,120
it's starting to look really good.

4
00:00:07,120 --> 00:00:10,450
In this video, I'm going to go over what
HTML and

5
00:00:10,450 --> 00:00:15,120
CSS are, and how they're going to help you
code a webpage.

6
00:00:15,120 --> 00:00:19,150
In the following videos, I'm going to walk
you through each line of code,

7
00:00:19,150 --> 00:00:19,890
step by step.

8
00:00:21,050 --> 00:00:22,270
As we proceed,

9
00:00:22,270 --> 00:00:26,350
you will hear me throw out a bunch of
terms you may have never heard before.

10
00:00:26,350 --> 00:00:29,150
The vocabulary of coding is important to
learn over time.

11
00:00:30,360 --> 00:00:33,410
Learning the appropriate terms will help
you speak intelligently about

12
00:00:33,410 --> 00:00:37,970
programming to your peers, teachers, your
future employers and

13
00:00:37,970 --> 00:00:40,340
help you search with more speed and
accuracy on the web.

14
00:00:41,340 --> 00:00:45,000
When you're ready, it will also help you
collaborate with other designers and

15
00:00:45,000 --> 00:00:46,220
developers around the world.

16
00:00:47,610 --> 00:00:51,940
If at any time, you're finding that my
videos are moving a little too slow or

17
00:00:51,940 --> 00:00:54,810
a little too fast, feel free to speed me
up or

18
00:00:54,810 --> 00:00:59,240
to slow me down by using the timer icon in
the video console.

19
00:01:00,420 --> 00:01:05,390
If you need some additional help, you can
start by looking in the teachers notes, or

20
00:01:05,390 --> 00:01:07,840
checking the forum where either I or

21
00:01:07,840 --> 00:01:10,520
another student at Treehouse will answer
your questions.

22
00:01:11,770 --> 00:01:13,720
Before moving on to the code,

23
00:01:13,720 --> 00:01:17,474
[SOUND] let's briefly go over [SOUND] what
HTML and CSS are.

24
00:01:17,474 --> 00:01:22,460
HTML and CSS are the basic building block
of any website.

25
00:01:22,460 --> 00:01:25,595
To imagine what this looks like, lets say
that you're building a house.

26
00:01:25,595 --> 00:01:29,537
[SOUND] If HTML is the carpenter that
builds the house,

27
00:01:29,537 --> 00:01:31,825
CSS is the interior designer.

28
00:01:31,825 --> 00:01:32,950
Responsible [BLEEP] for

29
00:01:32,950 --> 00:01:37,605
styling the home, selecting color schemes,
window treatments, carpet, and lighting.

30
00:01:37,605 --> 00:01:40,190
[BLEEP] HTML, or

31
00:01:40,190 --> 00:01:45,160
Hyper Text Markup Language, forms the
structural foundation of any webpage,

32
00:01:45,160 --> 00:01:50,350
but there are many other languages that
fall into the realm of web development.

33
00:01:50,350 --> 00:01:54,000
To build this project, we're also going to
be learning some CSS,

34
00:01:54,000 --> 00:01:56,900
or Cascading Style Sheets.

35
00:01:56,900 --> 00:02:01,830
This language will help us modify things
like fonts, color, and page layout.

36
00:02:01,830 --> 00:02:06,078
This is great, but I bet you're still
[SOUND] wondering what HTML does, and

37
00:02:06,078 --> 00:02:08,044
what it looks like in the browser.

38
00:02:08,044 --> 00:02:12,830
Let's picture you're creating a newspaper,
and that you need to organize it.

39
00:02:12,830 --> 00:02:17,340
First you need to put the title of the
newspaper in bold letters at the top.

40
00:02:17,340 --> 00:02:21,010
Then you need to add a few sections for
different topics.

41
00:02:21,010 --> 00:02:24,448
Each of these sections [SOUND] need a
large headline followed by

42
00:02:24,448 --> 00:02:25,911
a few smaller headlines.

43
00:02:25,911 --> 00:02:29,590
Then, we need to add a few paragraphs and
photos.

44
00:02:29,590 --> 00:02:32,670
You'll find that building the structure of
a web page is very similar.

45
00:02:32,670 --> 00:02:37,640
Now that we know a little more about HTML
and

46
00:02:37,640 --> 00:02:43,580
CSS, in the next four videos, you're going
to be learning about each line of code.

47
00:02:43,580 --> 00:02:47,200
Feel free to jump back and forth between
the videos and the code.

48
00:02:47,200 --> 00:02:51,280
And continue editing the code as you learn
about new features.

49
00:02:51,280 --> 00:02:55,330
I've also weaved in a few code challenges
and quizzes to assess your understanding.

50
00:02:55,330 --> 00:03:02,070
Do your best, but you can always re watch
the videos or retake a quiz at any time.

51
00:03:02,070 --> 00:03:04,450
Just think, if you can make it through
this course,

52
00:03:04,450 --> 00:03:06,780
you're gonna be well on your way to
becoming a programmer.