Import an HTML5 Project Folder into the Brackets Code Editing Application

Edited by Grimm, Crystal, Eng, Anonymous

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.

Was this helpful? Yes | No | I need help

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

Ad

Steps

  1. 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.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas21 958606.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  2. 2
    Once we open Brackets, it's inevitably going to open to the default folder.
    We're going to close out of that.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas32 759572.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    Click "File" and click "Open Folder".
    It will ask us where we want to look. We're going to look on our Desktop.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas41 324378.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    Open the folder.
    We're going to select "Visi HTML5 Project" and click "Select Folder". This will open the HTML project.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas51 626892.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    In this folder, we have images, which has some .jpg files.
    We can see the pixel amount at the top of the window.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas62 771886.jpg
    Was this step helpful? Yes | No | I need help

  6. 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.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas94 657696.jpg
    Was this step helpful? Yes | No | I need help

  7. 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.
    Import an HTML5 project folder and associated documents into the Brackets code editing application.mp4-canvas108 925104.jpg
    Was this step helpful? Yes | No | I need help

  8. 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

    Advertisement

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

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,078,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 "Import an HTML5 Project Folder into the Brackets Code Editing Application"?
 

Article Info

Categories : Software

Recent edits by: Eng, Crystal, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 357 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