Learn how to use Adobe Brackets Text Editor

1. Brackets.io
Tools and Resources for web developers
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

2. INSTRUCTOR:
LAURENCE SVEKIS
Course instructor : Laurence Svekis
- Over 300 courses in technology and
web applications.
- 20 years of JavaScript web
programming experience
- 500,000+ students across multiple
platforms
- Digital instructor since 2002
READY TO HELP YOU LEARN and
ANSWER ANY questions you may
have.

3. Code Editor Brackets
A modern, open source text editor that
understands web design.
http://brackets.io/
Adobe How to Wiki
https://github.com/adobe/brackets
Download and install brackets!
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

4. Set Folder create working file index.html
Select File > Open Folder
Selects your root folder to open -
good for projects so that you can see
all the files you want to work with.
Brackets considers this folder your
"project"
Select File > New
Create a new file.
Give the file a name index.html using
File > Save As
Add some HTML to your file.
<h1>Hello World</h1> File > Save
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

5. SHORTCUTS
Once you are familiar with Brackets
you can use shortcuts to speed up
your development time.
https://github.com/adobe/brackets/wik
i/Brackets-Shortcuts
Ctrl-+ Increase Font Size
Ctrl-- Decrease Font Size
Ctrl-C edit.copy Copy
Ctrl-A edit.selectAll Select All
Ctrl-H edit.replace Replace
Ctrl-Shift-H view/hide Sidebar
Ctrl-N file.new New File
Ctrl-S file.save Save
Ctrl-W file.close Close
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

6. Customize View
Split workspace - provides a view of
2 different files. Can be controlled
within the menu. Shortcut to change
view
Set default space sizes and file type
and see error messages. When you
save the file if there are errors
they will show. INS or OVR option
will set behavior.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

7. Productivity Options And Debug
Edit > Auto Close Braces
Will automatically close braces “
View >
Word wrap and Line numbers
Viewing of code in editor
Debug > Open Preferences File
Opens JSON preferences for the
editor. You can make updates here as
well if needed to the editor
settings.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

8. View options
View options
Lint Files on Save : Brackets runs
ESLint on JavaScript files when you
initially open them and whenever you
save changes
Quick View on Hover : CSS or HTML
files hover over any color value or
gradient Brackets will display a
preview works with images as well.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

9. Themes
Customs loaded with default themes.
You can add more themes as desired.
https://github.com/Brackets-themes/
Add new themes using extension
manager and then select the themes
tab.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

10. Extensions
Add extensions to extend on brackets.
Best place is the File > Extension
Manager but you can also download and
install from URL
https://github.com/adobe/brackets/wik
i/Brackets-Extensions
https://registry.brackets.io/
Top 5 must have extensions
Beautify.io - makes your code look
nice.
Documents Toolbar - tab toolbar to
easily switch between open files.
HTML5 Template - Starter template
Lorem Pixel - add placeholder images
CSSLint - CSS lint support
Once active you need to reopen
brackets and you will see the new
extensions in the menu.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

11. Live Preview
1. Select File > Live Preview.
2. Lightning bolt icon (top right of
the window)
3. Ctrl+Alt+P (Windows/Linux) or
Command+Alt+P (Mac)
https://github.com/adobe/brackets/wik
i/Live-Preview-Overview
Make changes to CSS and HTML and
you'll instantly see those changes on
screen. Also see where your CSS
selector is being applied in the
browser by simply putting your cursor
on it.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

12. Inline Editors
Instead of jumping between file tabs,
Brackets lets you open a window into
the code you care about most. Want to
work on the CSS that applies to a
specific ID? Put your mouse cursor on
that ID, push Command / Ctrl+E and
Brackets will show you all the CSS
selectors with that ID in an inline
window so you can work on your code
side-by-side without any popups.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/

13. Congratulations on completing the course!
Thank you for your support
Check out more about JavaScript at MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript
Find out more about my courses at http://discoveryvip.com/
Course instructor : Laurence Svekis -
providing online training to over
500,000 students across hundreds of
courses and many platforms.
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/