GitHub Live Preview

CSS-Helper

This website allows users to generate CSS with an interactive UI that provides real-time previews of the styles being applied. As someone who enjoys writing CSS, I wanted to create a tool that would simplify the process of finding the right styles, which can often be time-consuming. With this app, users can experiment with different UI elements and instantly see the effects of their CSS, making it easier to fine-tune designs and achieve the desired look without the need for constant trial and error.

Features

Add background colour or gradient.

Name the css using id or class.

Add border styles and change border radius.

Set up box shadowing if needed.

Lessons Learned

That the gradient in css actually moves ui even if the div is played in absolute.

I learnt different ways to deal with printing css code to the screen and how to handle changes to the code.

Future features

More function on the already created features.

To add a delete button to remove some code

Animation settings

Grid/flexbox builder

Working On / Research

Cleaning up UI

Fixing bugs

Improving & adding features

Deployment

This site is deployed to GitHub Pages.

Other Projects