18

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

Alicia
  • 283
  • 2
  • 8
  • 2
    which programming language are you focusing on ? like python, web development – warl0ck May 23 '17 at 16:02
  • 1
    Sorry, should have said, front-end web development, HTML, CSS and maybe a bit of JS – Alicia May 23 '17 at 16:03
  • I have been looking at [brackets editor](http://brackets.io/). 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. – ctrl-alt-delor Nov 27 '17 at 19:04

10 Answers10

28

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.

Aurora0001
  • 3,506
  • 14
  • 43
thesecretmaster
  • 4,785
  • 3
  • 21
  • 48
  • 5
    +1: A simpler "IDE", such as Notepad++, gives you enough help while forcing you to learn – AlG May 23 '17 at 16:16
  • 8
    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. –  May 23 '17 at 16:20
  • 1
    @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. – thesecretmaster May 25 '17 at 02:09
  • @thesecretmaster it's not about preference, it's about teaching people to use the correct tools for the job. Teaching people to "not use an IDE" is liking teaching carpenters "not to use a saw; snap the wood roughly in half instead". IDE's are not some new-fangled device that hampers programming, they are core to programming. I accept some people want purism - but purism here would be manually stimulating transistors, or writing all code on paper and never letting a compiler error-check it. –  May 25 '17 at 23:11
  • 2
    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. – thesecretmaster May 25 '17 at 23:23
  • 2
    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. – thesecretmaster May 25 '17 at 23:50
  • 1
    @Adam What _are_ the "correct tools" for the job? I had a programming position where the required tool _was_ Notepad++, installed and configured on the computer assigned to me. The same rules applied to all 45 programmers (Perl, Python, Ruby, HTML and JavaScript), _and_ the DBA as well. The only person using anything else was the graphic artist. The "correct tool" is a well trained mind using the best tools available that are appropriate for the task. Maybe and IDE, maybe not. Don't short-change the students by denying them exposure to the full range of options. – Gypsy Spellweaver May 30 '17 at 12:33
  • @GypsySpellweaver There is an exceptional example to prove any viewpoint. I expect common sense to prevail: jobs where you mustn't use an IDE are the 0.01%. As a teacher, I care about the 99%. I also care about teaching people the core principles of programming: planning a program, structuring their code, iterating on a solution, etc. Teaching people to be efficient with pen and paper, or vim, is not my job. (by contrast: at university level, I encourage students to learn vim et al - we're teaching wider and deeper) –  Jun 07 '17 at 15:49
  • 1
    @Thesecretmaster : The [IDE divide](https://blog.osteele.com/2004/11/ides) is worth reading for this debate [Disclaimer: Old vi/emacser here! ] – Rusi Aug 29 '20 at 03:42
11

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.

Miles
  • 1,256
  • 8
  • 10
10

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.

Peter
  • 9,082
  • 2
  • 22
  • 61
  • In this same vein, jsFiddle is good for trying out ideas and seeing how things look quickly. It does not have autocomplete. – Kay Bee Jul 27 '17 at 16:20
7

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.

hotpaw2
  • 1,895
  • 8
  • 14
5

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.

Ryan Nutt
  • 3,029
  • 8
  • 23
  • 1
    To link Notepad++ to the JDK, if I understand things, check out [Using Notepad++ to compile Java code](https://stackoverflow.com/q/4314027/7412956) on Stack Overflow. It references one post, but another good-lucking one is [Compile Java Code Directly in Notepad++](https://www.willnwish.com/complie-java-code-directly-notepad/). – Gypsy Spellweaver Jun 15 '17 at 06:33
4

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.

warl0ck
  • 141
  • 4
2

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.

ItamarG3
  • 6,287
  • 2
  • 24
  • 58
Romeo Ninov
  • 189
  • 4
  • 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. –  May 23 '17 at 16:21
  • 2
    @Adam, maybe you can check here: https://www.visualstudio.com/free-developer-offers/ – Romeo Ninov May 23 '17 at 16:36
  • 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. –  May 23 '17 at 17:20
2

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.

1

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.

Glorfindel
  • 169
  • 1
  • 1
  • 10
vacip
  • 1,398
  • 9
  • 18
1

I highly recommend Codelobster IDE

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

Stas Ustimenko
  • 11
  • 1