sainthuddini / fresh_cut

A barber website

Fresh Fade

Fresh Fade is a website made for a hairdresser's salon.

Motivation

I always liked to go to the hairdresser and get the feeling of a new hairstyle, that's why I did Fresh Fade

Code language/Tools

• HTML
• CSS
• JS
• Bootstrap(BS)
• Popper.js
• Google Fontawesome
• Google Maps
• sendEmail.js

Wireframe

Features

• Navbar.
• Booking Form.
• Carousel slides.
• Jumbotron.
• Parallax-effect.
• Popover.
• Barbers on cards with img and description.
• Gallery section.
• Price section with description and new price.
• Social Media section.
• footer (about us, location and hours, Google Maps ).

How to use it?

My project is very user-friendly.

In the homepage you can find a navbar with a logo that will always take you to the homepage. On the navbar you can find how to make a booking request, how to navigate to the barbers section and the gallery section or even the price section.

Directory Structure and File Naming

HTML

• I name the homepage index.html so it can display it when I deploy it on github.
• Gallery.html because it's a gallery.
• Price.html because it's where you can find the price.

CSS

I wanted it to be easy to find where I should change so I made 3 css files. style.css, header.css and footer.css. Every change on the header goes to header.css and every change on the footer goes to the footer.css. The rest of the body and css goes to style.css.

images

As you can see I have named the following images after the positioning of the website.

• barber_# is on the cards of the homepage.
• gallery_# comes in the gallery page.
• h/p_parallax, h=homepage and p=pricepage.
• nav_logo goes to the navbar and is the logo of the website.
• slide# are the images for the carousel.

testing / User stories

• Navbar.

Works well I have tested it in all forms of devices.

The Navbar makes is easy for the user to locate through the site of the 3 different pages. Also Containing the Book now button making it possible for the user to book a time at any time using the website.

• Book now/ Booking Form.

The Book now button does as I was expecting. When you click on it the booking form pops up. If you fill in the booking form and press the Book now button in the form, the information will be sent to my email("as the barber") with the information of the Name, Time, Location and E-mailadress. After that a confirmation will be sent to your e-mailadress also with the text "Success" showing in the booking form, making it easy for the user to understand that his use of the booking form has been successful.

• Carousel slides.

The Carousel slides works. If you click on the right side of the picture or vice versa it will slide to that side and show a new image.

Its a feauture making it easy for the user to understand the purpose of this webiste just by looking to the relevant pictures.

• Jumbotron.

Works well and is responsive. The popup button on the jumbotron works well. This features is for the user to read relevant information for the moment and also a fun way to recieve discount by pressing the 'Just now!' button.

• Parallax-effect.

The fixed image works very well I have tried it in github pages and it displays as it should.

I have done this for the user to recognize this as a modern type of page also making it easier for the user to remember this page in general.

• Barbers on cards with img and description.

The image is displaying and is responsive.

This is a good way for the user to get to know which barbers works in the saloons and what their specialtiez are.

• Gallery section.

Images are displaying and is responsive and the quality is the same on a smaller device.

This is for the user to see relevant picture to imagine themselv in that seat or moment, making it more easier for them to press the "book now" button

• Price section with description and new price.

You can see the new price and the deleted ones. Test worked well.

The prices are there for the user to see what the prices are now compared to before. Showing them a finical oppuertunity to take and making it easier for them to press the "book now" button.

• Social Media section.

The icons works very well, when you click on the social media icons a new page opens and directs you to some random barbers social media page.

This feature is a way for marketing the website through social media, and the user that like to use social media can follow us easily with these icons.

• footer (about us, location, hours and Google maps).

The footer works good and the a tags on the section works when you click on them making it easier for a call or email. The Google Maps API works well and the markers on the maps are located where I want them and if you click them a message will pop of "F.F in (location)"

In the footer section the user can find 4 different coloumns with our contact information, our hours, our locations and a visual showing of our locations with google maps.

• javaScript Code testing with leap work. Result = Works Well.

• HTML, tested through the site in different sections and features of the site. Result = No Errors.

• CSS, tested through the site also with a validator. Result = No Erros.

Deployment

Wrote the code on gitpod and deployed it on Github and Github Pages.

The diffrence between the deployed site and the first version devolpment is mostly colors and sizes of the contet.

Credits

In this project I want to give credit to Bootstrap for their amazing frameworks. https://getbootstrap.com/docs/4.4/getting-started/introduction/

I want also to add a special thanks @w3newbie for his amazing tutorial on bootstrap that you can find in youtube. https://w3newbie.com/

W3schools has helped alot also in this project, for example of the parallax effect. https://www.w3schools.com/

The biggest of thanks will go to Google for every small solution I have found there. https://www.google.com/

Great place to find different solutions https://www.stackoverf# Fresh Fade

Fresh Fade is a website made for a hairdresser's salon.

Motivation

I always liked to go to the hairdresser and get the feeling of a new hairstyle, that's why I did Fresh Fade

Code language/Tools

• HTML
• CSS
• JS
• Bootstrap(BS)
• Popper.js
• Google Fontawesome
• Google Maps
• sendEmail.js

Wireframe

Features

• Navbar.
• Booking Form.
• Carousel slides.
• Jumbotron.
• Parallax-effect.
• Popover.
• Barbers on cards with image and description.
• Gallery section.
• Price section with description and new price.
• Social Media section.
• footer (about us, location and hours, Google Maps ).

How to use it?

My project is very user-friendly.

On the homepage, you can find a navbar with a logo that will always take you to the homepage. On the navbar, you can find how to make a booking request, how to navigate to the barber's section and the gallery section or even the price section.

Directory Structure and File Naming

HTML

• I name the homepage index.html so it can display it when I deploy it on GitHub.
• Gallery.html because it's a gallery.
• Price.html because it's where you can find the price.

CSS

I wanted it to be easy to find where I should change so I made 3 CSS files. style.css, header.css, and footer.css. Every change on the header goes to header.css and every change on the footer goes to the footer.css. The rest of the body and CSS goes to style.css.

images

As you can see I have named the following images after the positioning of the website.

• barber_# is on the cards of the homepage.
• gallery_# comes in the gallery page.
• h/p_parallax, h=homepage and p=pricepage.
• nav_logo goes to the navbar and is the logo of the website.
• slide# are the images for the carousel.

testing / User stories

• Navbar.

Works well I have tested it in all forms of devices.

The Navbar makes it easy for the user to locate through the site of the 3 different pages. Also Containing the Book now button making it possible for the user to book a time at any time using the website.

• Book now/ Booking Form.

The Book now button does as I was expecting. When you click on it the booking form pops up. If you fill in the booking form and press the Book now button in the form, the information will be sent to my email("as the barber") with the information of the Name, Time, Location, and E-mail address. After that a confirmation will be sent to your e-mail address also with the text "Success" showing in the booking form, making it easy for the user to understand that his use of the booking form has been successful.

• Carousel slides.

The Carousel slides works. If you click on the right side of the picture or vice versa it will slide to that side and show a new image.

Its a feature making it easy for the user to understand the purpose of this website just by looking to the relevant pictures.

• Jumbotron.

Works well and is responsive. The popup button on the jumbotron works well. This feature is for the user to read relevant information for the moment and also a fun way to receive a discount by pressing the 'Just now!' button.

• Parallax-effect.

The fixed image works very well I have tried it in GitHub pages and it displays as it should.

I have done this for the user to recognize this as a modern type of page also making it easier for the user to remember this page in general.

• Barbers on cards with image and description.

The image is displaying and is responsive.

This is a good way for the user to get to know which barbers work in the saloons and what their specialties are.

• Gallery section.

Images are displaying and are responsive and the quality is the same on a smaller device.

This is for the user to see relevant picture to imagine themselves in that seat or moment, making it easier for them to press the "book now" button

• Price section with description and new price.

You can see the new price and the deleted ones. The test worked well.

The prices are there for the user to see what the prices are now compared to before. Showing them a finical opportunity to take and making it easier for them to press the "book now" button.

• Social Media section.

The icons work very well, when you click on the social media icons a new page opens and directs you to some random barbers social media page.

This feature is a way for marketing the website through social media, and the user that likes to use social media can follow us easily with these icons.

• footer (about us, location, hours and Google maps).

The footer works good and the tags on the section works when you click on them making it easier for a call or email. The Google Maps API works well and the markers on the maps are located where I want them and if you click them a message will pop of "F.F in (location)"

In the footer section, the user can find 4 different columns with our contact information, our hours, our locations and a visual showing of our locations with google maps.

• javaScript Code testing with leap work. Result = Works Well.

• HTML, tested through the site in different sections and features of the site. Result = No Errors.

• CSS, tested through the site also with a validator. Result = No Error.

Deployment

Wrote the code on Gitpod and deployed it on Github and Github Pages.

The difference between the deployed site and the first version development is mostly the colors and sizes of the content.

Credits

In this project, I want to give credit to Bootstrap for the amazing frameworks. https://getbootstrap.com/docs/4.4/getting-started/introduction/

I want also to add a special thanks @w3newbie for his amazing tutorial on bootstrap that you can find on youtube. https://w3newbie.com/

W3schools has helped a lot also in this project, for example of the parallax effect. https://www.w3schools.com/

The biggest of thanks will go to Google for every small solution I have found there. https://www.google.com/

Great place to find different solutions https://www.stackoverflow.com/

https://www.leapwork.com/

Media

The photos used in this site were obtained from https://unsplash.com/

Code Institue ©SaintHuddinilow.com/

https://www.leapwork.com/

Media

The photos used in this site were obtained from https://unsplash.com/

Code Institue ©SaintHuddini