One Solution5:00 with Guil Hernandez
This video covers one solution to the "structuring and grouping content" challenge.
Hopefully, you were able to write most or all of the HTML elements for 0:00 this practice session. 0:03 If not, that's okay you can watch my solution, compare it to what you wrote, 0:05 and then try to recreate it yourself. 0:08 The goal was to divide the HTML document into logical sections using elements that 0:10 help describe sections or groups of content, 0:15 as well as elements that describe headings, paragraphs, lists, and links. 0:18 Now, I'll show you my solution, 0:23 you can also reference my code when you download the project files. 0:25 First, I added a title inside the head of the page using the title element and 0:28 I set the title text to Front End DevConf. 0:35 Next, inside the body to begin dividing the content into logical 0:38 sections I first included the header tag to 0:43 group the introductory content at the top of the page. 0:46 I placed the main heading inside h1 tags, 0:49 which describes the most important heading on the page. 0:52 And I wrap the site description within p tags, which creates a paragraph. 0:56 For the navigation I first used the nav element, 1:00 which describes a navigation or a set of related links. 1:04 Inside the nav element I used an unordered list to display each link. 1:08 Each list item contains an anchor element that wraps the link text. 1:14 And I'm using the pound symbol as a place holder href value for now. 1:19 Up next, below the header I added the main element to 1:25 group the main content of the page. 1:29 Notice how the main tags wrap everything except the header and footer content. 1:32 In HTML the section element groups together related sections of content. 1:42 So inside the main element I first group the About and 1:48 Topics content into a section of content using section tags. 1:52 The About heading should be a level 2 heading so I wrapped it within h2 tags. 1:58 I placed the text below the h2 inside paragraph tags. 2:04 Now, in this case, the Topics heading isn't as important as the About heading so 2:09 I placed the text inside an h3, or level 3 heading, element. 2:16 Next, I displayed the list of topics as an unordered list using the ul element. 2:21 Right below, 2:29 I once again grouped together the Speakers' content using a section element. 2:30 I placed the Speakers heading inside an h2 element, 2:36 and I made each speaker name an h3, 2:40 then placed each of their bios inside a paragraph element. 2:43 Next, task six asked that you place the testimonials inside an element that's 2:53 used for content that is related to, but separate from surrounding content. 2:59 So for this I used an aside element, which is for 3:04 sectioning content that is a deviation from the main content or 3:07 content that could oftentimes be displayed as a sidebar. 3:11 I displayed the aside heading as an h3 and I grouped each quote and 3:15 quotee, or originator of the quote, inside a block quote element. 3:21 I also placed each name in a citation element using cite tags. 3:27 Now, in HTML the footer tag also lets us add separate 3:32 information about a quote in a semantic way. 3:36 So I included a footer element inside each block quote to contain 3:39 the citation element. 3:44 Right below the aside I placed the schedule content inside a section element, 3:46 where the section heading, once again, is an h2. 3:52 And I displayed the schedule as an ordered list using the ol element. 3:57 Now, to make sure that the name of a talk as well as a speaker name and 4:03 time are displayed on separate lines in each list item I displayed the talk 4:07 name as an h3, the speaker name as a paragraph, and the time as a span element. 4:13 You could've used a different approach for this and that's okay. 4:18 Finally, at the bottom of the file I place the footer content inside a footer 4:21 element and I display the footer text as a paragraph, which wasn't required. 4:26 Then I wrap the word treehouse with an a, or anchor tags, to create my link, 4:32 which has a href value that points to the treehouse website. 4:38 All right, so 4:43 I hope that you were able to complete this HTML practice session successfully. 4:44 If not, why not start over and 4:48 try to write it again without looking at my version. 4:49 You're also going to learn a whole lot more about writing HTML here at Treehouse. 4:52 Thanks everyone and happy learning. 4:57
You need to sign up for Treehouse in order to download course files.Sign up