Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn additional tips, tools, and resources that will help you go forward with HTML.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you've learned
the basics of HTML,
0:00
you're well on your way to begin
coding amazing web projects.
0:02
Before you go, I'll go over some
additional tips, tools, and
0:06
resources that will help
you go forward with HTML.
0:09
The first tip is to never stop being
curious about how websites and
0:12
applications are built.
0:16
So whenever you come across a site or
app that grabs your attention or
0:17
if you see an interesting feature.
0:20
Be sure to have a look under the hood and
learn how it was built.
0:22
Viewing how other developers solve
problems with code is a great learning
0:25
opportunity.
0:30
It could provide you with new ideas and
0:31
there's a good chance you'll pick
up useful new tips along the way.
0:32
So you've learned that you can write or
Ctrl+click on a web page and
0:36
click View Page Source.
0:40
To view the HTML source for a page.
0:42
Even better, most modern web browsers
provide a suite of developer tools
0:45
that let you inspect the pages HTML,
CSS, and JavaScript.
0:50
The most popular being
the Chrome developer tools or
0:54
DevTools available in the Chrome browser.
0:57
So to open DevTools in Chrome,
go up to the top right menu and
0:59
select More Tools, Developer Tools.
1:04
And once you have DevTools open,
1:08
the icon in the top left corner lets
you select any element on the page.
1:10
So that you can inspect how it was built.
1:16
So for example,
here we can see the HTML for the image.
1:18
The paragraph below,
the heading, and so on.
1:23
And you're going to learn a whole lot
more about what the other tabs and
1:27
panels are for
in later courses and workshops.
1:31
Now, Firefox, Safari, IE, and
Edge also have similar developer tools for
1:34
inspecting a web page's markup.
1:38
Finally, one of the best parts about
working with HTML is being able to control
1:41
and change the visual appearance
of HTML elements with CSS.
1:46
CSS is what web designers and
1:51
developers use to breathe life into
a website and implement the visual design.
1:53
For example plain, unstyled HTML web
pages like this one can become rich,
1:58
colorful and visually pleasing
experiences like this with CSS.
2:03
And the way you do that is in
the head section of the document, you
2:08
use the HTML link tag to link to external
resources like a CSS file, or stylesheet,
2:13
and in the stylesheet you can target or
select any HTML element
2:20
and define properties and values that
change its appearance like its size, font,
2:24
color, alignment position and lots more.
2:30
There are various ways you can target
an HTML element from within a CSS file.
2:33
The element's tag name, for example,
2:39
also the ID attribute you
learned about earlier,
2:42
or with a class attribute.
2:45
You'll learn a whole lot more about these
selection methods in our CSS courses.
2:47
Congrats you just completed the first big
step in your front end web development
2:53
journey by learning the most common and
unifying language of the web, HTML.
2:57
Knowing HTML provides the foundation for
3:02
learning other important web
technologies like CSS and JavaScript.
3:04
So you should be proud and
excited about what's next.
3:08
Remember we're always here to help so
if you have questions about
3:11
anything covered in this course feel free
to reach out to the Treehouse staff or
3:14
other students in the community.
3:17
Thanks everyone and happy coding.
3:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up