Preview
Video Player
00:00
00:00
Introducing the Practice
5:12This video introduces the challenge relating to "Structuring and Grouping Content" that you'll be working to complete.
[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