Link to live project

The Machinery World website is a site to advertise a fictional construction machinery theme park. Machinery world is a theme park where, kids age 8 and over, and adults can experience driving any construction equipment they choose. To get a feel for what it's like to run machinery first-hand. The site is mainly targeted at adults that may want a fun day out for their family or just themselves, there is an image gallery to show some of the machinery available and the applications they may experience while at the park.

Users of this website will be able to find all the information they need to know about Machinery world: What is Machinery World, opening times, safety procedures, contact information and a booking form. This site is targeted toward parents that think their child would enjoy the experience of driving construction equipment or that they may themselves enjoy the experience.

The ideal client for this page is an adult seeking a fun day for themselves/ their family.

• Be a parent.
• Have disposable income to book.
• Live in Ireland where the theme park is located (travelling distance to the park to make a day trip)
• Have an interest in construction equipment or an interest in experiencing operating construction equipment

• Understand what machinery world is and the services the park provides.
• Be able to easily navigate through the site to find what they are looking for.
• View the site and easily navigate to and understand the booking form.

• Quickly be able to navigate to the section of the site you wish to view/use.
• Quickly be able to navigate to the booking form and book an experience.

• Homepage Wireframes
  
  
  


• Gallery Wireframes
  
  
  


• Book Now! Wireframes
  
  
  

• All images throughout the site are of construction machinery, as it is a construction equipment-based theme park. I tried to use the most eye-catching pictures I could find of the machinery that would best display how the machinery operated and catch the eye of the user.

• For the colours of the webpage I went with a dark background and a light text colour as I felt this would stand out to the user and as most of the images had a lighter background, they would stand out more to the user.

• For the fonts, I used Google fonts. For the logo, I used 'Stalinist One' as it is a big blocky font that I felt would fit well with the type of logo I wanted for the website, all other text on the site is 'Roboto' as I felt it flowed well throughout the site and is very readable for a user.

• Google Fonts
  • I imported fonts from Google fonts to style the website.

• Font Awesome
  • I imported icons from font awesome to style the website.

• HTML
• CSS

• Header
• The Header displays a logo of the theme park and contains a navigation link for users to easier navigate the website.
• Navigation
• The navigation is featured at the top of the page to make it easy to access and is immediately visible to the user, the logo itself is a navigation link which returns to the home page which is located in the top left of the page, other navigation links are located in the top right of the page.

• About us
• The About us section of the page gives the user a brief introduction to the company and the services it provides, outlining when the park was established and what they aim to do.

• Services
• The Services section of the page gives the user a brief overview of what the company does and the services we offer to the user.

• Gallery
• The Gallery page gives the user a selection of images of the equipment they can operate and some of the applications of the equipment.

• Book Now! Form
• The "Book Now!" form page gives the user a way to book an experience throught the page, they can select the type of machinery they would like to operate as well as the time and date they would like to do so. This page also has a section that the can add more machinery if they choose to do a full day experience, they can do so in the text input labelled on the page.

• A Contact us page with a enquiry form and all methods of contacting the business.
• An embeded map to show users where the theme park is.
• Indivual pages for each machine and the applications of each particular machine, showing user clearly what to expect from their experience and help them choose which experience suits them best.
• If all other possible features were implemented, the site would required an improved nav bar. Including a drop-down menu for the machinery list to navigate through those pages.

• HTML Validator
• index.html result
• gallery.html result
• booknow.html result

• CSS Validator
• style.css result

The site has been tested on the following browsers:

1. Google Chrome, Version 102.0.5005.115 (Official Build) (64-bit)
2. Firefox, Version 102.0.5005.115 (Official Build) (64-bit)
3. Microsoft Edge, Version 102.0.1245.41 (Official build) (64-bit)
4. Safari on iOS, version 15.4 (iPhone, iPad and iPod)(Tested on iPhone XR)

Additional Testing

• I got friends and family to visit the site on their own devices and give me feedback on the functionality of the page and the result was they could navigate the site easily on their devices and all links worked.
• I manually tested all links to ensure that they bring the user to the intended page and/or section of the page.
• I Used Devtools in Google Chrome, Version 102.0.5005.115 (Official Build) (64-bit), to ensure that the elements of my page were responsive through all screen sizes and to test that links still functioned as they should.
• I confirmed that all content of the pages was easy to read and understand for the user, with clear headings to signal to the user where the content was and what it related to.
• I confirmed my form functionality by running it with the correct information, and then incorrect information as a control to ensure the inputs were correct and working correctly.

First time visitors:

1. Understand what machinery world is and the services the park provides.
   • On the Landing page of the site there is a brief but clear description of what machinery world is, where it began and when it began.
2. Be able to easily navigate through the site to find what they are looking for.
   • On each page of the site, there is a nav bar to easily navigate between pages.
   • The logo, if clicked, also returns the user to the Homepage of the site.
3. View the site and easily navigate to and understand the booking form.
   • The site is easily viewed on a wide range of devices with media queries added to make it accessible on all devices.
   • The Book Now! form page can be easily located and navigated through the nav bar on all pages with the link labelled "Book Now!".
   • The Form page is easily understood as it is clearly labelled to show the user what is required in each field, any fields that are required to be filled in by the user will also prompt the user to fill them in before allowing them to submit the form.

1. Quickly be able to navigate to the section of the site you wish to view/use.
   • The nav bar on each page makes moving to whatever page the user wishes to visit very quick and simple to do.
2. Quickly be able to navigate to the booking form and book an experience.
   • The user can navigate straight to the booking page by clicking the "Book Now!" link in the nav bar of any of the pages.
   • The Booking form is simple and straight forward making it easy for the user to book an experience quickly and easily.

Homepage

1. Logo Homepage link
   • Go to website "Home" page in web browser.
   • Click the "MACHINERY WORLD" logo in the upper left of the webpage to verify it links to the homepage of the site.
   • Use devtools to adjust screen sizes up and down to verify that the logo and its positioning are responsive.
2. Nav Bar
   • Verify that the bottom border is applied to only the "Home" link, to show that is the page currently active.
   • Hover over nav bar links to ensure that the red text colour is applied to the item hovered over.
   • Click on the link in the nav bar to ensure they lead to corresponding pages. "Home" takes you to the homepage, "Gallery" takes you to the gallery page and "Book now!" takes you to the booking form page.
3. Footer social media links
   • Hover over social media links within the footer to ensure the icon colour change to red when the icon is hovered over.
   • Click each social media link to verify that each link brings you to the correct page. The Facebook icon takes you to the Facebook homepage, the Twitter icon takes you to the Twitter homepage, the YouTube icon takes you to the YouTube homepage and the Instagram icon takes you to the Instagram homepage.


4. Responsiveness of entire Homepage
   • Use devtools to adjust screen sizes up and down to verify that the entire homepage is responsive and looks good on all screen sizes.

1. Logo Homepage link
   • Go to website "Home" page in web browser.
   • Click the "Gallery" link in the nav bar located in the upper right of the webpage, to load the Gallery page.
   • Click the "MACHINERY WORLD" logo in the upper left of the webpage to verify it links to the homepage of the site.
   • Return to "Gallery" page using the nav bar again.
   • Use devtools to adjust screen sizes up and down to verify that the logo and its positioning are responsive.
2. Nav Bar
   • Verify that the bottom border is applied to only the "Gallery" link, to show that is the page currently active.
   • Repeat same test on nav bar elements as previously performed on Homepage nav bar section.
3. Footer social media links
   • Repeat same test on footer elements as previously performed on Homepage footer section.
4. Responsiveness of entire Gallery
   • Use devtools to adjust screen sizes up and down to verify that the entire Gallery page is responsive and looks good on all screen sizes.
   • Verify that rows and columns count adjusts according to screen size.

1. Logo Homepage link
   • Go to website "Home" page in web browser.
   • Click the "Book Now!" link in the nav bar located in the upper right of the webpage, to load the Gallery page.
   • Click the "MACHINERY WORLD" logo in the upper left of the webpage to verify it links to the homepage of the site.
   • Return to "Book Now!" page using the nav bar again.
   • Use devtools to adjust screen sizes up and down to verify that the logo and its positioning are responsive.
2. Nav Bar
   • Verify that the bottom border is applied to only the "Book Now!" link, to show that is the page currently active.
   • Repeat same test on nav bar elements as previously performed on both Homepage and Gallery page nav bar sections.
3. Booking Form Inputs
   1. First Name
      • Click the text input box for "First Name:" and type a name to verify the name is clearly visible within the text box.
      • Leave "First Name:" field blank and click "BOOK NOW!" button to verify that field is required. (shows error message if not filled in)
        
   2. Last Name
      • Click the text input box for "Last Name:" and type a surname name to verify the name is clearly visible within the text box.
      • Correctly fill in fields before but leave "Last Name:" field blank and click "BOOK NOW!" button to verify that field is required. (shows error message if not filled in)
        
   3. email address
      • Click the text input box for "email address:" type text without @ symbol and click the "BOOK NOW!" button to verify the entry has to be an email address. (shows an error message when any other input than an email address is entered)
        
      • Correctly fill in fields before but leave "email address:" field blank and click "BOOK NOW!" button to verify that field is required. (shows error message if not filled in)
        
   4. Radio Buttons
      • Correctly fill in fields before but do not select a radio button and click "BOOK NOW!" button to verify that field is required. (shows error message if not filled in)
        
      • Select the first radio button to ensure it highlights the button you have chosen.
      • Select the first radio button, then click the second radio button to ensure it selects the new button and overwrites the original selection.
      • Repeat previous step until radio buttons are exhuasted to ensure they all work uniformly.
   5. Additional Machinery Selection
      • Correctly fill in fields before but leave the "multiple-machines" field blank to ensure this is an optional field. (does not show an error message as is not a required field)
      • Choose the first item on the drop-down list to ensure it inserts this option into the input field.
      • Repeat the previous step for each item in the drop-down list to ensure they all work correctly.
   6. Date Selection
      • Correctly fill in fields before but do not select a date and click "BOOK NOW!" button to verify that field is required. (shows error message if not filled in)
        
      • Choose a date to ensure it does not show an error message and that the input is working correctly.
   7. Time Selection
      • This is a select input so it automatically displays the lowest value, correctly fill out the previous input and click "Book Now!" to ensure the "Select a time" field is working correctly.
      • Repeat the previous step for each select option in the "Select a time" field to verify they all work correctly and produce to right time when selected.
4. Footer social media links
   • Repeat same test on footer elements as previously performed on both Homepage and Gallery page footer sections.
5. Responsiveness of entire Book Now! Page
   • Use devtools to adjust screen sizes up and down to verify that the entire Book Now! page is responsive and looks good on all screen sizes.

My mentor pointed out that on smaller screen sizes my website was creating a horizontal scroll, which I had not intended and was not ideal for the page layout.

We determined this horizontal scroll was created by a logo overflowing out of its parent element.

to solve this I reduced the font size for the logo in a media query for smaller device screen sizes.

This fixed the problem and now the site functions as intended on all screen sizes.

To my knowledge, there are no unsolved bugs on the site.

This site is hosted by GitHub Pages and deployed directly to the master branch. The deployed site will update if after new commits are made, they are pushed to GitHub pages using the "git push" command in the terminal. The Homepage is named index.html to ensure it deploys correctly through GitHub pages.

To deploy the site to GitHub pages I took the following steps:

1. I logged in to Github.
2. I selected "dnolan1993/machinery_world_" from my repositories.
3. I selected "Settings", to the right hand side of the nav bar.
4. I selected "Pages", lower left on the screen.
5. I selected "Main" in the branch dropdown menu, within the "Source" section.
6. I refreshed my page using "ctrl+shift+r" to perform a hard reload of the GitHub web page.
7. GitHib pages then display a page with a banner stating "Your site is published at https://dnolan1993.github.io/machinery_world_/"
   

• All images used in this site are stock images sourced from pexels.com

• I used the code for the footer element from the Code institute practice project "Love Running"

• I used the code for the footer element from the Code institute practice project "Love Running"
• I also used the code for styling the gallery page in a masonary layout from the Code institute practice project "Love Running"

• I used the code for the footer element from the Code institute practice project "Love Running"