前端开发的编译器在选择上还是很多的。在学校里，老师主要讲三个前端开发软件：
1、WebStorm
帮助编写HTML、CSS、Less、Sass和Stylus代码，并且支持Node.js和主流框架，如React、Angular、 Vue.js、Meteor等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。
2、IntelliJ idea
idea是学校老师教得最多的一款软件，从学Java开始，除了eclipse和myeclipse之外，学校老师用的最广泛的Java编译器就是idea，而idea也能进行前端项目的开发，idea是我用得最熟的一个编译软件。像一个完整的前端网站，配置好jdk，tomcat，maven，数据库之后就可以在idea上进行搭建了。
3.Visual Studio Code
简称VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。
下面是我在实习中接触到的前端开发工具：
notepad++
页面很简单，乍一看像是一个记事本，它也确实可以当记事本用。有很多特色插件可以使用，支持多种编程语言的语法高亮显示，具有代码折叠功能。
2、HBuilderX
HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。
学习编程前，你需要考虑几个方面
1、我学编程的目的是什么
2、我想实现的功能是什么
3、我认为我可以学习多久
随后根据需求选择学习的语言，像幼儿的积木编程，青少年的python海龟画图，乃至较高级的java、PHP、前端……
在学习编程之前还要查询资料，所学的语言是否需要对应的环境
例如：python的2、3环境，Java的版本……
特殊的语言比如swift，这是Apple的专属编程语言，自研的
现在我们回归正题
你的需求是在电脑上编程软件
如果你是初学者，我建议学习python语言
python语言这几年逐渐被大众接受，属于主流编程语言
难度系数也不高，认真学习半年就可以正常编写电脑软件
当然python也可以借助kivy库来开发app
这需要你自己来探索研究
希望我的回复能对你有所帮助
学习前端，要从学习HTML和CSS开始着手。关于这部分的学习，网上可选择的资料就太多了，这里不一一列举，题主百度搜索栏搜索 HTML 教程，或者css 教程，就可找到相关资料。
接着是学习前端的一个难点、也是重点，就是JavaScript。
首先，初学一门语言，要秉承一个原则：“能动手的，尽量别吵吵”
另外，你需要一个能够从简到难的知识体系，一步一步跟下来。
下面是干货。
体系：上图。
说明一下这张图，题主提问如何有效学习JS，我这里理解为JS原生，所以关于框架、工作流的内容，没有具体展开，题主有兴趣可以自行搜索。
一、文档资料
红宝书(基础)：https://book.douban.com/subject/10546125/
蝴蝶书(进阶)：https://book.douban.com/subject/11874748/
阮一峰老师ES6: http://es6.ruanyifeng.com/
权威官方文档MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/
二、学习步骤
语法和基本类型
控制流
循环
表达式和操作符
日期对象
正则表达式
对象
上面这些搞定，就已经掌握了ES5的最基本的内容了，接着，我们就可以来操作页面了。毕竟这是一个看脸的社会，我们在搞页面的同时，还要注意一下页面的样式。
8.DOM操作
1>DOM树的概念
2>从DOM树取节点
3>操作这个DOM树(节点的添加、删除、修改)
4>访问节点(parentNode, children, 等等)
5>属性操作(id, className)
9. 事件处理
1>鼠标事件(mouseove)
2>键盘事件(keyup)
3>浏览器事件(load)
好，到这里，基本上静态页面，你就可以随意玩耍了。这里我们最好降上面思维导图提到的例子，都撸一遍。一是加深上面知识点印象，二是锻炼一下编程的逻辑思维能力。具体实现，网上有一堆堆的。（这里让题主自己搜索，是因为编码的一项重要能力，就是搜索）一定要谨记，多敲代码。
10. 面向对象：原型式继承、原型链
11. ES6：
ES6跟ES5还是有较大的区别，所以建议你能系统的过一遍，将上面的练习，改为使用ES6再来一遍
三、调试
1、JS编程的调试非常简单，打开浏览器控制台(我个人比较钟爱Chrome)。如图：
1>console标签：这个标签，可以打印我们开发时，JS引擎为我们抛出的异常。我们可以根据这个异常的信息，来分析错误原因。另外，我们也可以在代码中使用console.log() 输出程序运行时的环境变量信息。
2>右红框1：错误提示。说明当前页有一个error发生，点击他，可以跳转到console来查看错误具体信息
3>右红框2：警告信息。提示了我们程序潜在的危险。
4>source，我们进行单步调试的地方。具体见下图
（四）、工作流(跟JS原生关系不大，不详细展开了)
webpack
gulp
上面的内容结束后，就可以进入前端框架的海洋中畅游了。
