DIY Websites – Creating a Responsive Website using PHP (Hair Salon Website)

hair-salon-photoshop-design

In this blog post, I will be outlining our latest project:  the building of a php website for a hair salon.  I chose a hair salon because as a web designer I do get calls from hair stylists who want to put up a website but they usually are pressed for money.  I figure if they have some extra time but limited funds, this is an easy enough project for anyone to do.

The videos are a bit slow and tedious, but I remember those were the ones I needed when I too was learning to code.

CREATING A DESIGN IN PHOTOSHOP:

For this project, I took from ideas right from the internet and added them all together in Photoshop to create the look of the different pages.  They are altered some during the build out, but they do remain pretty similar.

If you do not have photoshop, you can use another website as your model or you can copy and paste parts of two or three websites together in a word document and then cut it out and make your own “mockup”.  However you decide to do it, it is best to have a visual before you begin to do your coding.

WRITING THE CONTENT:

Every business website needs to have all of the information on it that any potential or current customer will need; for example:  hours of business operation, address, directions, phone, what you do, list of services, prices if you choose to post them, and indication of what your specialties are, if you have them.

For a hair salon it is recommended that you also emphasis your highest-ticket items; for example:  hair extensions and/or Brazilian keratin treatments.

WORKING LIVE ON THE SERVER:

I will be working live on the server which I found easiest when I was a beginner.  I still like to work live on the server so I can see instant results.  I cover this in a previous video that you can see here:  How to Build Live on the Server

WEBSITE PAGES:

Home Page/Index Page: The Home Page, also known as the index.php page, was created in the first two parts of the video tutorial.  It is from the index page that we will take our header, footer, scissors-design and services-list information.

About Us:  About your salon, specialties, hours of operation, contact phone, etc.

Services Page:  List of your services and prices if you want to post them

Contact Us:  Name and address of the salon, picture of the salon outside and/or inside, directions and a google map.

PICTURES AND GRAPHICS:

Before you begin, gather all of your elements together:  Any picture urls, google maps url, html classes that you will be using over and over, and/or google font links.  Several things are covered specifically in the videos below:

  • Creating a separate css style sheet and linking to it;
  • How to create a Google Map for your new business and how to get the link;
  • How to use Google Fonts for headlines in your website. 

LET’S BEGIN TO BUILD THE WEBSITE:

CREATING A SEPARATE CSS FILE AND LINKING TO IT

links-for-css-and-google-fontsHere is the actual link we needed in order to link to our css once we put it in a separate file.  The file was called hairsalon.css.  This pulls the css styling from another file and applies it to our index.php file and since it appears in the header.php file, it applies that same styling to all of our other pages.  

I also added the link for the google font as well.

 

PRINT OUT YOUR IMAGES LIST OR TYPE THEM INTO YOUR CHEAT SHEET

I have outlined above what types of information you may want to add to your cheat sheet so you will have everything at your fingertips when you begin to work on the pages.

CREATE YOUR PHP PAGES:

You will want to create the following:

  • about.php
  • services.php
  • services-list.php – Special Note: During the video I forgot to call the services list by a separate name and wound up with a problem.  So heads up:  You need one file called services-list.php where you will put your services table and another php file called services.php that will contain all of the information for the actual website page.
  • contact.php
  • scissors-design.php - I added this one just to show you that you can pull anything in with an php include file.

ADD THE CORRECT LINKS TO THE INDEX & OTHER PAGES

Once all of your pages are completed, the second to last step is to hook up all of your links both on the index.php and the header.php page. 

The last step is to use the mobiltest.me website to check each of your pages in a mobile phone and a tablet.  This too is covered in the videos below which teach how to create a php hair salon website using html, css & php.

HOW TO CREATE A RESPONSIVE PHP HAIR SALON WEBSITE USING HTML, CSS & PHP - PART 1:

HOW TO CREATE A RESPONSIVE PHP HAIR SALON WEBSITE USING HTML, CSS & PHP - PART 2:

HOW TO CREATE A RESPONSIVE PHP HAIR SALON WEBSITE USING HTML, CSS & PHP - PART 3:

Tagged with: , , ,