This website was created based on the skills learned from Code Institute’s Full Stack Software Developement course. This is the first individual project during the course, wich focuses on HTML, CSS, Bootstrap, Responsive Design and UX desing.
The website is designed for people who seek out adventures, challenges and to live out some of their Bucket list dreams.
Visit the website: Bucket List Adventures
The business age group is mainly between 20-35 years, but it can also be all ages. For example, if you are 90 years old and have dreams and a bucket list you want to live out, then Bucket List Adventures is also for you. The business targets people who want to live out their dreams, people who loves adventures, challenges and people who want to confront their fears. Dreams are usually strongly associated with fears, without the fear factor, then usually dreams are not seen as dreams.
The purpose and the business goal of the website, is to offer products with excellent service that is aligned with excellent life time memorable products. In order to offer high quality service and products, the company has chosen to niche itself in the three most desirable bucket list adventures, in Ireland. The business focuses only on these three adventures, on quality before quantity. We try to give people a really amazing experience, and on that path get some free marketing through word-of-mouth and also through social media channels.
- Easily navigate through the website on my devices, so i can in a productive and quick way find what i am looking for.
- To easily find information about the products offered, such as prices and what is included.
- Get information about what previous customers thought of the products, so i can feel safe and secure about the company.
- Easy to take action and handling payments, when deciding to buy.
- If having further questions, want to be able to contact the company in a smooth and easy way.
- Be able to follow the company and products, through social media links. Also, to see and get more infromation, before taking a decision.
The design and layout of the website is based on a easy to use and navigate UX. The intention is to give the user the information that they need, with a clean and minimalstic approach, that has consistency throughout the website, and does not overload the user with to much content, text or different colors. The colour scheme is blue/white and also brown/white. The blue/white color is aligned with the products offered, and is symbolic to the heaven and sea. The brown/white color is to keep a consistency with the white text and the brown color makes a great clean contrast to the white text, to create a instant attention and make it easy for the customers to read the information on the website.
The navbar is fixed to make it easy and efficient for users to navigate and find what they want on the website. The menu bar have a hover effect to stand out and to make it easy for the user.
There is a consistency with the marketing and to create a curiosity on the product/services that we offer. The three first pages showcases all the product that we offer with visual content. The landing page has a carousel that takes up a big part of the screen, to immediately showcase the products. It also has a jumbotron to give the customer some brief information about the products offered. The gallery section showcases the products with images and lets the potential customer know, what past customers thought of the product/service they bought. In the video section, all three products are showcased with visual content, to give the potential customer a feeling of what to expect. In the video section the customer can also see expected prices, so they can decide if it is within their budget to order. Also, necessary information about the products/services is informed along the price tags.
Icons are used throughout the website that hovers to make information stand out and to use subtle metaphors.
The buttons follow the same design, to stand out and be recognizable. The buttons are handy and easy to find, for users that already know what they want or for those users that made a decision and want to take action, the buttons takes the user to the purchase process, in a simple and quick way.
The contact form and social media links gives the users the opportunity to get answers and learn more about the services offered, before making a decision. The users can also keep up with the latest news and offers through the social media channels.
Here is the link to see the Wireframes
- Navbar, with logo and brand name, also with links to the right for more information and easy access throught the website.
- Carousel, a visual and concrete highlight of the adventures offered by the company. To act as a eye-catching sample of the services, to show relevant content and showcase professional images of the products offered.
- Jumbotron, highlight the company, services and brief information about the products and the company.
- Button (Modal), "Order Now!" button provides quick access, to make it easy with the purchase process for users who wants to take action.
- Gallery images, visual content and highlights of the adventures offered by the company.
- Quotes, to give users information about what past customer thought about the products/services.
- Button, make it easy for the customer with the purchase process.
- Videos, a visual and conrete highlight of the adventures offered by the company.
- Prices & info, gives the users information about the prices and services of the products.
- Button, make it easy for the customer to take action with the purchase process.
- Audio, to give the users a good vibe and experience, while filing in the contact form.
- Contact form, makes it easy for users who want more information or have questions.
- Footer, information about the companies location, phone and email. Also with links to social media channels, for the user to get more information or be up to date with new content and information.
- HTML5 was the language used to structure and present content for the web
- CSS3 was the language used in the styling and formatting the website content, to improve the UX.
- Cloud9 was the cloud-based IDE used, to write, run, and debug code with the web browser and to create the website.
- Bootstrap is a front-end component library, that was used to build responsive, mobile-first projects on the website.
- Chrome Developer Tools was used to ensure that the responsive design worked properly.
- Git was used for version control, o have a working copy/snippet of the code and full change history on the local machine.
- FontAwesome was the prefered library, for the icons used on the website
- Balsamiq was used to create the wireframes for the project.
- W3C Markup Validation: HTML5, was used to test the markup validity of web documents in HTML
- W3C CSS Validation: CSS3, used to check CSS3 validation.
- AutoPrefixer: CSS and web browser, was used to make sure that used CSS coding was valid for all web browsers.
- Google Chrome: Web browser, was used to test the website.
- Google Search Console: Responsive design and Chrome Developer Tools, was tested to make sure that the layout was adjusted properly for different screen size devices.
- Overall testing from fellow students from the Slack community.
- Home button and Links, made sure that links worked properly and navigated to intended sections of the website, when pressing each link.
- Carousel, tested that slideshow worked properly, both automatically and when pressing on carousel indicators or controls.
- Modal Button, tested that button "Order now!" worked as intended, with a pop-up form when pressing the button. Tested that link worked properly throughout the website, with the "Order now!" buttons.
- Modal Form, tested that each input worked properly and that "Payment" button worked and opened in a new tab.
- Images, ensured that hover, shadow and images positioning worked properly.
- Videos, ensured that each video worked and played as intended.
- Audio, ensured that audio player worked and played the intended music.
- Form, tested that each input worked properly.
- Social Media Links, made sure that social media icons worked and opened in a new tab, for each icon/link.
The project was created by using the services of Cloud9 IDE, from Cloud9 the project was committed to Git and pushed to Github from the master branch.
This process was taken to deploy the website, from Github repositories:
- You can log into Github Pages
- From the repositories shown, choose: Sebastian-Torres-Matrix/bucket-list-adventures.
- On the menu bar at the top, to the right you can click on Settings
- From there you can scroll down to the section Github Pages
- On the headline Source you can choose master branch, from the dropdown menu.
- When choosing master branch, the master branch is deployed and also up to date: with access to the link to: Bucket List Adventures
- During the project, it has always been the master branch that has been deployed to Github Pages.
If you want to run this project locally, you can clone this repository from Gitbuh Pages by following this steps:
- Use this link to get to the Github repository: https://github.com/Sebastian-Torres-Matrix/bucket-list-adventures
- On the menu bar at the top, to the right, choose the green button named Clone or download.
- In the Clone with HTTPS, you can copy the web URL.
- Open Git bash, in your local IDE.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and use the web URL from Clone with HTTPS: https://github.com/Sebastian-Torres-Matrix/bucket-list-adventures.git
- Press Enter, and your local clone will be created.
For more information about how to Git Clone, you can find it here
- Background position, Chris Coyier on CSS-tricks
- CCS Matic, for the box shadows generated.
- Favicon.io, for the favicon generated.
- Font Awesome , for the excellent open source gallery with icons.
- Background image: Photo from Pixabay
- Carousel, Air Ballon image: Photo by Rich Martello
- Carousel, Scuba Diving image: Photo by Pablo Heimplatz
- Carousel, Scuba Diving image: Photo by Sebastian Pena Lambarri
- Background image: Photo by TheFoodCop
- Paragliding image: Photo by behnam jaafarianpoor
- Scuba Diving image: Photo by Sebastian Pena Lambarri
- Air Ballon image: Photo by Lad Fury from Pexels
- Girl & Guy, Quotes image
Videos were embedded through YouTube:
- Background image: Photo by Luke Chesser on Unsplash
-
Fellow Code Institute students on Slack. For the support and feedback.
-
Simen Daehlin, for excellent mentorship, with great guidance and feedback.
These websites, for the excellent content, with explanations and tutorials: