Explore how to write code within Brackets open source editor

1. Brackets.io
Tools and Resources for web developers

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!

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

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

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.

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.

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.

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.

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.

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.

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.

13. Thank you for your support
If you have any questions or comments please let me
know. I’m always happy to hear from you!!!
Find out more about my courses at http://discoveryvip.com/
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/
Course instructor : Laurence Svekis -
providing online training to over
500,000 students across hundreds of
courses and many platforms.