53 lines
2.1 KiB
HTML
53 lines
2.1 KiB
HTML
|
---
|
||
|
|
title: Folder Structure 101
|
||
|
|
author: fLaMEd
|
||
|
|
aliases:
|
||
|
|
- /folderstructure101
|
||
|
|
---
|
||
|
|
<h2>Folder Structure 101</h2>
|
||
|
|
<blockquote>Lovingly written and submitted by <a href="https://flamedfury.com/" target="_new">fLaMEd</a>. Thank you, fLaMEd!</blockquote>
|
||
|
|
|
||
|
|
<p align="center"><img src="folder-structure.png" title="An image of a folder structure that is replicated below in text"></p>
|
||
|
|
|
||
|
|
<h3>How should I organize my files?</h3>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<p>You can organise all of your website projects with this simple folder structure. You will only need four folders for a nicely organised web project.</p>
|
||
|
|
|
||
|
|
<p>The four folders are <code>root</code>, <code>css</code>, <code>img</code>, and <code>js</code>.</p>
|
||
|
|
|
||
|
|
<p>The project <code>root</code> folder can be named after your web project, e.g. <code>32bit.cafe</code>. The root folder or your project folder is your primary folder, and all of your HTML files will live here, e.g. <code>index.html</code>, <code>about.html</code>, <code>contact.html</code>, <code>projects.html</code>.</p>
|
||
|
|
|
||
|
|
<p>The other three folders will also reside within this project folder. The other three folders are self-explanatory.</p>
|
||
|
|
|
||
|
|
<p>The <code>css</code> folder will hold all your CSS files, e.g. <code>styles.css</code> or <code>style.css</code>.</p>
|
||
|
|
|
||
|
|
<p>The <code>img</code> folder will hold all your image files (.jpg, .jpeg, .png, .gif, etc.), e.g. <code>header.png</code>, <code>featured-image.jpg</code>, or <code>88x31-button.gif</code>.</p>
|
||
|
|
|
||
|
|
<p>The <code>js</code> folder will hold all your JavaScript files, e.g. <code>app.js</code> or <code>site.js</code>.</p>
|
||
|
|
|
||
|
|
<p>It's good practice to use lowercase for your folder names.</p>
|
||
|
|
|
||
|
|
<p>If you find yourself with large amounts of images, do not be afraid to create subfolders within the <code>img</code> directory.</p>
|
||
|
|
|
||
|
|
<p>Use this template as a starting guide and modify it to suit your project needs.</p>
|
||
|
|
|
||
|
|
<p>In text format, the folder structure appears like this:</p>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
32bit.cafe /
|
||
|
|
|- / CSS /
|
||
|
|
| styles.css
|
||
|
|
|- / img /
|
||
|
|
| 88x31-button.gif
|
||
|
|
| featured-image.jpg
|
||
|
|
| header.png
|
||
|
|
|- / js /
|
||
|
|
| apps.js
|
||
|
|
-about.html
|
||
|
|
-contact.html
|
||
|
|
-index.html
|
||
|
|
-projects.html
|
||
|
|
</pre>
|
||
|
|
</section>
|