code-institute-submissions / stephen-caldwell-milestoneproject1 Goto Github PK

Milestone Project 1

I chose to update the website for my father's plumbing shop as my first Milestone Project. The current site is very outdated and needed a good bit of updating, it's very busy and isn't user friendly. I wanted to make the site more simple and easy to use. I also felt like it was a good way for me to build my confidence back up, having failed my college degree.

Home Page

The Home Page of the website is very minimal, it just has the navigation for the site in the header, the hero image, any special offers, and a footer containing the contact details and the map.

Above is a screenshot of the navigation and hero image. The image was taken directly from the original website which is currently being used and linked below. The navigation is based on what we learned in the course. The main colour scheme which you can see in the header is based on the shops logo below.

Special offer

For the special offer I just did a simple card for display the basic information. When you click on the card it opens up a modal to display the full information.

About us

The about us page has a paragraph about the company along with some images relating to them. It also has a list of some of the brands the the shop can source and who they use.

Products

I had some trouble designing this page and went through a few different ideas before landing on this one. It displays just a few of the products provided in just a few categories. I did have some trouble still with this and there is a gap on the right hand side but added another would make the rest look squished and re-positioning it messed with the responsiveness.

Contact us

This was originally in the footer but it looks better as it's own page. It is just the contact information and a simple form, along with a map showing exactly where the shop is.

Eventual Features I would like to added

I would like to add more to the products and home pages. For the products I would like to display more products and then have more detail on the product when they are clicked on. On the home page I would like to add more special offers.

Credits

I used code from the course for the navigation, responsiveness, gallery. I used W3schools for code I wasn't 100% on as well as Bootstrap examples and of course the odd Stack overflow. The content and a lot of the pictures were taken directly from the shops current website(http://www.theshowercentre.ie/.)

Deployment and testing

I deployed the site using Github pages. The site was tested on different phones and laptops to check responsiveness and how the site worked.

Cloning and Deployment

To clone the code to your own repository please select the code button above and follow the instructions to clone.