Learn Adobe Brackets Free open source code editor from Udemy

Learn more about using Brackets as your code editor.

A modern, open source text editor that understands web design. Learn how to use Brackets and see all the functionality in action. Learn about top extensions and addons. Review of best setup techniques.

Learn how to use Brackets and how you can easily switch to using Brackets as your code editor.

I've been a web developer since 2000 and have used a number of code editors. I was originally using Dreamweaver in a number of my courses. I found that there were many students who wanted to have the same editor and setup that I have as they follow along with course content. I switched to several open source editors until I found Brackets. I've been using Brackets on a regular basis and found that I don't open Dreamweaver as much anymore. The best part of Brackets its free, so anyone who wants to use the same editor as I do in my courses can do so without barrier.

I decided to create this course to illustrate how to get brackets, how to set it up and some of the advanced features available in Brackets. In addition I wanted to list out top extensions to really power up your Brackets application.

I also cover my XAMPP server setup which allows me to use localhost as my webserver. XAMPP is really straight forward on getting going so most of the course is focused on using Brackets.

What's inside

Learning objectives

Use brackets code editor
Add extensions, edit code more efficiently

Display live preview of code while working on it
Learn about features available in brackets

Use brackets code editor
Add extensions, edit code more efficiently
Display live preview of code while working on it
Learn about features available in brackets

Syllabus

Learn about using Brackets

Introduction to Brackets

Brackets intro

Brackets install update

Course resources

Brackets XAMPP setup and run

Brackets live preview

Brackets open source resoures

Brackets get change themes

Brackets top extensions

Brackets extension manager

Brackets Edit options

Brackets Quick Edit

Brackets view options

Brackets navigate

Brackets summary

Brackets quick menu

Extracting styling images from PSD files

Extract Resources

Brackets auto image downloads PSD file layer info

Use your Adobe Cloud Account to get PSD files for extraction

Brackets shortcuts Windows and Mac

Top resources and links for Brackets

Resources

Bonus Lecture

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Learn Adobe Brackets Free open source code editor with these activities:

Review HTML, CSS, and JavaScript Fundamentals

Show steps

Reinforce your understanding of core web technologies to better utilize Brackets' features for web development.

Browse courses on HTML

Show steps

Review basic HTML syntax and structure.
Practice CSS styling and selectors.
Work through basic JavaScript tutorials.

Review 'HTML and CSS: Design and Build Websites' by Jon Duckett

Show steps

Solidify your understanding of HTML and CSS, which are essential for effective web development using Brackets.

View Melania on Amazon

Show steps

Read the chapters on HTML structure and semantics.
Study the sections on CSS styling and layout.
Experiment with the examples provided in the book.

Practice Brackets Keyboard Shortcuts

Show steps

Improve your coding speed and efficiency by mastering Brackets' keyboard shortcuts.

Show steps

Review the list of Brackets shortcuts.
Practice using shortcuts for common tasks like saving, opening files, and commenting code.
Create a cheat sheet of your most used shortcuts.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Follow Tutorials on Brackets Extensions

Show steps

Expand your Brackets capabilities by learning how to install and use popular extensions.

Show steps

Research popular Brackets extensions for web development.
Find tutorials on installing and using specific extensions.
Follow the tutorials to set up and configure the extensions.

Create a Simple Website Using Brackets

Show steps

Apply your Brackets knowledge by building a small website from scratch.

Show steps

Plan the structure and content of your website.
Create the HTML, CSS, and JavaScript files using Brackets.
Use Brackets' live preview feature to test your website.
Deploy your website to a web server.

Write a Blog Post on Your Favorite Brackets Feature

Show steps

Deepen your understanding of Brackets by explaining one of its features to others.

Show steps

Choose a Brackets feature that you find particularly useful.
Research the feature and its benefits.
Write a blog post explaining how to use the feature.
Publish your blog post online.

Review 'JavaScript and JQuery: Interactive Front-End Web Development' by Jon Duckett

Show steps

Expand your knowledge of JavaScript and JQuery, which are essential for creating interactive websites using Brackets.

View Front-End Back-End Development with HTML, CSS,... on Amazon

Show steps

Read the chapters on JavaScript syntax and concepts.
Study the sections on JQuery and its uses.
Experiment with the examples provided in the book.

Career center

Learners who complete Learn Adobe Brackets Free open source code editor will develop knowledge and skills that may be useful to these careers:

Frontend Developer

A Frontend Developer builds the user interface and user experience of websites and web applications. This often involves writing code in HTML, CSS, and JavaScript. This course helps with the setup, customization, and efficient use of Brackets, a code editor particularly well-suited for web design. Learning how to get Brackets, how to set it up, and familiarizing oneself with the advanced features available in Brackets helps a Frontend Developer create a more streamlined workflow. Also, understanding extensions helps significantly enhance the functionality of Brackets. This course directly empowers a Frontend Developer to improve their coding environment and productivity.

See salaries and explore the career path for Frontend Developer

Web Designer

A Web Designer plans and creates the visual layout and user experience of websites. This course gives a good understanding of Brackets, a modern, open-source text editor tailored for web design. The course helps Web Designers get acquainted with Brackets, set it up effectively, and explore its advanced features. It also covers essential extensions that expand Brackets' capabilities. The course teaches about live preview, and extracting styling images from PSD files. As a Web Designer, one can use this course to fully leverage Brackets for efficient website creation and design.

See salaries and explore the career path for Web Designer

UI Developer

A UI Developer specializes in building user interfaces for web applications. This often requires a strong understanding of HTML, CSS, and JavaScript, along with proficiency in code editors. This course helps a UI Developer become proficient in Brackets, a modern, open-source editor designed for web development. Learning to set up Brackets correctly, understanding its features, and utilizing top extensions can help streamline a UI Developer's workflow. This is especially true, as the course highlights how to extract styling images from PSD files.

See salaries and explore the career path for UI Developer

Junior Web Developer

A Junior Web Developer assists in the development and maintenance of websites and web applications. This course helps a Junior Web Developer get familiar with Brackets, a popular code editor. This course covers the basics of Brackets, how to install and update it, and how to use its features. It can also help one understand how to add extensions to Brackets to enhance its functionality. Given that Brackets is free, this course provides a practical and accessible entry point for aspiring web developers.

See salaries and explore the career path for Junior Web Developer

WordPress Developer

A WordPress Developer specializes in building, customizing, and maintaining websites using the WordPress platform. While WordPress provides a user-friendly interface, understanding code and being able to edit theme files is essential for advanced customization. This course helps a WordPress Developer understand Brackets, a code editor, and XAMPP, along with extensions. Learning how to set up Brackets and use features may allow a WordPress Developer to customize website designs and implement advanced functionality.

See salaries and explore the career path for WordPress Developer

Webmaster

A Webmaster is responsible for maintaining and updating websites, ensuring their functionality and performance. This course may be helpful, as it covers Brackets, a code editor used in web development. The course teaches the installation, setup, and features of Brackets. It may be useful to a Webmaster to use Brackets to edit code, manage website files, and implement website updates. Learning about Brackets extensions may also allow a Webmaster to add functionality. Understanding Brackets can contribute to improved website management.

See salaries and explore the career path for Webmaster

Web Application Developer

A Web Application Developer designs, codes, and tests web applications. This course may be useful, as it covers Brackets, a code editor, and XAMPP. The course goes over how to set up Brackets, along with available features and extensions. It may be helpful to a Web Application Developer to install and update Brackets, get themes, and understand the edit and view options.

See salaries and explore the career path for Web Application Developer

Software Developer

A Software Developer designs, develops, and tests software applications. While this role encompasses a broader range than just web development, knowing how to use different coding tools is useful for a Software Developer. This course may be useful, as it focuses on Brackets, a code editor. The course details how to get Brackets, configure it, and take advantage of its features. It may be helpful to a Software Developer to explore and implement various extensions and customize the editor to optimize productivity. Even if web development is not the main focus, understanding different coding environments broadens a developer's skill set.

See salaries and explore the career path for Software Developer

Email Marketing Specialist

An Email Marketing Specialist designs and executes email campaigns to promote products, services, or content. While not primarily a coding role, understanding HTML is essential for creating visually appealing and effective email templates. This course helps the Email Marketing Specialist use Brackets, which is a code editor to develop and customize email templates. Learning how to set up Brackets and use its features helps customize messages for different target audiences.

See salaries and explore the career path for Email Marketing Specialist

eCommerce Manager

An eCommerce Manager oversees the online sales and marketing activities of a business. While not a coding role, understanding the basics of web development and website structure can be beneficial for managing an online store. This course is useful to an eCommerce Manager to learn about Brackets, a code editor for web development. Learning how to use Brackets may allow a eCommerce Manager to make basic website edits, customize product pages, and optimize the website for better conversion rates.

See salaries and explore the career path for eCommerce Manager

Digital Marketing Specialist

A Digital Marketing Specialist creates and implements digital marketing strategies to promote products or services online. While coding is not a primary skill, familiarity with HTML and website structure can be helpful for tasks such as email marketing and website analytics. This course may be useful, as it introduces Brackets, a code editor used for web development. The course may help a Digital Marketing Specialist understand website code and implement tracking codes. Also, knowing how to update website content and use Brackets extensions may allow a Digital Marketing Specialist to optimize websites for marketing campaigns.

See salaries and explore the career path for Digital Marketing Specialist

Quality Assurance Tester

A Quality Assurance Tester (QA Tester) is responsible for identifying and reporting defects in software applications. While not a primary coding role, understanding the basics of HTML and web development tools may be helpful for testing web applications. This course may be useful as it introduces Brackets, a code editor. Learning to get Brackets and how to set it up, may enable QA Testers to examine code, and reproduce and report web-related defects.

See salaries and explore the career path for Quality Assurance Tester

Content Creator

A Content Creator develops written, visual, or audio content for websites, blogs, and social media. While not directly related to coding, a basic understanding of HTML and web design principles can be beneficial. This course may be useful, as it introduces Brackets, a code editor used for web development. The course teaches how to use Brackets to edit and format content, and how to implement basic website changes. Understanding how to get Brackets, and add extensions, may allow a Content Creator to have more control over content presentation and website appearance.

See salaries and explore the career path for Content Creator

Technical Writer

A Technical Writer creates documentation and guides for software, hardware, and other technical products. This course may be helpful, as it introduces Brackets, a coding tool used in web development. The course teaches aspects of Brackets such as installation, setup, and key features. Understanding how to get Brackets may allow a Technical Writer to create more accurate and informative documentation for developers and end-users.

See salaries and explore the career path for Technical Writer

Technical Support Specialist

A Technical Support Specialist helps customers troubleshoot technical issues with software, hardware, and online services. While coding is not a primary requirement, familiarity with code editors and web development tools may be helpful for diagnosing website-related issues. This course may be useful, as it introduces Brackets, a code editor used for web development. The course may help a Technical Support Specialist to be better at fixing issues, because one will be better at understanding the code base.

See salaries and explore the career path for Technical Support Specialist

Learn Adobe Brackets Free open source code editor

What's inside

Learning objectives

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses