Responsive Tech Docs Page

Hey,

CodePen

Netlify site

I’m looking for feedback on my responsive Tech Docs page.

I’ve been inactive for around half a year and just this week I’ve picked up from where I left. I can’t help but feel a lot of the HTML code (specifically the “example” sections) is a huge mumbo jumbo cluster of unreadable nonsense. I’d love opinions on this.

To keep my code clean and readable, I could simply swap out the blocks of code for an image displaying the same examples.

All feedback is welcomed and appreciated.

Ta!

1 Like

Welcome back @Hangbar. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.

For the purpose of the tech doc I don’t think you should. Coding it shows you know how to write code snippets.
I will say you’ve made it a little busy. If your doc was about different editors then maybe all the colors would be okay. Even that though the angle brackets and tags are one color and the attributes are another. There isn’t a multitude of colors. (don’t worry about changing it…just something I noticed)

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