Finished my TECH DOC page. ready for feedback :)

here is the link to my pen:
https://codepen.io/Glaurung/pen/eXVwZP
if there is anything I need to improve, please tell me.
thanks!

Good work! Few suggestions.

  • Personally I don’t like the black border around the menu items.
  • You should use code blocks to format your code. You can use pre tags to achieve this.
  • Make it responsive, make your page adjust its flow when viewed in smaller screens.

Cheers. :tada:

The HTML inspector returns a number of warnings that should be fixed: In the HTML pane of CodePen, click the down arrow to the upper-right and select “Analyze HTML”. That will show you all the errors in your HTML.

Also, you really shouldn’t center all the content. It makes it extremely difficult to read.

I re-aligned the text and fixed the errors in the ‘analyzer’

I got rid of the black border, but it is really hard to get this thing to adapt to a really small page, like a phone.

You’re having sizing issues because you gave your sticky sidebar a % width instead of a fixed width in your #links id. By giving it a % width you’re allowing it to resize and clip into the words. Try giving it a fixed with of 175px and see what happens.

Now that you have a fixed width for your sidebar you need to look at the content on the right of the sidebar and how it’s reacting:

The position: relative property may not be the best choice in this situation, deleting it makes the text act as if the sidebar isn’t there but that’s okay! Let’s look at how to push that text to the right, after we delete that position property ~

Change the position from relative to fixed in your #main-text id. This should make it so the text doesn’t resize all wonky. Now that the text is fixed, recall that the sidebar has a width of 175px so lets give the left property a value of 180px, to push it a little bit further than the width of the sidebar.

Doing these 2 things, the technical document page is more responsive. It does has its limits though. The text does eventually get pushed off the screen when it gets small enough but you should be able to solve these issues with media queries.

Good luck! :clap:

Thanks for your help, but if I put the position of #main-text to fixed, it won’t scroll, and plus, it was absolute. not relative.

You’re right I meant to say absolute.

Looking at your project now it looks like you fixed the resizing issue. I didn’t realize that making the information on the right fixed would get rid of the scroll bar so I’m glad you found a way around that by changing the position property.

Glad I was able to help somewhat. Good luck on future projects.