Geraldine
Pickled Thoughts

Pickled Thoughts

Three Levels of Code Editors in the Browser

Three Levels of Code Editors in the Browser

Geraldine's photo
Geraldine

Published on Oct 1, 2021

6 min read

In the early phase of learning how to code, it's easy to get distracted by picking the right text editor and installing the best plugins to be as efficient as possible. However, that's taking time away from the actual coding work and building as early as possible.

To help you focus on web development fundamentals in HTML, CSS, and JavaScript, here are three levels of code editors in the browser. These can even be used by seasoned developers to whip up a quick project, or as a cost-effective alternative if you don't have the best workstation, yet.

Level 1: Codepen.io

Best For: Front-end, Single Page, Testing Components

CodePen.io

CodePen is primarily for front-end code, so it's most suitable for laying out single-page static sites or testing out components.

Mintbean.io hosts Learn-A-Bit's, which are focused on building small projects to reinforce your HTML, CSS, and vanilla JavaScript skills. They even provide starter files and related images for use!

For this example, I followed the ChallengeSet01 - Challenge02: Card. It looks like an about section with some card styling.

To get started, I would just copy and paste the HTML code into CodePen and that's it.

Make sure you only take the code that's within the body tag (lines 11-26) since CodePen's editor already handles the DOCTYPE and head area.


MintBean's ChallengeSet01 - Challenge02: Card starter HTML file


CodePen demo with HTML code

The MintBean Challenge in CodePen


And just like that you can start coding! ๐Ÿ˜ค

Level 2: Repl.it

Best For: Front-end, Back-end, Full-Stack, Single Page, Multi-Page

Repl.it

What I like about Repl.it is that it gives you templates to get you started, from simple HTML, CSS, and JavaScript, to any number of languages, including Python, Java, and C. Additionally, there are even templates for popular frameworks such as React and Vue. This means you can have a file system in the browser and create multi-page sites.


Repl.it starter template for HTML, CSS, JavaScript

HTML, CSS, JS Template in Repl.it


Taking from the previous example, Mintbean's ChallengeSet01-Challenge06 takes all the previous challenges and combines them into a full site. For the purposes of this example, I will turn each section into its own page instead.

With Repl.it, it's much easier to get started, especially if there's a starter repo on GitHub. You can just download the files and drag and drop them into the Repl.it editor.

Downloading a code repo and uploading to Repl.it

1- Make sure you have a Repl.it created with the HTML, CSS, JS template.

Repl.it Template Starter for HTML, CSS, JavaScript

2- At the GitHub repo, click on the green Code button and select "Download ZIP" Code download on GitHub

3- Unzip the downloaded zipped file

4- In the extracted folder, navigate to the files you want to upload to Repl.it

5- Select all the files and drag them to the "Files" sidebar in Repl.it

Drag and drop starter files to Repl.it

Note: It may take some time to upload. If an "Overwrite?" dialog pops up, click on "Replace".

Overwrite starter file

6- And you're ready to start coding!

Make sure to click the big "Run" button at the top when you want to see any changes reflected

Sharing your repl.it

There are two main ways to share your Repl.it project with others.

Project URL

The easiest way to share your project is by copying the hosted URL from the preview on the right. You can then share this link with anyone.


Repl.it Project URL

The preview on the right side has a URL to preview your project, which can be shared publicly with others.


Invite Others To Edit

If you click the big Invite button in the top right corner, you can invite others by username or email to edit your project.

Repl.it Invite Button

You can even open it up to everyone by clicking on "Generate a join link" and create a public link.

Repl.it Invitation

Level 3: CodeSandbox.io

Best For: Front-end, Back-end, Full-Stack, Single Page, Multi-Page

CodeSandbox

Similar to Repl.it, CodeSandbox has templates to get you started, virtually the same as Repl.it. The best thing about it, and what I think gives it an edge over Repl.it, is being able view multiple files in a split screen.

CodeSandbox split screen

For this example, I went with one of Colby Fayock's 50 Projects for React and the Static Web. For this project, I'm making a simple fan wiki page for Animal Crossing: New Horizons Villagers, based on the Rick and Morty Wiki Web App.

To start a project, first choose a template. You can either choose from a recently used template, or choose one from all the templates.


CodeSandbox Recently Used Templates

If you've used CodeSandbox before, you'll see your recent templates listed in your Dashboard.


CodeSandbox Choose a Template

You can also choose a template by clicking on "New Sandbox".


It might be overkill, but I'll be using React for this example.

CodeSandbox React starter

1. Project Name

This is the name of your project. Feel free to rename it from the randomly generated name.

2. Files

This is where all your files are. You can create new files and folders to suit your organization style.

3. Packages/Dependencies

Search for any packages or dependencies to add them to your project. They will be immediately installed.

4. Text Editor

This is where you can edit your files. Depending on your screen size, you can also use split screen to open more than one file at a time.

5. Preview Pane

Here you can see a preview of your project.

Sharing your sandbox

Similar to Repl.it, you can share your sandbox by grabbing the URL in the preview pane.

CodeSandbox URL in preview pane

There are also ways to save it as a template for others to build off of. Or even deploy to Netlify, Vercel, or GitHub. But that's beyond the scope of this post.

Final Thoughts

It seems like Repl.it and CodeSandbox.io are virtually the same. It all comes down to what kind of environment you really like working in and what your goals are.

For quick prototyping, CodePen.io might be all you need. For larger sites with multiple pages, Repl.it will do the trick. For a full-stack web application, CodeSandbox.io has you covered.

All of this right in the browser, without needing to spend big bucks on a over-powered workstation! It's important when you're starting to build projects without getting too attached to a particular text editor. When you're ready, you can switch over to something like VS Code, Sublime Text, or Atom.

Hopefully this encourages you to get building right away!


This post is like a tiramisu. It has layers of learning to get you started coding without worrying about fancy IDEs.

Sparkly tiramisu Source: tumblr


Thanks for reading!

๐Ÿ’– Geraldine | Say hi on Twitter ๐Ÿ‘‹๐Ÿพ @geraldinedesu

ย 
Share this