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
This video introduces the challenge relating to "Structuring and Grouping Content" that you'll be working to complete.
Resources
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
[MUSIC]
0:00
Hey everyone, Guil here.
0:09
It's time for practice.
0:10
If you're wondering about how and where
you can practice many of the concepts and
0:11
code you learned after a video,
stage, or course,
0:15
practice sessions like this
one are just the place.
0:18
Practice helps make what you learn stick.
0:20
It also helps you become a faster and
better developer.
0:23
So in this workshop, you're going to
sharpen your HTML skills by practicing
0:26
the fundamentals of structuring and
grouping content with markup.
0:29
This exercise is a follow-up to our
videos on structuring content with HTML.
0:33
If you haven't watched those yet,
0:38
I suggest that you watch them
before trying this challenge.
0:39
I've posted a link to the content in
the teacher's notes with this video.
0:42
To get started,
launch the workspace with this video.
0:46
The workspace contains one
file named index.html,
0:49
which contains content about a fictitious
web conference named Front End DevConf.
0:52
When you preview
index.html in the browser,
0:58
you'll see that the content is
really difficult to read and
1:01
scan, because there's no markup to give
the page structure, it's just content.
1:04
You've learned that HTML's
role in web design and
1:08
development is to provide structure and
meaning to content.
1:11
So that's where you're going to
focus on in this practice session.
1:15
Index.html is already
set up with the DOCTYPE
1:18
as well as the html head and
body tags you use on every webpage.
1:23
Now the grayed out syntax you see
here are HTML comments, which
1:28
developers use to add notes in their code
to make parts of it easier to understand.
1:33
Comments are also ignored by the browser,
so
1:38
what you write in the comment
does not appear in your webpage.
1:40
In this case the comments containing
instructions are about the HTML tags you
1:44
need to write.
1:47
You're going to divide the page
into logical sections using
1:49
HTML elements that help
describe sections of content,
1:54
as well as elements that describe
headings, paragraphs, lists, and links.
1:57
So first up, the page needs a title.
2:03
So you will add a title
inside the head of the page.
2:06
Then inside the body, you'll begin to
divide the content into major sections.
2:10
First, you'll include the tag for
2:16
introductory content that's
usually at the top of the page.
2:19
That element should
contain the main heading
2:23
followed by the site description and
a navigation.
2:26
So you're also going to write the markup
for the navigation using the element that
2:28
describes major sections of
navigation in an unordered list.
2:33
After that you'll add an element that
groups the main content of the page.
2:39
That includes the about and
topic section, the speaker section,
2:45
also the testimonials and
schedule section.
2:50
So in other words, everything between
the introductory content up top and
2:54
the footer content at the bottom
will be placed inside this element.
2:58
Next, inside that element,
you're going to include a tag that
3:03
groups the about and
topics content into a section of content.
3:08
The About heading should
be a level two heading,
3:13
then the text below it
should be a paragraph.
3:17
The Topics heading should be a level three
heading then you're going to mark up
3:20
the list of topics as an unordered list.
3:25
After that you will add an element
that groups together the Speakers
3:29
content in the same way.
3:34
It should contain a level two heading and
each speaker name should
3:36
be a level three heading,
followed by their bio as a paragraph.
3:41
Task six ask that you place
the testimonials inside an element that's
3:49
used for content that is related to but
separate from surrounding content.
3:54
For example, this content could
be displayed as a side bar.
4:00
It should contain a level three heading.
4:04
Then you're going to write the markup for
each quote using the HTML
4:07
element that indicates that
the text is an extended quotation.
4:12
And it should include each
name in a citation element.
4:17
Next, you will add one more element to
group the schedule section of content.
4:22
It's going to contain
a level two heading and
4:28
you should display the schedule
as an ordered list.
4:32
So inside each list item, make sure
that the name of the presentation
4:36
as well as the speaker name and
time are displayed on separate lines.
4:41
Finally at the bottom of the file,
4:47
you will include the tag that contains
the footer content of a page.
4:49
And it ask that you link the text
Treehouse to the Treehouse website.
4:54
The goal is to get your page to
look like this when you're done.
4:59
So good luck, have fun, and in the next
video, I'll walk you through my solution.
5:03
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