Import an HTML5 Project Folder into the Brackets Code Editing Application

Edited by Grimm, Crystal, Eng

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
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
  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
  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
  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
  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
  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
  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
  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
    Advertisement

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

If you have problems with any of the steps in this article, please post in the comments section below.

Comments

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

Article Info

Categories : Software

Recent edits by: Crystal, Grimm

Share this Article:

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