Feedback Wanted: Technical Documentation + Survey Form

[Earthrise]

Hi,

These are my project submissions for both the Survey Form and the Technical Documentation page.

Codepens below:
Chess Survey (codepen.io)

Documentation (codepen.io)

I thought it would be an interesting challenge to make a stylesheet that could apply to two or more projects, so that’s what I did here.

I want to credit @xynoan for sharing the color palette tool https://coolors.co/ on my other feedback thread. That was a big help here.

My biggest challenge was getting the navigation bar to appear where I wanted it to. I’m not sure this is a principled application of flexbox or container placement, so I’m particularly interested in any feedback you may have there.

I also wasn’t sure if I was following best practices on my stylesheet – sometimes there was a choice between styling on the element, class or id level, so I’m wondering if I made any transgressions there or if it doesn’t really matter.

Always welcome to hear feedbacks on aesthetics too, of course.

Thanks for having a look!

[xynoan]

Hi again, @Earthrise!

Your survey form looks good! But you may have to run your HTML code here: W3C validator. There are some errors.

Is there a reason why the content of your documentation is not in full width?

I ran your code here: TDP Test. You can click the Passed to see the errors, you passed 14/16.

Same thing with the Survey Form, you should also run it in here: W3C validator. There are also some errors to look for.

Otherwise, good job! I like the way you design the websites (glad you played around with the pallete ^^), and the way you’re using image as a background.

[Earthrise]

…you may have to run your HTML code here: W3C validator. There are some errors.

Ah, I forgot about that. I’ll start making a habit of using it.

Is there a reason why the content of your documentation is not in full width?

Yes – I’ve been trying to follow guidelines about restricting the length of lines of text. This blog talks about the rationale here: UI/UX Principle #46: Text Box Width Should Help Users Read - Fresh Consulting, but I initially got this from Kevin Powell (was from a different video, but this one talks about it too: 6 simple typography tips to more professional looking sites - YouTube, I included a time-stamp to where he talks about this.).

…But perhaps my main content would look better with generous padding / whitespace. What do you think?

I ran your code here: TDP Test. You can click the Passed to see the errors, you passed 14/16.

Good catch! I thought any errors would be caught when I provided the solution link and pressed “I’ve Completed This Challenge”, but I suppose since these are my second submissions it might give me false positives. I’ll be sure to use the templates with error checking from now on.

[xynoan]

@Earthrise

6 simple typography tips to more professional looking sites - YouTube

Wow, this is interesting. Thank you for sharing this.

@Earthrise

…But perhaps my main content would look better with generous padding / whitespace. What do you think?

I totally respect that you’re following guidelines to enhance readability, so, no. Maybe just a little bit of adjustment like centering everything? Because your documentation is technically pushed to the left-side. I’m sure you know what I mean