Feedback Wanted: Technical Documentation + Survey Form

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!

1 Like

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.

1 Like

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

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?

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.

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

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 :wink:

1 Like