Use Brackets HTML Code Editor for Windows

Edited by Grimm, Rushell, Anonymous, Eng and 2 others

...More
Ad

Download and Install

You're watching VisiHow. In this tutorial, we are going to show you how to download the Brackets HTML Editor application. Brackets is an application that allows you to quickly and easily edit web page source code, which is commonly referred to as HTML.

Was this helpful? Yes | No | I need help

Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas193 754092.jpg

Steps

  1. 1
    To do this, we need to go down to the taskbar and open a web browser.
    In this case, we are using Firefox.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas22 9815.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  2. 2
    One click on the Firefox icon will open it.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas25 4415.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    In the address bar, type in "brackets.io" and press ENTER.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas34 3815.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    We're going to "Download Brackets", which is going to come from Get Help, which is an open source, central area.
    We can get it with the Adobe Extract Preview, but we're not going to do that.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas48 9615.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    We are just going to go to the "Download Brackets without Extract" option.
    Let's left click that one time.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas54 2715.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    This triggers a pop-up window, and we're going to select "Save File".
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas66 663.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    At the top right corner of the screen, we can see the download process.
    The file will be saved in our Downloads folder.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas70 5615.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    Once the download finishes, a blue down arrow will appear in the same location at the top right.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas77 4315.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    If we click on that arrow, we'll then be able to double-click on the Brackets file name.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas80 6715.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Now, we'll be given a pop-up window, which will ask us where we want to install Brackets.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas91 593.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    It is recommended to use the default folder location.
    This will be our functioning drive. However, we can add other areas if desired. For example, if we were using an external drive, we'd just change the drive letter.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas97 9515.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    Alternatively, we can click on "Change" to bring up a list of different folders we can choose from.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas108 483.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Since we're happy with our current destination folder, we'll just click on "Cancel" from this window.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas115 563.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Below the destination folder, we have the option to "Add "brackets" launcher to PATH for command line use".
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas120 513.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    We can also "Add "Open with Brackets" to Explorer context menus for all files and folders".
    This option is actually quite helpful because it means we can right-click on a file and actually open it directly with Brackets without having to drag or move things around.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas121 6545.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    The "Add "brackets" launcher to PATH for command line use" option is nice to have, but it's a more advanced feature.
    Since our tutorials are usually pretty basic, we're going to skip over that for now. However, we will leave it checked, so it doesn't have to be added later.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas143 643.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    Then just click "Next".
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas155 913.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    Now, we'll be given the option to "Install" or go "Back" and change option.
    We don't need to make any changes.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas161 463.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    Therefore, we'll click on "Install".
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas170 643.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    It may take a moment for "Brackets" to install, so we'll just wait.
    When the install is done, we'll continue. If user account control is set up, we'll just click yes. We do have a tutorial on how to change user account control if desired, so be sure to check for that.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas173 043.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Once the install process in complete, we'll get a message that states, "Brackets was successfully installed."
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas198 726.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    Now, we can click "Finish" in the bottom right-hand corner.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas201 906.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    We'll go ahead and close our browser window by clicking on the white "x" in the red box at the top right right corner.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas207 7275.jpg
    Was this step helpful? Yes | No | I need help

  24. 24
    Click on the Windows icon in the bottom left-hand corner to open the "Start" menu.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas217 912.jpg
    Was this step helpful? Yes | No | I need help

  25. 25
    Click on the down arrow at the bottom.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas219 8035.jpg
    Was this step helpful? Yes | No | I need help

  26. 26
    We'll see "Brackets", and we want to add a shortcut for it on the Start menu and on the task bar.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas226 954.jpg
    Was this step helpful? Yes | No | I need help

  27. 27
    Right click on "Brackets" to bring up a short menu.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas230 111.jpg
    Was this step helpful? Yes | No | I need help

  28. 28
    Click on "Pin to Start", which will add a tile to the "Start" menu page.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas231 581.jpg
    Was this step helpful? Yes | No | I need help

  29. 29
    Then click the down arrow again to go down to the list of "Apps".
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas237 011.jpg
    Was this step helpful? Yes | No | I need help

  30. 30
    Right click again on "Brackets", and then choose "Pin to taskbar".
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas239 978.jpg
    Was this step helpful? Yes | No | I need help

  31. 31
    Now, we can just press Esc to close the Start menu.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas244 7645.jpg
    Was this step helpful? Yes | No | I need help

  32. 32
    We can see on the taskbar that we now have an icon for Brackets.
    This will allow us to more easily manage and access Brackets.
    Use the Brackets HTML code editor for Windows PART-1-5 download and install.mp4-canvas247 2845.jpg
    Was this step helpful? Yes | No | I need help

  33. 33
    This concludes our tutorial on how to download and install the Brackets HTML code editor.
    We've also shown you how to add that to your Start menu and your taskbar. If you have any questions or comments about this application, or you have questions about this tutorial, please let us know in the section below. We'll be happy to get back with you. As ever, thanks for choosing VisiHow and have a great day.
    Was this step helpful? Yes | No | I need help

Video: Use Brackets HTML Code Editor for Windows Download and Install

Launch and Get Started

You're watching VisiHow. In this tutorial, we are going to show you how to launch the Brackets HTML code editor and get started with it.

Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas2 0115.jpg

Steps

  1. 1
    The first thing we need to do is go down to the Windows taskbar and click on the Brackets shortcut.
    It's a blue box with a white center and two brackets in it. If you don't have this short cut or can't find the application, view our other tutorial on how to download and install it.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas15 96.jpg
    Was this step helpful? Yes | No | I need help

  2. 2
    Otherwise, go ahead and give the icon a click to open it.
    Once launched, the Brackets editor will be open. It's a very simple HTML code editor.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas39 4035.jpg
    Was this step helpful? Yes | No | I need help

  3. 3
    As with most applications, it has a menu starting from the top left and going across to the right.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas46 962.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    There's also a left panel, where we have our various files listed.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas52 152.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    Then of course is the main section, where we have each area of code in a given area.
    One of the great things about Brackets, which we're going to discuss now in terms of getting started, is that once we've created an element in Brackets, we have our opening tag, which is discussed in our other tutorial, and our closing tag.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas60 0135.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    When we click once on one of these tags, it highlights both of them.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas84 9735.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    If we highlight paragraph tag, for instance, below, it highlights both of those.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas90 612.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    If we're finished with our "head" tag, and we're happy with how that works, we can simply click on the down arrow to the left of the tag, and it will close, or minimize, the "head tag".
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas99 645.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    This enables us to focus on the "body", and we can then move through that one piece at a time.
    The reason that this is particularly important, especially in Brackets, has to do with the fact that this is a real-time code editor. That means we can launch a web page, and we can actually edit the code of the web page in real time and see the changes as we make them, rather than having to save, refresh or restart. Additionally, we have advance functionality, such as setting up split Windows. These will allow us to, for example, view a webpage where we're working on the HTML code itself, and also view any attached supporting files, such as a CSS document, which may be dictating alignment or commands for the headers, or anything else we may have that adds custom formatting to the overall site we're working on.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas129 282.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    At the top left, we have the "index.html" file listed as the main one.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas163 224.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    If we click on the "x" to the left of that file, the file will seem to disappear.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas165 891.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    The file is still in the lower area, and we can single-click it, but we are not actually in the editing window.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas169 7925.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    If we double-click on the file, it will move up into Working Files".
    This is great because maybe we have several pages on a website that we're working with. Each time we create a page, we're adding another page into the lower section on Brackets. The "Working Files" are the ones that we're actually working on.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas177 2025.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    If desired we can double-click on "main.css" to add it to "Working Files" as well.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas200 667.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    When we are happy with the file, we can simply click on the "x" on the left to remove it from the "Working Files" area.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas206 817.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    To save a file, we can just click on "File" at the top left.
    Then click on "Save" or "Save As".
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas213 5955.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    We also have "Live Preview", "Enable Experimental Live Preview" and "Project Settings".
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas222 972.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    This is an important one, and if we click on "Project Settings", it allows us to change the test server for our projects.
    In this case, we're using a local server, and we don't need to change anything.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas229 4505.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    Let's click on "Cancel" for now to close this window.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas243 3405.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    Click on the arrow across from "head" tag to expand that section again.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas248 2965.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    In this example, we'll highlight the "title" tag.
    We'll discuss in more detail how to edit this in the next tutorial, where we will demonstrate how the live function of the code editing works. We'll discuss plug-ins as well in the following tutorial. Make sure to check out both of those.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas259 2315.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    This concludes our basic overview of getting started with the Brackets code editing tool for HTML on Windows.
    When finished with the tool we can simply go up to the black box on the top right and click on the "x" to close it.
    Use the Brackets HTML code editor for Windows PART-2-5 launch and get started.mp4-canvas280 866.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    Thanks for choosing VisiHow.
    If you have any questions, comments or suggestions about this or other parts of our tutorials, let us know in the section below. As ever, have a great day, and we look forward to seeing you in our other videos.
    Was this step helpful? Yes | No | I need help

Video: Use Brackets HTML Code Editor for Windows Launch and Get Started

Access Live Preview Function

You're watching VisiHow. In this tutorial, we are going to show you how to use the live preview function of the Brackets HTML code editor to see your page in real time on your Windows computer.

Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas118 983764.jpg

Steps

  1. 1
    Let's get started by going down to the task bar, where we are going to click on the Brackets icon.
    It's a blue and white square with brackets inside of it. A single click will launch Brackets for us.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas18 319.jpg
    Was this step helpful? Yes | No | I need help

  2. 2
    Once Brackets is launched, we'll notice at the top that the "index.html (Getting Started)" file is selected as Working File.
    There are three ways we can launch this file.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas28 559.jpg
    Was this step helpful? Yes | No | I need help

  3. 3
    We can click on "File" on the menu at the top of the screen.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas40 841.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    Then go down to "Live Preview".
    This is one way of viewing the file.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas42 84.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    The other way is by pressing Ctrl+Alt+P set of keys, which will also launch the file.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas47 861.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    The third and easiest way to launch the file is by using an icon on the far right side of the file window.
    It's a little lightening bolt, which is "Live Preview". When we click on that lightening bolt icon, it's going to launch the "Live Preview" of the existing HTML code in our "index.html" page. It's important to note that we need to have the Google Chrome browser installed. However, it will not disturb our existing Google Chrome instance when we launch the "Live Preview".
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas59 04.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    Let's click now to launch the "Live Preview", and this will open a new Google Chrome page in a new window.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas88 94.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    If we go down to the Google Chrome icon on the taskbar, we can see that we currently have the VisiHow page open.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas95 02.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    Moving over to the right on the taskbar, we'll see the second instance of Chrome for "GETTING STARTED WITH BRACKETS".
    The two work independently of one another. In order to use the function and edit the actual page, we'll show three quick examples.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas99 898.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    The first thing we'll do is go to the top left of the "GETTING STARTED WITH BRACKETS" window and note that we cannot see the entire name on the tab.
    Even with extending the size of the window, the tab size does not change.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas120 404.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    Therefore, we'll go to the "title" tag on the "Brackets" Working File and highlight "GETTING STARTED WITH".
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas136 341.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    We'll press the Del key to erase those words, and then we'll note in the upper left of the Google Chrome page, it has changed to "BRACKETS".
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas138 899.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    When we click on "GETTING STARTED WITH BRACKETS" in the live preview document, it highlights that phrase in blue.
    Then the blue faces, and we're left with a box around the title.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas148 004.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    On the Brackets window, we'll do the same thing we just did with the "title" by highlighting "GETTING STARTED WITH" in the "h1" tag.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas154 524.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    Then we'll delete that phrase, and now it just says "BRACKETS".
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas156 763.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    If we want to change the next part where it says, "This is your guide!", or the actual paragraph underneath, we simply click on them.
    Each time we click on it, we'll be given the option to edit that particular section.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas164 344.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    For instance, if we collapse a set of paragraph points on the "Brackets" HTML file, this is where we're working and the area that is highlighted.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas174 284.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    If we click on the area that states, "Brackets is a different type of editor", we'll be in the "em" section of code.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas182 58.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    When we switch back down, it highlights the entire paragraph.
    This is an extremely functional tool. It's very helpful, and it's easy to use in order to view our "Brackets" HTML code page in real time as we change and manage it.
    Use the Brackets HTML code editor for Windows PART-3-5 access the live preview function.mp4-canvas186 726.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    This concludes our tutorial on how to use the live preview function of the Brackets HTML code editor on a Windows computer.
    If you have additional questions, comments, or you need help, just let us know in the section below. We'll be happy to help you. As ever, thanks for choosing VisiHow and have a great day.
    Was this step helpful? Yes | No | I need help

Video: Use Brackets HTML Code Editor for Windows Access Live Preview Function

View CSS Associated with Tags

You're watching VisiHow. In this tutorial, we are going to show you how to quickly view the CSS associated with a tag in an HTML document by using the Brackets code editor on your Windows computer.

Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas82 406022.jpg

Steps

  1. 1
    To get started, we're going to go down to the taskbar and click on the Brackets icon to open the program.
    The icon is a white box with a blue outline and two brackets inside of it.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas19 901.jpg
    Was this step helpful? Yes | No | I need help

  2. 2
    A quick click on the Brackets icon will launch the "index.html (Getting Started)" page.
    It could also launch another project if we've been working in another one previously.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas29 44.jpg
    Was this step helpful? Yes | No | I need help

  3. 3
    To view the CSS code associated with a tag, we will simply click on that tag.
    In this case, we've clicked on the "body" tag.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas42 499.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    Then press Windows, Ctrl and E, in that order.
    This opens the associated code with this tag.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas49 557.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    We can see in our "main.css" file, it starts on line 8.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas56 098.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    It ends on line 18.
    Lines 9 through 17 are the code elements that control this.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas58 358.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    If, for example, we put the mouse pointer over a particular color option, we can see what the color is in the associated pop-up window.
    This is an extremely helpful function to allow us to quickly and easily see different items and different functions that may be associated with a piece of our code.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas66 213.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    When we're one looking at the code, we can simply close it by pressing clicking on the "x" in the top left corner.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas83 003.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    We can add new rules as well; however, in most cases it is better to actually edit the code in the CSS document itself.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas86 684.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    We can also add new lines, and we can have then become part of the code if we'd like to do that.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas97 563.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    If not, just delete the extra lines at the bottom.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas101 842.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    For now, press the "x" option at the top left.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas105 043.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Click to highlight the paragraph ("

    ") tag.

    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas111 042.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Press Windows, CTRL, E to open the "<p>" tag, where we'll find there are no rules.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas116 343.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    We can click on "New Rule", and this will add a new rule for all of the paragraph tags.
    We can add any rule that we'd like.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas117 366.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    When we're done, we can close the window by clicking on the "x" in the top left corner.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas126 488.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    Now, when we press Windows, CTRL, E, we'll see that the existing rule for the paragraph tag is there.
    It's empty now, but however we might like to format our paragraph in CSS, we can now do that.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas136 749.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    Again, press the "x" to close the option.
    When finished, we simply save the file.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas141 613.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    If we go up and try to close the program, it will bring up a message stating that we have made changes to the document "main.css" and ask if we'd like to save the changes.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas151 695.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    We can press "Save".
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas157 814.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Alternatively, we can press "Cancel" to return to the editor.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas158 753.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    We could also click on "Don't Save" on the left side of the window.
    This will close the entire editor and take us back to the desktop without saving the CSS changes.
    Use the Brackets HTML code editor for Windows PART-4-5 view CSS associated with tags.mp4-canvas163 093.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    This concludes our tutorial on quickly viewing associated CSS with tags in an HTML document when using the Brackets code editor for Windows.
    If you have any additional questions, comments or suggestions about this tutorial, please leave them in the section below. As ever, thanks for choosing VisiHow, and make sure to let us know if you need help with anything else. Have a great day.
    Was this step helpful? Yes | No | I need help

Video: Use Brackets HTML Code Editor for Windows View CSS Associated with Tags

Was this helpful? Yes | No | I need help

Use Split Screen to Work on Two Files at Once

You're watching VisiHow. In this section of this tutorial, we are going to show you how to use the Brackets HTML code editor to split Windows and work across two files at the same time. This is particularly helpful if you're working in a CSS file, or something to that effect, and you're also editing your main HTML file for whichever page it happens to be.

Was this helpful? Yes | No | I need help

Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas67 885614.jpg

Steps

  1. 1
    Open Brackets.
    We have ours pinned to the taskbar. The icon is a white box with a blue border, and two brackets in it.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas24 770848.jpg
    Was this step helpful? Yes | No | I need help

  2. 2
    Note that we are in the Brackets "Getting Started" page.
    There are two ways that we can split the Windows. Let's look at them both.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas42 351744.jpg
    Was this step helpful? Yes | No | I need help

  3. 3
    Click "View".
    It is the center option in the top navigation bar.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas45 814746.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    Look at the split options.
    Currently, we have "No Split" selected, as indicated by the checkmark next to that option.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas47 584693.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    Click "Vertical Split".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas48 097691.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    Look at how the window now appears.
    We have "index.html" on the left, and a blank area on the right. This is what "Vertical Split" looks like.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas50 514677.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    Click "View" again and click "Horizontal Split".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas52 714665.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    Look at the new appearance.
    Our "index.html" page is stacked vertically over a blank page. This is what "Horizontal Split" looks like. Now let's look at the alternative way to split Windows.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas54 963672.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    Find the option in the navigation bar along the top of the screen called "Navigate".
    Directly under this, there are two icons. The right icon, next to the one that looks like a gear, is the icon we want. It is a graphic representation of a horizontal split, which is how the page is split right now. Click on it for more options.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas67 170485.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Click "Vertical Split".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas68 153479.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    Note that the icon has changed slightly.
    It is now a graphic representation of a vertical split, because that is our current selection. Our window is now split vertically.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas69 269475.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    Click the icon again and select "No Split".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas73 068472.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Note that the icon has changed again.
    This indicates that we are viewing one window, full size. We like to work in vertical split.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas75 164459.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Click the icon and click "Vertical Split".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas80 800407.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    Click on the pane on the right side, which is blank.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas87 560368.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    Look at the files listed in the black bar on the left-hand side of the program.
    In this demonstration, we have "index.html", which is already open and displaying in our left pane. We also have "main.css". Double-click "main.css".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas94 902322.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    Look at the right pane.
    The main CSS file has opened there. Now we can see our CSS and we can see our index file. This is helpful.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas105 045208.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    Highlight the body tag.
    It reads, "<body>".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas108 716186.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    Press "Ctrl" and "E".
    Now we can see "main.css:8". That means that line 8 is where this starts in the "main.css" file.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas112 213058.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    Now we can look over to where "main.css" is displaying on the right.
    Find line 8. The lines are numbered on the left. Sure enough, on line 8, we have "body".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas118 385018.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Press the "X" to the left of "main.css:8" on the "index.html" side.
    This closes that feature.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas122 522008.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    On the "index.html" side, scroll down and click on a tag.
    We will click on "<sample>".
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas132 983944.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    Press "Ctrl" and "E" again.
    We can see "main.css:38", which means that this code starts on line 38 on the "main.css" side.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas137 195901.jpg
    Was this step helpful? Yes | No | I need help

  24. 24
    Scroll down on the "main.css" side.
    Find line 38. We can see that we have the code listed there, exactly as it appears on the left. This is a convenient and easy way to edit documents. If we were more old fashioned or less comfortable using a modern code editor like Brackets, then this is something that would be especially helpful. For everyone else, especially those just learning, it is an excellent way to get started. We strongly recommend it.
    Use the Brackets HTML code editor for Windows PART-5-5 use split screen to work on two files at once.mp4-canvas148 454836.jpg
    Was this step helpful? Yes | No | I need help

  25. 25
    This concludes our tutorial on how to work within split Windows in the Brackets HTML code editor for Windows.
    If you have questions, comments, or suggestions about this, or other tutorials, please let us know in the section below. Thank you for choosing VisiHow, and have a great day.
    Was this step helpful? Yes | No | I need help

    Advertisement

Video: Use Brackets HTML Code Editor for Windows Use Split Screen to Work on Two Files at Once

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,051,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Use Brackets HTML Code Editor for Windows"?
 

Article Info

Categories : Windows

Recent edits by: Amanda, Eng, Anonymous

Share this Article:

Thanks to all authors for creating a page that has been read 311 times.

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No