https://codepen.io/ayeolakenny/pen/gJBmPB
my technical documentation page…
ill need your feedback guys.
Hi,
First, well done. Nice attempt. It’s simple but needs some improvements.
I’m pretty new too and I know things are not easy at first.
Here’s my documentation page if you are curious (any feedback appreciated): https://codepen.io/ericlew/pen/zQavBZ
I won’t be able to give expertly feedback but here’s some suggestions, in my opinion.
First, remove the doctype, head and html tags. Normally, you would put them but in codepen it’s already implemented in the background. The HTML window is basically the body element (a.k.a body { }) in codepen, so write things you want to write within the body tags. If you go to settings, select the HTML tab, that’s where you can go to add CSS/JS/meta links to the head element. It confused me too at first.
The page is basic, it would be better if you style it a bit. It will look more appealing.
Add some padding.
When I run the test, only 15 tests passed. The navigation bar should be on the left for wide screens (laptops/desktops). If you change that, you’ll pass all tests.
List. You used tags incorrectly. I see you mixed ul and ol tags. In the HTML field, click on the little arrow on the side and click Analyze HTML and you’ll see what I mean. Just replace the ol with li.
Overall, well done.
That is NOT the way to use the <code> element 
A recipe is not a technical document
1 Like
Take a bit more time and figure out how to make your nav-bar more responsive using media queries. By this I mean make it so that when the screen width is smaller that the nav-bar sits on top, but when the screen width is larger, the nav-bar will be on the left. This is what user-story #14 is asking for.
Instead of calling everything a step, you could give each section a title that summarizes the step briefly and a subheading of what step it is. For example, Step 3 could be:
Mix Wet Ingredients
Step 3
and Step 4 could be:
Mix Dry Ingredients
Step 4
This way, all the Step 1, Step 2, Step 3…etc you have in your nav-bar could be changed to be Gather Ingredients, Preheat and Prepare, Mix Wet Ingredients…etc.
I wouldn’t use the code tag to stylize headings like you have. You don’t have any code so maybe use the code tag around the units of measurements. For example in Step 2:
Preheat the oven to 350 °F (177 °C) and grease and flour the cake pan.
You could also use the code tag around the units of measurement in your ingredient list but I personally wouldn’t do the entire list wrapped in the code tag.
1 Like
I didn’t need the tag I just, had to place somewhere in order to pass the tests…
Please can you also give me a suggestion on a technical documentation page
Thanks I’ll work on it
I’ll work on that. I didn’t need the code tag I just needed to clear the requirements.
But I’ll put to right use ASAP.
Thanks…
It look great! As @ericlyv stated, you need to put the navigation links on the left side. You can make two flexboxes. One for the body, to do the division into two columns. Next do another one to arrange the navigation links in a column, one on top of each other. You’ll pass all tests with this. Btw, put these in a @media query so that your page is not affected by these flexboxes when the page is in a mobile resolution.
1 Like
ok thanks, ill work on it
It looks great! I would add a link after each section that takes you up to the navigation menu. You could limit these links to appear and function during mobile view. You may also want to add links in your references.
1 Like
@ayeolakenny
Wrap the code in one set of <code> tags so you can set a background color on the code tag to create a rectangle.
Before:
<code>
var i = 'Hello World!'<br>
</code>
<code>
console.log(i);
</code>
<code>
Results:<br>
<code>
>Hello World!
</code>
</code>
After:
<code>
var i = 'Hello World!'<br>
console.log(i);
Results:<br>
>Hello World!
</code>
1 Like
Looks a lot better, great job!
1 Like
I did it like that deliberately, cause I didn’t have any other place to make use of it