💡 Inspiration

As a Junior CS student, we often starts with web development and learning frontend is most of our first choice. CSS seems to me like a Magic and so interesting while mastering it is very difficult as a beginner. we face css a bit hard to master. Many a times we get confused what (px/em) to use and how much we should use, right? that is values. Yes changing a value in let say border can eventually change the overall layout of your project. And without a better plan ,we left with debugging a lot thus, our productivity decreases. But some smart use of the out of the box styling can left a good impression on your users.

What it does

CssGENX contains Beginner friendly css generators, such as shadow, border and GlassMorphismUI generator to make your projects looks smart & Cool, with minimal efforts and yes making learning enjoyable too!

The generated code can be saved to clipboard and can be easily customized using range bars for different tuning also sets of ToolsTips are integrated to give a glimpse of what does what, with a option to shut them out.

Tune in the different range bars and view the realtime update in the UI above the tools slab.

GitHub Repo: CssGENX

How we built it

I used Vanilla JS , Pure CSS and a bit of html and a pools of animation.

Challenges we ran into

Creating 3 generators in a limited time of period was a bit tough work. Connecting GlassMorphism UI generator's logic to range bars tuning seems a little hard at first, that is to implement the main aspect of this trend which is a semi-transparent background, with a sublime shadow and border. but, by consistent coding & prototyping things gets solved.

Accomplishments that we're proud of

The main goal of the project is to motivate new developers to master how things work in real UI taht is, what sorts of code effects what.

Hoping that it will help many beginner students/Developers to make cool Frontend projects with ease!

What we learned

Designing the UI , making a set of tools , usage of localStorage to make the things personalized, JS DOM etc.

What's next for CssGENX

Making it full stacked that saving the generated code to cloud storage by implementing user authentication system. With the power of Django and some Postgres or maybe MongoDB

Built With

Share this project: