Technical Documentation project. Your feedback is appreciated

Here is the link to the project N4 in Responsive Web Design course. Please let me know what do think about it.
Technical Documentation

I was looking at the code for the navbar and you have some unnecessary code. I think it’s important to understand what the code is doing and why you need certain css to do what you want.

For example, you see how you put top and left positioning on your navbar, you did it to make the nav bar go to the top correct? The reason is because body has a margin which you could just remove. Personally, I will try to avoid using things like top,left,bottom,right as it is difficult to understand code like that.

Also there are things like text-align left which is the default and not sure what order:1 is doing.

It’s good that you used flex-box but there’s a lot more you could do with it and I suggest using flexbox instead so you can learn it better. As an example, did you know you can use row-gap:20px to make gaps between flex items?

Learning flexbox (grid too for certain cases) will help in future projects.

1 Like

Thank you very much for your comment! It helps to go back and think about what I have done. I do remember now I had experimented with flex boxes, moved the boxes right and left. And then found out that position: fixed; solves the problem with the height of navigation bar. So, order: n; doesn’t work now , which is logical. I have to remove it. I appreciate your feedback!

I would recommend you wrap the <code> tags in <pre>, which will keep the whitespace/line break formatting in the HTML and then you can lose those empty <span>s you are using to create line breaks. Also, add CSS overflow-x: auto to the <pre>s so that they horizontal scroll if the view port gets too narrow (this is a legimate use of horizontal scroll).

2 Likes

Thank you! Good idea.

Thank you for the gap idea. It is good. I’ll try it in future projects instead of padding.

1 Like