Introducing the Practice5:12 with Guil Hernandez
This video introduces the challenge 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, paragraph, list, 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 up