I’ve finally completed my Technical documentation project. It’s taken me about 3 weeks up to this point to complete, working on it on and off together with school.
Web Basics Documentation
Source Code
I decided to experimented with custom elements in this project. I think I created well over 10 custom elements, some of which have definable custom attributes, that work together with javascript. I used them for the code-snippets in the documentation.
With the custom elements, I was able to more easily style the colors of the markup, while keeping my HTML somewhat tidy. A lot of HTML is automatically written by the javascript where ever a custom element is declared.
Example:
I created an ot (opening tag) and ct (closing tag tag that automatically add angle brackets to what ever you put between it. I used javascript for that part.
<ot>p<ot>This is some text<ct>p<ct>
Result:
<p>This is some text</p>
From there, I went nuts. Experimenting different ways I could use custom elements for my code snippets and the sky was the limit (or rather my javascript abilities). I kind of went into a rabbit whole with the whole process and it became a little messy.
Overall, I’m quite happy with how it turned out and hope to get some feedback and your thoughts on it!