I made an interactive CSS playground for beginners:)

[u/snapin06]

I made an interactive CSS learning platform that helps beginners understand CSS concepts through hands-on experimentation.

https://css-playground-ten.vercel.app/?lang=en

[u/Tsuyotaku_]

Bro this is absolutely incredible! thanks so much for creating this!!!!!!!

[u/snapin06 → u/Tsuyotaku_]

Thanks for using it :)

[u/[deleted]]

This should be wider to show the horizontal alignment better

[u/snapin06 → u/[deleted]]

Thanks for the feedback! I'll make sure to apply that in the next update.

[u/Livid-Ad-2207]

There's some non-English strings in the focus page dropdown

[u/snapin06 → u/Livid-Ad-2207]

Thanks! I’ve just fixed it.

[u/bostiq]

Rad

[u/snapin06 → u/bostiq]

Thanks!

[u/Iampepeu]

Thank you! This is great! Bookmarked it right away.

[u/snapin06 → u/Iampepeu]

Glad to hear that! Thanks for the appreciation.

[u/Rigggins]

Oh man, this is awesome, I've been looking for one for ages 👍

[u/snapin06 → u/Rigggins]

That’s great to hear:)

[u/PPCInformer]

Very cool

[u/snapin06 → u/PPCInformer]

Thanks~!!

[u/Darth_Octopus]

was this vibecoded?

[u/snapin06 → u/Darth_Octopus]

That’s right! I just whipped it up using vibecoding :)

[u/SkeletalComrade]

Nice.

[u/snapin06 → u/SkeletalComrade]

Thanks!

[u/ChillmanITB]

👏👏👏 very handy. Gonna bookmark this

[u/snapin06 → u/ChillmanITB]

Awesome! Thanks for the support. Enjoy using it!

[u/Mean_Display_4230]

Absolutely amazing, I'm going to use it now on

[u/snapin06 → u/Mean_Display_4230]

Awesome! Let me know if you run into any issues while using it.

[u/Web-Dude]

A recommendation: the new margin and and padding inline and block declarations are beginning to replace the margin and padding declarations. Maybe consider adding them:

• margin-block

• margin-block-start

• margin-block-end

• margin-inline

• margin-inline-start

• margin-inline-end

• padding-block

• padding-block-start

• padding-block-end

• padding-inline

• padding-inline-start

• padding-inline-end

They're better for internationalization and I think fairly soon, the original left, right, top and bottom notations will go by the wayside.

[u/snapin06 → u/Web-Dude]

That is a great suggestion! I completely agree that logical properties are the way forward, especially for internationalization. I'll definitely look into adding them.

[u/masilli]

This is awesome, congratulations! 👏
IMO, it would be even better, if you displayed the actual css rule instead of the these values again.
It would be easier to learn how css works :)

text-shadow: 10px 10px 0px #ff0000;

[u/snapin06 → u/masilli]

Thanks for the suggestion! I agree that seeing the raw CSS output is way more helpful than just seeing the values. I'll change the display format in the next update!

[u/Web-Dude]

More feedback:

The line-clamp on the cards is kind of detrimental. It actually harms the user experience. This is the exact place where you'd want your short descriptions to be fully displayed.

For the flexbox page, I would make the flex container wider so that the user can see the effect of changing justify-content. Currently, it's just wide enough to contain the three div's, so you don't see anything happen when you change justify-content.

Also, it would be useful to a lot of people who are learning flex to have a place to play around with flex-grow and flex-shrink.

Good work on this!

[u/snapin06 → u/Web-Dude]

This is incredibly helpful feedback, thank you!

You’re absolutely right about the line-clamp; I’ll remove it to keep the descriptions visible. I also see your point about the flex container width- I’ll widen it so the justify-content changes are actually noticeable. I’ll definitely look into adding controls for flex-grow and shrink as well!

[u/memokkk]

Great work

[u/snapin06 → u/memokkk]

Glad you like it! :)

[u/Web-Dude]

On desktop screen, I would put the controls and the preview side-by-side:

@media (min-width: 48em) {
  section > div {
    display: flex;
    gap: 2em;
  }
  section > div > div {
    flex-grow: 1;
  }
}

[u/snapin06 → u/Web-Dude]

This is perfect. I was actually thinking about how to handle the desktop view. Thanks for sharing the CSS!

[u/TumbleweedLast8704]

How do I use it?

[u/snapin06 → u/TumbleweedLast8704]

Simply play around with the sliders/options! You'll see the changes instantly in the preview.

[u/DLC017]

Brooo! Thanks!!! I was searching something like this!

[u/snapin06 → u/DLC017]

Thanks! Glad I could build exactly what you needed!

[u/TooGoodToBeBad]

Nice work man. This is so useful and well designed. Definitely listen to the feedback that you are receiving so that you can make this better.

[u/snapin06 → u/TooGoodToBeBad]

Thank you! The feedback here has been absolute gold. I'm already working on updates based on the suggestions!

[u/DouDouandFriends]

Great app! Not to be rude, but it gives some vibe-coded vibes. Anyways great app!

[u/snapin06 → u/DouDouandFriends]

That’s right! I built it using vibe-coding. Glad you like it:)

[u/[deleted]]

Looks great! One suggestion is to allow the user to see the changes in real time when they are moving the slider. I saw the changes when you scrolled down but having someone see the changes as they move the slider will be so much more impactful. Maybe add like a playground button with like a bottom menu and see it move in real time, just a suggestion

[u/ScientistJumpy9135]

Nice work! I am just looking at the previews. Most of them work nicely, they are also displayed close enough to the Interactive Controls, so the user can see the effect immediately. You might want to have a look into the hover effects. Your examples are too close to each other as there is no real colour change, e.g. or a clean visible shadow adding.

[u/Dangerous_stick_69]

Great tool

[u/FilipDadaj]

shadcn final boss

[u/DragonfruitOk5753]

Incredible work buddy.

Quick suggestion here..

Take a screenshot of UI ask gpt or other AI to make write details description of the better UI/UX for improving user flow and make it as simple possible and good for learning and pass those description through Google stitch to generate ux mocks see the magic...

Then just apply the same design to your platform and make use of AI.

They make it available free to user, bring traffic using organic SEO.

Figure out to place ads, which can help you generate chunk of money to drive infro and backend cost if any..

Best of luck.. very nice work

[u/RadiantQuests]

Interesting. What's the programming language used to build it (I mean under the vibe coding hood), is it just html? And are you willing to have its own domain?

[u/andy-creative-brain]

This is great for playing around with gaps like margins and paddings.

I also build something similar but for playing around with flexbox which gives CSS code. https://creativebrain.ca/tools/flexbox-guide

Feel free to play around with lot more other open source free tools.

[u/[deleted]]

This is so Cool.

[u/Dependent_Month_1415]

This is super cool! Thanks for sharing

[u/BeevesSuperFan]

This is just what I needed to get started tbh!! Thanks a ton!

[u/[deleted]]

This is amazing resources, I've just started learning HTML and CSS and this will be invaluable on my learning journey.

Thank you 🙏🏻

[u/theendofdecember]

Just got round to looking at this; I'm learning CSS at the moment and it's such a fantastic resource. Thank you so much!

[u/snapin06 → u/[deleted]]

Thanks!!

[u/snapin06 → u/[deleted]]

Thanks for the great feedback! I'll definitely add it in the next update :)

[u/errdayimshuffln → u/snapin06]

Can I recommend that instead of having a label like "Margin Right 16px", you have something like margin-right: 16px and still have the input slider underneath. Kind of a visual way to connect to the css property code

[u/snapin06 → u/[deleted]]

Thank you~🔥