Check out <a href="https://vanillahtml.fandeytech.com/" target="_blank" rel="noopener nofollow">VanillaHTML</a> and <a href="https://github.com/fandeytech/VanillaHTML" target="_blank" rel="noopener nofollow">VanillaHTML Github</a>
<a href="https://www.bijanfandey.com/posts/hi_im_bijan/" target="_blank" rel="noopener nofollow">Hi, I’m Bijan!</a>
I’ve been creating websites as a hobby for quite a while now, and professionally for a little over four years now.
In that time I’ve noticed one thing that never seems to change despite everything in tech ALWAYS changing, and that’s how ugly regular HTML looks.
I write about this project <a href="https://www.bijanfandey.com/portfolio/vanillaHTML/" target="_blank" rel="noopener nofollow">in detail on my portfolio</a> but here’s what it is and why I made it!
<h2>What VanillaHTML Is and Isn’t</h2>
Let’s be real, default HTML is an ugly duckling. You hate to look at it, but you also know how much potential it really has with the right CSS.
VanillaHTML is a CSS file that allows for regular HTML to look and feel much more modern. But it also enforces the use of Semantic HTML. This means that if you are building your HTML to meet accessibility you will want to make sure you are using HTML elements that tell the browser what the element on your website does.
This is not intended to replace design or CSS in any way. If you are building websites for businesses then you should be designing and working with CSS. However, you can use it as a starting point for any project. By default there are no classnames, all the CSS is applied directly to the semantic element, so you can easily add classes to your html for your custom design, or remove and add what you do or don’t like from the file.
By enforcing these Semantic HTML practices as you build a website, you develop good habits and practices as a web developer. It not only makes building easier, but it also makes the internet better.
<blockquote>
VanillaHTML is essentially a redesign of default HTML elements with no JavaScript.
</blockquote>
<h2>Why I Made VanillaHTML</h2>
I wanted to create an experience where learning HTML felt more modern, fun, and more effective. I wanted the visual aspect of building a basic HTML website to make it clear what exactly your HTML is doing.
I also wanted to highlight the importance of accessibility and how powerful default HTML can actually be and how much value these semantic elements provide.
<h2>Questions for you</h2>
<ol>
<li>Did you find the style of HTML off-putting when you first started?</li>
</ol>

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

VanillaHTML is a CSS file designed to make default HTML look modern and pleasant, while also enforcing Semantic HTML practices to improve accessibility. It's not meant to replace CSS but to provide a better starting point for HTML learners and web developers. VanillaHTML encourages good habits and highlights the power of using semantic elements.

I Created VanillaHTML (a CSS File)

I think it’s a super minimalist approach. It’s proof that simplicity is not simplicity. Thank you very much.

<h1>Great job!</h1>
I feel like we’re on the same page but on different aspects.
Mine is forms, that I believe they can be way more powerful with less work and, at the same time with a more consistent user experience. Not forgetting accessibility concerns.
Just in case you’re curios, here it is the, yet incomplete (but with several examples, etc…), documentation of the project I am talking about:
<a href="https://smarkform.bitifet.net" target="_blank" rel="noopener nofollow">https://smarkform.bitifet.net/</a>
It is markup (and CSS) agnostic so, on its own, it is not very appealing and, for this reason, I faced the extra challenge of providing an additional CSS example (sadly tied to some specific layout guidelines) to build more attractive examples.
I wish I had something similar to VanillaHTML back then!!
Not sure if it would had fit all the requirements, but it would had been for sure a great starting point.