Article Edit Discuss

Import an HTML5 Project Folder into the Brackets Code Editing Application

Edited by Grimm, Crystal, Eng

3 Parts:

Steps

Video: Import an HTML5 Project Folder into the Brackets Code Editing Application

Comments

You're watching VisiHow. In this tutorial, we are going to show you how to import a project folder and associated documents into the Brackets HTML code editor, so that we can edit our HTML5 document in an editor.

Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas148 053333.jpg

Steps

1
To get started, let's open Brackets
.
The Brackets icon is a white box with a blue outline around it and two brackets inside of it.

Was this step helpful? Yes | No| I need help
2
Once we open Brackets, it's inevitably going to open to the default folder
.
We're going to close out of that.

Was this step helpful? Yes | No| I need help
3
Click "File" and click "Open Folder"
.
It will ask us where we want to look. We're going to look on our Desktop.
Was this step helpful? Yes | No| I need help
4
Open the folder
.
We're going to select "Visi HTML5 Project" and click "Select Folder". This will open the HTML project.

Was this step helpful? Yes | No| I need help
5
In this folder, we have images, which has some .jpg files
.
We can see the pixel amount at the top of the window.
Was this step helpful? Yes | No| I need help
6
We also have our "visi.html" file
.
We can see how nice and easy things look now. Everything has color added to it, things are pushed around, and suddenly the text that was very hard to read in our text editor has become very easy to read. To activate this file, we double-click it, and it becomes our working file.

Was this step helpful? Yes | No| I need help
7
We can right-click the project to open other folders, but there is no need to do that at this time
.
Later, when we want to add more images or items, we can do that. Now, we're in a position where we can start working with the HTML5 application Brackets, and manage and edit our code much more easily and quickly.
Was this step helpful? Yes | No| I need help
8
This concludes the tutorial on importing a project folder to the Brackets HTML editor for our Windows computer
.
If you have questions or comments, or would like additional details about this or other applications, please let us know in the section below. Thanks for using VisiHow.

Was this step helpful? Yes | No| I need help