Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Basics!
You have completed HTML Basics!
Preview
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