VanillaHTML

An Opinionated CSS (Cascading Style Sheets) File to Modernize HTML (HyperText Markup Language)
Created By: Bijan Fandey | Fandey Tech

Build With Simple Semantic HTML Faster

Beautiful and Accessible HTML

By having a simple CSS file, you can learn web accessibility and Semantic HTML faster. Don't worry about crafting your own styles or classes. Just use Semantic HTML and VanillaHTML will do the rest!

Prototype With VanillaHTML
Rapidly build concepts by only using HTML and not having to worry about CSS or Tailwind until you are ready to design.

Learn Proper HTML

Did you know you could build these accordions with just HTML? If you didn't, you will by learning with VanillaHTML!

If you are newer to web-development, CSS can be overwhelming, it still is to many experienced devs too. CSS is creating art with numbers, and there are a lot of things to know about it. It can be a frustrating experience wanting to learn HTML but feeling like everything just looks ugly and outdated.

What's Included
Why I Made VanillaHTML

There's so much to learn when starting your journey in web development. It can be difficult and daunting, but it all starts with HTML.

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.

Pros and Cons

Let's look at some pros and cons of using this file.
PROS CONS
  • Easier to see what you are doing as a beginner
  • Makes use of Semantic HTML
  • Responsive
  • No class names for easy overwrites
  • Default form inputs look good
  • Tables come pre styled for rapid development
  • Opinionated styles
  • No keyframe animations
  • Delay Learning CSS
Here's another row just to look at! The CSS contains some properties that do not have baseline support yet.
Progressive Enhancement: Use an updated version of Chrome for the best experience.
And this is a table footer!

Fine Forms

Hate having super ugly forms by default? VanillaHTML makes the dev experience faster and more enjoyable.

Please read MDN Documentation on Semantics in HTML

This is an Example Form


Choose your favorite monster

Do you agree?
CSS Only Form Validation


Press Submit to see an example <button> press.

Documentation

It's Just HTML

I have examples all over this page, but if you follow correct standards and use correct elements for their intended purpose, you shouldn't have any issues.

Rewards Semantic HTML

If you don't have an understanding of Semantic HTML, this CSS file will be a big help in learning. MDN HTML Elements Documentation

Why Semantic HTML is Important

Everyone Deserves Access to Your Website

Semantic HTML is the process of structuring your HTML content in a way that is understandable to assistive technology. There are many benefits to using semantics in your code, especially when it comes to SEO and future-proofing your website. But most importantly, you can reach people with disabilities that can only access a tiny portion of the internet, think of how many potential users you could actually be missing out on.

Please read MDN Documentation on Semantics in HTML

What Elements are Restyled?

A list of all elements that have styles attached to it

  • body
  • hgroup and inner text
  • main
  • main section
  • hr
  • table and inner elements
  • code
  • aside
  • form
  • fieldset
  • inputs
  • button + focus/hover/active
  • a + focus/hover/active
  • details + summary
  • abbr
  • textarea
  • blockquote

Coming Soon

There are quite a few elements in HTML, I'm working on adding...

My goal is to remake every element that doesn't require JavaScript to overhaul.

Never gonna make you cry, Never gonna say goodbye,

- Rick Astley, Never Gonna Give You Up