Python Intermediate · HTML/CSS/JS Master · Vibe coder · High school student
I like building things that look good and actually work. Mostly static sites — no frameworks, no build steps, just clean code. A few Python apps on the side, mostly desktop tools with real use cases.
Full web dev courses — from absolute zero to real projects.
Three subjects, each taught in English and Persian. Phased curriculum, hands-on examples, no paywall.
| Topic | English | فارسی |
|---|---|---|
| HTML5 — semantics, forms, media, modern tags | Ultimate HTML . live | آموزش HTML . لایو |
| CSS3 — design, flexbox/grid, animation | Ultimate CSS . live | آموزش CSS . لایو |
| JavaScript — logic, DOM, modern JS | Ultimate JS . live | آموزش JS . لایو |
What's inside — every course is a full roadmap, not a pile of random videos:
- 🗺️ Phased curriculum — HTML goes from tags → semantic markup → modern features; CSS from styling → flex/grid layout → animation; JS from basics → DOM → advanced topics
- 🌍 Two editions — the same lessons in English and Persian, so you can learn in whichever language clicks
- 🧪 Live examples — every concept comes with something you can open and play with
- 🆓 Free forever — no sign-up, no paywall, no "part two is paid"
Course previews:
Mostly premium static websites — each one designed from scratch, zero frameworks, zero dependencies. All of them are live on GitHub Pages. Scroll down, there are screenshots. 👇
| Project | What it is |
|---|---|
| aether | Premium AI platform — intelligence that feels like yours, award-caliber landing page |
| forma-os | FORMA — the operating system for ambitious software teams |
| aevum-cloud | Aevum Cloud — premium, editorial cloud-storage landing page |
| Project | What it is |
|---|---|
| aurelian-university | Premium university site — editorial heritage, cinematic campus |
| Human-life | Interactive site about human life — with a resource calculator |
| Project | What it is |
|---|---|
| meridian-construction | Premium construction company site — dark, industrial, built to feel solid |
| haven-property-rental | Property rental platform — curated stays with a luxury booking feel |
| mehrgan-realestate | Real estate listing site with a clean, modern layout |
| aether-architecture | Architecture studio site — minimal, gallery-first |
| Project | What it is |
|---|---|
| ember-oak | Specialty coffee roasters — warm tones, roast-level story |
| hearth-and-rye | Artisan bakery — rustic, handcrafted feel |
| eclat | ÉCLAT — an intimate, award-winning flower atelier in Amsterdam |
| sky-route | Airline landing page with flight search, dark glassmorphism UI |
| ferdows-grand-hotel | Grand hotel — elegant, booking-focused |
| Freshmart | Grocery storefront with a bright, fresh look |
| Project | What it is |
|---|---|
| lajevard-tea-house | چایخانهٔ لاجورد — لوکس، اصیل و کاملاً فارسی |
| nova-mobile-gallery | نووا — گالری موبایل پریمیوم، طراحی سطح Awwwards |
| ketabnegar-bookstore | کتابنگار — فروشگاه کتاب با طراحی جایزهای |
| hirkan-luxury-camping | هیرکان — کمپینگ لوکس و تجهیزات طبیعتگردی |
| volt-gaming-store | VOLT — فروشگاه تجهیزات گیمینگ نسل بعد |
| sedra-premium | سدرا — فروشگاه لپتاپ، لندینگ پریمیوم فارسی |
| aryabar-logistics | آریابار — لجستیک هوشمند، لندینگ پریمیوم فارسی برای شرکت حملونقل |
| azarcan.github.io | آذرکَن — خانه روشنایی لوکس فارسی، طراحی لندینگ پریمیوم |
| Project | What it is |
|---|---|
| nail-salon | LUMIÈRE Nail Atelier — soft, premium, elegant |
| Hair-salon | Luxury hair salon site |
| iron-and-velvet | Barbershop — dark + gold, masculine premium |
| atelier-linnea | Design atelier — clean editorial layout |
| aurelle-ritual-bathing-house | Ritual bathing house — calm, spa-like atmosphere |
| eila-yoga-studio | Yoga studio — breathing room, soft gradients |
| jewelry-store | LUMEN jewelry — minimal, product-first |
| Perfume | Perfume brand site — sophisticated and moody |
| Habibi-shoes | Shoe storefront e-commerce layout |
| zarineh-watch-store | Watch store — precision, dark luxury |
| Project | What it is |
|---|---|
| chrona-bio | CHRONA — biological age intelligence for clinical teams; interactive estimator + hand-authored SVG data-viz |
| sterling-longevity-clinic | Longevity clinic — clean medical + modern |
| aurea-dental | Berlin dental clinic — trustworthy, bright |
| linden-apotheke | Pharmacy — premium, professional |
| kai-lennox | Elite performance coaching — bold, motivational |
| fitness-gym | Apexfit gym — high-energy, dark |
| voltaic-engineering | Smart energy & luxury electrical systems |
| Project | What it is |
|---|---|
| game | An HTML game — playable in the browser |
| XVVIIX-Launcher | A fast, cinematic, local-first command center for games |
| Project | What it is |
|---|---|
| Dastin | Brand site — premium look, smooth interactions |
| photography-portfolio | Photographer portfolio — images do the talking |
| travel-agency | Auora Voyages — wanderlust-driven |
| ashford-whitmore | Cinematic editorial site for a Berlin law firm |
| copperline-plumbing | Trade services site — clean and trustworthy |
| Project | What it is |
|---|---|
| pdf-toolkit-fa | Full PDF utility (Persian UI) — split, merge, convert + OCR that reads names off scanned docs and names the files for you |
| pdf-toolkit-en | Same toolkit, English UI |
| batch-image-resizer | Batch Image Resizer v11 — batch resize, shape crop, edge trim + final report window |
| Weather-app | Real-time desktop weather app in Python + Tkinter |
| rock_paper_scissors | Classic game, terminal-based |
Every site below is deployed on GitHub Pages — click on them to open it:
Every site up here is live on GitHub Pages — just browse my repos, every one of them has a working demo link.
Every site is vanilla HTML/CSS/JS — it loads fast, deploys in one push, and doesn't break.