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
1
To do this, we need to go down to the taskbar and open a web browser
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.
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.
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.
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.
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.
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
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.
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.
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"
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.
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.
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.
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.
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
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.
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".
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.
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.
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
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.
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.
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
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.
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
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.
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.
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.
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.
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.
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.