Feedback for Technical Documentation

Code Feedback
1

Hello fellow campers! Here is my technical documentation I coded. Please review it. Thanks in advance!

CodePen:
https://codepen.io/paulsonjpaul/full/NWrrqzK

8 Likes
2

Nice.
I love the color and the design.

1 Like
3

Thanks @codely. I appreciate your feedback!

1 Like
4

It looks really good :heart:

3 Likes
5

Looks great! Thanks for sharing! I’m about to start this project and needed to see someone else!

2 Likes
6

Thanks @Pejman & @medic_83 for your valuable feedback. I really appreciate it :smiling_face_with_three_hearts:

7

Your page looks good @paulsonstech. Some thing to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

  • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

  • A suggestion. Black and white work well in print but on a computer screen it can get tiring and glaring on the eyes. Better choice for web pages is #333 for black and #f9f9f9 for white.

3 Likes
8

Damn! This is awesome @paulsonstech! Overall theme and responsiveness is very fluid. very impressive :hushed:

1 Like
9

Hi @Roma. Thank you very much for taking your time to view my project.

Are you talking about the <br> element inside the li tags?

Ok. But, a question? Did you mean changing the background-color and menu items or changing the background color of the main documentation and its text color? Sorry for the stupid question, but I don’t understand what you are talking about.

Thanks for the review, I appreciate it.

10

Thanks, @Miyagii for the feedback and your precious time :grinning: :smiling_face_with_three_hearts:

11

Hello, i think is speaking about change all your #000 by #333 and all your #FFF by #f9f9f9.
Your work is amazing, content and style, great work !

1 Like
12

Thanks @nicolas for your feedback. I understand it now.

@Roma, I changed the black color to #333, but it didn’t look good and made the project “less beautiful”. So, I kept it as it was. I changed the white color to #f9f9f9 and it looked alright. The commit can be seen here:

13

One of the best tech doc projects I have seen on fcc

1 Like
14

Your page looks great! But i also agree with @Roma the colors are great and fun looking , but not much eye friendly too. Anyways its your personal choice. Your page is different than most documentation pages, I like that you didn’t keep them boring (like many of us did including me :sweat_smile: ) just because it is a technical documentation page :smile: . Good Job :+1:.

1 Like
15

Yes. That’s the only place they’re used.
After thinking about it a minute I might have done the following to enhance readability;

<p>The <code class="inline-code">border-radius</code> property can have from one to four values. Here are the rules:</p>
  <ul>
    <li>Four values - <code class="inline-code">border-radius: 15px 50px 30px 5px;</code>
      <ul>
        <li>(first value applies to <code class="inline-code">top-left</code> corner, second value applies to <code class="inline-code">top-right</code> corner, third value applies to <code class="inline-code">bottom-right</code> corner, and fourth value applies to <code class="inline-code">bottom-left</code> corner)
        </li>
      </ul>
     </li>
       <li>Three values - <code class="inline-code">border-radius: 15px 50px 30px;</code>

which results in;

Screen Shot 2020-11-08 at 10.10.57
Screen Shot 2020-11-08 at 10.10.57802Ă—270 26.5 KB

The solid black and solid white color changes were a suggestion. Letting you know how it appears on a screen for future projects. What you’ve incorporated looks good.

1 Like
16

Thanks, @IAmRC1 & @mdshariq for your valuable feedback!

Do you have any other eye-friendly colors that are similar to black, but not too greyish? If yes, I would be happy to test it out. Also, the reason I chose white and black colors are because it looks so much “milky”. :wink:

Haha! The entire content was prepared by me and it took two days to prepare the content itself :sweat_smile:

Hey @Roma, that looks better! I updated the code:

https://github.com/paulsonjpaul/technical-documentation-css/commit/b490b8215014f2fa93a7cf6907b044cc66e8d148

image
image1197Ă—537 46.8 KB

Is there anything else I can improve, friends?

1 Like
17

One other thing to revisit @paulsonstech;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. (They’re all the same, the pre element is not allowed as a child of the code element.)
1 Like
18

Hi @Roma. I saw the validation errors.

So, what can I do to get rid of it? Should I make the code element the child of the pre element? If yes, that would take a lot of time, I think :sweat_smile:

Also, I saw an error:

The main element must not appear as a descendant of the article element.

Am I getting the wrong idea about the article element? I used it to wrap the entire content (including nav, main, etc.)

Hope You Help Me. Sorry for Being Annoying.

19

main tag is used to wrap the main content on the page you should have wrapped everything (excluding nav) in main instead of article you can read more about HTML Semantic Elements and about HTML <main> Tag .

1 Like
20

Thanks for that @mdshariq. But, what element can I use to wrap the entire content (including nav, main,etc.)?