The aim of this project is to grow community involvement and spread awareness to 4x4 enthusiast about getting outdoors again after COVID restrictions have lifted.
- Overview
- Description
- User Stories
- UX
- Features
- Technologies Used
- References for learning
- Testing
- Project barriers and the solutions
- Code validity
- Version Control
- Deployment
- Credits
- Acknowledgments
- Support
Please note: To open any links in this document in a new browser tab, please press CTRL + Click.
During the Covid-19 crisis, people have been forced into isolation for many months. With the lock-down measures now relaxing, it is as important as ever for us to get out of the house and allow socialising to resume in a responsible manner.
The Explore Ireland Project is dedicated to providing a free platform for all interested in road trips, exploring and camping to join us on breath-taking drives around the Irish countryside. Our trips are expertly planned and researched to ensure a safe, enjoyable and healthy experience.
- "I don't have a PC or Laptop at home and generally do all my online searches on my mobile"
- "I want to be able to subscribe to a mailing list about upcoming trips"
- "I want to get in touch immediately as I have some recommendations on future routes"
- "I want to be able to join a community forum or social media group to see up to date info on trips"
- "We are keen to get involved but would love to see visual examples of past trips to give us an idea of what to expect"
This website project will target a large demographic of individuals and families from all walks of life, hence an overall simple, yet effective website is aimed at. The priority focus is on direct contact and social media links.
The aim of this project is to grow awareness and community engagement, hence keeping the UX simple and user-friendly and leading users to contact via email and/or join our Facebook community Page.
Raising awareness on the important connecting and appreciating our environment.
Building on community awareness of the natural beauty that Ireland has to offer.
Growing member database via email and direction to Facebook Group interactivity.
- Designed site with Mobile-first approach
- Easy-to-read info. Long enough to understand the content, yet short enough not to overwhelm.
- Imagery used for intuitive explanation of trips and showing inviting scenery.
- Contact form with radio button options to narrow down user interest type.
- Easy reference to Social Media from anywhere on the site.
- Strong contrasting Social Media icons in the footer.
- Fixed navigation bar providing user easy navigation reference.
- Fixed footer providing quick reference to Social Media links.
I've decided on an MVP (Minimal Viable Product) approach, which:
- Provides a clean UX for users.
- Fits in with my current skill-set.
- Quickly defines the content and focus on getting in touch via email or social media.
- I've included some basic animations to subtly enhance the overall experience.
The main focus of the structure is to allow Users to quickly assimilate the information and imagery. Short, focused paragraphs of content information to provide enough information, yet not overwhelm. A selection of quality images to provide a taste of the trips and options offered. Points of contact are provided via email contact form and links to Social Media in Footer.
Wireframes: One-page website with 4 main sections
Home, About (Trips), Gallery and Contact Section/Pages
Fixed navigation bar - Menu headings pointing to each of the 4 pages.
Fixed Footer with Copyright info and Social Media icons
I've decided on a relaxed, yet exciting visual experience reflecting nature and peacefulness coupled with exhilaration of more extreme 4x4 routes and breath-taking views.
Neutral earth-tones, reflecting the environment, inviting the User 'outdoors'.
- I've chosen 2 primary greens for backgrounds (#eef4db) and headings (#425012).
- For body text, I've used a combination of a dark grey (#242424) and off-white (#fafafa), maintaining strong, balanced contrasts.
- "Varela Round" font (with fall-back font of Verdana) for main headings. This font was specifically chosen for its rounded edges, which relate to natural curves in nature.
- "Cabin" font (with fall-back font of Sans-Serif) for body content.
The image selection has been carefully chosen to depict both relaxed road trips for beginners (to instill confidence in taking part as a newcomer); and more extreme 4x4 experiences for the advanced, familiar user.
- Designed with HTML5, CSS3 and Bootstrap.
- Single page site with 4 sections acting as individual pages.
- Fixed navigation allows the user to easily navigate, regardless of which page visited.
- Fixed footer allows the user quick accessibility to social media links.
- Auto-scrolling carousel on desktop and tablet landscape views for vivid imagery experience.
- Fixed, stacked images for mobile views, with soft box-shadow.
- Contact Form with radio buttons.
- Form submission button needs to be functional (once Javascript is learnt).
- Integration of Social media Page to have a live update feeds of planned trips and events.
CSS3.
Bootstrap - by linking via BootstrapCDN to HTML Doc.
FontAwesome Icons for Social Media links in Footer.
Google Fonts - Overall Typography import.
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.
Autoprefixer Parses CSS and adds vendor prefixes. Google Mobile-Friendly Test Mobile-friendly check on site. Website Page Test Runs a website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. Online-Spellcheck Online spelling and grammar checks.
- Auto Close Tag
- Auto Nametag
- Bracket Pair Colorizer
- Code Spellchecker
- Prettier - Code Formatter
- Indent-Rainbow
- Code Institute Course Content - Main source of fundamental knowledge.
- Code Institute SLACK Community - Main source of assistance
- Stack Overflow - General resource.
- Youtube - General resource.
- CSS-Tricks - General resource.
- W3.CSS - General resource.
- CommonMark - For Markdown language reference.
- FlexBox Froggy Game - Learning platform for FlexBox.
- Coolors - Find matching color palette for site.
- TinyPNG - Efficient compression of images for site.
- Am I Responsive - Responsive website mockup image generator.
- Balsamiq - Wireframing design tool.
- Kevin Powell Video tutorial on CSS Variables.
- Bootsrap Grid Explanation by Anna Greaves - This was an invaluable resource for me to wrap my head around Grid layouts.
- After initial wireframe design, I checked each navigation item link is working correctly to each Page. I set a temporary contrasting background colour to each page to mark out each section.
- Tested responsiveness of the wireframe using Dev Tools and confirmed basic structure looks and works well on all mobile decides from 320px, up to desktop size.
- Tested Logo text in menu bar to ensure it points to the Home page.
- Tested About, Gallery and Contact links in menu bar to ensure it points to each page and position correctly.
- Tested Social Media icons in Footer to ensure they open the correct pages, and in a new tab on the browser.
- Tested Contact Us link on About page and ensured that it points to the Contact page on the same site.
- Tested Facebook Community Group link on About page to ensure they open the correct page, and in a new tab on the browser.
- Tested Carousel right and left arrows and the right arrow moves to the next image and left arrow moves to the previous image as desired.
- Tested Carousel indicator bar and images can be selected by their position by clicking on relevant bars.
- Tested Send button on Contact page without any text in inputs to ensure that it provides the desired error of 'Please fill out this field' to appropriate required fields.
- Tested Email entry input by not entering a valid email address. This provides the desired error of 'Please include an @ in the email address'.
- Tested Radio buttons to ensure only one option can be selected and that at least one option is required.
- Further testing of Responsiveness of all pages using Google Mobile-Friendly Test
- Tested overall site colours on a11y, a Color Contrast Accessibility Validator. Test came back with excellent results.
- Tested HTML Validation No errors or warnings to show.
- Tested CSS Validation
- Parse Error on 47 items related to CSS Variable values. Researched this and found that this is a non-issue after reading reports on Stack Overflow and other sources. It is a requested feature on Github too.
- Warning 'Imported style sheets are not checked in direct input and file upload modes'. Confident to ignore these after researching and a common answer is that the validator will not validate imported style sheets. See Stack Overflow.
- Tested site URL on Website Page Test which rendered good results. Images are on the large size in PNG format and already compressed. I chose to maintain the PNG format as the image quality of the site is integral to the UX.
- Checked grammar and spelling throughout document.
- Ran CSS through Autoprefixer and copied new CSS code back into style.css doc.
- Re-ran CSS Validation and 30 warnings appeared for 'unknown vendor extension'. Confident to ignore these as answered on Stack Overflow.
- Ran README text through Online-Spellcheck to double-check on grammar and spelling.
- Bootstrap carousel works fine on desktop views with landscape images, but on mobile created large white space underneath. To overcome this I started a new branch called 'Gallery-carousel'. I then added a background image to the carousel on mobile views and centered the carousel on each media query. I then merged the branch with the master branch.
- About Section 'cards' were aligning fine, but uneven bottom according to how much text entered in each. Overcame by researching online and finding a workable solution on Stack Overflow using Bootstrap's d-flex and flex-fill values.
- Contact form was not being responsive on smaller laptop views. To overcome this, I included the form in a Bootstrap Grid layout.
- Was still not entirely happy with Carousel on mobile views and decided create a static gallery of images in mobile and tablet views instead.
- Bootstrap Carousel on desktop views was being cut off at the bottom and allowed no space for Gallery heading. To overcome this I wrapped the carousel in its own Bootstrap Container. Added the Gallery heading above keeping the entire site consistent.
- Encountered an issue with Bootstrap mobile navigation (hamburger menu) pushing content down when opened. This was further an issue on Firefox and Safari browsers, with content being pulled up and not positioned correctly when menu was collapsed again. To overcome this I started a new branch called 'Alternate-Nav-Menu' to work on an alternative. In CSS, I set the drop-down menu to
position:absoluteand adjusted width, background color and padding accordingly. However, this caused the navigation bar to be misplaced when in desktop view (+992px). To overcome this, I added a media query ofposition:relativeandtop:0pxwhich worked perfectly. I then merged the branch with the master branch with no conflicts.- Bootstrap Hamburger menu was opening fine but once clicking a link, it wasn't closing. I researched this and found the answer on Stack Overflow
HTML - W3C - Markup Validation
CSS - W3C - CSS Validation
TAGS - Closing Tag Checker for HTML5 - Validates all tags are opening and closing correctly.
- Used Git for version control.
- Branches were created to work on alternative fixes to issues encountered.
- The branches were then merged with the master branch after any conflicts were addressed.
This project has been deployed on GitHub Pages with the following process:
- All code was written on Gitpod, an online IDE.
- The code was then pushed to GitHub where it is stored in my Repository.
- Under the settings section of the GitHub repository, scrolled down to GitHub Pages section.
- Under 'Source' drop-down, the 'Master branch' was selected.
- Once selected, this publishes the project to GitHub Pages and displays the site url.
- There is no difference between the deployed version and the development version.
- The code can be run locally through clone or download.
- You can do this by opening the repository, clicking on the green 'Code' button and selecting either 'clone or download'.
- The Clone option provides a url, which you can use on your desktop IDE.
- The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine.
- The main photos, logo and imagery used in this project are owned and provided by myself
- About/Trip page images are taken from Pexels, a free stock-photo library.
All text content is self-written
- I've taken advantage of Simen Daehlin's template boilerplate from his Marketplace
- CSS-Tricks - Background image opacity on Contact page.
- Code Institute - Inspiration for contact form from 'Love Running' Mini-Project in CSS Module.
- Shuva Mallick - Inspiration code for Submit button colour slide effect.
- 'djibe' on Stack Overflow - Code idea for cards inside Jumbotron.
- W3.org - How to add a Favicon to site.
- Orel Eliyahu' on Stack Overflow for the code solution to closing hamburger menu once menu item clicked.
I would like to thank:
- My mentor, Brian Macharia, for his guidance, patience and encouragement throughout this project.
- Bim Williams and Simen Daehlin for their selfless approach to sharing of their time, experience, skill and knowledge. These sessions and casual chats have allowed me to grow my skill immensely in a short period of time.
- CI staff and Slack Community for always being on-hand with questions posted and assistance requests.
- Everyone that takes part in the Slack calls, specifically from the #In-It-Together and #Study-Group channels.
For any issue resolution or assistance, please email Jim Morel on [email protected]