{Web-D 01} File and folder structure

so you’re probably ready to start
building websites. We’re going to begin that journey this week but before we start
doing that we’re going to need to know a couple of specific rules that are very
important for you to be aware of when you build and create websites. The very
first thing that you’re going to need to do is you’re going to need to set up the
appropriate folder and file structure in order for your website to function
correctly. I’m going to explain how you can optimally set up your folder
structure so that your website will always work whether you’re hosting it
locally on your own machine or FTPing it up to the internet for the world to see. In
order to be a good web developer you need to have an excellent handle on file
management. If your files end up all over the place on your computer and there’s
no rhyme or reason to how you name and store the various items that are going
to be part of your website then your website is not going to function. So if
you can follow these simple rules you will always have success as far as
building a website and then transporting the website to other places. I like to
think of the folder that contains my website as a suitcase it contains all of
the relevant material that I’ll need for my website and if I decide to go and
travel somewhere all I need to do is grab my suitcase (ie my website) and it
will just go ahead and travel with me. Let’s take a look at what I have inside
the suitcase. The first thing that you’ll want to put in the suitcase is a root
folder. The root folder is going to contain all of the elements that have to
do with the website. Now, I like to create a root folder, and I call it root, because
then I know right away that that contains the elements that I’m going to
upload to the web. When you’re working for a client there’s a high likelihood
that you’re going to have other things not just the website that you’re doing
for them anything that is not directly related to the website should not go in
the root folder. So if this particular client wants me to create a logo for
them, or create business cards, or edit a video – all of those things can still go
in the suitcase that I have for that client that clients folder but all of
those things need to be contained in their relevant folders. So because we’re
just building websites we’re only gonna be concerned in the root folder, the
reason I’m telling you this is that I don’t want to see anything that is not
directly related to the website inside of the root folder if you’re going to
include other elements when you turn on assignments or show me things make sure
that they stay outside of the root folder. I highly encourage you to stay
organized because the more websites you build the more files that you’re gonna
have to manage and if you come up with a strategy right away and always follow
that strategy it’s going to be very easy for you to always know where everything
is in relationship to the projects that you’ll be working on. The other thing
that I want to point out is each unique website that you’re gonna be building
will have its own root folder. Let’s take a look at what I have inside the root
folder. Now the contents of the root folder are not set in stone you may have
some of these files you may have all of them you may have more files and folders
but the things that you always have to have is you’ll always have to have, for a
website to function, an index.html page this is your home page and yes it
has to be called index.html you could also call index.htm and it will work
fine. But any other name other than index.html or index.htm will not
display when you type in your domain name on the web. So if you type in mydomainname.com and your home page pops up it’s showing
because you’ve named the file index.html. If you name the file something like home
dot HTML or my websites out HTML then you’re going have to type the domain
name forward slash and then the name of that specific file so in order to make
it easy for people to reach your website we always call the home page index.html.
Now one side note on naming files for web use – whenever you name your files,
no matter what they are – images, HTML files, scripts even the names of folders, you have to
follow this rule no spaces, no funky characters. Whenever you’re going to name
something that’s going to display on the web it always has to be displayed as a
name that does not contain any of the things that I just mentioned. So these
would all be examples of viable names for use on the Internet. When we name
files it is possible to use capitals and lowercase although I do recommend just
using lowercase unless you’re going to be writing something that has multiple
words. This right here is an example of something that we call camel casing
where everything is lowercase except for the first letter of any subsequent words
other than the first one. You can see how I’ve capitalized the S in styles. My
naming convention is to use camel casing so throughout this course you’ll usually
see me using camel casing I like to have this naming convention as my default
method because then I know right away exactly how I name the files. If you tend
to mix casing like sometimes use capitals, sometimes use lowercase, well
you have to remember all of that because the web is case-sensitive which means
that if I named my page ‘Page.html’, with the capital P when I link to that page or
call that page to display I have to refer to it with a capital P. If I write
lowercase P then it’s looking for a file that does not exist so keep that in mind. As I mentioned you cannot use spaces on the Internet. So in lieu of spaces if you
don’t like the camel casing method you can use underscores, like I have right
here, or you can use dashes like I’m showing you right here.
One other naming convention that I recommend is that you don’t start any of
your files with a numeric character. Although for HTM files that is something
that you can do it’s not recommended for other sorts of file types, like script
files and also when you creating names within your CSS files
that can be a problem. In order to just keep things a little bit easier for you
to remember I recommend that you do not use numeric characters when you start
your file. So it would be fine to name my CSS file myStyles2.css but I would
avoid starting any of the file names with a numeric character. The other thing
that you want to avoid when you’re naming files for the Internet is don’t
use any funky characters. Don’t use question marks and hash marks and
percentages – those can cause problems as well. So the rule to follow is, no spaces,
no funky characters and you’ll always need to make sure that you include an
extension with all of the files. Let’s get back to talking about our root
directory and how we need to organize that. As you can see in my root folder
right here I have several subfolders that are contained within it and then of
course I have my index page. The index page as I mentioned has to be called
index.html it also has to be at the root level which means that this page cannot
be tucked inside my pages folder it needs to reside at the root level. I am a
big fan of keeping things organized so when you build websites I’m going to
recommend that you put any sub pages into your pages folder. That’s going to
look something like this – anything other than my index page is going to reside
inside the pages folder this is what we call a sub page and you can see it’s
going to have a specific name that will be unique to the contents of that page.
Any images that I want to display on my site are going to go inside my images
folder. Any CSS is going to be located in the CSS folder and any scripts will be
in the scripts folder. Now of course the folder names and the file names are
unique to your project they don’t have to be named exactly what I’ve named them.
The only name that really matters is that your index page, your home page is
called index.html everything else just has to follow the naming conventions
that we already discussed. So when you begin to build a website
you’ll always make sure that you structure your website directory in this
manner and this way you can keep all of the files and material organized in a
way that will make it easy for you to update and make changes to the website.
Your pages folder might look something like this where you’re going to have
pages each with their own unique name and they will all live inside the pages
folder. You’ll connect these pages together by linking them and we’ll learn
how to do this as we go through the class. Another way of looking at our
website is to look at it in a sitemap type of view. The sitemap is a visual
representation of how the site is structured this is a very simple sitemap
that shows that the index page, the home page is linking out to these three sub
pages. Sitemaps can get quite extensive depending on the size of the website
that you’re developing but these are great components of the architecture
that can help when you’re designing and developing a website so that you know
how the user can get to which page from what other parental page. And as we go
through this course we’ll learn how to do all of those things. So now that you
know a little bit about how to organize the files and folders within the root
directory, remember that’s the folder that’s going to contain all the
components of your website, you’re ready to start developing your website and
once your website’s done you can travel with that website and put it in
different locations and ultimately get it up on the internet so anyone can view

Be the first to comment

Leave a Reply

Your email address will not be published.