Html5 documentation page. Feedback please!

Hi campers,

I redid my technical documentation. Here is the link.

https://html5-documentation.netlify.com

Let me know what you think, especially the mobile view of it.

Thank you!

2 Likes

This is a really fun spin on the Technical Documentation page. Lots of extra work here and it looks good too. On mobile it seems that there is more of a more left padding than right on the h1. Maybe try removing it.

Otherwise great job!

@Ohia.Bruja Thanks for your feedback! I will work on it :slight_smile:

This documentation page looks really good. Well done.

1 Like

This is really nice looking. As a challenge (if it is worth it), I think that a user who is looking up documentation would want to see the example. In other words, render the HTML so the tags are visible to the reader. Maybe even allow them to edit it (like W3 schools)? Great work!

1 Like

Wow that actually is a fantastic idea. I think I will do that. Thanks for the feedback! @orleansd

1 Like

It looks great and I like what youā€™ve done. Does it pass all of the tests?

Did you create the CSS yourself? I ask that because the style class names are quite odd; for example, sc-VigVT gIEaci and sc-jzJRlG kzbQDr. Class names should ideally be meaningful.

My personal opinion is that libraries are useful, but the real challenge is being able to do it all with vanilla code. Maybe you could write some code that formats the code blocks for you rather than using that Prism library. I think that when Iā€™ve learnt more, Iā€™ll try doing that.

@leebut thanks for the feedback! No it doesnā€™t, I was going off of FCC template but I didnā€™t strictly adhere to its test cases. This project was meant to be more of a spin-off than a ā€œrealā€ FCC project.

I did create CSS myself. I am using styled-components which is CSS-In-JS. At this higher level, CSS classnames are all abstracted away into user created tags. Under the hood, it is using css classes with uniquely generated classnames such as above so that it avoids conflicts with even the ones with same named user created tags. https://www.styled-components.com/

True, I couldā€™ve written styles myself to format codeblocks. I wouldā€™ve learned more I might do that when I want to learn more about about it!

styled-components looks awesome ā€“ Iā€™ll have to check it out. Iā€™m perusing the docs, and it doesnā€™t mention this kind of name mangling of class names though, just prefixing. Are you using minified output or something?

styled-components is indeed great!

Here is an article I found. How styled-components works: A deep dive under the hood | by Eugene Gluhotorenko | šŸ’… styled-components | Medium. According to it,

Currently styled-components uses MurmurHash algorithm to create uniq identifier and then converts the hash number to alphabetic name.

1 Like

Well done!

I had a quick look at the styled-components docs. It needs npm and states that the code block becomes React code. At this time, I prefer to stay away from code that requires ā€˜specialā€™ servers to deploy. By special, I mean servers that are more expensive due to supporting those technologies. For now, coding with code that works on any server rather than what is trendy today is my aim.

1 Like

Wowā€¦ Very clean UIā€¦ The best so farā€¦ Mobile view is also greatā€¦

1 Like

@bmutebi thanks for kind words!

It looks very good and the content is very useful, nice work.

I will definitely check out your other projects! Do you have a personal portfolio page/website?

Thanks!

I only have few projects that are live. You can check them out my github.