Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn Adobe Brackets Free open source code editor
Rating: 4.3 out of 5(155 ratings)
12,971 students

Learn Adobe Brackets Free open source code editor

Brackets is an open source text editor this course will show you what you can do with it
Created byLaurence Svekis
Last updated 11/2019
English
English [Auto],

What you'll learn

  • 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

Course content

2 sections • 23 lectures • 1h 17m total length

  • Introduction to Brackets3:17

    Discover brackets, the free open source code editor from Adobe, with live preview, extensions, and easy setup for local servers via Zap.

  • Brackets intro3:54

    Explore brackets, an open-source Adobe editor, with code hints, inline editors, live preview, and preprocessors for SPSS and less, plus setting up localhost using zap, PHP, and MySQL on Windows.

  • Brackets install update2:03

    Learn how to install or update brackets on Windows by downloading brackets, running the installer, choosing the install directory (default in program files), and finishing to launch.

  • Course resources0:01
  • Brackets XAMPP setup and run4:16

    Learn how to configure Brackets to run with XAMPP, point to a web folder, open and manage files, restart the server, and explore live preview and extensions.

  • Brackets live preview5:00

    See how Brackets' experimental live preview displays real-time html and css updates on a local host server, with options for project settings and the extension manager to enhance workflow.

  • Brackets open source resoures3:13

    Explore brackets open source editor, with source code on GitHub and a live browser sync feature. Learn how to download, install, and customize brackets via the extension manager.

  • Brackets get change themes3:20

    Explore how to customize Brackets with extensions and themes using the extension manager, then install a rainbow theme and adjust font settings for readability.

  • Brackets top extensions6:24

    Explore brackets extensions such as the beautifier to format HTML, CSS, and JavaScript, and use top tabs, quick edit, and CSS color previews for efficient coding.

  • Brackets extension manager3:09

    Explore the Brackets extension manager to install whitespace normalizer, themes, and various linters such as CSSA lint, PHP linter, and Python tools, then customize Brackets for editing.

  • Brackets Edit options3:36

    Master edit menu shortcuts in Brackets, including copy, paste, cut, undo, redo, and line selection, while enabling whitespace normalization, beautify on save, and auto close braces.

  • Brackets Quick Edit3:00

    Master quick edits in brackets by updating CSS directly from the index page, using keyboard shortcuts to create rules and see live preview updates immediately.

  • Brackets view options5:43

    Explore Brackets view options, themes, split views, and font size to customize the editor. Discover how extensions, quick open, live preview, and color previews enhance Brackets workflow.

  • Brackets navigate2:21

    Navigate Brackets using quick edit, quick docs, and quick open via keyboard shortcuts. Jump to lines, view the file tree, and cycle through rules with next and previous.

  • Brackets summary4:00

    Explore brackets' dev tools for debugging and reloading with or without extensions, and switch editor languages. Customize with themes, fonts, key maps, and extensions, then access help and resources.

  • Brackets quick menu2:00

    Explore the brackets quick menu on the right to access live preview, download a new version, install brackets, and use one-click shortcuts to open the extension manager.

  • Extracting styling images from PSD files9:41

    Explore how Brackets can extract image data, text, and styling cues from PSD files, connect to Creative Cloud, and export assets like images and styles into HTML and CSS workflows.

  • Extract Resources0:02
  • Brackets auto image downloads PSD file layer info5:09

    Learn how Brackets handles images from a PSD file, creating a dynamic image folder, importing images, renaming formats, and adjusting text, fonts, and layout with live preview.

  • Use your Adobe Cloud Account to get PSD files for extraction4:55

    Use your Adobe cloud account to upload PSD files, sign in to access cloud storage, extract layer assets, and preview them in Brackets to build web layouts.

  • Brackets shortcuts Windows and Mac0:49

Requirements

  • computer access
  • desire to learn

Description

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.

Who this course is for:

  • anyone who wants to learn more about Brackets code editor
  • web developers
  • web content creators
  • web masters

Report abuse