Brackets Code Editor Guide

Brackets.io is a free and open source text editor created by Adobe that is optimized for web design and front-end development. It includes features like live preview, code hints, extension support, and customizable interface. The document recommends downloading and installing Brackets to take advantage of its code editor, project management tools, and productivity extensions. Laurence Svekis is identified as the course instructor who has over 20 years of JavaScript experience and has taught over 500,000 students online.

Uploaded by

khuzaim

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

313 views

Brackets Code Editor Guide

Uploaded by

khuzaim

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 13

Brackets.

io
Tools and Resources for web developers
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.

Course instructor : Laurence Svekis

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!

Set Folder create working ﬁle index.html
Select File > Open Folder Select File > New
Selects your root folder to open - Create a new file.
good for projects so that you can see Give the file a name index.html using
all the files you want to work with. File > Save As
Brackets considers this folder your Add some HTML to your file.
"project" <h1>Hello World</h1> File > Save
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
Customize View
Split workspace - provides a view of Set default space sizes and file type
2 different files. Can be controlled and see error messages. When you
within the menu. Shortcut to change save the file if there are errors
view they will show. INS or OVR option
will set behavior.
Productivity Options And Debug
Edit > Auto Close Braces Debug > Open Preferences File
Will automatically close braces “ Opens JSON preferences for the
editor. You can make updates here as
View > well if needed to the editor
Word wrap and Line numbers settings.
Viewing of code in editor
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.
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.
Extensions
Add extensions to extend on brackets. Top 5 must have extensions
Best place is the File > Extension Beautify.io - makes your code look
Manager but you can also download and nice.
install from URL Documents Toolbar - tab toolbar to
https://github.com/adobe/brackets/wik easily switch between open files.
i/Brackets-Extensions HTML5 Template - Starter template
https://registry.brackets.io/ 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.
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.
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.
Thank you for your support