An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
About this site
This is an overview of the major techniques used to make web sites and web applications without making use of build tools or frameworks, with just an editor, a browser, and web standards.
Specifically, that means these topics:
- Components
- The use of Web Components as the basic building block for making higher-level primitives out of plain HTML, JavaScript and CSS, replacing the components approach from frameworks like React or Vue.
- Styling
- Fully leveraging the abilities of modern CSS to replace the conveniences of CSS Modules, PostCSS, or SASS.
- Sites
- Making a web project based on web components and deploying it for production without involving build tools, frameworks or server-side logic.
- Applications
- How to build single-page web applications with vanilla techniques, how to do routing, and how to manage state.
This tutorial is meant for those who already know their way around HTML, CSS and JavaScript. If you're just starting out learning web development and are looking for resources to get going, then this is not the site for you yet. You can get started at The Odin Project Foundations Course or the MDN Learn web development learning path.
Wait, but why
Modern web development frameworks are powerful in their ability to develop rich well-structured web applications quickly, and for this reason alone they are well worth your time to learn. However, this rich functionality comes at the cost of framework and tooling complexity, and the resulting projects often require regular maintenance to keep secure and up to date.
The plain vanilla style of web development makes a different choice, trading off a few short term comforts for long term benefits like simplicity and being effectively zero-maintenance. This approach is made possible by today's browser landscape, which offers excellent web standards support.