What interface are people using to practice their coding

Hi there,
Currently, I’m trying to work with codePen and scrimba for my stuff.
Was just wondering what other programs others are using as well.
I think I’m looking to try something that will allow me to write my code and allow me to see/test my stuff on another tab, so I can use the devtools to change the screen sizes to see how the layout looks.
Currently, when I use codepen or scrimba and want to see diff screen sizes, it includes my development area as well. Or am I just looking at things in the wrong way.
Thanks,

I’m using Visual Studio Code when writing locally on my PC, it has a Live Server extension so that you can run the project in your browser and it refreshes the site whenever you save.

If I just want to “play around” with JavaScript, I use nodejs locally. This way I can use basically any editor, run the code-as-is and get feedback instantly from the terminal where I run my code.

If you want to play around with HTML+CSS+JS then something like live-server + a local development setup with the editor of your choice gives you the most flexibility and power.

Any online editors can only go so far in terms of capabilities, and nothing beats a full on dev environment.


PS. The only online tool I know that allows you to test from multiple tabs is stackblitz which will actually allow you to run multiple tabs and devices with live reload across all of them (!) I did mention nothing beats a local setup, but depending on the features you want (like live-reload across devices) stackblitz actually stands alone, but most of the time you wont need this feature, but it is pretty cool haha.

Check out repl.it
if you create a repl for HTML, CSS and JavaScript, you can also open the result on a different tab
(It would also let you have live page on a screen, and code on a different screen)

Thanks for the response guys. I will check them out as well.
I’m not too deep into anything at this point, but just trying to use something that allow me to see it’s layout on diff size screens (like devTools) lets you see.
I’m still getting used to this.
Oh, FYI, forgot to mention I’m trying to play around with my Responsive Design and Media Queries. Thanks,

There is nothing stopping you from testing different screen sizes on Codepen. On Codepen click the “Change View” button and select “Full Page View”. Or select “Debug mode” to also get rid of the top toolbar.

For most stuff, I prefer working locally but I think codesandbox is also a pretty nice online editor.

When I’m fiddling with stuff I tend to use repl.it, stackblitz, or jsbin.

@ReallyWant2Learn I just develop locally using Vim and tmux for my basic development environment and python3 's http.server for my local dev server. That’s it.
Nodjs required occasionally both in interactive mode to try things out and of course needed to compile some of the React stuff later in the course. For the React stuff I used parcel as its lighter weight than create-react-app and IMO easier to configure. I think that is everything I’ve used so far to get through the front end freecodecamp projects.
I fully appreciate vim and tmux aren’t to everyones taste but by getting comfortable with the terminal (command line) and viewing that as the interface to your environment rather than the web browser allow you to use whatever tools you want. IMHO getting comfortable with the basics of the command line on your system should be 101.

Wow, thanks for all the input guys. That’s a bunch to go on for now.
Let me play with something…