1
00:00:00,670 --> 00:00:02,910
Now that you've learned
the basics of HTML,

2
00:00:02,910 --> 00:00:06,360
you're well on your way to begin
coding amazing web projects.

3
00:00:06,360 --> 00:00:09,480
Before you go, I'll go over some
additional tips, tools, and

4
00:00:09,480 --> 00:00:12,770
resources that will help
you go forward with HTML.

5
00:00:12,770 --> 00:00:16,320
The first tip is to never stop being
curious about how websites and

6
00:00:16,320 --> 00:00:17,310
applications are built.

7
00:00:17,310 --> 00:00:20,757
So whenever you come across a site or
app that grabs your attention or

8
00:00:20,757 --> 00:00:22,582
if you see an interesting feature.

9
00:00:22,582 --> 00:00:25,825
Be sure to have a look under the hood and
learn how it was built.

10
00:00:25,825 --> 00:00:30,168
Viewing how other developers solve
problems with code is a great learning

11
00:00:30,168 --> 00:00:31,085
opportunity.

12
00:00:31,085 --> 00:00:32,730
It could provide you with new ideas and

13
00:00:32,730 --> 00:00:36,370
there's a good chance you'll pick
up useful new tips along the way.

14
00:00:36,370 --> 00:00:40,569
So you've learned that you can write or
Ctrl+click on a web page and

15
00:00:40,569 --> 00:00:42,123
click View Page Source.

16
00:00:42,123 --> 00:00:45,430
To view the HTML source for a page.

17
00:00:45,430 --> 00:00:50,350
Even better, most modern web browsers
provide a suite of developer tools

18
00:00:50,350 --> 00:00:54,340
that let you inspect the pages HTML,
CSS, and JavaScript.

19
00:00:54,340 --> 00:00:57,430
The most popular being
the Chrome developer tools or

20
00:00:57,430 --> 00:00:59,950
DevTools available in the Chrome browser.

21
00:00:59,950 --> 00:01:04,975
So to open DevTools in Chrome,
go up to the top right menu and

22
00:01:04,975 --> 00:01:08,305
select More Tools, Developer Tools.

23
00:01:08,305 --> 00:01:10,838
And once you have DevTools open,

24
00:01:10,838 --> 00:01:16,470
the icon in the top left corner lets
you select any element on the page.

25
00:01:16,470 --> 00:01:18,730
So that you can inspect how it was built.

26
00:01:18,730 --> 00:01:22,660
So for example,
here we can see the HTML for the image.

27
00:01:23,870 --> 00:01:27,310
The paragraph below,
the heading, and so on.

28
00:01:27,310 --> 00:01:31,510
And you're going to learn a whole lot
more about what the other tabs and

29
00:01:31,510 --> 00:01:34,510
panels are for
in later courses and workshops.

30
00:01:34,510 --> 00:01:38,850
Now, Firefox, Safari, IE, and
Edge also have similar developer tools for

31
00:01:38,850 --> 00:01:41,070
inspecting a web page's markup.

32
00:01:41,070 --> 00:01:46,220
Finally, one of the best parts about
working with HTML is being able to control

33
00:01:46,220 --> 00:01:51,600
and change the visual appearance
of HTML elements with CSS.

34
00:01:51,600 --> 00:01:53,290
CSS is what web designers and

35
00:01:53,290 --> 00:01:58,230
developers use to breathe life into
a website and implement the visual design.

36
00:01:58,230 --> 00:02:03,559
For example plain, unstyled HTML web
pages like this one can become rich,

37
00:02:03,559 --> 00:02:08,224
colorful and visually pleasing
experiences like this with CSS.

38
00:02:08,224 --> 00:02:13,390
And the way you do that is in
the head section of the document, you

39
00:02:13,390 --> 00:02:20,410
use the HTML link tag to link to external
resources like a CSS file, or stylesheet,

40
00:02:20,410 --> 00:02:24,950
and in the stylesheet you can target or
select any HTML element

41
00:02:24,950 --> 00:02:30,020
and define properties and values that
change its appearance like its size, font,

42
00:02:30,020 --> 00:02:33,230
color, alignment position and lots more.

43
00:02:33,230 --> 00:02:39,360
There are various ways you can target
an HTML element from within a CSS file.

44
00:02:39,360 --> 00:02:42,210
The element's tag name, for example,

46
00:02:42,210 --> 00:02:45,640
also the ID attribute you
learned about earlier,

47
00:02:45,640 --> 00:02:47,650
or with a class attribute.

48
00:02:47,650 --> 00:02:51,016
You'll learn a whole lot more about these
selection methods in our CSS courses.

49
00:02:53,698 --> 00:02:57,931
Congrats you just completed the first big
step in your front end web development

50
00:02:57,931 --> 00:03:02,710
journey by learning the most common and
unifying language of the web, HTML.

51
00:03:02,710 --> 00:03:04,690
Knowing HTML provides the foundation for

52
00:03:04,690 --> 00:03:08,400
learning other important web
technologies like CSS and JavaScript.

53
00:03:08,400 --> 00:03:11,060
So you should be proud and
excited about what's next.

54
00:03:11,060 --> 00:03:14,020
Remember we're always here to help so
if you have questions about

55
00:03:14,020 --> 00:03:17,470
anything covered in this course feel free
to reach out to the Treehouse staff or

56
00:03:17,470 --> 00:03:18,850
other students in the community.

57
00:03:18,850 --> 00:03:20,130
Thanks everyone and happy coding.