Create a Folder for Your HTML5 Project
Edited by Grimm, Amanda, Eng
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.
Right-click on the desktop.
Hover over "New".
It's near the bottom of the menu that pops up.
Type a name.
We're going to call ours "Visi HTML5 Project".
Hit the enter key on the keyboard or click on the desktop to set the name.
Double-click the folder to open it.
Right now, there's nothing in it, because we just created it.
Click, hold, and drag the working ".html" or ".htm" file from the desktop and drop it over the folder.
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.
Right-click on an empty space in the folder.
This folder will be inside our "Visi HTML5 Project" folder. This is known as a nested folder.
Type a folder name.
We will type "images".
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.
Double-click the working file.
It will open in the default browser.
Look at how it is displaying.
Make sure everything still shows up correctly. Ours looks good, which is great.
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.
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.
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.
Click and hold on a picture.
Drag the picture to the project folder.
Drag the picture right over the "images" folder until it is highlighted.
It will drop into the nested folder.
Click back onto the other folder and find another image.
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.
Close the folder when ready and go back to the project folder.
Double-click the "images" folder to open it.
Look at the images and make sure they're all there.
We have two images here. Great!
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.
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.
Video: Create a Folder for Your HTML5 Project
Recent edits by: Amanda, Grimm