AIMAN’S ARCHIVE PRESENTSHow I built
01
How I built
this website
A small story about ideas, pixels, code, and learning in public.
✳A tiny field guide / made by Aiman
How I built
this website.
Eight pages about turning a vague idea into Aiman’s Archive—with plain HTML, CSS, a little JavaScript, and an unreasonable number of browser tabs.
TURN A PAGE. LEARN A THING.01 / THE SPARKStart with a
Start with a
reason to care.
I wanted a place to keep the things I learn: useful notes, honest experiments, AI tools, and the occasional life theory that sounds convincing after midnight.
The brief was simple: make it personal, make it useful, and make it sound like a human wrote it. Preferably this human.
A grand strategy? No.
A notebook with a URL? Exactly.
A notebook with a URL? Exactly.
IDEA
↘
learn
something
something
write it
down
down
share it
(bravely)
THOUGHT → NOTE → WEBSITE(bravely)
02 / THE FOUNDATIONFour pages.
Four pages.
Zero framework.
Each page is a regular HTML file. Shared navigation and footer make the site feel connected; plain links keep every page easy to open, edit, and understand.
No component library hiding behind the curtain. It’s all readable source files—like a recipe card, except the recipe has a footer.
The files are the architecture.
Fancy diagram optional.
Fancy diagram optional.
▤ index.html HOME
▤ learnings.html BOOK
▤ resources.html TOOLS
▤ about.html ME
✳ styles.css LOOKS
↯ script.js DOES
03 / THE SKELETONHTML gives
HTML gives
ideas a shape.
Semantic elements make the page legible to people and browsers: a header, navigation, main content, sections, links, and a footer.
Then the content goes in. A headline, the archive’s notes, the tool cards. The most advanced part was deciding what to say. Naturally.
Readable markup is a gift
to future-you. Accept it.
to future-you. Accept it.
aimansarchive.xyz
a.
PERSONAL NOTES / EXPERIMENTS / LESSONSNotes from
figuring it out.Useful thoughts, filed with mild uncertainty.
figuring it out.Useful thoughts, filed with mild uncertainty.
04 / THE PERSONALITYCSS makes it
CSS makes it
feel like mine.
A little color palette, a few type styles, roomy spacing, and some abstract illustrations give the archive its own character. Soft paper colors meet forest green and a small hit of lime.
Responsive rules rearrange the layout for smaller screens. The design should be comfortable on a phone, not a desktop squeezed into a phone costume.
Good spacing: invisible.
Bad spacing: somehow the whole meeting.
Bad spacing: somehow the whole meeting.
THE ARCHIVE PALETTE
COLOR · TYPE · A LITTLE ROOM TO BREATHEPAPERFORESTCITRUSPEACH
AaCuriosity, filed.
05 / A LITTLE INTERACTIONJavaScript does
JavaScript does
a few small jobs.
Vanilla JavaScript powers the mobile menu, remembers the light or dark theme, updates the year, and filters the tool directory.
And here, it turns the pages of this little book. Nothing needs a giant framework to open a menu. The menu is not running a space program.
Use just enough code
to make the useful thing happen.
to make the useful thing happen.
script.js ● ● ●
const menu = document.querySelector('.menu');
menu.addEventListener('click', () => {
menu.classList.toggle('open');
});
// Look ma, no framework.↯
SMALL SCRIPT. USEFUL CONSEQUENCES.06 / TEST, THEN SHARECheck the small
Check the small
screens too.
I preview each page, follow every link, try the menu and theme switch, and check the layout at phone widths. The goal: no sideways scrolling and no mysterious disappearing buttons.
When the files are ready, a static host like Cloudflare Pages can publish them. Push an edit, let the host serve the updated site. Internet: a series of folders with excellent marketing.
Preview. Notice. Adjust.
Repeat until it feels right.
Repeat until it feels right.
DESKTOP
TABLET
PHONE
PREVIEW
↗ PUBLISH
ONE SITE, A FEW DIFFERENT WINDOWS↗ PUBLISH
07 / THE LAST PAGE (FOR NOW)Turns out, you
Turns out, you
can just make it.
The big lesson: a website is not a mysterious object bestowed upon the chosen. It’s a set of files, some thoughtful choices, and a willingness to fix the bits that look odd.
Start small. Keep the code understandable. Make it yours. And maybe close a few tabs before starting another project.
Back to the archive ↗IDEA→WEBSITE
you made
a thing ✳
END OF THIS CHAPTER. NEXT CHAPTER: EDITING IT.a thing ✳
01 / 08
Swipe, use your arrow keys, or tap the buttons · Page sound is made in your browser
Still curious?
Browse the tools used for learning ↗What I learned building a responsive website
This interactive guide covers planning a personal website, structuring pages with semantic HTML, styling responsive layouts with CSS, adding book and navigation interactions with JavaScript, and preparing pages for search engines. It also explains the small set of files behind Aiman Archive.