Code Playground (IDE) Help!


Hi, I’m a new inexpert user so… sorry if my questions are maybe banal (and sorry for my english too) :sweat_smile:.
I’m looking for code playground packs for all languages, something that allow me to see what I’m doing while I’m programming.
Can someone explain me if you know some IDE packs for Atom and how to use them?

Salve, sono un nuovo utente alquanto inesperto, scusate se le mie domande risulteranno banali :sweat_smile:.
Sto cercando un code playground (IDE) da installare in Atom per ogni pacchetto, qualcosa che mi permetta di vedere ciò che sto componendo durante la programmazione.
Qualcuno potrebbe gentilmente aiutarmi e spiegarmi come usare gli eventuali pacchetti suggeriti in questione?
Grazie a tutti in anticipo!


Different languages have different tool needs, so if you specify the languages you’re interested in, we can recommend different sets of packages for working with those languages.


A lot of languages like C, C#, C++, Java, SQL, PHP, Ruby and Phyton, if it’s possible, but mostly something for HTML, CSS and JavaScrypt.


While the people on here are very willing to help, if you are trying to avoid doing any searching of the package directory, you may find a lack of interest in supporting you in that. We tend to expect at least a moderate effort from the person doing the asking. If you make specific requests, you will get specific answers. If you make non-specific requests, then you will receive non-specific answers, like that you should read this page and search for packages with names that start with autocomplete- and ide-. For previewing HTML, browser-plus and/or atom-live-server are quite useful.


Okay, I’ll visit the page and search better, sorry for the iussue and thanks for all


Just tell us more about what you intend to do with Atom. If you have a goal in mind, there are probably multiple ways of getting there. If you can describe your workflow and what you want to accomplish, then we can give you packages to suit your needs.


Yes I’ve a goal in my mind, (for my first project) I’d like to create a web page to improve my knowledge using HTML and CSS. So I need something that allow me to see what I’m creating by programming, a code playground. Thanks!


The package I use to preview HTML is browser-plus. I never use it for anything else, but it can act as a full browser (Atom basically is one) so you’re not limited to just viewing your page, but you could navigate sites like CodePen and CSS-Tricks without leaving Atom. If you’re learning HTML, you should bookmark both of those sites. They are goldmines of information and will teach you so much.


Thanks but what is a bookmark and where can I find one?


Hello @Hackeronte,

Mozilla’s Firefox is my web browser of choice. I regularly create bookmarks to keep a list of web sites that I hope to visit at a later stage.

Which web browser do you prefer?



I tried now browser-plus, it’s perfect but I could not relate the HTML file to the CSS so browser-plus open only the HTML file without the CSS file configurations applied on it, like { background-color: green;} (for example). How can I do to fix it?


Thanks, I use Chrome more


Please post a screenshot with the contents of your HTML file and the tree view showing the CSS file.

Chrome also has bookmarks. In English, the word “bookmark” is commonly used to refer to any means of saving links, because that’s the name of the feature in all of the browsers.


I think that is a problem with something that I’ve done creating these files but I don’t know how to fix it.
As you can see there isn’t any blue background in


There are three separate topics to discuss here. First, a point about sharing information. Taking a photograph of your picture is less accurate (the colors get distorted) and less informative (some of the text is unreadable) than if you were to post a screenshot taken using an application on your computer. Windows can of course do this by default, but I prefer the open-source program ShareX, which provides many accompanying features and allows me to share part or all of my screen in still or animated form with just a couple of key presses. It automatically saves my screenshot to a web site (Puush) and copies the URL to the clipboard so that I can share a link mere seconds after I take the image. I highly recommend it.

Second, you have not made any attempt to link your HTML page to your CSS. Any HTML tutorial you’re following should include a line that looks something like this:

<link rel="stylesheet" type="text/css" href="mystyle.css">

That’s the line that tells the browser where to look for the CSS file. If you don’t include that line, the browser has no reason to look anywhere.

Third, you should use file extensions for the sanity of everyone, and because most programs aren’t quite as forgiving as browsers. Any HTML file you write should have .html at the end, and any CSS file you write should have .css at the end.

I want to jump back to something you said previously, because I’ve learned a lot over the past couple of comments.

You are clearly a native Italian speaker by your first post. You are also at the very beginning of your computer science education, and you appear to be teaching yourself. If you set your sights on this many languages at once (especially the first six names in your list), you will get frustrated and fail. If you believe that you truly love software engineering and want to dive into C or C++, I recommend pursuing a formal course of study at a university. You have to do a lot of work with those languages before you can start producing anything useful, so they’re not good for hobbyists who don’t have another language to get them going. Python, JavaScript, and Ruby (in that order) are quite accessible to self-teachers and quite useful to people who only know a little. In any case, you should consider finding Italian speaking forums, social groups, and hackathons where you can make connections and ask questions. On this forum, we can tell you what code to write, but it becomes harder to teach and learn when having to navigate both a computer language and a human language.

By all means, keep asking questions here, but you should work on developing more modest expectations and mastering the fundamentals of using your computer before you seek to develop software for other people’s computers.


Thanks for all, as soon as I finish my high school I’ll go to university. (Sorry for the screenshot I’ve done it with the phone)