Alright, let me tell you about putting together what I started calling my “angel base”. It wasn’t anything official, just my name for a clean starting point for my little web projects.
I was getting really tired of starting every new idea from absolute scratch, or worse, copying an old project and then spending hours cleaning out the junk I didn’t need. You know how it is, right? Old code, weird configurations, files you don’t even remember adding. It was always a mess. I figured, why not build a super simple, super clean foundation once and reuse it?
Getting Started
So, the first thing I did was just sit and think. What do I really need every single time? I didn’t want to bloat it. That was the whole point – keep it lean, like an ‘angel’ setup, pure and simple.
I decided on the bare minimum:
A basic HTML file (*)
A CSS file for styling (*)
A JavaScript file for interactions (*)
A really simple folder structure.
No frameworks, no complex build tools, nothing fancy. Just the essentials. I grabbed my code editor and literally just created these files.
Building the Structure
Next, I thought about the folders. I didn’t want everything dumped in one place. That’s how the mess starts. So I made:
A main folder (let’s call it ‘angel-base’).
Inside that, the file.
A css folder with inside.
A js folder with inside.
Maybe an assets folder, just in case, for images or fonts later. Kept it empty for now.
Super simple. Then I opened and added the basic HTML boilerplate. You know, the <!DOCTYPE html>, <html>, <head>, <body> stuff. Most importantly, I linked the CSS file in the head and the JS file right before the closing body tag. Made sure those paths were correct, pointing into the css and js folders.
Putting in Some Basics
In , I added a very basic reset. Just removing default margins and paddings, setting box-sizing. Nothing crazy, just enough to avoid common browser inconsistencies that always bite me later. Like this:
margin: 0;
padding: 0;
box-sizing: border-box;
Simple, right? In , I just put a *('Script loaded!'); to make sure it was linked correctly when I opened the HTML file in a browser. I opened , checked the browser console, saw the message. Good.
Trying It Out and Thinking More
So now I had this tiny, clean structure. My “angel base”. The first time I needed to spin up a quick prototype, I just copied this whole folder. And honestly? It felt pretty good. No deleting old stuff, no untangling weird dependencies. Just rename the folder and start coding the actual idea.
Did it solve all my problems? Of course not. Sometimes a project needs more setup right away. Maybe it needs a specific library, or * for a backend, or a build step. My “angel base” didn’t have any of that. It was strictly for super simple front-end stuff.
And sometimes I found myself adding the same few things after copying the base. Like, maybe a basic CSS grid layout helper or a specific font. I thought about adding those to the base itself, but then I worried it would become bloated again. It’s a tricky balance, keeping it minimal versus making it useful enough.
Honestly, the main benefit wasn’t even the time saved, though that was nice. It was more about the mental shift. Starting from a known, clean state felt less daunting. It kind of encouraged me to keep things cleaner in the new project too. It’s still a work in progress, I tweak it now and then, but having that deliberate, simple starting point has been surprisingly helpful. Just my little way of trying to fight the chaos, you know?
