Use Brackets HTML Code Editor for Windows
Edited by Grimm, Rushell, Eng, Amanda and 1 other
16 Parts:
...More
Contents
- 1 Download and Install
- 2 Steps
- 3 Video: Use Brackets HTML Code Editor for Windows Download and Install
- 4 Launch and Get Started
- 5 Steps
- 6 Video: Use Brackets HTML Code Editor for Windows Launch and Get Started
- 7 Access Live Preview Function
- 8 Steps
- 9 Video: Use Brackets HTML Code Editor for Windows Access Live Preview Function
- 10 View CSS Associated with Tags
- 11 Steps
- 12 Video: Use Brackets HTML Code Editor for Windows View CSS Associated with Tags
- 13 Use Split Screen to Work on Two Files at Once
- 14 Steps
- 15 Video: Use Brackets HTML Code Editor for Windows Use Split Screen to Work on Two Files at Once
- 16 Comments
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.
Steps
- 1In this case, we are using Firefox.To do this, we need to go down to the taskbar and open a web browser.
- 2One click on the Firefox icon will open it.
- 3In the address bar, type in "brackets.io" and press ENTER.
- 4We can get it with the Adobe Extract Preview, but we're not going to do that.We're going to "Download Brackets", which is going to come from Get Help, which is an open source, central area.
- 5Let's left click that one time.We are just going to go to the "Download Brackets without Extract" option.
- 6This triggers a pop-up window, and we're going to select "Save File".
- 7The file will be saved in our Downloads folder.At the top right corner of the screen, we can see the download process.
- 8Once the download finishes, a blue down arrow will appear in the same location at the top right.
- 9If we click on that arrow, we'll then be able to double-click on the Brackets file name.
- 10Now, we'll be given a pop-up window, which will ask us where we want to install Brackets.
- 11This 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.It is recommended to use the default folder location.
- 12Alternatively, we can click on "Change" to bring up a list of different folders we can choose from.
- 13Since we're happy with our current destination folder, we'll just click on "Cancel" from this window.
- 14Below the destination folder, we have the option to "Add "brackets" launcher to PATH for command line use".
- 15This 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.We can also "Add "Open with Brackets" to Explorer context menus for all files and folders".
- 16Since 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.The "Add "brackets" launcher to PATH for command line use" option is nice to have, but it's a more advanced feature.
- 17Then just click "Next".
- 18We don't need to make any changes.Now, we'll be given the option to "Install" or go "Back" and change option.
- 19Therefore, we'll click on "Install".
- 20When 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.It may take a moment for "Brackets" to install, so we'll just wait.
- 21Once the install process in complete, we'll get a message that states, "Brackets was successfully installed."
- 22Now, we can click "Finish" in the bottom right-hand corner.
- 23We'll go ahead and close our browser window by clicking on the white "x" in the red box at the top right right corner.
- 24Click on the Windows icon in the bottom left-hand corner to open the "Start" menu.
- 25Click on the down arrow at the bottom.
- 26We'll see "Brackets", and we want to add a shortcut for it on the Start menu and on the task bar.
- 27Right click on "Brackets" to bring up a short menu.
- 28Click on "Pin to Start", which will add a tile to the "Start" menu page.
- 29Then click the down arrow again to go down to the list of "Apps".
- 30Right click again on "Brackets", and then choose "Pin to taskbar".
- 31Now, we can just press Esc to close the Start menu.
- 32This will allow us to more easily manage and access Brackets.We can see on the taskbar that we now have an icon for Brackets.
- 33We'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.This concludes our tutorial on how to download and install the Brackets HTML code editor.
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.
Steps
- 1It'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.The first thing we need to do is go down to the Windows taskbar and click on the Brackets shortcut.
- 2Once launched, the Brackets editor will be open. It's a very simple HTML code editor.Otherwise, go ahead and give the icon a click to open it.
- 3As with most applications, it has a menu starting from the top left and going across to the right.
- 4There's also a left panel, where we have our various files listed.
- 5One 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.Then of course is the main section, where we have each area of code in a given area.
- 6When we click once on one of these tags, it highlights both of them.
- 7If we highlight paragraph tag, for instance, below, it highlights both of those.
- 8If 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".
- 9The 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.This enables us to focus on the "body", and we can then move through that one piece at a time.
- 10At the top left, we have the "index.html" file listed as the main one.
- 11If we click on the "x" to the left of that file, the file will seem to disappear.
- 12The file is still in the lower area, and we can single-click it, but we are not actually in the editing window.
- 13This 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.If we double-click on the file, it will move up into Working Files".
- 14If desired we can double-click on "main.css" to add it to "Working Files" as well.
- 15When we are happy with the file, we can simply click on the "x" on the left to remove it from the "Working Files" area.
- 16Then click on "Save" or "Save As".To save a file, we can just click on "File" at the top left.
- 17We also have "Live Preview", "Enable Experimental Live Preview" and "Project Settings".
- 18In this case, we're using a local server, and we don't need to change anything.This is an important one, and if we click on "Project Settings", it allows us to change the test server for our projects.
- 19Let's click on "Cancel" for now to close this window.
- 20Click on the arrow across from "head" tag to expand that section again.
- 21We'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.In this example, we'll highlight the "title" tag.
- 22When 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.This concludes our basic overview of getting started with the Brackets code editing tool for HTML on Windows.
- 23If 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.Thanks for choosing VisiHow.
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.
Steps
- 1It's a blue and white square with brackets inside of it. A single click will launch Brackets for us.Let's get started by going down to the task bar, where we are going to click on the Brackets icon.
- 2There are three ways we can launch this file.Once Brackets is launched, we'll notice at the top that the "index.html (Getting Started)" file is selected as Working File.
- 3We can click on "File" on the menu at the top of the screen.
- 4This is one way of viewing the file.Then go down to "Live Preview".
- 5The other way is by pressing Ctrl+Alt+P set of keys, which will also launch the file.
- 6It'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".The third and easiest way to launch the file is by using an icon on the far right side of the file window.
- 7Let's click now to launch the "Live Preview", and this will open a new Google Chrome page in a new window.
- 8If we go down to the Google Chrome icon on the taskbar, we can see that we currently have the VisiHow page open.
- 9The two work independently of one another. In order to use the function and edit the actual page, we'll show three quick examples.Moving over to the right on the taskbar, we'll see the second instance of Chrome for "GETTING STARTED WITH BRACKETS".
- 10Even with extending the size of the window, the tab size does not change.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.
- 11Therefore, we'll go to the "title" tag on the "Brackets" Working File and highlight "GETTING STARTED WITH".
- 12We'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".
- 13Then the blue faces, and we're left with a box around the title.When we click on "GETTING STARTED WITH BRACKETS" in the live preview document, it highlights that phrase in blue.
- 14On the Brackets window, we'll do the same thing we just did with the "title" by highlighting "GETTING STARTED WITH" in the "h1" tag.
- 15Then we'll delete that phrase, and now it just says "BRACKETS".
- 16Each time we click on it, we'll be given the option to edit that particular section.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.
- 17For 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.
- 18If we click on the area that states, "Brackets is a different type of editor", we'll be in the "em" section of code.
- 19This 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.When we switch back down, it highlights the entire paragraph.
- 20If 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.This concludes our tutorial on how to use the live preview function of the Brackets HTML code editor on a Windows computer.
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.
Steps
- 1The icon is a white box with a blue outline and two brackets inside of it.To get started, we're going to go down to the taskbar and click on the Brackets icon to open the program.
- 2It could also launch another project if we've been working in another one previously.A quick click on the Brackets icon will launch the "index.html (Getting Started)" page.
- 3In this case, we've clicked on the "body" tag.To view the CSS code associated with a tag, we will simply click on that tag.
- 4This opens the associated code with this tag.Then press Windows, Ctrl and E, in that order.
- 5We can see in our "main.css" file, it starts on line 8.
- 6Lines 9 through 17 are the code elements that control this.It ends on line 18.
- 7This 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.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.
- 8When we're one looking at the code, we can simply close it by pressing clicking on the "x" in the top left corner.
- 9We can add new rules as well; however, in most cases it is better to actually edit the code in the CSS document itself.
- 10We can also add new lines, and we can have then become part of the code if we'd like to do that.
- 11If not, just delete the extra lines at the bottom.
- 12For now, press the "x" option at the top left.
- 13Click to highlight the paragraph (".
") tag
- 14Press Windows, CTRL, E to open the "<p>" tag, where we'll find there are no rules.
- 15We can add any rule that we'd like.We can click on "New Rule", and this will add a new rule for all of the paragraph tags.
- 16When we're done, we can close the window by clicking on the "x" in the top left corner.
- 17It's empty now, but however we might like to format our paragraph in CSS, we can now do that.Now, when we press Windows, CTRL, E, we'll see that the existing rule for the paragraph tag is there.
- 18When finished, we simply save the file.Again, press the "x" to close the option.
- 19If 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.
- 20We can press "Save".
- 21Alternatively, we can press "Cancel" to return to the editor.
- 22This will close the entire editor and take us back to the desktop without saving the CSS changes.We could also click on "Don't Save" on the left side of the window.
- 23If 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.This concludes our tutorial on quickly viewing associated CSS with tags in an HTML document when using the Brackets code editor for Windows.
Video: Use Brackets HTML Code Editor for Windows View CSS Associated with Tags
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.
Steps
- 1We have ours pinned to the taskbar. The icon is a white box with a blue border, and two brackets in it.Open Brackets.
- 2There are two ways that we can split the Windows. Let's look at them both.Note that we are in the Brackets "Getting Started" page.
- 3It is the center option in the top navigation bar.Click "View".
- 4Currently, we have "No Split" selected, as indicated by the checkmark next to that option.Look at the split options.
- 5Click "Vertical Split".
- 6We have "index.html" on the left, and a blank area on the right. This is what "Vertical Split" looks like.Look at how the window now appears.
- 7Click "View" again and click "Horizontal Split".
- 8Our "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.Look at the new appearance.
- 9Directly 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.Find the option in the navigation bar along the top of the screen called "Navigate".
- 10Click "Vertical Split".
- 11It is now a graphic representation of a vertical split, because that is our current selection. Our window is now split vertically.Note that the icon has changed slightly.
- 12Click the icon again and select "No Split".
- 13This indicates that we are viewing one window, full size. We like to work in vertical split.Note that the icon has changed again.
- 14Click the icon and click "Vertical Split".
- 15Click on the pane on the right side, which is blank.
- 16In 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".Look at the files listed in the black bar on the left-hand side of the program.
- 17The main CSS file has opened there. Now we can see our CSS and we can see our index file. This is helpful.Look at the right pane.
- 18It reads, "<body>".Highlight the body tag.
- 19Now we can see "main.css:8". That means that line 8 is where this starts in the "main.css" file.Press "Ctrl" and "E".
- 20Find line 8. The lines are numbered on the left. Sure enough, on line 8, we have "body".Now we can look over to where "main.css" is displaying on the right.
- 21This closes that feature.Press the "X" to the left of "main.css:8" on the "index.html" side.
- 22We will click on "<sample>".On the "index.html" side, scroll down and click on a tag.
- 23We can see "main.css:38", which means that this code starts on line 38 on the "main.css" side.Press "Ctrl" and "E" again.
- 24Find 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.Scroll down on the "main.css" side.
- 25If 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.This concludes our tutorial on how to work within split Windows in the Brackets HTML code editor for Windows.
Video: Use Brackets HTML Code Editor for Windows Use Split Screen to Work on Two Files at Once
<p class='more-comment'>If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.
Comments
Article Info
Categories : Windows
Recent edits by: Amanda, Eng, Rushell
