Technical documentation page -- styling overkill? feedback please :)

Technical documentation page -- styling overkill? feedback please :)
0

Hi everyone. Just finished my technical doc page and was wondering if I may have added too much styling to it ? To those who have few minutes to look at it here’s my code pen – https://codepen.io/dino-muratovic/pen/LYYwWyp

Thank you and Happy Thanksgiving!

1 Like

It’s a beautiful color scheme. I like it. :grin::+1:

The buttons with the links to the sections seem a bit big and the hover makes them even bigger and they move the other links. There is no smooth transition. I feel that the sidebar design does not match the elegance of main-section.

But is only my viewpoint. You’ve captured your own style and that is important.

1 Like

Thank you for taking your time to look at it . I was definitely on the edge with hover myself and was second questioning the transition so I set it now to where the fonts stay the same as the background color changes - seems like a lot better and smoother transition now. I could keep the fonts bigger but then I would have to set the padding which will result in even bigger buttons :slight_smile:

As far as the size of the buttons I tried smaller and didn’t really like it. It felt like at times it was just a little difficult to read. I would like to hear your thoughts on the side bar design? I thought about making the buttons with rounded corners just like the sections in doc page but I thought it was a little too much. Seems like I’m always trying not to over do something. That’s just my view however I’d like to hear your thoughts about the sidebar. I’d actually like to make it that way so that I can compare :). Ironically I’am in printing business as I’m studying web development and one thing I do regret is not getting into graphic design enough back in the day. Feel like my life would have been much easier. :slight_smile:

1 Like

Hi @DinoM, your page looks good but maybe a couple of things to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • some things in the HTML section you need to clean up
  • try moving the font-family property to the body declaration. It makes more sense there and you’ll notice that your <code> actually takes on a code font instead of staying the same font as the rest of your text.
  • with that said, you’d want to declare * as the first thing in CSS. Remember, the first word in CSS is Cascade.

Hi Roma.
Thank you so much for pointing that out to me. I have fixed all the errors.
In html there was a number of errors that were pointed out to me. I found the errors it just took a little bit of looking.

However is there an option where codepen can highlight the section the error is in ?

Thank you so much for introducing me to validators and analyze. As someone new to the codepen I was completely unaware of it until now.

1 Like

Not that I’m aware of. You can use the W3C validator if you’re having trouble seeing where you’ve made an error. Copy & paste your code into the ‘Validate by Direct Input’ tab there. It will show the line number of the error and give a description of why it’s an error.
I was going to tell you where the errors were but thought I’d let you have a go at it first. And once you spotted one the others would be easy enough to see since most were the same typo.
Good job!

1 Like

Hi :wave:,

I’m digging the look of the page and nicely responsive for monitor and phone screen views.

Nice job :+1:

1 Like