Folder structure

Last updated: July 20, 2023

Introduction

This is in the works! Would you like to help flesh it out? Let's do it!

  1. [your desktop?]
    	- index.html

    Your first HTML page will probably be in some random place. That’s OK!

  2. [a-folder]
    	- index.html
    	- other-thing.html

    Eventually, you’ll probably put it in a folder. that way you can have many files and they’ll be collected together.

  3. [a-folder]
    	- index.html
    	- other-thing.html
    	- goals.html
    
    [another-folder]
    	- index.html
    	- other-thing.html

    Things will eventually kinda sprawl out a bit.

  4. [a-folder]
    	- index.html
    	- other-thing.html
    	- goals.html
    	[other-folder]
    		- index.html
    		- other-thing.html
    	[another-folder]
    		- index.html
    		- other-thing.html

    But it’s nice to have everything in one folder because then we can track it all as one bigger project. After all, this is kinda “your final project” – (the whole course)

  5. [pe-projects]
    	- index.html (the landing page, right?)
    	- goals.html
    	- style.css (the styles)
    	- [images]
    		- cat.png
    	- [project-a]
    		- index.html
    		- style.css
    			- [images]
    				- cat.png
    	- [project-b]
    		- index.html
    		- style.css
    			- [images]
    				- cat.png

    We suggest that you name your folder pe-projects

    Remember: this folder should not be in a cloud back up type place. Keep your Docs and other materials like photo collection in Drive – but keep your code separate. How about my-computer/user-name/sites/pe-projects ?

  6. [pe-projects]
    	- index.html (the landing page, right?)
    	- goals.html
    	- style.css (the styles)
    	- [images]
    		- cat.png
    	- [projects]
    		- [project-a]
    			- index.html
    			- style.css
    				- [images]
    					- cat.png
    		- [project-b]
    			- index.html
    			- style.css
    				- [images]
    					- cat.png

    Then your projects will eventually get more complex and numerous – so, it will make sense to collect them in a projects folder.

  7. [pe-projects]
    	- index.html (the landing page, right?)
    	- [styles]
    		- reset.css
    		- style.css (the styles)
    	- [images]
    		- cat.png
    	- [goals]
    		- index.html
    	- [resume]
    		- index.html
    	- [projects]
    		- [project-a]
    			- index.html
    			- style.css
    			- [images]
    				- cat.png
    		- [project-b]
    			- index.html
    			- style.css
    			- [images]
    				- cat.png

    Always consider the URL

    peprojects.dev/alpha-x/your-username

    peprojects.dev/alpha-x/your-username/goals

    peprojects.dev/alpha-x/your-username/projects

    peprojects.dev/alpha-x/your-username/projects/project-name

    .

    peprojects.dev/alpha-x/your-username/projects/project-name/v2

    (maybe) (what would be good?)

    .

  8. This will all change a lot --- when we get to building the site dynamically with PHP....
    
    But until then...