This Website was created for the sole purpose of completing the first Milestone Project for the Code Institute's Full Stack Developer course. It was built using the knowledge gained from the HTML, CSS and User Centric Design modules. A full list of technologies used can be found in the technologies section of this document.

The Alpine Adventures website is designed for a fictional ski club based in Sestrieres, Italy. I came up with this idea as I am a certified Alpine ski instructor and I previously worked for a ski school in Italy. I wanted to combine the ski world with the web develpoment one by creating a website, using the tecnical knoledge from my personal experience.

The Alpine Adventures is a landing page for beginners and intermediate mountain passionates looking for a fun way to learn how to ski or snowboard. The Alpine Adventures mountain club offers activities such as skiing, snowboarding and hiking. Recommended minimum age of 8 years old.

Users of this website will be able to find all the information they need to know about Alpine Adventures: a brief introduction with the activities, About Us page and a form to submit with activity selection, making the communication from both ends easier and quicker. This site is targeted towards parents of childrens and adults who want to learn how to ski.

• As a First Time user, I want to easily understand the main purpose of the site and learn more about the club.
• As a First Time user, I want to be able to easily navigate throughout the site to find content.
• As a First Time user, I want to view the website and content clearly on my mobile device.
• As a First Time user, I want to find ways to follow Alpine Adventures on different social media platforms.

• As a Returning user, I want to contact the organisation so I can request more information.

The three main colours used are Navy Blue #1E3A50, mainly used for body and buttons, a Off White #fff for headings and body where more contrast with the light blue shade was needed, and the Light Blue shade rgba( 16, 87, 119, .7). The Navy Blue and Off White shades should compliment each other without being over powering to the eyes.

The headers on all pages throughout the Website are using the Dosis font while the main text is using the Cairo font.

The images were all taken from Pexels.

Due to no JavaScript functionality, the contact forms will not store data.

• Navigation

  • Featured at the top of the page, the navigation shows the name of the club in the left corner: ALPINE ADVENTURES that links to the top of the page.
  • The other navigation links are on the right: Home, About Us and Sign Up, all linking to different pages.
  • The navigation is in a off white color that contrasts with the background.
  • The navigation clearly tells the name of the club and website and makes the navigation to the other pages easy.

• The Header

  • The header shows the main activities of the club, using a white text with shadow to increase the contrast with the background.
  • This section provides the user with clear information about what the site is.

• The Activities List

  • This section shows the activities offered to their members.
  • A brief description is given with the use of style icons for every activity.

• The About Us page

  • This About Us page explains the mission of the club and includes a table with the pricing and age groups of the lessons.
  • This page shows the users important information they need to know.
  • We can find a video showing the ski resort and the activities described.
  • There is a Contact Us button which redirects to the Sign Up page.
  • We can also find a gallery section which gives a visual feedback to the users.

• The Sign Up page

  • The sign up page has a form to collect details from users so they can sign up to the ski club.
  • The form collects the person's name, surname and email address. There is also an activity selection made possible by three selectors.
  • The sign up form is very important to the user as it gives the ability to join Alpine Adventure by specifying their activity of interest.
  • We can also find a contact section where address, phone number and email are displayed, followed by a Google Maps window.
  • Every page includes a footer with social media icons linking to Facebook, Instagram, Twitter and Youtube.

• A live page for events, with videos and images.
• WhatsApp widget for easier end-to-end comunication and live chat.

• HTML
  • This project uses HTML as the main language used to complete the structure of the Website.
• CSS
  • This project uses custom written CSS to style the Website.
• Font Awesome
  • Font awesome Icons are used for the Social media links contained in the Footer section of the website, in the home page next to the activities and in the form page.
• Google Fonts
  • Google fonts are used throughout the project to import the Dosis and Cairo fonts.
• Visual Studio Code
  • VS Code is the Integrated Development Environment used to develop the Website.
• GitHub
  • GithHub is the hosting site used to store the source code for the Website and Git Pages is used for the deployment of the live site.
• Git
  • Git is used as version control software to commit and push code to the GitHub repository where the source code is stored.
• Google Chrome Developer Tools
  • Google chromes built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.
• CSS Generator
  • This was used to convert the RGBA colour for the site to Hex.
• Favicon
  • Favicon.io was used to make the site favicon

Testing is required on MilestoneProject 1 – Alpine Adventures Responsive Website.

As this project is static and contains no back-end functionality, the testing performed will be on the visual effects and layout of the Website. Testing to be done on at least three web browsers and all screen sizes.

No elements should overlap another container div. All elements should remain on the screen at all sizes above 300px.

All nav links should direct to the correct html pages as per their names. The Home page is the exception, this one will redirect to index.html.

All links to external websites must open in a new browser.

Testing of form validation will also be required to ensure the correct inputs are taken and that all fields are required.

The live Project can be found here

• Test responsiveness of website on all screen sizes on chrome browser
• Test responsiveness of website on all screen sizes on safari browser
• Test responsiveness of website on all screen sizes on firefox browser
• Validate navigation list items navigate to the correct pages
• Validate form inputs on sign-up.html: name, surname, email
• Validate hover color change on buttons
• Validate social links open in a new window

• A broken link was found for the "Contact Us" button due to a typing error: I previously changed the name of the page and did not rename the button link.

• HTML

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

• CSS

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

• Accessibility

  • I confirmed that the colors and fonts are easy to read and accessible by running it through lighthouse in devtools.

No unfixed bugs

This project was deployed to GitHub pages via the following steps:

1. Log into GitHub.
2. From the list of Repositories, select funkybeppe/Alpine-Adventures.
3. From the Repositories sub-headings, select "Settings".
4. Under "Options", the first category of settings, scroll down to the GitHub Pages section.
5. From the dropdown list under the "Source" heading, select "master".
6. A second drop-down menu that appears should remain as the default value, "/root".
7. Press Save.
8. On Page refresh, scroll back down to the GitHub Pages section, and the link to the deployed site will be available in a green sub-section with a tick icon next to it.

As this project was developed on the master branch, all changes made to the repository are immediately reflected in the deployed project.

1. Install the Google Chrome or Firefox browser.
2. Install the applicable GitPod Browser Extensions for your chosen browser.
3. Create a GitHub account.
4. Log in to Gitpod using your GitHub account.
5. Visit Alpine Adventures's GitHub Repository.
6. Open the repository in Gitpod:

• Click the green "Gitpod" icon at the top of the Repository, or
• Click this link.

7. A new workspace will open with the current state of the master branch. Any changes made to the master branch after this point will not be automatically updated in your Gitpod Workspace.

1. Visit alpine-adventures's GitHub Repository.
2. Click the "Code" dropdown box above the repository's file explorer.
3. Under the "Clone" heading, click the "HTTPS" sub-heading.
4. Click the clipboard icon, or manually copy the text presented: https://GitHub.com/funkybeppe/alpine-adventures.git
5. Open your preferred IDE (VSCode, Atom, PyCharm, etc).
6. Ensure your IDE has support for Git, or has the relevant Git extension.
7. Open the terminal, and create a directory where you would like the Repository to be stored.
8. Type git clone and paste the previously copied text https://GitHub.com/funkybeppe/alpine-adventures.git and press enter.
9. The Repository will then be cloned to your selected directory.

1. Visit alpine-adventures's GitHub Repository.
2. Click the "Code" dropdown box above the repository's file explorer.
3. Click the "Download ZIP" option; this will download a copy of the selected branch's repository as a zip file.
4. Locate the ZIP file downloaded to your computer, and extract the ZIP to a designated folder which you would like the repository to be stored.

1. Open your preferred IDE (VSCode, Atom, PyCharm, etc).
2. Navigate to the chosen directory where the Repository was Cloned/Extracted.
3. You will now have offline access to the contents of the project.

The live link can be found here - Alpine Adventure

The content of this website was created by Luca Barbero

• The code to make the navigation and sign up form style were partially taken from the CI Love Running Project.

• Pictures taken from Pexels
• The video was taken from YouTube from Travel Time channel

I would like to thank my mentor Ronan McLelland for his guidance throughout my project.

Thanks to my partner Jessica for the help with the wording and style tips.