A simple HTML / CSS / JS site, with two pages, folder structure, header and sticky footer, using flexbox and bootstrap 5.

View the live project here.

1. Site Overview
2. Planning stage
   • Wireframes
   • Target Audiences
   • User Stories
   • Site Aims
   • Color Scheme
   • Typography
3. Current Features
   • Header
   • Home Page
   • Footer
4. Future-Enhancements
5. Testing Phase
6. Deployment
7. Tech
8. Credits
   • Honorable mentions
   • General reference
   • Content

• As a role I can action so that benefit*.

• Site Aim

Color scheme choice reasoning

Font style reasoning

Description of Header and Navigation: design, features

Description of Home Page: purpose, design, features

Description of Footer: design, features

• Future ideas that didn't make it into the project

• Responsiveness - A mobile-first approach was used to develop the site. The site was tested for responsiveness on different screen sizes throughout the development stages, using chrome dev tools, which allowed the page to be adjusted to display on small and large screen sizes with media queries. The site was also tested using multiple devices and adjusted to display correctly. ​

• Functionality - Each feature has been tested repeatedly during the production and testing phase. Examples ...

• Contrast - The contrast on the page was checked using the WCAG Color contrast checker plugin in chrome and found to pass the tests, after adjustments to the colours.

• Lighthouse - The site was checked using the Lighthouse chrome plugin.

​

• Validators - The W3C validator was used to check both HTML and CSS. JShint was utilised to check the javascript.

• Issue -

• Cause -

• Resolution -

• Issue -

• Cause -

• Resolution -

I deployed the page on GitHub pages via the following procedure: ​

1. From the project's repository, go to the Settings tab.
2. From the left-hand menu, select the Pages tab.
3. Under the Source section, select the Main branch from the drop-down menu and click Save.
4. A message is displayed to indicate a successful deployment to GitHub pages and provide the live link. ​ The live site can be found at the following URL - Rock, Paper, Scissors.

​ The following technologies were employed in the creation of the site: ​

• HTML
• CSS
• JS

• Team Member. Role.
• Team Member. Role.
• Team Member. Role.
• Team Member. Role.
• Team Member. Role.

• Fonts were sourced from Google Fonts.

• Icons for the social media links were sourced from Font Awesome.

• Wireframes were created using ... .