The primary aim of this project is to create a website that provides information about selected venues and attractions in the Brighton area and also offers the services of a tourist guide. The secondary aim of the website is also to allow users to join a social media community in Brighton where they can meet people and share their pictures via Facebook or Instagram.
The project can be scalable and improved in the future adding events, festivals and concerts, which are the core of this vibrant city. View the live project in GitHub Pages
- Overview
This is an interactive front-end site that allows users to search for locations, activities and things to do in the city of Brighton (UK). What makes this project different from many other websites is the possibility to contact me with enquires regarding the creation of a personalized tour. The personalized tour can be one of three categories: art, nature or fun. They can also contact me if they need suggestions or information. It is designed to be responsive on all devices (desktop screens, tablets and smartphones) with the awareness that a mobile phone will be the main users choice to browse this website.
- "I want to get in touch with a local person who can guide me around the city".
- "I want to use a map that auto completes the names of the places I am looking for".
- "I want to use a map which allows me to browse places by category".
- "I want to see a map which displays relevant attractions and cultural places to visit".
- "I want to use a map which displays me the location of the place I am searching for with a label and a marker".
- "I want to access this website using my mobile phone while I am strolling around the city".
- "I want to join a social media community in Brighton on Facebook and/or Instagram where I can meet people and share my pictures".
- "I want to be able to contact Marta via GitHub profile and/or LinkedIn profile".
- I expect to navigate the website easily with a user friendly navigation bar.
- I expect to interact with a map which guides me in the city.
- I expect to find relevant information and contents about the main attractions of Brighton.
- I want to look for a specific place using the search box.
- I want to use the place type category facility of the map to plan my visit and refine my searches.
- I want to locate the social media links to join Brighton groups or get in touch with a local guide (Marta Marassi).
- I want to contact Marta Marassi directly filling a contact form and send an email.
- I want to use this website to discover new places, attractions and activities.
- I want to become an active part of the "Stroll Brighton" community by utilizing the social media.
- I want to rely on a local person who can give me assistance or ideas about things to do in the city.
- I want to develop a professional relationship with Marta Marassi.
- I want to use the map as a regular user to explore and find new places in Brighton.
- I want to be contacted through a contact form to my personal email address, be able to guide tourists and give them suggestions.
- I want users to click on the links of the recommended places and access to their websites.
- A large demographic range of individuals:
- Non Brighton residents.
- Local residents.
- International tourists.
- The attractions displayed are heterogeneous to diversify the offer and please different age brackets.
- A personal guide who can provide relevant suggestions and advices about Brighton.
- A website where they can search and find places using an interactive map.
- A website where they can find tips and suggestions about what to visit.
- Showcase the main attractions of Brighton divided into four categories: art sites (museums), outdoor places(parks), cafés and amusement parks.
- Provide in the tip section links to local businesses and attractions websites.
- Be contactable to users. Having studied art I wish to guide them to visit cultural places and art sites in the city.
- Discover new places in Brighton using "My Tips" section.
- Read interesting content about the city.
- Be able to contact someone local (Marta) to ask for information.
- Be guided by a map but also be able to discover their own favorite places.
The scope of this project is helping users to discover the city of Brighton, keep them engaged by using an interactive map and contacting me via email. Following a Minimal Viable Product (MVP) scheme this website wants to accomplish:
- Clarity.
- Usability.
- Respect users expectations and confidence.
- Appealing design that invokes the pastel colours of the city of Brighton.
The contents and information are readable and not overwhelming. This approach considers that a user is walking in the city and needs an immediate answer to his/her questions. The users needs to visualize and assimilate immediately imagery, contents and the map. Contact is provided through a contact form or through my Github profile or LinkedIn icons in the footer. Social media icons in the footer are meant to be a way to join Brighton community groups or share pictures of the places discovered.
The website displays in an unique page divided into four sections. I created wireframes for every section:
Colours scheme:
I have used pastel colours which are reminiscent of typical Brighton houses.
I took inspiration from this palette:
- Tutu: #fddfdf for the explore section
- Frosted Mint: #defde0 for the tips section
- Alice Blue: #def3fd for the booking section
- For the navigation bar and the footer I choose a Whitesmoke background (#f5f5f5) as it is neutral and in contrast with the colorful sections.
- For the navigation and footer links: Orange, Lightcoral, Lightgreen and Lightskyblue because provide enough visibility and readability.
Typography:
- For the Logo I used "Cabin Sketch" Google Font because is artistic and has aesthetical appearance of a doodle.
- For the main text and contents I chose "Ganja Flower" Google Font because it is user friendly.
- For the headings I chose "Annie Use Your Telescope" Google Font because it is an hand writing font and pairs with "Ganja Flower".
Images:
- All the images not taken by myself have been credited in "Media". They have been selected to be eye-catching, interesting and engaging. The purpose of the images is to showcase the main locations of the city and encourage users to visit them.
- I chose the "favorite icon" because it is reminiscent of the famous Brighton beach huts.
- An unique scrolling page divided into four sections (home-explore-tips-booking).
- The navigation bar is fixed to the top of the page and brings the users to the different sections.
- On smaller screen sizes the toggle menu closes after the user clicks on a link to allow a better view of the page's content.
- The footer is fixed to the bottom of the page and provides copyright info at the bottom-left, social media pages icons (GitHub, LinkedIn, Facebook, Instagram) in the center, if clicked they bring the users to social media platforms opened on a different tab.
- On the "Explore section" is present a Google Map API.
- The map allows users to search a place by name. The search box auto completes the word inserted by the user.
- The map allows to browse the map by four categories (museum, park, cafe, amusement_park). It displays markers of their location and Bootstrap cards of 8/10 places with the photo, name and vicinity of this place. These cards are displayed with a carousel.
- On the "Tips section" is present a description about the aim of the project.
- On the "Tips section" is present a carousel which displays the suggested places through pictures, contents and links to their websites.
- On the "Contact section" is present a form to get in touch with me.
- In the "Tips section" in the future I could add other suggestions especially when the venues for concerts and events in Brighton will reopen.
- I would like to develop a forum where "Stroll Brighton" users can present themselves, exchange experiences, share ideas and create an online community. Python skills required.
- HTML HTML5
- CSS CSS3
- JAVASCRIPT JavaScript
- Bootstrap4 : was used to provide responsiveness on all device sizes and add some stylistic components.
- Hover.css : a third part library used to add the transition effect to social media links in the footer and to underline the navbar text.
- FontAwesome : was used to add icons for social media links and for the little icons inside the buttons in the Explore section.
- Google Fonts : was used to import typography fonts.
- Balsamiq : was used to create wireframes during the design of the layout.
- jQuery : was used to make the navbar responsive, to zoom the hero image and to create the carousels.
- Popper.js : was used to make the navbar responsive.
- Owl Carousel : was used to display my suggestions in the "Tips" section and to display the data called from Google Map API.
- AutoPrefixer : was used to analyse the CSS code and make it suitable for all browsers.
- GitHub Wiki TOC generator: was used to generate the table of contents for this README file.
- Google Map : Interactive Maps API.
- EmailJs SDK : EmailJS API.
- Gitpod : is the open-source IDE (Integrated Development Environment) that I used to create my project.
- Git : was used for version control by utilizing the Gitpod terminal (CLI) to commit to Git and push to GitHub.
- GitHub : is a hosting platform used to deploy and store the project code after being pushed from Git.
- Auto Close Tag
- Bootstrap 4 CDN Snippet
- Code Spell Checker
- Prettier - Code formatter
- Markdownlint
I have checked the validity of the code with:
Full testing documentation can be found in TESTING.md.
- EmailJS stopped working when I merged the owl carousel branch into the master branch. I rearranged the scripts in this order: jquery, popper, bootstrap, google map, emailjs. As a result of this action the problem was fixed.
- For me has been a challenge to understand how to loop through the four types of places and I have to thank my Mentor Ignatius Ukwuoma to have shown me how to build sub-arrays into an array and loop through the results with a for each loop.
- I have noticed that some of the images called from Google Map were higher than others and the default position of the directional arrows (at the bottom) wasn't user friendly so I positioned the arrows on the left and right side of the image. In this way the user can control the carousel and at the same time view the whole card. I left the directional dots at the bottom like a second choice to control the carousel(only on medium and large screens).
- Another challenge has been the carousel with the "card places" generated by Google Map. My mistake was that I was calling
$("#card-places").owlCarousel() immediately on page load, before the user was doing any search. On page load is empty so it couldn't display anything. I moved $ ("#card-places").owlCarousel() right after cardContainer.innerHTML with the card. In this way when the user clicked on the first category the carousel was displayed and worked fine. The other problem was that when another category was selected, the results were cleared and the carousel stopped working. This is because I was wiping everything inside the container with cardContainer.innerHTML = "". Then to understand if the div element with the class ".owl-stage-outer" existed, I used the length attribute > 0 and an alert message and the result was that it existed. I noticed that in my index.html I added only owl-carousel and owl-theme (for the navigation) classes but in the dev tool were added by default also the classes owl-loaded and owl-drag. I think that owl-loaded (class after load) prevented the carousel from loading more than once. So on button click on another category couldn't reload again. I tried to remove completely the card container and rebuild it with only the classes (owl-carousel and owl-theme), append it to the carousel-container and define again cardContainer = document.getElementById("card-places"). In this way I cleared the container and called again the carousel.
I developed this project using Gitpod, an online IDE (Integrated Development Environment). I have used the following commands throughout the project:
- git add . or filename (to add the changes and files to a staging area)
- git commit -m "" (to commit a message about the changes that have been brought)
- git push (to push the code to GitHub that host my repository)
- git checkout -b name of the branch (to switch and create at the same time a new branch to develop and test a specific Javascript function
- git status (to understand in which branch I was working)
- git checkout master (to switch again to the main branch)
- git merge name of the branch (to merge the secondary branch into the main one)
I deployed the project following these steps:
- Log into GitHub
- Selected my repository: Marta44/Stroll-Brighton
- Clicked Settings on the navigation menu
- Scrolled down to GitHub Pages section. Pages settings now has its own dedicated tab. Click on the link and it opens GitHub Pages:
- I selected the master branch in the publishing Source dropdown menu and pressed Save
- The website has been published to GitHub Pages and the page refreshed automatically generating my site URL: Live deployed page
- The deployed site will update automatically If I bring changes with new commits.
How to run the code locally:
-
Navigate to my project GitHub repository Follow this link
-
Click Code dropdown menu and you have two options:
- Clone
- Download the ZIP file (allows you to extract the files on your local machine)
-
Clone my repository copying and pasting into the terminal of your preferred editor/local IDE 'git clone https://github.com/Marta44/Stroll-Brighton.git'
-
Press Enter and a clone of this project will be created on your machine
-
To remove all references to the remote repository type into your terminal: 'git remote rm origin' or 'git remote remove origin' This deletes all references to the remote repository without removing the repository from the remote server
-
When you clone this project to make Google Map loading on your local machine you have to generate a new API key following these steps Generate an API key and copy your API key into the script in your html file
- Code Institute Course Content - Main source of fundamental knowledge.
- Stack Overflow - General resource.
- CSS-Tricks - General resource.
- W3 school - General resource.
- Youtube - General resource.
- Bootstrap Grid Explanation by Anna Greaves - to learn the Bootstrap grid system.
- "How to Google Map pdf" by Eamonn Smyth - to learn the main steps to call a Google map API.
- Call an API lesson by Aukje - byIlsa_lead - to learn how to call an API and display the data I need.
- Learn Git Branching - to learn branching and merging in git.
- Am I Responsive - Responsive website mockup.
- Resize images and Compress images
- Colors- to find the right matching color palette for my website.
- I used jQuery plugin developed by Jason D'Oyley to zoom out the hero image when the user scroll down the page.
- For Google Map I relied on this documentation: autocomplete nearby search place types photo request
- To create a Bootstrap card and append it to a card container in the HTML I watched Aukje - byIlsa_lead lesson: API lesson
Contents and texts has been written by Marta Marassi and main source of information has been Visit Brighton.
- The hero image in the home page is from Unsplash and the author is Rhys Kentish.
- The postcard in the readme file the image on the top-left is from Pixabay and I created it with Canva.
- In the carousel in the tip section I used two pictures from Pixabay and Pixabay.
- All the other pictures were taken by me.
- I used an icon made by Darius Dan Author Darius Dan as placeholder if some of the photos in Places API are not available. It is from Flaticon. Icon-no-image-available.
- I created the Favorite Icon with LogoMakr and sized it with Favicon
- I took inspiration from this website for the colours combination Musée Sainte-Croix website
- I would like to say thanks to my mentor Ignatius Ukwuoma for his guidance and precious advices during the project.
- I would like to thank my new mentor Marcel for his support and encouragement.
- I want to thank the Code Institute SLACK Community for the assistance and source of learning.
NOTE: This is for educational purposes.