Hello Campers,
I have just completed building of the Technical Documentation Page Project.
Have a look of the project -
https://codepen.io/b-abhijit/full/xvEoEp
Your feedback are always welcomed.
Thanks in advance. 
3 Likes
Nice job! Just one remark - something is wrong with colors you’ve picked… You need to research on this a little bit, try https://dribbble.com/ for some inspirations
1 Like
Looks great on my mobile phone screen.
1 Like
Click the dropdown arrow on the top right of each area and pick the analyze option to get some valuable debugging messages.
I found these html errors:
and this CSS error:
I also found that the navigation pops to the top on smaller devices, when it should stick to the left. Its not sticky when it pops to the top so the user would have to scroll all the way to the top each time they wanted to go to a specific section.
Thanks. That’s a good shareable reference. Can you be more specific about your remark?
If you go through this link FCC: Technical Documentation Page, in the Data types section you will find the use of nested <ul> . So, to match that nested <ul> has been used.
The second warning appears because wherever there is a <code> tag, I am taking a <div id="code"></div> around that <code> tag. For every <div id="code"></div> tag around the corresponding <code> tag, different ids could have been taken but to reduce the css code that will have to be written for each and every <div> around the <code> tag , a common id=code has been used.
scrollbar-width: none property has been used to hide the scroll bar of the html body in case of Forefox browser. When used this property, Firefox browser does not show any scroll bar in the DOM body and this property works just fine although I am not sure about the appearance of the Unexpected unknown property.
According to the user stories given in the description of the project (Build a Technical Documentation Page) , the element with id="navbar" should appear on the left side of the screen but the example link - FCC: Technical Documentation Page shows it otherwise.
That is an error that I reported to fcc a little while ago. The sample code pages were written by humans so they may not necessarily be correct.
The error has been corrected in the rewriting of FCC’s lessons but they haven’t been pushed yet. You really should look into a way of correcting that error. It won’t stop you from getting the cert but if this is something you want to show potential employers you can’t say, “well that’s the way they did it”.
Use class instead of id if you’re going to repeat it and use it for styling.
You both missed the beginning of the sentence;
“On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen.”
The first four words are important. You’re okay with having it go to the top on smaller screens.
1 Like
The use of <ul> inside <ul> may not be right but if one wants to use nested list items, then what would be the correct way to do that?
According to my written code, the element with id=navbar appears on the left of the screen for regular sized devices and goes to the top as screen resolution gradually decreases.
The correct way to write the code would be;
<ul>
<li>
<a class="nav-link" href="#Introduction" rel="internal"><p>Introduction</p></a>
</li>
</ul>
Yep, and as I said, that’s okay.
You are simply showing the way to write an Unordered List. But I was actually asking about the right way to code nested Unordered Lists i.e. <ul> inside <ul>.
Don’t know what was on my mind in my other response. To answer your question you want something like
<ul>
<li>list item
<ul>
<li>nested list item</li>
<li>another nested list item</li>
<li>last one</li>
</ul>
</li>
<li>non-nested list item</li>
</ul>
Read more;
Then what error did you exactly report to FCC in the first place?
The same code I had used while trying to display the nested Unordered Lists in the Data Types section.
No it’s not. In yours you close the list after the first list item, then start the second unordered list.
In the snippet I sent you, the first list item is not closed until after the closing of the nested unordered list.