https://github.com/rajjitlai/fun-with-js-css
Create and Play with your own CSS styling
https://github.com/rajjitlai/fun-with-js-css
css design js play style-elements title
Last synced: 21 days ago
JSON representation
Create and Play with your own CSS styling
- Host: GitHub
- URL: https://github.com/rajjitlai/fun-with-js-css
- Owner: rajjitlai
- Created: 2023-02-08T12:06:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-08T12:19:14.000Z (over 3 years ago)
- Last Synced: 2025-03-02T09:25:40.904Z (over 1 year ago)
- Topics: css, design, js, play, style-elements, title
- Language: HTML
- Homepage:
- Size: 1.95 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fun with JS and CSS 🎨
[](https://opensource.org/licenses/MIT)
An interactive, real-time CSS playground designed to help developers and designers experiment with styling in a live environment.
## 🚀 Overview
**Fun with JS and CSS** is a lightweight web application that allows users to manipulate CSS styles and see the results instantly. It features an editable style block and content components, making it an ideal environment for testing CSS concepts, layouts, and animations without project overhead.
---
## ✨ Features
- **Live CSS Editing**: Edit styles directly in the browser via a `contenteditable` `` tag.
- **Interactive Elements**: Play with layout and positioning on live-editable components.
- **Dynamic UX**: Includes a unique JavaScript feature that changes the page title when the window focus changes, keeping user engagement high.
- **Lightweight & Fast**: Built with vanilla HTML, CSS, and JavaScript.
---
## 🛠️ Getting Started
### Prerequisites
All you need is a modern web browser (Chrome, Firefox, Safari, or Edge).
### Installation
1. Clone the repository:
```bash
git clone https://github.com/rajjitlai/fun-with-js-css.git
```
2. Open `index.html` in your browser.
### How to Use
- Locate the styling section in the middle of the page.
- Modify the CSS rules within the editable fields.
- Watch as the elements on the page update in real-time.
---
## 📅 Project History
- **Original Creation**: 08/02/2023
- **Latest Update**: 2026 (Professional documentation & licensing)
---
## 📝 License
Distributed under the MIT License. See `LICENSE` for more information.
---
**Author**: [Rajjit Laishram](https://github.com/rajjitlai)
*Created with ❤️ for the love of CSS.*