This Power Point Presentation explains step by step with screenshots how to create folders and sub-folders on Windows PC. The second part of this presentation shows users how to download, install, use and customize the text editor "Sublime Text 2," which is a program students will be using in my HTML5 and CSS3 introductory course.

1.  
Introduction to HTML5 and CSS3

2.  Before we begin, let me start by expressing that this
presentation tutorial is for Windows PC users only as I do not
own a mac yet.
 This presentation will show you step by step how to create a
folder directory root folder as well as sub-folders for the
project you will be working on during this course.
 The second half of this presentation will show you a walk
through on downloading, installing, customizing, and using
Sublime Text 2, a text editor that I will use in many of my
demonstrations for this course.
 At the end of this presentation, if you have any questions,
please feel free to post a topic in the “Start Here” discussion
area called “Getting Started.”

3.  Alright, so, let’s get started. Start by turning on your Windows PC
and log in to your desktop. On your desktop background, right click
on the screen. A menu will pop up.
 From this menu, select the option new. This will open a secondary
menu and on this menu you will select folder. It should look
something like this.

4.  This new folder that you have created on your desktop
will need a name. Give the folder a name that you will
remember and make sure it is one that is beneficial for
your project. You can name it “intro html5,” or
“project_1.” Just keep in mind you will be using this
folder to store all of your files for the website we will be
creating for this course.
 For this project, I chose to name my project folder
“project_01.” Your folder should look like the following or
similar.

5.  As you can see, you should have an new folder on your
desktop where it’s easily accessible to you at all times.
 Now, double click on your project folder to open it. As
you can see there is absolutely nothing inside this folder.
 We are going to add two sub-folders, or directories
inside this main root directory folder. To do this, follow
the same steps you followed for creating a new folder,
only this time instead of clicking on your desktop
background, you click on the window background in front
of you to get the menu to pop up.
 The two folders that you will create are “css” and
“images.”

6.  Once you have completed this, you should have a folder
file that looks like the following:

7.  As you can see, we now have our root directory folder,
and two sub-folder directories inside this main folder.
 Be sure when you name files and folders for this project,
each name is typed in lowercase letters. This will make it
easier for you to add things to your html code at a later
point.
 Again, if at this time you have any questions about what
we have just gone over, please feel free to post a topic in
the “Start Here” discussion forum “Getting Started.”

8.  
Introduction to HTML5 and CSS3

9.  For this course you are required to use a plain text editor for
create htm or html and css files for your website project you
will be creating.
 Windows, by default, comes with Notepad, and Mac, by
default, comes with TextEdit. Either of those two programs are
fine to use for this course.
 Avoid using word processors such as Microsoft Word as you
can not save files as plain text.
 Most of my presentations and lessons will be presented with a
text editor called “Sublime Text 2,” therefore, in this part of the
presentation I will go through the process of downloading,
installing, customizing, and using Sublime Text 2.

10.  Sublime Text 2 is a basic text editor much like Notepad
and TextEdit. However, it comes with additional features
that makes it easier for programmers to see errors in
their coding as well as tell their coding apart from their
content.
 You can customize the look and feel of the editor to fit
your needs or preferences and that is something we will
cover in this presentation.

11.  To start with, open up your Internet Web browser and go to
the following URL:
http://sublimetext.com/2
 You will see that 2.0.2 is the current version of Sublime Text 2
and you will also see that Sublime Text 3 (beta) is available.
For now, we are going to download Sublime Text 2.
 You can download the program via any of the links provided
on this page. Make sure that you download the program for
your proper operating system. For example, if you use
Windows, do NOT download the Osx version as that is for a
Mac OS and not windows.
 Once you have downloaded the program, locate the
installation file (usually in your downloads folder) and install
the program. Make sure to create a short cut on your desktop
for easier access.

12.  Now that you have installed the program successfully,
open it. You should have a completely blank canvas that
resembles the following.

13.  The first thing we are going to do is open our project
folder. Our project folder is where all of our files will be
stored.
 Go to file -> Open Folder. Since the folder we created is
located on our desktop, we should easily be able to
locate the folder.
 Select the folder from the list and select OK. Sublime
Text opens a new window for our project folder.
 Now, minimize our project window by clicking on the
minus sign at the top right corner of the window. After
doing that, go ahead and close the first window that was
opened when we opened the program. To do this click
on the X symbol in the top right corner of that window.

14.  Maximize our project window by clicking on the taskbar
button for sublime text.
 As you can see, in the side bar of the window, you can
also see the two sub-folder directories we created, css
and images:

15.  With our workstation set up this way, you can easily edit
multiple files at one time, as well as link to content within
the root and sub-folders in your actual HTML code.

16.  Now we are going to create our first file using Sublime Text.
 Go to file -> New File. Doing this opens a tab in our
workstation window.
 In this new tab we are going to write some lines of code. We
are going to use the required HTML5 elements for all web –
pages so you can get an idea of what the coding will look like.
Type the code as follows:

17.  As you can see, there is absolutely nothing special about
the code on the page. It is simply just plain text.
 After you complete the following step, watch what
happens to the code.
 Now, go to file -> save as. Make sure you are inside your
project folder. You should see the css and images sub-folders
in side the folder’s root.
 Give the file the name index.htm, make sure the save as
type is set to “all files.” Click Save.
 Notice how the HTML tags have changed colors? Pretty
neat huh? This makes it easier to distinguish code from
content/text. See an example on the next slide:

19.  Now we are going to close and open the file that we just
created so that you understand how to do this with
individual files within your project folders.
 To close the file, click the small x on the tab of the file. To
re-open the file simply click, or double click on the
index.htm file located in the left sidebar of the Sublime
Text window.
 This program allows you to have multiple files open at a
time for easier editing of code. It’s definitely a unique tool
to have when editing multiple pages at one time.

20.  Now, we are going to create another new file. Again, go to file
-> new file. This opens a second tab in your projects window.
 Before we begin writing any code to this file, lets save it first.
 Go to file -> Save as. You should already be in your project
folder, but just to be safe, make sure that you are. Save this
file as index2.htm.
 Now, we are going to repeat the same step as before.
However, do NOT copy and paste the code from the first file
to the second file, or you will not see the difference.
 Begin typing your required HTML5 tags in the new file and
watch what happens. Notice anything different? There is an
example on the next slide:

21.  As you can see, if you save the file before you begin
coding, Sublime Text automatically adds indents for
specific parts of code making the code easier to read.

22. Saving After Writing Code
Saving Before Writing
Code

23.  When working with multiple open files, you have the
option to save all of those files at one time. This is
something that I highly recommend as you may make
some changes you forget out.
 To do this, simply go to file -> save all. This will save all
of the files that are open in tabs within your work station.

24.  The last thing that I would like to cover in this
presentation is the customization of your Sublime Text 2
Workstation.
 Simply go to Preferences -> Color Scheme. From there
you will see several different options for selecting a color
theme for your work station. Play with it a bit and find
one that suits your needs, or one that you really like.
 My personal favorite is Monokai Bright. It has a dark
background with pink text for the HTML tags, which is
easy on the eyes and allows me to differentiate between
my code and content.
 When writing CSS, it looks beautiful in this theme as
well. See an example on the next slide.

25. HTML CSS

26.  Alright, you can now close the open program as this
concludes the second part of my presentation tutorial.
 Make sure that you delete the two files we created with
Sublime Text 2 as you will be creating similar named files
for your actual project in those folders.
 Again, if after going through this presentation, if you
have any questions feel free to post them in the “Start
Here” discussion area “Getting Started.”