Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Reza Sorasti
Reza Sorasti
491 Points

A few UPDATED questions on the course called How to Make a website.

1) In the first course of the “Front End Web development” track, called “How to Make websites”, under the subsection called “Creating HTML Content” and under that subsection, the sub-subsection called “Use the Navigation Element”, the instructor uses the word “navigation” to refer to the three buttons that we see at the top of website that let us go to the different parts of the website and let us navigate the website site. Clicking on the two headlines in that site, takes us back to the home page. The very fact that clicking on the two headlines takes us back to the homepage, wouldn’t that make the two headlines part of the navigation as well?

2) Also, in the first course of the “Front End Web development” track, called “How to Make websites”, under the subsection called “Creating HTML Content” and under that subsection, the sub-subsection called “Use the Navigation Element”, why did the instructor have to put the navigation in a list? Could he not just do it like this? <nav> <a href="index.html">Portfolio</a> <a href="about.html">About</a> <a href="contact.html">Contact</a> </nav>

3) And under the same video, how come the instructor did not put the three footer items in a list so there would be consistency in using lists? In other words, The footer in that site contains three items: the face book icon, the twitter icon, and a paragraph. If the navigation which contained three items was considered a list and was put in a <ul> element, how is it that the three items in the footer would not be considered a list? I asking this because I like consistency. We should either never create a list element Or create a list element every time we have a list.

4) And under the same video, how come the instructor did not put a <nav> </nav> element in side of the footer?

5) Is the reason that there is no need to use the nav element in the footer is because clicking on two of the three items in the footer which are the facebook and the twitter icons take use to a different site, not to different page in the same site? Right?

6) I guess the part that was kind of missing in that video was in general when to use a list element and when not to use list element and when to use a nav element and when not to use a nav element. So if you please explain to me when to use a list element and when not to use a list element and when to use a nav element and when not to use a nav element, I would appreciate it.

7) If clicking the facebook and the twitter icons took us to a different page in the same site, then would the facebook icon and the twitter icon would have been part of the navigation?

8) In the first course of the “Front End Web development” track, called “How to Make websites”, under the subsection called “Creating HTML Content” and under that subsection, the sub-subsection called “Use the Navigation Element” How come the below code was not placed inside of the <nav> element? Clicking on the two headlines take us back to the homepage. So as a result, those two headlines (<h1>Nick Pettit</h1><h2>Designer</h2>) in the header should be part of the nav element. Do you know why the instructor did not put those two headlines inside of a nav element?

9) <a href=”index.html”> <h1>Nick Pettit</h1> <h2>Designer </h2> </a> How come the above code was not placed inside of the <ul> element either? After all the <a> element contains two items(two headlines). As a result, wouldn’t that be considered a list of two items?

10) The video is under the course called “How to Make a Website.” Under that course, there is a section called, “CSS: Cascading Style Sheets”, under it first sub-video called “What is CSS?” It is around the 7th minutes down into that first video. Here is the link to the video: https://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/what-is-css The instructor wrote the code to change the color of footer’s text to white: … <style> footer { Color: white; Background-color: orange; } </style> … Later on in that same video around the 9th minute of the video, he wanted to apply the white text style to nav element instead of the footer element. So he changed the above code to the below code by changing the footer selector to nav selector: … <style> nav { Color: white; Background-color: orange; } </style> But for the above code, he needed to change the element selector “nav” to descendant selector “nav a” in order to change the text of the navigation links to white. But he didn’t not have to do that for the footer to change the text of the footer to white. My question is why? Why didn’t we have to do it like this in order to change the texts of the footer to white? <style> footer p { Color: white; Background-color: orange; } </style>

Thanks for answering my questions.

1 Answer

1) While you are right that the headlines link to the homepage, I think the key here is styling. We grouped together the things that should look like buttons in a navigation bar. We don’t want the h1 and h2 elements to look like the navigation buttons, so they are left outside of the navigation element. However, they are all part of the top bar area that we want to look uniform, so we did include it all in the header element.

2) Putting the navigation in a list is not required. You can also put navigation text in separate paragraphs <p></p>, or any other way you want. The way you organize that html will affect the way you use CSS. This is one way to do it. I think that by adding more levels to the navigation, we can be more specific where we choose to add styles. We don’t only have the options of styling nav or a… now we have the ability to style nav, ul, li, and a – and we have the ability to affect these styles individually to create a better look. I don’t think this is the only way to accomplish the task, and I am not positive that this is the correct answer to your question. But you could always plop a second header down above or below the first, write it the way you think makes sense, and play around commenting out the different rules to see what those changes did to the two headers?

3) I think that the footer was a more simple appearance, requiring fewer different rules to accomplish the styling task. We did not have those icons a part of a bigger picture, move them around and change colors based on media queries later on. Therefore, more simple code was just fine.. and in fact, easier.. to style to what we wanted here.

4) I think that you should only ever use <nav> for grouping links to navigation within the website. Not out to facebook or twitter. I do think if you had a reason to have two navigations on the same page that is allowed – but I think this would not be very elegant. Usually all main navigations are in the same area of a page for ease of access – but perhaps subpages need their own navigations to go deeper into even more subpages in very large websites. So they would have the main navigation, but also their own section navigation? I am not positive here.

5) I think you are right. See the above answers.

6) I would only use a nav element once generally, and only when you have other pages to string together inside one website. I am not an expert on all the reasons to use a list element. But I would not focus on using one or not using one – I would write html the way it makes sense to you, then style it. If you have difficulty styling, tinker with the way you wrote your html, and tinker with css until you get something you like.

7) See above answers.

8) See above answers.

9) See above answers.

10) I am having a very hard time understanding what you are asking here. But the footer’s text automatically changed to white because it was not a link, only text. In the nav, we have to add more steps to change the look of that text because of the fact that the nav text segments are links.