# Learn Code Editors
> A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code. - Wikipedia
Front-end code can minimally be edited with a simple text editing application like Notepad or TextEdit. But, most front-end practitioners use a code editor specifically design for editing a programming language.
Code editors come in all sorts of types and size, so to speak. Selecting one is a rather subjective engagement. Choose one, learn it inside and out, then get on to learning HTML, CSS, DOM, and JavasCript.
However, I do strongly think your choice should minimally have the following features:
1. Good documentation on how to use the editor
1. Report (i.e. hinting/linting/errors) on the code quality of HTML, CSS, and JavaScript.
1. Offer syntax highlighting for HTML, CSS, and JavaScript.
1. Offer code completion for HTML, CSS, and JavaScript.
1. Be customizable by way of a plug-in architecture
1. Have available a large repository of third-party/community plug-ins that can be used to customize the editor to your liking
1. Be small, simple, and not coupled to the code (i.e. not required to edited the code)
I personally use and recommend [Sublime Text](http://www.sublimetext.com/) with the following plug-ins.
- [Package Control](https://packagecontrol.io/packages/Package%20Control)
- [AutoFileName](https://packagecontrol.io/packages/AutoFileName)
- [SublimeLinter](https://packagecontrol.io/packages/SublimeLinter)
- [SublimeLinter-json](https://packagecontrol.io/packages/SublimeLinter-json)
- [SublimeLinter-jshint](https://packagecontrol.io/packages/SublimeLinter-jshint)
- [SublimeLinter-html-tidy](https://packagecontrol.io/packages/SublimeLinter-html-tidy)
- [SideBarEnhancements](https://packagecontrol.io/packages/SideBarEnhancements)
- [Terminal](https://packagecontrol.io/packages/Terminal)
- [BracketHighlighter](https://packagecontrol.io/packages/BracketHighlighter)
- [Color Highlighter](https://packagecontrol.io/packages/Color%20Highlighter)
- [CSS3](https://packagecontrol.io/packages/CSS3)
- [HTMLAttributes](https://packagecontrol.io/packages/HTMLAttributes)
- [StringEncode](https://packagecontrol.io/packages/StringEncode)
- [HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify)
Here are some resources for learning Sublime:
- [Sublime Productivity](https://leanpub.com/sublime-productivity) [read][$]
- [Sublime Text Power User Book](https://sublimetextbook.com/) [read][$]
- [Sublime Text 3 From Scratch](http://www.pluralsight.com/courses/sublime-text-3-from-scratch) [watch][$]
- [Perfect Workflow in Sublime Text 2](https://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2) [watch][requires login, but free]
If you need a free alternative to Sublime (cost $70) you might consider [atom](https://atom.io/) or [brackets](http://brackets.io/).
##### Online code editors:
- [jsbin.com](http://jsbin.com/)
- [jsfiddle.net](http://jsfiddle.net/)
- [liveweave.com](http://liveweave.com/)
- [es6fiddle.net](http://www.es6fiddle.net/)
- [codepen.io](http://codepen.io/)
- [Plunker](http://plnkr.co/)
- Introduction
- What is a front-end developer?
- Part I: The front-end practice
- Front-end jobs titles
- Common web tech employed
- Front-end dev skills
- Front-end devs develop for...
- Front-end on a team
- Generalist myth
- Front-end interview questions
- Front-end job boards
- Front-end salaries
- How FD's are made
- Part II: Learning front-end dev
- Self directed learning
- Learn internet/web
- Learn web browsers
- Learn DNS
- Learn HTTP/networks
- Learn web hosting
- Learn general front-end dev
- Learn UI/interaction design
- Learn HTML & CSS
- Learn SEO
- Learn JavaScript
- Learn DOM, BOM & jQuery
- Learn web fonts
- Learn accessibility
- Learn web/browser API's
- Learn JSON
- Learn front-end app architecture
- Learn Interface/API design
- Learn web dev tools
- Learn command line
- Learn node.js
- Learn module loader
- Learn package managers
- Learn version control
- Learn build & task automation
- Learn site performance optimization
- Learn JS testing
- Learn headless browsers
- Learn offline dev
- Learn security
- Learn multi-thing dev (e.g. RWD)
- Directed learning
- front-end schools, courses, & bootcamps
- Front-end devs to learn from
- Newsletters, news, & podcasts
- Part III: Front-end dev tools
- General front-end dev tools
- SEO tools
- Prototyping & wireframing tools
- Diagramming tools
- HTTP/network tools
- Code editing tools
- Browser tools
- HTML tools
- CSS tools
- DOM tools
- JavaScript tools
- App (desktop, mobile, tablet etc..) tools
- Templating tools
- UI/widget tools
- JSON tools
- Testing framework tools
- Data storage tools
- Module/package loading tools
- Module/package repo. tools
- Web/cloud/static hosting tools
- Project management & code hosting
- Collaboration & communication tools
- CMS hosted/API tools
- BAAS (for front-end devs) tools
- Offline tools
- Security tools
- Tasking (aka build) tools
- Deployment tools
- Site/app monitoring tools
- JS error monitoring tools
- Performance tools