Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we’ll take a look at the finished project and explore the setup and organization of files.
Links
Course: Introduction to HTML and CSS
Workshop: Mac: Local Dev Environment
Workshop: Windows: Local Dev Environment
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hello and welcome.
0:04
I'm Alina.
0:05
I appreciate the effort you've put in so
far.
0:07
And I'm excited to have you join me as
we take the knowledge you've learned so
0:09
far to build a basic PHP website.
0:15
In this course,
0:17
we use PHP to make our website easier
to maintain by using template files,
0:18
which will allow us to use the same
code and content on multiple pages.
0:23
We'll also be using PHP to allow visitors
to browse through the collection of media
0:27
and look at the details of a specific item
in an easy, customizable and scalable way.
0:32
Before starting this course, you should
already know a little about how web pages
0:40
work and
be able to write simple HTML and CSS.
0:44
If you don't, you might wanna take
a detour and head over to our basic web
0:48
design course first, which I've
linked to in the teacher's notes.
0:52
While we have already put
together the HTML and
0:55
CSS you'll use in this course, you will
be manipulating the HTML with PHP.
0:58
So a basic understanding will help
you keep up with what we're doing.
1:04
If you find an area that
you're struggling with,
1:09
try reviewing the materials
linked in the teacher's notes.
1:11
If anytime you find
yourself stuck on an issue,
1:14
check out our awesome community forum for
support.
1:17
Now that you're ready to get started,
1:22
let's take a quick look
at the finished site.
1:24
On the homepage, we have four
random selections from our catalog.
1:27
These random items refresh
each time the page is loaded.
1:30
We also have four links across the top,
Books, Movies, Music, and Suggest.
1:34
The first three take you to
the specific pages of our catalog
1:40
corresponding to their headings.
1:44
Clicking on Books takes you to a page
listing the books in our catalog,
1:46
organized alphabetically.
1:50
From our category pages,
there's also a link to the Full Catalog.
1:52
This takes you to a page listing all
the items in alphabetical order.
1:56
If you click on an item,
you go to the details page for that item.
2:02
Movies and music work the same way.
2:06
A catalog of items, you click for details.
2:09
While this is a fairly basic site,
2:13
it gives us a good chance to explore
some of the most common website aspects.
2:15
Next, we'll go over the basic setup and
organization of our project.
2:20
The first thing we need is
an environment for running our code.
2:24
The easiest way to follow
along with this project
2:27
is to launch the workspace
associated with this video.
2:29
There should already be
some starter HTML and
2:33
CSS code, as well as some images
included in your workspace.
2:35
We're going to be using workspaces
throughout this project, but
2:40
if you prefer to work
locally on your own machine,
2:43
you can also download the same
project files we'll be working with.
2:46
Check the notes for download links,
as well as a link to our workshop
2:50
that covers installing a local
PHP development environment.
2:54
Let's go into our workspace and check out
the organization of the project files.
2:58
In the root of our project,
we will have the files we are using for
3:03
the individual pages of the site.
3:06
Right now, all we have is index.html.
3:08
There are also two folders, css, for our
CSS code, and img, for our image files.
3:11
Within the img folder is a media
folder with the cover images for
3:18
the books, movies, and
music in the library.
3:23
That covers everything
we need to get started.
3:26
So in the next video,
we'll jump into our project.
3:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up