Sherpa Finder is a fictional website targeting both new and existing players in the video game Destiny who want help getting into and learning Raid content in the game. The website gives information about what we do, why we do it, how we help and a sign up form to let the players interested in getting our help reach out and sign up to our Sherpa Raids.

It's one single scrollable website that has been designed to be responsive and usable on a wide range of devices and resolutions.

Sherpa Finder - Live Link (Right click to open in a new tab)

• Features

  • Navigation Bar
  • Landing Page Image
  • About Us
  • How We Help
  • Sign Up
  • Footer
  • Future Implementations
  • Accessibility

• Typography

• Technologies Used

  • Languages Used
  • Frameworks, Libraries & Programs Used

• Deployment

• Testing

• Credits

• Featured at the top of the page, it's fully responsive on all resolutions and links to the Logo, Home Page, 'About Us' section, 'How We Help' section and to the Sign Up form.
• The Navigation Bar will help the user to find whichever section they are looking for across all screen resolutions and devices.

• The Landing Page introduces the users to Sherpa Finder with a beautiful image of Guardians (what players are called in-game) standing together in unity as a team.

• The 'About Us' section gives an introduction to what sherpa means if they are not famililar with the term and how it translates into Destiny, and what sherpas usually do in the game.
• It also describes why we exist, why we are needed and should encourage the users to contact us if they find them self in the situations that are mentioned.

• Gives the users a clear idea what we offer to them with our service and how to get it.
• Encourage the user to join our communities or various social platforms to either get help from us or meet people in similar situations as them, and give them a place to connect.

• This section allows the user to get involved and sign up to get help and join our Sherpas in getting to know, learning and doing the raids in a safe environment.
• The user will be able to specify which type of day suits them the best, and let us know which raid or raids they are interested in doing with us.

• Has social media icons with relevant links re-directing users to our social media platforms and encourages them to interact with us.

• A fixed header for easier/better access to the navigation of the website.
• A 'Meet the Team' page with various pictures of the fictional Sherpas the website offers to help players.
• Making my own page where the 'Sign Up' form would take you once registering instead of using the Code Institute formdump.

I've tried to make the website as accessible as possible where I could by:

• Using semantic HTML.
• Using alt and aria-labels to describe the websites images and icons for screen readers.
• Colors that are easy on the eye at any time of day.

Google Fonts was used for these fonts:

• Rajdhani for all website headings.

• Antic for all website body text / paragraphs and the navigation bar.

HTML and CSS was used when making this website.

• Git - For version control.

• GitHub - To save and store the files.

• Google Fonts - To find and import fonts used for the website.

• Font Awesome - To find and import icons used for the websites footer.

• Microsoft Edge Developer Tools - To troubleshoot, test features see and solve responsiveness, also to try get an understand why or how things were working.

• Am I Responsive - To show the website on a wide range of devices.

Github Pages was used to deploy the website. The instructions to do this can be found below:

1. Log in or sign up to Github.
2. Find the repository for this project, p1-sherpa-finder.
3. Click on the "Settings" button in the menu bar for the repository.
4. Click on Pages in the left hand side navigation bar.
5. From the Source dropdown menu, select "Deploy from a branch".
6. From the Branch dropdown menus, select "main" and "/root" respectively.
7. Click Save. Your live Github Pages site is now deployed at the URL shown at the top of the page. Keep in mind it might take a bit before the page is deployed and a URL is shown, you might have to refresh the page after a few minutes to get it to show.

The live link can be found here - https://hakesh.github.io/p1-sherpa-finder/index.html

This website was developed using Microsft Edge with the use of Microsoft Edge Dev Tools, which have been used since the very beginning to troubleshoot this website for any problems that arose and to make sure the website was responsive on many different resolutions and devices.

The website has also been tested in Google Chrome and it works as expected.

The only major issue when developing this website was trying to make the 'About Us' section work and look good. I tried a lot of different methods to make it look like it does now and while it looked good and worked fine on desktop resolutions, it became problematic once I had to make it responsive on medium to small devices. Thankfully i discovered flexbox and it solved this issue altogether.

The lighthouse score is good but not perfect. In the future I will look to try to use the .webp image format instead for better performance.

• HTML

  • No errors were returned when passing through the official W3C Validator.

• CSS

  • No errors were found when passing through the official (Jigsaw) Validator.

• Unable to make it required to select at least 1 checkbox in the sign up form. From my research you are unable to do this without the use of JavaScript.

• All of the text content was written by myself. This website might be fictional, but Destiny Sherpas are a real thing in the game and my texts were written based on my own experiences, inspirations and beliefs of what makes a 'sherpa'.

• Code Institute Template

  • My repository was created using the GitPod template given by Code Institute.

• Wallpaper Abyss

  • Great resource for all kinds of wallpapers. This is where i found the background image for the sign up form. Exact source can be found in the code of style.css

• W3schools

  • I didn't use any specific code snippet from them but they are such an incredible resource for learning that I feel i need to include them here as their explanations and examples can help by an incredible amount when trying to understand something.

• Web Dev Simplified

  • Thanks to his video on learning flexbox in 15 minutes he saved me a lot of time and frustration from trying to make my "About Us" section of the website work and look the way I wanted it to, using flexbox also made it very easy to make it responsive on all devices.

• Bungie

  • For providing excellent images in their press-kits and articles on their website and for allowing their content to be used in non-commercial creations. The landing page image and both 'About Us' images were taken from their websites. Exact sources can be found in the code of index.html and style.css.

• Font Awesome

  • Used for the Youtube, Discord and Reddit icon in the footer.

• Google Fonts

  • Used for finding and using the fonts 'Antic' and 'Rajdhani'.

• The Love Running Project

  • Got a lot of the inspiration of my website from this project, specifically the header, landing page/image and sign up form. A lot of the things I learned following along that project is used here as well.