A simple, browser-based pixel art creator built with HTML, CSS, and JavaScript. Created as part of the Udacity Intro to Programming Nanodegree.
- 🟥 Choose custom grid height and width
- 🎨 Pick any color with the native color picker
- 🖌️ Click to paint individual pixels
- ⚡ Zero dependencies beyond jQuery (loaded from CDN)
- 🌐 Runs entirely in the browser — no server needed
| Component | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 |
| Logic | JavaScript (ES6) |
| DOM | jQuery 3.3.1 (Google CDN) |
| Font | Google Fonts — Monoton |
No build step required. Just open the file in your browser:
git clone https://github.com/zaabi1995/pixelArtMaker.git
cd pixelArtMaker
# Open index.html in your browser
open index.html # macOS
xdg-open index.html # Linux
start index.html # WindowsOr simply double-click index.html.
- Enter the desired Grid Height and Grid Width
- Click Submit to generate the canvas grid
- Pick a color using the color picker
- Click on any cell in the grid to paint it
- Click different colors to switch and paint more pixels
pixelArtMaker/
├── index.html # App entry point — grid form + canvas table
├── styles.css # Grid layout and cell styling
├── designs.js # Grid generation and paint logic
└── LICENSE
MIT License — Copyright (c) 2024-2026 Ali Adnan Haider Darwish Al-Zaabi. See LICENSE for full text.
Built as a project submission for the Udacity Intro to Programming Nanodegree.