The name of the group The Hikers was created by a group of friends whose passion is hiking. This is a fictional project created for education purposes only.
- Overview
- User stories
- UX
- Features
- Technologies used
- Resources
- Testing
- Code validity
- Version Control
- Deployment
- Credits
- Acknowledgments
A live demo can be found here
- This is my first Milestone 1 project which is part of the Code Institute’s FullStack Software Development Diploma Course. This project demonstrates the skills and knowledge of the HTML, CSS, Bootstrap 4 and User Centric Frontend Development modules which I have learned recently on the course.
- The aim of this website is to promote The Hikers group on the market, make the group recognizable and to present their offer of organized trips in the Irish mountains for people looking for adventure, unforgettable experiences, interested in discovering Irish mountain trails, spending time actively.
- As a user, I want to navigate the site easily, so that I can find what I need effectively.
- As a site visitor, I want to search for an interesting options for tours in Ireland, so I can decide if I am interested in buying one.
- As a user I want to be able to contact the site owner so I can get more information about their offer options.
- As an interested and potential customer, I want to follow the site owner on social media, so that I can keep up to date with its upcoming tours.
- As an interested customer I want to see some visual examples from previous site owner tours, so I can see what to expect.
- As a user I want to easily understand the purpose of their site.
This website design will target people of all ages, families and friends living in Ireland as well as those who intend to visit Ireland, potentially who like hiking and who are looking for information on the internet about hiking in Ireland. The purpose of this project is generally simple but effective. It encompasses an eye catching website presenting beautiful, amazing and unforgettable views, which prioritizes direct contact and links to social media.
1. Strategy
My goal in this project is to promote the group THE HIKERS on the market and increase interest in the tours they offer and grow their business by providing the UX simple, clean and user-friendly.
- Promote the new group on the market
- Demonstrate examples of tours to show customers what they can expect
- Increase the number of followers on social media
- Encourage to spend time actively and discover beautiful Ireland
- Easy to read information About Us, eye-catching pictures encouraging customers to take advantage of the offer long enough to understand the content but not to overwhelm.
- Easy to find contact details to ask questions about a trip
- Easy to find links to social media accounts to follow the group
- Design in mind for mobile devices first as this is recently the most common way of searching for information
- Fixed navigation bar providing user easy navigation reference.
- Fixed footer providing quick reference to Social Media links.
2. Scope
I chose the MVP (Minimal Viable Product) approach which:
- Provides users with pure UX
- Includes mobile-first website that is responsive on all devices.
- Fits with my current skills.
- Defines content quickly and focuses on contacting via email or social media.
3. Structure
- The purpose of the Structure has been created as a single page website containing sections separated by captivating pictures using a parallax effect to encourage and attract the visitor's interest and to enable users to quickly navigate through the website, easily assimilate information and have an overview of the trips to show what customers can expect.
- Contact details have been placed in different parts of the website (footer, contact form, main page button, tours section) for easy access by the user and are provided via e-mail, phone number and links to social media.
- I initially decided to put the Gallery site separately to facilitate faster page loading due to the large number of images. However, after careful consideration of customers scrolling habits and feedback from the peer-code community I instead decided to include the Gallery as part of one scrollable, single-page website. This allows for easier navitgation and avoids code duplication.
- A form will be added to the contact page with the following fields: "Full Name", "Email Address", "Tours Available" and "Subject" which are options to select. "Full Name", "Email Address" will be required in order to submit the form, "Email" input must be the valid format. User is alerted of correct input if data is invalid.
4. Skeleton
-
Pages/Section: Home, About, Tours, Gallery, Contact
-
Gallery in a separated page (was changed through project development)
-
Fixed navigation bar - Menu headings and pointing to each of the 5 Pages
-
Fixed footer with Contact email-link and phone number and Social Media icons, which will be opened in a new tab.
Wireframes have changed througt project development:
HOME PAGE
ABOUT PAGE
TOURS PAGE
GALLERY PAGE
CONTACT PAGE
5. Surface
Colors
- As a primary color, I have chosen the color green (#6cd22d) that is not only associated with Ireland, but also suggests freshness, nature and green landscapes. They will also match the images I have selected for the site.
- As an additional color, I chose red (#dd3044) which I picked with the color picker from the image with skirts. That color will compliment green and make the important things like contact/sent buttons pop, so it will be noticed by the user immediately. The choice was made by reading this article web builder expert.
- For the other colors I have chosen a combination of dark grey and off-white, which are the darker and lighter shades of primary green color to give a website a balanced contrast: background color (#2d2d2a), body-text color (#fbfbfb), headings (#fbfbfb) and (#2d2d2a).
Taking into account feedback on the peer-code-review, I've decided to tone down the original bright green color to a more neutral, to fit to scheme of the website. For the background I've chosen shades of grey, for the text off-white which I feel well complement the array of colors in the website.
Typography
- For the main headings, I selected the same font that was used in The Hikers logo which is the 'Special Elite' with the group of fall-back font of 'Cursive'
- For the content I've chosen 'Oswald' font with fall-back font of 'Sans-Serif', which is a popular pairing font with 'Special Elite' according to google fonts
Images
- The image selection has been chosen very carefully to charm users of the website with the beauty of Ireland and encourage to participate in offered trips
- The hero image (View of Wicklow landscape) and background images (forest and happy-girl) and for tours section were downloaded from the Pexels and Pixaby. I have chosen a group of selected images for the About Section and the Gallery.
- Video movies from the trips are from the youtube platform for better quality, showing an example of tours, which customers can participate in and exemplifying wonders of Ireland
Existing Features
- Designed with HTML5, CSS and Bootstrap.
- One page with 5 sections acting as individual pages.
- Fixed navigation allows user to easily navigate, regardless of which page visited, .
- Fixed footer allows the user to easily access to social media links and contact details like email and phone number. Footer is moved to the bottom of the page on small devices and landcsapes to allow user have a bigger surface.
- Fixed, stacked images for mobile views.
- Home page and Contact And Enquiry Form includes buttons.
- The About page contains an embedded Google map of Ireland.
- Tours page and contact have additional Contact Us and phone options.
- Tours page contains short youtube movies presenting selected tours which can be seen in full screen.
- In Gallery page each picture has been made as modal, allows the user to see images in a larger size.
- Each Section is separated by the background image relating to the theme of the website.
HOME PAGE
ABOUT PAGE
Background image "Forrest"
TOURS PAGE
Background images "Shoes"
GALLERY PAGE
Background image "Happy-girl"
CONTACT PAGE
Features Left to Implement when skills develop
Another feature idea
- To hide sticky navbar and footer on scroll on small devices and on landscape using javascript.
- The "Sent" button contact form need to be functional so the details can be sent to the server via php.
- Change short videos of excursions on the organized group trips, which today were implemented from youtube.
- More comprehensive Tours section, write more about tours option, and more detailed.
- Integration of Social media Page to have a live update feed of planned trips and events.
- Implement slower scrolling from one page to another using javascript.
1. Languages
2. Integrations
- Bootstrap 4.5.2 - by linking via Bootstrap CDN to HTML Doc making the design responsive.
- Font Awesome - Icons for Social Media links in Footer and Tours section
- Google Fonts - to import typography of the website into the stylesheet file.
3. Workspace, version control and Repository storage
- GitPod- Main workspace IDE (Integrated Development Environment)
- Git - Distributed Version Control tool to store versions of files and track changes.
- GitHub - A cloud-based hosting service to manage my Git repositories.
4. Other
- Photoshop - for photo editing
5. IDE Extensions used in GitPod
- Auto Close Tag
- Bootstrap 4 CDN Snippet
- Prettier - Code Formatter
- Bracket Pair Colorizer
- Code spell Checker
- FontAwesome Auto-complete
- Code Institute Course Content -Main source of fundamental knowledge.
- Code Institute SLACK Community - Source of assistance
- youtube - General resource, add videos.
- Stack Overflow -General resource.
- CSS-Tricks-General resource.
- w3schools-General resource.
- CommonMark - For Markdown language reference.
- FlexBox Froggy Game - Learning platform for FlexBox.
- css-diner.netlify - Learning platform for type selectors
- Kurs html - Polish learning web with courses CSS and HTML
- Pasja informatyki - Polish learning website
- TinyPNG - Efficient compression of images for site.
- Am I Responsive - Responsive website mockup image generator.
- Responsinator - Responsive website mockup image generator.
- Balsamic - Wireframing design tool to create wireframes.
- Bootstrap Grid Explanation by Anna Greaves - This was an invaluable resource for me to wrap my head around Grid layouts.
- Free logo design Logo design tool
- WebBbuilder Expert -to choose colors for web
- Css Variables - An introduction to CSS custom properties
- Boxshadowgenerator - box shadow generator for gallery images
- Colors - color schemes generator.
- Contrasr checker -contrast color checker
- Click here for the full testing process.
Overview
- Encountered Issues
- Code Validation
- Testing User stories
- Testing Functionality
- Testing Compatibility
- Testing Accessibility
- Testing Performance
- Further Testing
- Used Git for version control.
This project has been deployed on GitHub Page. To deploy it, follow the steps:
- All code was written on Gitpod, an online IDE.
- The code was then pushed to GitHub where it is stored in my Repository.
- At the top of the Repository, click on the "Settings" Button on the menu.
- Scroll down the Settings page and find the "GitHub Pages" Section.
- Under "Source"click on the drop-down, and select the "Master" branch.
- Once selected, this publishes the project to GitHub Pages and displays the site's url.
- There is no difference between the deployed version and the development version.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:
- Log in to GitHub and locate the Repository.
- At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
- You should have a copy of the original repository in your GitHub account now.
- Log in GitHub and locate the Repository.
- At the top of the Repository locate the "Code" dropdown menu.
- To clone the repository using HTTPS, under "CLONE", make sure "HTTPS" is selected and copy the link then.
- Open Git Bash. Change the current working directory to the location where you want the cloned directory to be made.
- Type
git cloneand past the URL you copied in Step 3.$ git clone https://github.com/Eva-Kuk/The-Hikers-MS1 - Press Enter and you local clone will be created.
Media
- The Gallery images and for About Section in this project are owned and provided by me.
- The background images for the parallax effect, as the images for the "Tour" section were selected from a free stock photo libraries Pexels and Pixabay.
- The logo was designed by THE HIKERS group and created by me using Free Logo Design.
Content The text for the part about the 10 Irish highest mountains was taken and modified for the website needs from maps.ie and en.wikipedia.org The rest of the text on that website was written by me.
Code Snippets
- Template code for navbar and modals in Gallery section using bootstrap classes was taken from Bootstrap and heavily modified to suit the sites needs.
- Solution for Bootstrap collapsing back toggle menu on small devices was from Stack Overflow - "Orel Eliyahu".
- Code idea for cards for tour section used with a permission from JimLynks MS1 project.
- Inspiration/and code for jumbotron and hero image was taken from Whiskey project in Bootstrap from Code Institute and modified to suit the sites needs.
- Hover-overlay fade code for a tours images were taken from w3Schools.
- Code for font awesome icon a list in about section Font Awesome.
- Solution for background images
background-attachment: fixed;for iOS devices from Stack Overflow -Nicholas Gooding Rios.
I would like to thank:
- My mentor, Aron Sinnott, for his guidance through my journey with MS1 project, lots of great advice and ideas which helped me a lot to improve my project development.
- My tutor Cormac for his big support he offered me, troubleshooting guide, his patience, and every single advice.
- I am very grateful and would like to say a special thanks to the Jim JimLynks for his huge help getting started with the project, and his precious time he offered me, for all his support and great advice.
- Tutor support staff for fantastic support they offered, help me guide to solutions in my project.
- The Slack community of Code Institute for feedback.