There are a couple solutions for working with snippets like CodePen and JSFiddle but I wanted something a bit more like a local dev experience. At the other end of the spectrum are full virtual desktop infrastructure (VDI) solutions like Azure Virtual Desktop, Citrix, Amazon Workspace, and others. Those seemed too heavy weight for just editing some HTML files. I was looking for something in the middle and inexpensive for an hobbyist web builder.

Here are the options I looked at:

• Visual Studio Code for the web – If you can access local files at least, and view local files in a browser this looks like a nice, lightweight option. It’s still in preview but it doesn’t look like there is any cost at this time.
• Replit – Replit provides an in-browser IDE that allows you to write and view your code. They offer a free trial so I gave it a try using their HTML, CSS, JS template. The editor seemed pretty nice and I could easily view my page output in the right-hand preview pane. I also noticed there were quite a few tools in the lower-left pane. I.e., The Replit AI pair programmer. This looks like a good option.
• CodeSandbox.io – CodeSandbox looks very similar to Replit but it just worked. I click the free trial, chose the Vanilla Codesandbox and I could just start editing HTML files and see the output in the right pane. Another good option.
• Gitpod – Gitpod looks interesting but it assumes you are starting your project from a repo. I couldn’t figure out how to simply start a new project and start building some web pages. My daughter is pretty smart for her age but she doesn’t know anything about code repos yet.
• Github Codespaces – Codespaces is nice for building a service and saving it right to your repo but I couldn’t find a way to quickly preview a web page without running a server of some kind. I wanted something quick and easy for kid to write web pages on.
• Google’s IDX – This project looks interesting but I could only sign up for the waitlist so not an option at this time.

We landed on Visual Studio Code for the web. My daughter was able to use it on Chromebook and I could even “install” it and put a shortcut on her taskbar. She is editing the text in the browser but still still loading from and saving to local files. This is nice because if Visual Studio Code for the cloud ever goes away she would still have her files.

I think Replit or CodeSandbox would have been good solutions as well. They are easy to use and beginner friendly and provide templates for more advanced development projects with React, Next,js, Angular, etc. Judging by the templates and tool sets available I would say Replit has a larger feature set while CodeSandbox has a more narrow focus on web development.

Let me know if there are other options you don’t see on my list. Thanks!

Are you building a new WordPress site or trying to improve the performance of an old one? The articles on FireflyWP.com can save you a lot of time and frustration. -Mark

Below is a list of cookbook type resources I have found super helpful (no JavaScript framework required):

• Ten modern layouts in one line of CSS by Una Kravets – This awesome resource includes a video walk through. Una also created a Codepen style playground: https://1linelayouts.glitch.me/
• Common CSS Flexbox Layout Patterns with Example Code by Tobias Ahlin
• CSS Layout by Phuoc-Ng and other contributors – You may have thought you needed a JavaScript framework to implement some of these
• CSS Layout MDN Web Docs
• Getting Started With CSS Layout by Rachel Andrew
• 18 Free Beautiful CSS Layouts for User Interface Designers by Alex Ivanovs

Learn the basics:

• A Complete Guide to Flexbox by Chris Coyier on CSS-Tricks
• A Complete Guide to CSS Grid by Chris House on CSS-Tricks
• What The Flexbox?! by Wes Bos – A free video tutorial series on Flexbox
• CSS Grid by Wes Bos – Another free video tutorial series from Wes Bos

Here is my demo video:

You can find my full write-up on Devpost here: https://devpost.com/software/ld-sync

I wrote the project entirely in JavaScript and used WebSockets for real-time communication between the system components. If you are looking for example code showing how to interface with websockets both server-side and in-browser, you can find the repo here: https://github.com/MkFoster/ldsync