Today I bring to you some simple websites to practice CSS and HTML online with live editors. These are also known as CSS and HTML “playgrounds”. It really is just that – a playground. Run around and do whatever you want with your code and see what happens!

These playgrounds are perfect for beginners who want to practice their coding skills and see the changes happen as they are made… with no consequences. 😉

Codepen

Practice CSS and HTML OnlineThis is probably my most played on playground. Very simple interface with the ability to log in and save your work.

codepen.io

JSfiddle

Practice CSS and HTML Online

This playground is used in a lot of different forums because you can create something with HTML and CSS and then add collaborators, or send a link to your code to show others what you have done.

jsfiddle.net

Scratchpad

Practice CSS and HTML Online

Very similar to codepen, except there is only one column to work on both CSS and HTML in the same space.

scratchpad.io

CSS Deck

Practice CSS and HTML Online

Allows for HTML, CSS, and Javascript.

cssdeck.com

Dabblet

Practice CSS and HTML Online

Also allows for HTML, CSS, and Javascript and the ability to login and save your work.  I love the simplicity of this one.

dabblet.com

Developer Tools – Page Inspector

Practice CSS and HTML Online

This is one of the most helpful tools I’ve come across when designing WordPress themes. Right click on any element in a web page, click inspect, and you will be able to see the HTML and CSS of the website like you have X-ray vision!

Chrome

Firefox

Safari

These are great tools to use when you are developing a website, or just want to fix something on your current website and need to mess around with it.

What ways do you practice HTML and CSS online? Do you use any of the editors above? Let me know in the comments below!

Pin It on Pinterest

Share This