Lesson 7

Putting all together

On this lesson we are going to use all the knowledge we acquired so far. We are going to create a layout that can be shared by a few pages – thanks to PHP. The pages will be then styled as desired and we will also publish the site through FTP so it can be accessed anywhere! Let’s go!

Setting up the initial layout

First we have to create a new directory under our WAMP www folder. Inside www create a new folder called “lesson7” and open the folder inside atom:

Let’s start by creating the initial .php files that will allow us to create the main layout file. Create 2 new files one called head.php and footer.php. Inside head.php let’s add the <head> content there:

and in the footer.php:

Now that we have the main files to mount a page, let’s step into it. Create a new file called index.php and add the following code:

 

Adding styles to our page

We have the initial html, let’s now add our CSS to our <head>. In head.php add:

And create a new folder called “assets” and a new file (inside assets) styles.css. By this time your atom should be showing something like this:

 

To better separate the generic PHP variables we can create a new file and call it vars.php and declare the variables that we use in several places. And then include the vars.php file in the head.php:

This way we make the vars available inside our pages:

« Lesson 6 Index Lesson 8 »