This site informs the visitors to Wakehurst Place where to go and what kinds of plants, trees and shrubs Kew Gardens are growing and keeping for their seed bank.

• Wakehurst Place
  • Features
    • Existing Features
    • Future Features
  • UX
    • Site Purpose
    • Site Goal
    • Visitors
    • Communication
    • User Goals
    • Site Administration Goals
  • [Design]
    • Colour Scheme
    • Typography
    • Imagery
    • Pages
  • Testing
    • Manual Testing
    • Validation Testing
    • Bugs
  • Technologies Used
    • Main Languages Used
    • Programmes Used
  • Deployment
    • Using GitHub pages
    • How to Fork it
    • How to Clone it
    • Making a Local Clone
  • Credits
    • Content
    • Media
    • Code

• Navigation Bar

• Home Page

• Early History of Wakehurst Page

• Today at Wakehurst Page

• History of Wakehurst Page

• Comments Page

• Maps Page

• Placing text regarding information about the restaurant and cafés on a seperate area when viewed on Tablet or Iphone.
• Placing images in one column when viewed on Tablets and Iphone.
• Responsive navigation bar for Tablet and Iphone.
• Contact information for Wakehurst Place.
• Updating the name field in the comments page to exclude numbers.

Top of Page

To provide upto date information of Wakehurst Place and Kew Gardens with external links to the website of Wakehurst.

To keep the visitors updated with new attractions and future events.

Visitors can see some of the views of the landscape of Wakehurst Place and the surrounding landscape.

The individual people which complete the Comments form are able to give their views of Wakehurst and will aid the planning of future action taken at Wakehurst.

The personal information taken will be safeguarded and will used for demographic purposes.

• To find what new attractions there are at Wakehurst and where to go with the Maps.
• The site can be used to obtain upto date information from other websites.
• The ability to navigation between pages on all devices easily.
• To be motivated to find out about Wakehurst Place if the mansion or part of the gardens are closed.
• The responsive design can be viewed on other devices other than laptops and Monitors.

• To keep the sight up to date.
• To keep the images up to date and relevant.
• To obtain visitor feedback with the contact form.

Top of Page

The colour scheme was chosen to compliment Wakehurst Place and Kew Gardens. Most of the colours were used and the background colour 'Whitesmoke' was used.

• Old English Text MT, Sans-Serif for navigation and h1 headings.
• Avenir Next LT Demi bold, Sans-Serif for h2, h3 and h4 headings.
• Calibri, Sans-Serif for paragraph text.

All images were taken by myself with the exception of the images on the pages of the early history and History of the Mansion. Those images were downloaded from Google Images. All images were selected to support the information presented on the relevant pages.

The blocks of white are picture holders

Home Page

Early History Page

Today at Wakehurst Page

History of the Mansion Page

Comments Page

Maps of Wakehurst Page

Top of Page

• The website was continually updated as it was developed. I tried to use the dev tools while using Code Institute’s gitpod on Chrome. It would not be successful each time, as I had to change the password each time I tried to use Chrome.

• The only time I was successful was when I copied and pasted the html and css code onto the html and css sheets on Visual Studio 2022 and saved everything. I right-clicked the index.html and deployed Chrome, Opera and Firefox.

• Tested the comments page with and without inputs in all fields.

• Tested all links on all pages.

• Verified the comments form is unable to be submitted with the required information (Name, Email, radio buttons and checkboxs clicked and the comments section).

• Website tested in Firefox, Opera, Edge and Chrome.

Index Page

Early History Page

History of the Mansion Page

Comments Page

Maps Page

• The relevant page will open
• Clicked each menu link
• Taken to selected Page

• External links will open
• Click on icon
• Taken to selected site in new tab

• If the required field are left blank, the form will not submit. The fields will display messsages
• Incomplete form
• A message will be displayed to make sure the correct information is filled in

• When the submit button is pressed, the form submits
• Complete form and click button
• Information is sent and form cleared ready for more inputs

• HTML

  • Some errors were found but corrected while on the official W3C Validator.

• CSS

  • One error was found but corrected while on the official (Jigsaw) Validator.

Earlier in the testing phase, I found that was found in the correct place but was not. I found was below

I slipped a piece of code into the css sheet and commit it. I realised what happened and corrected the error. W3C css validator caught a missing '}'. I relplaced the '}' and the error was corrected.

During the development of the website, I always had a local copy of the website I could refer to when needed. When issues arose, I looked through books on HTML and CSS to confirm ideas I knew could correct the problem or take the suggestions in the books so that the website would function better and the coding would be easy to read.

I could not confirm that the website was working correctly on an iPhone or tablet needed for the course. I have a Galaxy Tab and phone. The website on my tablet and phone reacts the same as when I simulate the tablet and iPhone on the laptop.

Top of Page

• HTML
• CSS

• Gitpod to create my HTML files and CSS styles sheet before committing and pushing the project to GitHub.

• GitHub to store my repository for submission.

• Affinity Designer to make the primary look for each page.

• Affinity Photo to design the main picture with the inserts of the project’s home page projected onto the screen of the electronic devices.

• Basic Markdown cheat sheets to complete the Readme file.

Top of Page

In the GitHub Repository from the project

[Wakehurst Place][def]

1. Click the 'Settings' Tab
2. Scroll down to the GitHub Pages Heading.
3. Select 'Main Branch' as the source.
4. The page will reload 'Settings' again.
5. Scroll down to GitHub pages headings and there will now be a clickable link. https://github.com/dnashwilton/Wakehurst-Place/
6. Click on the link for the live deployed page.

1. On GitHub go to https://github.com/dnashwilton/Wakehurst-Place.
2. In the top right, click 'Fork'.

1. Go to the main page of the repository.
2. Above the file list, click 'Code'.
3. Select HTTPS, SSH or GitHub CLI and then click 'Copy' to clone it.
4. Open Git Bash.
5. Change the location of your cloned repository.
6. Type git clone and then paste the URL you copied.
7. Press 'Enter' to create your clone.

1. Locate the Reposity.
2. Click 'Code'.
3. Click 'Clone' or 'Download'.
4. Copy the Git URL from the dialogue box.
5. Open a terminal window in your chosen directory using your preferred development editor.
6. Change the location to where you want the cloned directory to be.
7. Type git clone, and paste the URL you copied.
8. Press 'Enter', and your local clone will be created.

Top of Page

The basic setup of the pages was based on the websites of the National Trust, Wakehurst Place and Kew Gardens. As I based the project on Wakehurst Place, I looked at their website more. I chose a forest pallet with the colours of the different species of trees and sky.

The navigation and footer style of coding I took from Love Running and Percipio. Percipio was the website I was learning from before beginning the course with Code Institute.

The images on the Early History and History of the Mansion are from Google images. The images and MP4's on the other pages are mine. These were taken on a Pentax K70 with 18-55mm and 55-200mm zoom lens and 50mm prime lens.

The resources that were used in the project:

Sams TeachYourself HTML, CSS, and JavaScript (THIRD EDITION)

Mike McGrath HTML, CSS & JavaScript (Special Edition)

All photos and mp4's are mine except for images on pre-history.html and mansion.html. Saved my photos and mp4's on https://dnashwilton.imgur.com/all/, onedrive, C://, usb and portable harddrives.

I have taken some of the text from Wakehurst, Kew Gardens and various sources from Goggle. I have then rewritten some of the information in my own words. I have run the documentation through the microsoft editor for word 365 and grammerly and found that a small percentage is in the text.

My thanks to my mentor Martina for the help and encouragement she gave me while I was developing this project.

Top of Page