Otaku Dev is a beginner-friendly, anime-themed website that teaches HTML, CSS, and modern web design through fun, colorful, character-guided lessons. Perfect for aspiring developers and anime fans alike! 🎌💻
🔗 Live demo: mr-prince2.github.io/web-dev
- 🧠 Beginner Lessons — Learn HTML & CSS fundamentals through anime-themed guides
- 🎨 Interactive Examples — Code snippets paired with live visuals for easy learning
- 🚀 Live Code Playground — Write and run HTML, CSS, and JavaScript in real time
- 🎴 Anime Vibes — Every lesson is hosted by a different anime character acting as your coding guide
| Topic | Description |
|---|---|
| CSS Basics | Selectors, box model, and core styling concepts |
| Flexbox Layout | One-dimensional layouts with display: flex |
| Grid Layout | Two-dimensional layouts with display: grid |
| Responsive Design | Media queries for multi-device support |
| Hover Effects & Transitions | Smooth, interactive UI feedback |
| Pseudo-selectors | :hover, :nth-child, ::before, ::after, and more |
/web-dev
│
├── assets/
│ └── images/
│ ├── image1.png
│ └── image2.jpg
│
├── index.html
├── lessons/
│ ├── css/
│ │ ├── flexbox.html
│ │ ├── grid.html
│ │ ├── pseudoselectors.html
│ │ ├── responsive.html
│ │ └── transitions.html
│ ├── css.css
│ ├── css.html
│ ├── html.css
│ ├── html.html
│ ├── javascript.css
│ └── javascript.html
│
├── playground/
│ ├── editor.css
│ └── editor.html
│
├── script.js
└── style.css
Clone the repo and open index.html in your browser — no build tools or dependencies required:
git clone https://github.com/mr-prince2/web-dev.git
cd web-dev
open index.html # or just double-click it- Character selector to pick your anime tutor
- Progress tracking system
- Save code snippets in the playground
- Add JavaScript tutorials
All anime character images used are for educational/demo purposes only.
This project is open-source and free to use for learning and teaching purposes.