Create a Folder for Your HTML5 Project

Edited by Grimm, Amanda, Eng

3 Parts:
Steps
Video: Create a Folder for Your HTML5 Project
Comments

You're watching VisiHow. Today, I am going to teach you how to create a project folder so that you can structure your HTML5 document and add other elements, such as images or CSS style sheets.

Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas135 952.jpg

Steps

  1. 1
    Right-click on the desktop
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas19 3.jpg
    Was this step helpful? Yes | No| I need help
  2. 2
    Hover over "New"
    .
    It's near the bottom of the menu that pops up.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas22 66.jpg
    Was this step helpful? Yes | No| I need help
  3. 3
    Click "Folder"
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas24 099.jpg
    Was this step helpful? Yes | No| I need help
  4. 4
    Type a name
    .
    We're going to call ours "Visi HTML5 Project".
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas31 858.jpg
    Was this step helpful? Yes | No| I need help
  5. 5
    Hit the enter key on the keyboard or click on the desktop to set the name
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas35 098.jpg
    Was this step helpful? Yes | No| I need help
  6. 6
    Double-click the folder to open it
    .
    Right now, there's nothing in it, because we just created it.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas36 838.jpg
    Was this step helpful? Yes | No| I need help
  7. 7
    Click, hold, and drag the working ".html" or ".htm" file from the desktop and drop it over the folder
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas44 838.jpg
    Was this step helpful? Yes | No| I need help
  8. 8
    Look at the folder
    .
    Now our "visi.html" file is in the folder. We like to organize and structure our folders. At the very least, we add a folder for images.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas53 738.jpg
    Was this step helpful? Yes | No| I need help
  9. 9
    Right-click on an empty space in the folder
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas57 399.jpg
    Was this step helpful? Yes | No| I need help
  10. 10
    Hover over "New"
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas58 639.jpg
    Was this step helpful? Yes | No| I need help
  11. 11
    Click "Folder"
    .
    This folder will be inside our "Visi HTML5 Project" folder. This is known as a nested folder.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas59 858.jpg
    Was this step helpful? Yes | No| I need help
  12. 12
    Type a folder name
    .
    We will type "images".
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas66 958.jpg
    Was this step helpful? Yes | No| I need help
  13. 13
    Click on an empty space in the folder to set the name
    .
    This folder will later allow us to add images if we choose to do so. We will demonstrate how to do that shortly. Next, we need to test that everything still works.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas68 138.jpg
    Was this step helpful? Yes | No| I need help
  14. 14
    Double-click the working file
    .
    It will open in the default browser.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas83 859.jpg
    Was this step helpful? Yes | No| I need help
  15. 15
    Look at how it is displaying
    .
    Make sure everything still shows up correctly. Ours looks good, which is great.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas86 218.jpg
    Was this step helpful? Yes | No| I need help
  16. 16
    Close the browser and go back to the project folder
    .
    Next, we would either create our CSS structure or add some images. We are going to go ahead and add an image.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas91 699.jpg
    Was this step helpful? Yes | No| I need help
  17. 17
    Double-click a folder
    .
    We want to navigate to a folder containing images. Ours is called "Great Ideas". We have quite a few items in here. Let's add a picture of us.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas105 798.jpg
    Was this step helpful? Yes | No| I need help
  18. 18
    Click and hold on the bar at the top of the folder
    .
    Drag it over a bit so that we can see our project folder underneath.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas112 056.jpg
    Was this step helpful? Yes | No| I need help
  19. 19
    Click and hold on a picture
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas113 757.jpg
    Was this step helpful? Yes | No| I need help
  20. 20
    Drag the picture to the project folder
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas114 696.jpg
    Was this step helpful? Yes | No| I need help
  21. 21
    Drag the picture right over the "images" folder until it is highlighted
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas115 697.jpg
    Was this step helpful? Yes | No| I need help
  22. 22
    Release
    .
    It will drop into the nested folder.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas116 896.jpg
    Was this step helpful? Yes | No| I need help
  23. 23
    Click back onto the other folder and find another image
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas120 256.jpg
    Was this step helpful? Yes | No| I need help
  24. 24
    Drag and drop a second image into the "images" folder
    .
    This is all that we are going to add, but continue adding any images that might be useful to have handy for the project.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas121 596.jpg
    Was this step helpful? Yes | No| I need help
  25. 25
    Close the folder when ready and go back to the project folder
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas134 834.jpg
    Was this step helpful? Yes | No| I need help
  26. 26
    Double-click the "images" folder to open it
    .
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas136 033.jpg
    Was this step helpful? Yes | No| I need help
  27. 27
    Look at the images and make sure they're all there
    .
    We have two images here. Great!
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas137 331.jpg
    Was this step helpful? Yes | No| I need help
  28. 28
    Click the "x" in the top right corner to close the project folder
    .
    In our next tutorial, we will discuss how to import this project into the Brackets application for editing HTML5.
    Create a project folder for your HTML5 document and add image files and other elements to it.mp4-canvas139 912.jpg
    Was this step helpful? Yes | No| I need help
  29. 29
    This concludes our tutorial on creating a project folder for your HTML5 project and setting it up
    .
    If you have additional questions or comments, please let us know in the section below, and we'll be happy to help you. As ever, thanks for choosing VisiHow and have a great day.
    Was this step helpful? Yes | No| I need help

Video: Create a Folder for Your HTML5 Project

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

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: Amanda, Grimm

Share this Article:

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

x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No