This website was created as an informational site where new and old space adventurers from any galaxy can come and find infomation regarding the historical 1969 Apollo 11 moon landing!

• User Experience (UX)
• Design
• Features
• Languages
• Programs Used
• Testing
• Deployment
• Cloning
• Credits

The intended audience is for children (7+) an adults of all ages.

• have an easy understanding of what the page is about.
• be easy to navigate around.
• have historical infomation about the the 1969 lunar landing.
• have a picture gallery.

• have a sign up page.
• have social media links that open in another tab.

• have an updated gallery.

The design was kept simple so it could be navigated and accessable to children and adults

• #021024 which is a dark navy and was used as the background color across all the pages.
• #008080 which is the color teal and it was used for the menu bar, social media links, text links to external pages, some text shadow, borders and Submit & Home buttons.
• #FFFFFF which is white was used for font.
• #F5F5F5 which is whitesmoke was used for some text shadow.

• The header contains a Font Awesome icon and an Apollo 11 logo on the top left of the page. That can be used to return the homepage when clicked. It also cantains the hamburger menu bar on the top right of the page.

• The landing page has a moon png and a welcome message overlay.

• After clicking the hambuger menu the user will be presented with a menu side bar where the user can navigate between Home, Gallery and Sign Up pages

• The gallery contains six photos related to the lunar landing. They are stacked in a verticle column.

• The footer contains links to four social media sites. They open up in a new tab so it does not interfere with user experience.

• Sign up page has a username, email, password input and a submit button where the user can stay up to date with the page.

• After the submit button is clicked/pressed, a subscribed card pops up. Inside, it contains a thank you message and a return to Home button.

HTML & CSS was used in creating this site

• GitPod was used as the main Language Editor for programming the website.
• GitHub was used to backup instances of GitPod Workspaces at intervals.
• Validator.w3 was used to validate the HTML code.
• Jigsaw.w3 was used to validate the CSS code.
• Webfx was used to display the Hex color chart used in the Design section.
• Resize Images is a plugin for the MacOS app called Dropzone4 which was used for resizing the images for the site.

I tested this site across Google Chrome, Firefox & Brave and the site fully responsive across all three browsers.

I tested the site on mobile and the content adapted well to different screen resolutions for Samsung Note 20 & iPhone 12 Pro.

• HTML

4 errors where found relating to the Hamburger Menu WSC Validator

• CSS

No errors where found across any pages Jigsaw Validator

For deployment of the website to a live publicly accessible website, the following steps were required:

• Confirmed that correct repository is selected as 'PP1'.
• Select 'Settings'.
• Scroll down to 'GitHub Pages' and click on 'Check it out here!'.
• On the 'Source' section, select Branch as 'main' and click on 'Save'.
• Your site is published at 'https://gordonbates.github.io/PP1/index.html'

For deployment of the website to a local environment, the following steps are required:

• Confirmed that correct repository is selected as 'PP1'.
• To run a new Python server, open a terminal window and type the following code and hit enter: python3 -m http.server
• Once the Python server is running, you will be prompted to open a browser on port 8000 to show the output.

To clone a copy of the code in the repository, the following steps are required:

• Go to https://github.com/gordonbates and select the Repository called 'PP1'
• Click on the button called 'Code" and a pop-out window will show options to Clone through:
• • HTTPS
  • SSH
  • GitHub CLI

1. On GitHub.com, navigate to the main page of the repository.

2. Above the list of files, click Code.

3. To clone the repository using HTTPS, under "Clone with HTTPS", click 'Clipboard to copy'. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click 'Use SSH', then click 'Clipboard to copy'. To clone a repository using GitHub CLI, click 'Use GitHub CLI', then click 'Clipboard to copy'.

4. Open the Terminal.

5. Change the current working directory to the location where you want the cloned directory.

6. Type > git clone and then paste the URL you copied earlier. $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter to create your local clone. $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY Cloning into PP1... remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remove: Total 10 (delta 1), reused 10 (delta 1) Unpacking objects: 100% (10/10), done.

8. Repository Clone is now complete.

When testing on ios and Safari the Hamburger Menu was unresponsive.

• The information text on the home page was sourced from Wikipedia
• The icons on footer, logo(home), and subscription success box where taken from FontAwesome

• The moon png is from Open Source site
• The astronaut png is from Open Source site
• Images in the gallery is from Open Source site
• HTML & CSS png is from FavPNG