18
$\begingroup$

I have been assisting an IT teacher who has recently started teaching computer science to year 7-9s (11-13 year-olds). This year they will just be covering basic client-side web development: HTML, CSS and a bit of JavaScript.

I was shocked to see him, and the kids, writing their HTML in Notepad- it makes code a lot harder to read, and simple typos, such as a missing bracket, almost impossible to spot. Which isn't ideal, especially for beginners.

For my own coding, I always use InteliJ or WebStorm, however, I would worry that this might go in the opposite direction, and actually over-complicate things.

Anyone got any suggestions of a simple free IDE or text editor for web development for school kids? (It would need to be possible to install on school network).

I'm thinking maybe something simple like Notepad++, Sublime, or possibly Atom. But would love to here your feedback or suggestions on what might be good for school kids.

Thanks very much, Alicia Sykes 🚀

Improve this question
$\endgroup$
3
  • 2
    $\begingroup$ which programming language are you focusing on ? like python, web development $\endgroup$
    – warl0ck
    Commented May 23, 2017 at 16:02
  • 1
    $\begingroup$ Sorry, should have said, front-end web development, HTML, CSS and maybe a bit of JS $\endgroup$
    – Alicia
    Commented May 23, 2017 at 16:03
  • $\begingroup$ I have been looking at brackets editor. It is very interactive (it opens chrome, and displays results as you type), and simple. I will be using it with pupils in a few months. I will give an update then. $\endgroup$
    – ctrl-alt-delor
    Commented Nov 27, 2017 at 19:04

10 Answers 10

Reset to default
28
$\begingroup$

I find that the best introductory IDE is a lack thereof because, for the most part, the features that an IDE offers (code completion, organization, etc.) are more hurt than help and tend to promote completely unrelated questions, for example, "What is this dropdown under the word I just typed" and other questions about IDE function rather than language functions. Generally IDEs are a distraction to beginners.

I would use a text editor with syntax highlighting such as sublime text, but nothing with too much many extra features. You certainly don't need a full fledged IDE.

Improve this answer
$\endgroup$
9
  • 5
    $\begingroup$ +1: A simpler "IDE", such as Notepad++, gives you enough help while forcing you to learn $\endgroup$
    – AlG
    Commented May 23, 2017 at 16:16
  • 8
    $\begingroup$ This is an unfair characterization of IDEs, and - in my experience - leads to whole classrooms full of children who detest programming because they've been blocked from using any of the tools that modern programmers take for granted. If you want to REALLY make them work, use pen-and-paper. If you're going to let them use a computer, give them an IDE. Anything in between is needless punishment. $\endgroup$
    – user31
    Commented May 23, 2017 at 16:20
  • 1
    $\begingroup$ @Adam I'm not suggesting that IDEs be blocked entirely, but that as a teacher, you use a simpler code editor. Students can use what they prefer, because everyone has different editor preferences, but set the example of keeping it simple. $\endgroup$
    – thesecretmaster ♦
    Commented May 25, 2017 at 2:09
  • 2
    $\begingroup$ I disagree. One can write, for example, ruby professionally (e.g. the creator of Ruby on Rails) and still use a simple editor with syntax hilighting (TextMate). It is about preferance because the same code can be written with nano as can be written with RubyMine. A carpenter can't cut the wood the same with their hands as they can we a saw. It could be like the difference between a hand saw and a motorized saw. Some people like nano, some people like RubyMine, some people like somthing else. It's all a matter of preference. $\endgroup$
    – thesecretmaster ♦
    Commented May 25, 2017 at 23:23
  • 2
    $\begingroup$ Additionally, as a carpenter myself I can say that on some projects I'd use my power tools and on others I'd use my hand tools. It depends on various characteristics of the task. Same thing with programming. When I work with ruby, I use a text editor. When I write code for android, I use Android Studio. It depends on the demands of the job. $\endgroup$
    – thesecretmaster ♦
    Commented May 25, 2017 at 23:50
11
$\begingroup$

The latest generation of text editors, e.g. Sublime, Atom, Visual Studio Code, are great, and seem to offer all that one might want from an IDE. I've a soft spot for Atom, but don't rule the others out.

Another option might be to try Jupyter Notebooks in the web browser. Not an IDE in the traditional sense, but a good introduction to playing with code and very useful for scientific computing in their own right.

Improve this answer
$\endgroup$
2
  • $\begingroup$ Soon to be released is JupyterLab, which is a full IDE in the browser. $\endgroup$
    – Doug Blank
    Commented Jun 6, 2017 at 20:49
  • $\begingroup$ Atom is now end-of-life. $\endgroup$
    – ggorlen
    Commented Jan 10, 2023 at 16:13
10
$\begingroup$

In the context of front-end development, I suggest looking into CodePen.

For each "pen" you can get an instant visual as to how your HTML/CSS/JS affect your page. Additionally, you can immediately begin working in a pen without having to create an account, which may be a factor given the age of your students.

At the very least, it might be a good teaching tool and resource for sharing examples since you can make real-time edits and let students see what happens as a result.

Improve this answer
$\endgroup$
1
  • $\begingroup$ In this same vein, jsFiddle is good for trying out ideas and seeing how things look quickly. It does not have autocomplete. $\endgroup$
    – Kay Bee
    Commented Jul 27, 2017 at 16:20
7
$\begingroup$

I don't think the tool (or learning the tool) should get in the way of learning the initial core of the subject.

If students are already comfortable with NotePad (or TextEdit, et.al.), why add to their cognitive load (7+-2) and the number of steps needed in getting their first few lines of Javascript running?

The IDE can come later, when the code no longer fits a small text window.

Improve this answer
$\endgroup$
1
  • 5
    $\begingroup$ Simple is good, but NotePad is far too extreme. Its never too early to stop using Notepad. $\endgroup$
    – Sean Houlihane
    Commented May 23, 2017 at 18:36
5
$\begingroup$

I go for simple. This year we used either an online editor or the free version of JCreator specifically because they don't have autocomplete.

What I noticed last year using NetBeans is that students become dependent on autocomplete. When writing code on paper - I teach mostly AP CompSci so paper is necessary - kids would struggle to remember method names and what parameters go where. They were so used to just typing a dot and having everything pop up.

This year switching to a simpler editor has made a huge difference. Free response questions were almost universally stronger.

I've thought about going for Notepad++ next year, although there doesn't seem an easy way to link it to the JDK.

Once they make it through the first year I don't care what IDE they use. I demo in NetBeans because it's what I'm used to. But I've got students using IntelliJ, Eclipse, NetBeans, or pretty much whatever they want to use.

Improve this answer
$\endgroup$
1
4
$\begingroup$

You are correct in considering Sublime text, or atom text editor as they are light weight and more importantly will be hassle free for school kids.

But one should also keep in mind considering school kids IDEs are too much to learn or get to know how to work on it therefore at these initial stages text-editors like said above and VScode which at least for web-development gives very good support and should be enough for their useage.

But I would highly recommend have a look at Visual studio code It's the best light weight text editor/ IDE developed by Microsoft.

Some of the features in VS code:

  1. It has IntelliSense which will help kids to autocomplete code thus for them writing code for them wont be like mugging up syntax and will also highlight error if there are any.

  2. It's free so you wont need to buy any licenses

  3. It's lightweight text editor like IDE wont hog up CPU resources unlike Atom

  4. Comes with lots of plugins with which you can for example : autotag which Automatically add HTML/XML close tag.

  5. It comes with integrated terminal from which you can directly check your created website and there are plenty of plugins as well which will auto-refresh that as well as you make code changes in your file.

  6. Though I suppose school kids wont need it but its good to give them some introduction to git how to commit/push and make changes to repos online which will lay strong foundation in them for open source as well.

I am not saying others are bad or anything else it's just Sublime text is paid software though you can use unregistered version but it annoy you will its pop-up to buy license.

Atom is my second choice after VScode.

Improve this answer
$\endgroup$
2
$\begingroup$

You mention WebStorm. JetBrains has a selection of other IDEs, some specifically targetted at students (e.g. PyCharm Edu - https://www.jetbrains.com/pycharm-edu/ - (The classroom version of PyCharm) defaults to a very simplistic mode, with most/all the advanced features hidden until the teacher enables them).

Off the top of my head, you can preconfigure WebStorm similarly - if you're not sure, I'd contact JetBrains directly. In the past, they've been highly responsive to our requests for help with using their products in the classroom.

Improve this answer
$\endgroup$
2
$\begingroup$

The answer can be very broad because of personal taste :) But you may want to check MS Visual Studio IDE which you can "minimize" for the purpose of education. And then extend if step by step.

Improve this answer
$\endgroup$
3
  • $\begingroup$ Of all the options available - free, minimal, cross-platform, open-source - suggesting Microsoft's single-platform, monolithic, closed-source, pay-for product has to be the worst option IMHO. $\endgroup$
    – user31
    Commented May 23, 2017 at 16:21
  • 2
    $\begingroup$ @Adam, maybe you can check here: visualstudio.com/free-developer-offers $\endgroup$
    – Romeo Ninov
    Commented May 23, 2017 at 16:36
  • $\begingroup$ None of those are VS. They are all cut-down versions of VS that don't work properly, and cause problems when you try to use them on real projects - forcing you to go purchase real VS. VS is great, but I stand by my statement that there are many many better options for educators. $\endgroup$
    – user31
    Commented May 23, 2017 at 17:20
1
$\begingroup$

The IT knowledge highly varies, even among small kids. I'd say give them something simple like Notepad++ or EditPlus or Atom for reasons mentioned in @thesecretmaster's answer, but those 2-3 geeks who are already experimenting with programming should be allowed to use a more complex, professional IDE. You just need to install and agree with the class before getting started on who uses what.

Also, consider allowing them (later, after learning the basics!) to use WYSIWYG editors. I'm surprised nobody mentioned that here. Most of those kids will not end up as programmers, they will never in their life will write HTML code ever again. But they still might need to be able to edit a WordPress page or manage their company blog later in their life.

Improve this answer
$\endgroup$
1
$\begingroup$

I highly recommend Codelobster IDE

It includes great HTML/CSS/JS autocomlete and context help

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.