Technical documentation page - What can i improve?

Code Feedback
1

Hi,
It’s my another FCC project, Technical documentation page. Please give me your feedback to help me to improve my skills. I really appreciate every comment and advice.

CODE:

FULL PAGE VIEW:

Thank you in advance.

1 Like
2

@karolroldi, looks great! :100: It passes all the tests and works well.

I see you’re using the <article> element. Do you need that? I don’t see it being used in your CSS. It seems like you can take it out and have the following structure instead:

<main>
  <section>
  </section>

  <section>
  </section>
</main>

Also, some say that selecting IDs in your CSS will lead to more complicated and slower code when working in larger projects.

Other than that, nice work! :sunny:

1 Like
3

Great work… All I can say… May be in future you can include the top navs in a humbug …

4

Looks clean. I noticed two things. First, personally I think the code box font-size is a little too small for me when viewing on a large screen. Maybe you could put a media tag for that. Second, when resizing to smaller screen (<400px), your image:

<img id="css-img" src="https://mdn.mozillademos.org/files/11781/rendering.svg" alt="contest of the DOM">

is a little awkward. I think because it’s part of the ordered list element, so it’s indented, but it looks like it would be better off with auto left and right margins.

Looks very clean, though, otherwise.

5

I second this. Very good idea!

1 Like
6

I would say work on the menu make it better desktop view and for mobile view.

1 Like
7

You’re right i don’t need it. I thought that it is better to put all <section> elements to <article> which will contain entire content.

thanks for your reply :slight_smile:

8

I’m sure i’ll do this when i improve my skills.

9

Font size is bigger now. Does it look better?
I forget to put </ol> element so the image was a part of the ordered list. Hope it’s better now.

Thanks for your feedback.

10

Yes, it does.

I’m not sure why, though, but when I checked your code from my phone, it was not responsive. Only from the desktop when resizing the screen.