Project bonsai is a website to help people to learn more about Bonsai.

On the index page I used images and text going around the image, and then on types was used cards with animations to create some movement, furthermore on form, it is the area to subscribe and get more information. Footer we have links for our main social media.

Bonsai page

Types page

Contact Us

• HTML
  • The structure of the Website was developed using HTML as the main language.
• CSS
  • The Website was styled using custom CSS in an external file.
• Codeanywhere
  • The website was developed using Visual Studio Code IDE
• GitHub
  • Source code is hosted on GitHub and delpoyed using Git Pages.
• Git
  • Used to commit and push code during the development opf the Website
• Font Awesome
  • Icons obtained from https://fontawesome.com/ were used as the Social media links in the footer section.
• Favicon.io
  • favicon files were created at https://favicon.io/favicon-converter/
• balsamiq
  • wireframes were created using balsamiq from https://balsamiq.com/wireframes/desktop/#

All pages were tested to ensure responsiveness on screen sizes from 320px and upwards as defined in WCAG 2.1 Reflow criteria for responsive design on Chrome, Edge, Firefox, Opera, and Safari browsers.

Steps to test:

1. Open browser and navigate to Bonsai Project
2. Click on Bonsai
3. Load page

Expected:

Load a xxx.html page properly

Actual:

Load a xxx.html page properly without any issues

Developer tools from Chrome was used throughout development and for final testing of the deployed website to check for any aid accessibility testing. Using diferents screen sizes and device simulator

-Navigation Links

Testing was performed to ensure all navigation links on the respective pages, navigated to the correct pages as per design. This was done by clicking on the navigation links on each page.

Links on all pages navigated to the correct pages as exptected.

-Index Testing

The form on the home page was tested to ensure it functioned as expected when correct data was input and when incorrect data was input. The following test scenarios were covered:

Steps to test:

1. Open browser and navigate to Bonsai Project
2. Click on Bonsai
3. Load page

Expected:

Load a index.html page, with a bonsai image and text around

Actual:

Load a index.html page without issues, with a bonsai image and text around

-Types Testing

The form on the home page was tested to ensure it functioned as expected when correct data was input and when incorrect data was input. The following test scenarios were covered:

Steps to test:

1. Open browser and navigate to Bonsai Project
2. Or Click on types at the Navegation Menu
3. Load page
4. Mouse over the image
5. The animation should go bottom up smootie and show more information
6. Clincking on on the link More, should bring you to form for subscription

Expected:

Load a types_bonsai.html page, with a tree bonsai image, a short description and a link for More (For form subscription)

Actual:

Load a types_bonsai.html page without issues, with a tree bonsai image, a short description and a link for More (For form subscription)

-Form Testing

The form on the home page was tested to ensure it functioned as expected when correct data was input and when incorrect data was input. The following test scenarios were covered:

-Scenario One - Blank Inputs

Steps to test:

1. Open browser and navigate to Bonsai Project
2. Or Click on Contact Us
3. Load page with form
4. Press Subscribe without fill the fields

Expected:

Load a contact_form.html page, with a form, and then you press subscribe without filling the field should return a message for each field

Actual:

Load a contact_form.html page with a form without issues, and then was pressed subscribe button without filling the field, Form returned the message for each field was missing

-Scenario Two - Correct Inputs

Steps to test:

1. Open browser and navigate to Bonsai Project
2. Or Click on Contact Us
3. Load page with form
4. Press Subscribe filling the fields properly

Expected:

Load a contact_form.html page, with a form, and then you press subscribe filling the field corretly should return thank you

Actual:

Load a contact_form.html page with a form without issues, and then was pressed subscribe button filling the fields properly, and then was returned the message thank you

-Footer Social Media Icons / Links

Testing was performed on the Font Awesome Social Media icons in the footer to ensure that each one opened in a new tab and that each one had a hover affect of the orange branding color.

Each item opened a new tab when clicked as expected and correct hover color was present.

• HTML
  • No errors were returned when passing through the official W3C validator

• CSS
  • No errors were found when passing through the official (Jigsaw) validator

Responsiveness of the website was tested on Safari MacOs and IOS, Chrome, and worked perfect in diferents resolutions.

The site was created using the Codeanywhere editor and pushed to github to the remote repository ‘project_bonsai’.

The following git commands were used throughout development to push code to the remote repo:

git add <file> - This command was used to add the file(s) to the staging area before they are committed.

git commit -m “commit message” - This command was used to commit changes to the local repository queue ready for the final step.

git push - This command was used to push all committed code to the remote repository on github.

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the menu on left select 'Pages'
  • From the source section drop-down menu, select the Branch: main
  • Click 'Save'
  • A live link will be displayed in a green banner when published successfully.

The live link can be found here - https://jrakau.github.io/project_bonsai/

Navigate to the GitHub Repository you want to clone to use locally:

• Click on the code drop down button
• Click on HTTPS
• Copy the repository link to the clipboard
• Open your IDE of choice (git must be installed for the next steps)
• Type git clone copied-git-url into the IDE terminal

The project will now of been cloned on your local machine for use.