Practice Page - Any Tips on Improvement?

I made an about me page for practice. I’m hoping to get some feedback on how I can improve!

Just incase, I have a concern:

  • I don’t know how to move the scrollbar to the right of the page. I tried {position: absolute; right: 0} which did not work for me.

Thank you for reading!

I’ll link my code below if you don’t mind taking a look

Get rid of the overflow property on the #about div.

1 Like
  • You didn’t close one of the span elements in the navigation.

  • The flex property is align-items check the #nav-items selector.

  • Remove the default padding from the ul in the nav.

  • The margin value in the #nav-items selector should have a unit (e.g. px, rem).

  • Increase the font-size and line-height of the paragraph text. Limit the paragraph text width to about 80-120 characters. You can use the ch unit (e.g. max-width: 90ch). If you want the width limit to only apply to the text you should create a container for the text (instead of applying it directly to the #about element).

  • For the hover on the navigation elements, to avoid the elements growing you can use an outline instead of a border. Or you can add a transparent border that you color on hover (that way the border is always there but you can’t see it until you hover)

  • Add cursor: pointer to the submit button.


I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.

Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. If there are issues you should see code marked in red. That is the new Syntax Highlighting showing you where the problems are.

Press the down arrow to the right of the code boxes and select the “Analyze” option. You can also use a validator tool.

2 Likes

How do I address text overflow if I remove overflow ?
I don’t necessarily have to move the scrollbar, another option is to make it smaller, but I’m not sure how to do that either.

Regardless, the scrollbar isn’t too important, I just wanted to play around with it.

Thank you for your comment!

This was super helpful! Thanks so much!!

Hmm, I’m not sure I understand your question. If you remove the overflow property from that div then the body should have a vertical scrollbar if it is needed.

1 Like

Hello!

I removed overflow and added <main> to my #about div and that fixed the problem!
Thank you so much!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.