View the live project here.

The image is from Am I responsive?

Santos Body Repairs is a website designed to showcase and advertise this very successful business located in Co. Galway. Its main goal is to provide useful information on the services it provides, before and after photos of past projects, opening and closing times, location, and a contact form.

• To increase brand awareness.
• • To Increase clientele.
• To encourage potential clients to make a contact.

• To find important and useful information about the business.
• To find an affordable and reliable garage to fix their vehicle.
• To seek evaluation of their vehicle and to create price estimates.
• To view evidence of past projects and find reassurance
• To establish contact with the business.

I aimed to create a website that is simple and easy to read and follow. All without providing too much information and being too overwhelming.

• English Speaking
• Located in Co. Galway
• Vehicle owners
• Values and supports local businesses

• Navigate easily through the website
• Get the information they need quickly
• Get to know the business and the services it provides
• Find its location easily
• Give peace of mind that their vehicle is in good hands

1. As a new visitor, I want to easily navigate the site to find whether the garage is the best place for the job on my car.
2. As a business/car owner, I want to find whether the garage is trustworthy and reputable by seeing what previous projects they worked on.
3. As an interested client/business, I want to be able to contact the garage easily.
4. As a potential client, I would like to learn more about the businesses works and get validation through their history and presence in their social media accounts.
5. As a business/visitor, I want to be able to find the contact information and location to get the information needed to contact and vissit the garage.

To achieve my goal, I included the following features my website:

• Header containing the garages logo and the menu bar including Home, Gallery, and Contact.
• Home page which gives information about the garage for brand awareness.
• We are here for you ethos detailing the garage's believes and opening times.
• List of services provided right on the home page.
• Free call-in service availability on the home page with a button to take the user to the Contact Us page.
• Free call-in service availability on the home page with a button to take the user to the Contact Us page.
• Top Tip video from youtube giving some care tips for a brand new paint job.
• Contact Us Page with a contact form, contact details.
• Where to find us with a google map pinning its location.
• Footer containing the links to the garage's social media accounts.

The website consists of 3 pages. Home, Gallery, and Contact Us. The Home page introduces the visitor to the business and gives it the main information needed. The Gallery shows the visitor past projects and helps the visitor identify if this business is right for them. Contact Us page allows the visitors to fill out a contact form if they do not wish to use the contact details provided. Please note that the finished website has some layout changes. Wireframes were used to give me just a basic idea.

• Web view

• Tablet view

• Phone view

The logo is centered in the background and the background image of the color spill was chosen to represent the cans of paint used every single day. Image having a black background, the business owner has chosen a red body background with black and white text.

The header consists of three pages; Home, Work and Contact. The header contains a logo and menu option on the top left of every page. This will create consistency throughout the page and the user can access the information through the menu bar and move around the site. The links remain active when in active page. The logo is fully responsive and re-directs to the main home page.

On every page, the footer contains social media icons which when clicked open in a new tab on the social media website.

The Home page contains a We are here for you section that contains the business's ethos. To give reassurance to the visitor that their vehicle in good hands, followed by opening times. Another section of that page is the Services Section. Its background is of a garage space filled with cars and centered in the image is of a BMW. On top of this image, we have a list of services they provide. Then there is a Free Call-in Service advertisement with a call for action button which brings the visitor to the Contact Us page to initiate contact.

The Gallery page features images in 4 columns wide for laptop and desktop, 2 for tablets, and 1 column wide for mobile devices. Each image can be clicked to open a fancybox window to view further images of each project. At the bottom of the page, there is a Youtube video giving tips on how to take care of a new paint job to give a fun factor to the page and the visitors.

Here we are greeted with a Get in touch form. Its purpose is to allow the customer to receive a call back from the business if they are unable to reach the business using the contact details provided. We are featuring the contact details centered right under the contact form so that it hits the visitor straight in the eye and avoids them looking for it on the page. Under this is the Where to find us section containing the garage's address and a google map pinpointing its location.

• Option to choose the language of the website from English to Portuguese. As the business owner is a Native Brazilian speaker, this would allow catering to the Portuguese-speaking community located around Co. Galway who maybe do not have any English to initiate contact.
• Showcase other projects that the business is doing like tractors, vans, and busses. This content was not available at the moment.
• Careers Page where vacancies could get advertised and maybe an opportunity to enroll in a partnership program.

• Balsamiq I used the low-fidelity wireframing tool to create structure of the website layout.
• GitpodI used this developer to write the code for this website.
• Github Was used to host my code that was created and pushed to Gitpod.
• Google Fonts Was used to style the website's fonts.
• Bootstrap Was used to make the website responsive in various platforms.
• Fontawesome The use of few icons from this website were used to make the website more appealing.
• Fancyboxhis was used to help create the website's gallery.
• jQuery The website used jQuery to supply to JavaScript linked needed to the Fancybox gallery.
• TinyPNGI used this website to compress my images to improve website loading times.
• W3C Markup Validation Service Was use to check the markup of the web documents in HTLM.
• W3C jigsaw Validation Service Was used to chech and validate the CSS in my project.
• Chrome Dev ToolsWas used to inspect any issues and inspect the responsiveness of the website.
• a11y Contrast Checker This was used to make sure that the project meets visual standards.
• Google MapsThis has been used to allocate the map to the Contact Us page.

1. As a new visitor, I want to easily navigate the site to find whether the garage is the best place for the job on my car.

• The user can navigate the website through the navigation bar.
• The logo will take the user back to the home page.

2. As a business/car owner, I want to find whether the garage is trustworthy and reputable by seeing what previous projects they worked on.

• The user can view past projects in the gallery page. They can then decide whether the business is for them.

3. As an interested client/business, I want to be able to contact the garage easily.

• In the Contact Us page contact form and contact details are all centered so that they hit the users focus when entering the site.

4. As a potential client, I would like to learn more about the businesses services and get validation through their history and presence in their social media accounts.

• On the Home page, the user can see a list of services provided.
• In the footer on every page, centered are the social media icons. When clicked, they take the user to a specific social media account.

5. As a business/visitor, I want to be able to find the contact information and location to get the information needed to contact and vissit the garage.

• On the Contact Us page, the user is greeted with contact information, address and a google map pinpointing the location. When on a mobile device the google map can be used with gps to brig the user to the location.

I continuously used dev tools to inspect my website and check if it's responsive in different sizes. Everything looked perfect until after deployment. When viewing 320px small mobile devices in dev tools, there would be a red area on the right-hand side appearing. At first, it was due to a margin that was applied to the contact form. After fixing the margin, everything seemed to align right, but occasionally the red line re-appears. I am not sure f this issue is due to dev tools not being so reliable or due to some other issue I was unable to identify. In medium and large mobile devices this issue does not appear.

After many changes to the code, it finally passed the validation stage.

To ensure that a broad range of users can successfully view/use the site, I tested it across all major browsers on both desktop and mobile.

• Chrome
• Mozila Firefox
• Edge
• Internet explorer
• Safari

All written content has been created by me. Any media and videos have been sourced by :

• Pexels
• Carcosmetix.ie
• Google Images
• Youtube

• CSS code for shadows and hover responsiveness of gallery images was originally taken from Portrait Artist by A Greaves. View Here.

This project was developed using Gitpod, committed to git and pushed to GitHub using git commands. You can clone this repository using https://github.com/MiaTothova/santos-body-repairs

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. select the Settings tab in my GitHub repository.

2. Find GitHub Pages in the menu.

3. Choose the Master branch and save. After this refresh the page.

4. After the page re-freshed, I got a message "ready to be published".

5. After re-freshing after few seconds I got a "published" message.

6. Clicking on the link takes us to the deployed website.

I decided to make this website for my partner who owns a body repairs business in Co. Galway. The idea behind this website is to showcase his hard work ethic and advertise his business even more. I received my visual inspiration from:

• Carcosmetix.ie
• https://bodyworxrepair.com/
• https://autocentraluae.com/Service/body-repairs/

I just want to say big thank you to my mentor Guido Cecilio Garcia Bernal guided me throughout this project and to Kasia Bogucka our tutor at Code Institute, who helped me with problem-solving.