An open source project led by Adobe, Brackets is still in its early stages of development — but that hasn’t stopped me from using it as my primary front-end web development code editor. Its code auto-complete is smart, and feels seamless and natural as you’re typing:
Brackets uses progressive disclosure in the UI outstandingly well. For example, as you type a hexadecimal color value, Brackets will progressively disclose an inline preview of the color, and also a color picker in case you want to tweak the color:
Another example is when you hover over the
src
attribute value of an <img>
element, it shows you a thumbnail preview of that image: Brackets supports the idea of designing in the browser.
When you preview your work, it will open an instance of Google Chrome. As you’re coding, it will seamlessly update the preview in Chrome and highlight any changed elements with a blue border: Brackets is perfect for dual monitors. Have Brackets on one monitor, and the live preview on the other. The main thing missing in Brackets is a built-in FTP — a deal breaker for anyone looking for a full-on front-end IDE.
But, Brackets does support extensions — a powerful feature that will become a game-changer once its community broadens a bit more, as we’ve already seen in mainstream projects like jQuery and WordPress whose successes are deeply rooted in their extensibility through community-developed plugins. There’s an extension called brackets-ftp if you really needed a built-in FTP instead of a standalone app like FileZilla: What I appreciate most about Brackets is how well-thought-out its interface is. As you use it, I promise you that you’ll discover features and UI design decisions that will make you say “Oh, that’s awesome.” And it’s cross-platform: You can use it on Windows, Linux, and Mac OS.
It’s quite tough to create a minimalist code editor that’s effective, productive, and efficient. The people behind Brackets were able to do it.
Related Resources
- A Look at Some CSS Methodologies
- 13 Best Responsive CSS Grid Systems for Your Web Designs
- Popular Logos Recreated Using Only CSS
- 30 Exceptional CSS Techniques and Examples
- 10 Top-Notch CSS Editors
- Minimal and Modern Layout: PSD to XHTML/CSS Conversion
- How to Create Inset Typography with CSS3
- Semantic CSS3 Lightboxes
- Create a CSS3 Call to Action Button
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Continue Reading
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.