Welcome to the world of web development! In this post, I'll share my journey of building a blazing-fast website using just HTML and CSS, hosted on Cloudflare Workers.
Why Simple is Better
When I started building my personal blog, I could have reached for React, Next.js, or any number of modern frameworks. Instead, I chose the simplest tools possible:
- Pure HTML for structure
- Vanilla CSS for styling
- Cloudflare Workers for hosting
The result? A website that loads in under 50ms globally, with perfect Lighthouse scores.
The Power of Constraints
By limiting myself to just HTML and CSS, I discovered several benefits:
- Lightning Performance: No JavaScript bundles to download
- Better SEO: Search engines love simple, semantic HTML
- Easier Maintenance: Less complexity means fewer things can break
- Learning Fundamentals: You truly understand how the web works
Key Lessons Learned
1. CSS is More Powerful Than You Think
Modern CSS can handle animations, layouts, and even some interactivity without JavaScript:
/* Dark mode with pure CSS */
.hero-image {
filter: brightness(0.3);
transition: filter 1s ease-out;
}
.hero-image:hover {
filter: brightness(1);
}
2. Performance Starts with HTML
Using semantic HTML and proper image optimization can dramatically improve load times:
<picture>
<source type="image/webp" srcset="/hero.webp">
<img src="/hero.jpg" alt="Description" loading="lazy">
</picture>
3. Cloudflare Workers are Amazing
Deploying to the edge means your site loads fast everywhere in the world. No need for complex CDN setups.
What's Next?
I'm continuing to explore what's possible with minimal tooling. Next up:
- Adding a simple HTML-based blog system
- Implementing navigation without JavaScript
- Creating interactive demos with CSS only
Conclusion
You don't need complex frameworks to build great websites. Start simple, focus on fundamentals, and add complexity only when necessary.
Happy coding! 🚀