Check out the other mockup:

• The club
• Activities
• Gallery
• Hiking Tips
• Join Us !

Walking Around is a Club situated in Bray (County Wicklow, Ireland). It is a group of people from all ages and background that enjoy hiking.
The Club's members meet regularly to accomplish different types of walks and activities from easy to advanced difficulties.

• Project
  • Project Goals
  • Developer and Business Goals
  • User Goals
• UX
  • Audience Definition
  • User Stories
  • Design Choices
  • Wireframes
  • Different Design
• Features
  • Existing Features
  • Features to Implement in the Future Versions
• Technologies Used
• Testing
• Deployment
  • Live Deployment
  • Local Deployment
• Bugs
  • Solved
  • Unsolved
• Credits

This website will advertise and promote the Club and its activities in order to attract the audience into joining the Club.

• Build a static website using HTML and CSS.
• Advertise and Promote the Club by :
  • Providing accurate and useful information.
  • Providing an excellent User Experience (UX).
• Growth of the Club member's population by :
  • Attracting people to join the Club.
  • Using a User Centric Development approach (UCD).

• Learn about the Club :
  • activities.
  • Spirit and Goals.
• Learn about hiking.
• See pictures of the walks.
• Submit an application to join the Club.

The targeted audience has no age limits and is interested in hiking. This audience would have as well an interest in outdoor activities, sport, healthy living and adventures.

• Outdoor activities.
• Being part of a group, a community.
• Discovering Ireland.
• Hiking tips.

• It provides a form for people to apply for joining the Club.
• It provides useful tips for hikers.
• It gives inspiration and motivation for outside activities through content and pictures.
• It provides meeting information.
• It gives information about the Club activities.

1. As a first time user, I want the website to be appealing.
2. As a first time user, I want the navigation to be easy and intuitive.
3. As a first time user, I want the content to be informative but not overwhelming.
4. As a first time user, I want to understand immediately what is the website about without the need of looking for it.
5. As a first time user, I want to be able to apply for joining the Club.
6. As a returning user, I want to see when and where are the Club's meetings.
7. As a returning user, I want to check out the different social media links for inspiration and ideas.
8. As a returning user, I want to get information about hiking.

Considering the targeted audience, a sans serif font is best because it is often associated to simplicity, modern and clean design. It is as well a flexible font that can be paired with the serif style for more formal intention and traditional feel.
The website will use Proza Libre font because it has been designed to work very well on screen. It will be paired with the Cormorant Garmont font because as Typewolf says :

both designs have a strong calligraphic feel that ties them together.

• FontAwesome icons will be used for better user experience.
• The logo and favicon are the same image for comfort and consistency and use the same color scheme as the website.

The color scheme of the website has been extracted from a picture using Adobe Color and swatches are said to be color blind safe by the same website using the accessibility tool.

As well an orange shade (#C7530F) is used for links. An off white (#FAFAFA) is used for font color. They are distinctive and with a good contrast.

The hero image is important for the UX and is large and triggers the will to explore the website.
A gallery page is part of the website. There will be pictures of scenery, paths and walks.

The home page is design to give the feeling of grandiose and adventure.
The general feel of the website is the love of the outdoor and as well the love of sharing moments. This is brought by a simple and clean user interface with a lot of space.

• Desktop
• Tablet
• Mobile

Some designs are different from the wireframes because of user experience compliance, accessibility, technical skills and time.

Activities is a page on its own and not a sub-section of The Club page. This is because of the importance of the content presented in the Activities page for the user. And it is now more obvious to find the Activities on the website. It is as well a crucial part of The Club's life.

• The get in touch link have been replace by a Join Us button. It is more meaningful and describes better one of the intention of the website; that is for users to join the club.
• The copyright now says : "For educational use.".

• Three headlines have been added to give more information to the user about the website.
• The Join Us button have been replaced by About Us and linked to The Club page.

• The original idea of having a clip made on Google Earth Studio for the location of the Club in the middle or background of the page hasn't been followed because of time issue. This feature was considered significant for the purpose of the website and is now part of the future feature to be implemented.
• The first section that describes the Club has now a title that say About Us. It is more meaningful and semantic. It helps users to identify what is the section about.
• The second section consisted of inspirational quotes and has been changed to testimonials with a title section (for the same reasons explained above) and presents members feedback. It is better practice and it gives more information to the users about the Club.
• The layout of the sections have changed and are one below the other on all screen sizes for better use of the space, design and user experience.

• The icons were replaced by titles for better user experience semantic as it was not considered self-explanatory.

• The layout of the gallery has change for better user experience. Too many pictures presented was considered confusing and overwhelming.

• The icons were taken away as it was considered not a useful feature. The tips titles replaced them for better semantic and readability.
• The layout of the sections have changed and are one below the other on all screen sizes for better use of the space, design and user experience. The content is displayed all at once.

• The form has now a title and a short explanatory paragraph on the top for better user experience.
• The Heading that appear on large screen is gone and replaced by another inspirational quote.

On all pages and devices there is a fix header on the top and a fix footer on the bottom of the viewport.

The header presents the logo and the name of the Website on the left and a responsive navigation bar on the right. The navigation bar become a toggle on small devices. As well the name of the website become the title's page name on small devices in order to help identify on which page the user is situated.

The footer presents a button with the link "Join Us!" on the left that brings the user to the application form.
As well, social media logos on the right linked to different websites for additional information on hiking. The "copyright" (For educational use) is in the middle with responsive text to fit on small devices.

All pages feature an image, taking all the viewport. Its purpose is bringing the sensation of open space and immersion into Nature.

On the home page there is a heading (Ireland Best Walking Community) praising the Club.
Below the heading there are three headlines that show users what to expect from the Club. Below there is a call to action button (About Us). This is to trigger users desire to know more about the Club. This button will lead the users to The Club page.

The Club content is displayed in two columns, one below the other.
The first is the About Us section of the Club and gives explanation about the club and includes a short explanation on how to join with a link to the Join Us page.
The second is the testimonials section. It displays three feedback quotes from the club's members.

The Activities are displayed in three columns.
From left to right or top to bottom on smaller devices: about the community, the activities, meetings.

The Gallery presents pictures taken during hikes. It features the great Irish landscape and trails.
It is presented as a carousel and displays a modal when the image is clicked on to focus on the image and see the images titles and credits. The carousel displays one image per slide on small screens and two images per slide on medium and bigger screens.

On this page are presented three major hiking tips. They are available to download on pdf format by clicking on the download icon beside the tip's title. Those tips are presented in three columns next to each other on large and medium devices and below each other on small devices.
With each tip two external links are provided for extra information on the subject.

This page features a form to fill up in order to apply for joining the Club. It is presented on the middle of the screen. Beside the form on large screen and on the top on medium screen, motivational quotes will be presented to reenforce the emotional response into the action taken.
On small screens only the form is displayed.

Add instead of the background image on large screen a video with Google Earth to zoom-in the Club location. That would give a wow factor.

Add responsiveness to the carousel with the number of pictures per slide that changes depending on the device size.
Add some short video and images in the gallery.

Provide a functionable link to the form, or a customised error page when clicking the submit button.

Add a members only page where content about the club is accessible to members only. It would work as a blog and displays next hikes; scheduled activities and meetings and a media section with photos and videos.

This project uses HTML and CSS.

• Balsamiq
  For creating wireframes.

• Bootstrap
  With the compiled CSS, JS and CDN
  For the Grid system that provides responsive layout.
  For the various components with built in css.
  JQuery and JavaScript were provided by cdn for responsive elements. They are built in the components used in Bootstrap.

• Google Fonts
  For importing fonts (Proza Libre and Cormorant Garmont) into the style.css file.

• Fontawesome
  For using icons throughout the website.

• TinyPNG or Squoosh
  For resizing all the images.

• BeFunky For cropping some of the images.

• Adobe Color
  For extracting the color scheme used on the website.

• Am I Responsive?
  For providing a screenshot of the responsiveness of the website across several devices.

• Autoprefixer CSS online

• Git
  For Version control.

• GitPod
  For Integrated Development Environment.

• GitHub
  For storing the repository.

• GitHub Pages
  For deploying the website live.

This project was developed on GitPod Workspaces IDE (Integrated Development Environment) committed and pushed to my Github Repository using GitPod Command Line Interface (CLI).

To make this website accessible to the public, Walking Around has been deployed on GitHub Pages as follow :

1. Log in to my GitHub account.
   • To create an account you need to sign up on GitHub.
2. Go to my Repositories and select the repository corresponding : Walking Around.
   • To create a repository see Create a repo.
3. Navigate to Settings :

4. Scroll down to the GitHub Pages section.
5. Click on the None dropdown menu and select the branch to publish : master.

6. Click on Save.
7. The website is now deployed.

The link to the website is found in the GitHub Pages section of the repository settings.

When a repository is created on GitHub, it is located on GitHub website ("remotely"). You can create a copy of the repository locally on your machine. This process is called : "Cloning a repository".
When cloning a repository you are actually copying all the data that the repository contains at that time to your machine.

To clone a repository, take the following steps :

1. Create a GitHub account.
2. Click on the Code dropdown button above the files list.
3. There are three options available to clone the repository :
   • using HTTPS
   • using SSH key
   • using GitHub CLI

4. Choose an option and copy the link given.
5. Change the current working directory to the location where you want the cloned directory.
6. Open your IDE and in the CLI type : git clone and paste the link copied on step 4.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

6. Press Enter to create your local clone.

For further information please go to Cloning a repository.

To Clone a repository Using GitPod, take the following steps :

1. Create a GitHub account.
2. Install the GitPod extension for Chrome or Add-on for Firefox.
3. Navigate to the corresponding repository.
4. Click ont the GitPod button on the top right of the files list.
5. This will open a workspace on GitPod where you can work on the repository locally.

The very first time that you do this, you need to connect GitPod and GitHub together. You need to log in with GitHub and launch your workspace (As explain above). And then you need to authorize GitPod to be able to access your GitHub account. You agree to GitPod's terms and conditions, and then create a free account. Then, it will open the workspace for you. Quote from : "Creating a GitPod Workspace" on Code Institute Full Stack Software Development Programme, by Matt Rudge.

An other option is available : GitHub Desktop. It consist of cloning a repository from GitHub to GitHub Desktop.
For full information about how to use this option, please visit GitHub Docs.

Forking a repository will copy it in your own repositories in GitHub.

A fork is a personal copy of another user's repository that lives on your account. Forks allow you to freely make changes to a project without affecting the original upstream repository. You can also open a pull request in the upstream repository and keep your fork synced with the latest changes since both repositories are still connected.

To Fork a repository take the following steps :

1. Create a GitHub account.
2. Navigate to the corresponding repository.
3. Identify the fork button on the top right of the page and click on it.

4. Now you should find a copy of the repository in Your repositories.

Testing information are published in a separate file : TESTING.md

Issue : We Cannot see the toggle icon.
Solve : The navigation bar requires a Bootstrap color scheme class.

Issue : Position the navigation menu to the right.
Solve : The parent of the unordered list should have the class="justify-content-end".

Issue : When the navigation menu is toggled and clicked on, the list of links of the menu doesn't appear.
Solve : JQuery script was missing before the /body. I was using a Beta version of Bootstrap that didn't include it.

Issue : We can see the "Current page" message provided in the span with class="sr-only" that goes with the active link.
Solve : The span with class= sr-only works when the aria-hidden attribute is given to the link or image you want to comment on.

Issue : The middle column in activities.html shows a gap on very large screens and is not horizontally centered on medium screens.
Solve : I took off the display: table-cell and let the Bootstrap class use the available width as it should. Then to fixe the vertical alignment issue brought by taking off the previous display, I used a defined height with display: flex and vertical-align: center added to it in a media query. For horizontally centered on medium screen, add bootstrap classjustify-content-center to the row.

Issue : The background images are not filling all the viewport.
Solve : Using Bootstrap grid and container; if the content of the page is bigger than 100vh, then it is not necessary (and not recommended) to provide height for the containers. If the content is smaller than 100vh, then providing a height of 100vh will fix the covering issue. For responsiveness height: auto can be added on the wrapper and can be coupled with tailored media query with height: 100vh.

Issue : The background-image is flickering when scrolling the content.
Solve : By adjusting the height in the above issue, it solved this problem as well. I believe it to be a matter of content and/or container fitting.

Issue : The callout button of the home page is not aligned with the copyright text.

Issue : The background-attachment is set to fixed, but the content and the background image are scrolling together on phones but it responds as expected on laptops.

W3schools
For general database on software development.

Hostinger Tutorials
Provided the link and explanation on how to install the favicon for the website.

George Dimitriadis
For text-shadow tricks used in css to make text more readable.

GeeksforGeeks
For tips on vertical alignment in CSS.

USERWAY
For explanation on best use of the required attribute.

SJ_OWOW
For vertical align code snippet used in css.

coder coder! For explanation and code snippet on overlay on background image used in css.

Facebook
Instagram
Pinterest

Backpack tips
First Aid Kit tips
Clothing tips
Layering tips
Find Your Partner
Not Alone

Some of the images used on the website are taken from a Hiking group on Facebook with the permission of the photographers and from Pexels.

• Pictures from Ger Penkert:
  Mohra
  Cumshingau
  Comeragh
  Copper Coast

• Pictures from Catherine Ryan:
  Burren

• Pictures from Pexels:

  • For the profile-pictures/
    Photo by ROMAN ODINTSOV
    Photo by Humphrey Muleba
    Photo by Renan Lima

  • For the gallery
    Photo by Josh Hild Photo by Guduru Ajay bhargav
    Photo by Josh Willink Photo by Kun Fotografi Photo by Josh Willink

  • For background image
    Photo by Ben Maxwell
    Photo by Baihaki Hine
    Photo by Karolina

Special thanks to all Code Institute's team ("Teacher", Lecturers and Tutors) that are making me more knowledgeable and are making this happen.

Huge thank you to the Slack community, its all the members and all the leads and tutors for their help and support.

Thanks to my mentor Allen Thomas Varghese for guiding me through this project.