Technical Documentation Page Question?

I’m having trouble understanding one of the instructions from the technical documentation page project. “I can see a main element with a corresponding id="main-doc" , which contains the page’s main content (technical documentation)”. How would I properly set that up? Also, what’s the #main-doc element supposed to be? And the .main-section? I also can’t figure out how to properly set up the navigation bar. I tried, but nothing happened. Sorry if I asked any stupid questions, I’m just so confused.

I’m not trying to be rude.

Each of the projects builds on the next one. That is, they get progressively harder. Have you done the tribute page, survey form and product landing page?

Do you understand what an element is? Understand how to add an attribute to an element?

That’s the element you set up in step 1 above.

It would help if you provided a link to your pen so we can see what you’ve tried thus far.

Maybe the following will help

HTML tags vs elements vs attributes

HTML tags

Tags are used to mark up the start and end of an HTML element. The following are paragraph tags.

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>This is the content of the paragraph element.</p>

HTML attributes

An attribute defines a property for an element. It consists of an attribute/value pair and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">

Here’s a link to what I have tried so far. I have done the tribute and survey pages already, but not the product landing page. I was having difficulty understanding what to do for that one.

Okay, so the first user story says I can see a main element with a corresponding id="main-doc", which contains the page’s main content (technical documentation).

You started writing. You have the test suite available. Let’s see if you’ve met that first requirement and run the test suite.
When a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The first failing test says

I can see a <main> element with a corresponding id="main-doc", which contains the page's main content (technical documentation).
There is no element with an id of 'main-doc' : expected null to not equal null
AssertionError: There is no element with an id of 'main-doc' : expected null to not equal null

So the first user story wasn’t met. Reading the full text of the failing message tells you what the test was looking for and why it failed.
There is no id attribute in the main element so the test found null. That wasn’t expected.
How do you correct that following the parameters of the user story and using the failing test to help?

Does that help?

Just a side note. There is very little difference between user story #1 for the Tribute page and user story #1 for the Tech Doc page.
The only difference is that the Tribute page story lets you pick the element whereas the Tech Doc story dictates which element you are to use.

I’m still not understanding. I included the main-doc id now, but my title is no longer in big bold letters. And my navbar came out as bullet points instead of an actual navigation bar. I don’t understand where I’m going wrong with any of this. Here’s an updated version.

I just edited my last post. Please be sure to read it.

You have two main elements so make sure you read thoroughly.
Hint: Also, look at why user story #2 is failing.
Don’t worry about how it looks for now. When you complete the user stories then you can concentrate on styling. You do not want to try doing both at the same time. It will be a nightmare trying to get things to fit together.

Your nav contains an unordered list. By default an unordered list will have a bullet point alongside each list element. You get rid of them when you do your styling. They don’t go away just because you wrapped the ul element within a nav element.
One thing to help yourself, when you open a tag, close it so you don’t forget about it later.
By that I mean when you type <nav> the next thing you type should be </nav>. Then back up and in between them type <ul> and immediately type </ul>. Et cetera
There are IDE’s that will do this for you but make it second nature, muscle memory. You’ll be less apt to commit errors.

Side note, either click the reply where I responded or mention me by name (@Roma) so I get notified. If you click the generic ‘reply’ button at the bottom of the page I don’t get notified and will only see it if I stumble onto it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.