Code Institute - Milestone Project for User-Centric Frontend Development
I have made this site to answer all the people's questions who ask me: 'Where are you from?', 'What can I do when coming to your country?'. I had imagined a gallery of all the most beautiful places to see and what to do in the area I come from. It is a magnifying glass on my territory often seen as sun, pizza and Camorra.
The site will focus on images, and on their interactivity that will lead us to discover the places which we can visit. Each picture contains the description and a map which will show us how to reach them.
This project is the first of four Milestone Projects that make up the Full Stack Developer course at The Code Institute, the main requirements were to make a responsive and static website with a minimum of 3 pages using HTML5 and CSS3, along with any other technologies you would like to use.
Click here to see the website live
This section provides insight into the UX process, focusing on who the Finding Campania website is for, the main aims of the project and how the website can help users meet their needs.
- to get people interested to visit this region of Italy and to discover new places.
- to get all the beautiful places in Campania in a single site.
- to get a preview of every location users want to visit.
- to learn about these tourist destinations and where they are located on the map.
- to present information about these destinations.
- to create a website that is fully responsive on mobiles, laptops, tablets and desktops.
- to get intuitive and easy to navigate interface.
- to make the Campania appear as a beautiful region of Italy that must be visited over and over again.
- to be able to easily contact Finding Campania with any inquiries or questions.
- Build brand awareness.
- Collaborate with Hotels, B&Bs, museums, tourist guides, etc...
- To be able to offer discounts and special rates to those who book through the site.
- Earn money with advertising (Google AdSense) or subscription services for companies that want to collaborate and not ask for commissions for each purchase made by visitors.
-
as a new user, I want to find every tourist destinations I can reach in Campania so that I can arrange my journey.
-
as a user who stays in Campania for study/work for a short period, I want to find a place to visit in my free time so that to relax from study/work.
-
as a user who is on vacation in Campania, I want to explore the places that are close to me so that I can see as much as possible.
-
as a user living in Italy, I want a destination to visit in the weekend so that I'll get an idea of how to pass the weekend.
-
as a user who has found a cheap flight or accommodation offer to a location in Campania and I want to find something to do quickly so that I have the opportunity to have a great travel experience with little money.
-
as the owner of a company linked to the tourism sector (restaurant, hotel, b & b, tourist guide, etc ...), I want to propose offers to travellers so that I can promote my business with reduced costs.
-
as the owner of a company linked to the tourism sector, I want a website that is transparent so that there are no unexpected clauses or costs.
The main goal of the website is to attract users who are interested to arrange a trip to Campania in Italy or a single location shows by this site.
My design goal is to make up everything as intuitive as possible with the interactivity of the images making the UX simple and fun.
At the moment it is only the English version of the site and the various social networks links are fictitious, as there are no real contacts.
To improve it in the future I would like to replace the hero image with a video to increase the display time of the Home page. Moreover, the website doesn't show all possible locations but only selected places which I know.
I would like to provide the possibility to users who want to visit the Campania to be able to create an itinerary by themselves without wasting their time on the different types of travel sites that show their a lot of offers to places that are very distant from each other.
A user who chooses to visit this region in a targeted manner or who lives there for short period has all the places that he can visit near him available.
I started developing my wireframes using Balsamiq for each page on mobile, tablet and laptop/desktop.
I next moved onto the design work of the website.
I used ColorSpace to choose a colour palette to use as a base a green that matches the colour of the images so that it is not difficult to see the images.
I used Google Fonts to select the fonts for my project. The Roboto font is the main font used throughout the whole website with Sans Serif as the fall-back font in the case for any reason the font isn't being imported into the site correctly. I used the Permanent Marker font for the name of the website and I also used the Dancing Script for the heading on the Home page with cursive as the fall-back font.
I added an animation to the hero image to increase the display time of the page.
To create Responsive CSS Cards with Hover Animation I found suitable for what I had thought here.
I got the majority of the images off Google Images and I changed the aspect ratio to a 16:9 format.
I also designed my logo for the website myself through The Hoth and Gimp.
The project consists of four different pages, all of which can be accessed through the menu in the navbar.
Consistent features across all pages:
- The fixed navbar containing the menu at the top of the page is consistent and across all pages.
- The sticky footer is consistent across all pages.
- The navbar and the footer are the same colour.
- Each page features a responsive navigation bar with the title of the website and a simple logo.
- Each page has a footer with copyright information and social media icons linking to the home page of the respective media.
In the Home, there is a link to the three categories, which I have identified based on what people are looking for. Further down there is an image of the region as a map with the position of the provinces inside, and clicking on one of the provinces you are directed to the Gallery, which will show the cards of the places ordered by province, to allow a more targeted search based on the province you want to visit.
The three categories identified are:
- Adventures in which are cards representing the places where you can make excursions and playful activities,
- Art & Culture where there are cards representing museums, castles and places of art,
- Beaches where there are cards with all the most beautiful beaches.
The About page is where there will be a description of the Campania region and a description of myself with my photos that I visit some of these places.
The gallery contains all the cards of the various categories but ordered by the province to which you are directed by clicking on the name of the province on the map in the Home page.
In Contact, there is a simple form where visitors can ask for advice or send me requests for collaboration.
To create Responsive CSS Cards with Hover Animation I found suitable for what I had thought here.
In the future, I would like:
- to add the links to the right social networks, because now the pages of the various social networks do not yet exist.
- add every place to visit because I selected just a few places for each category.
- to replace the hero image with a video presentation.
- to replace the images of the places with high-quality images made by me.
- to add another form for the business visitors.
- option to choose the language of the website.
- to add the best offers of the moment to the home.
- to add a section to the cards with the offers available in that specific place.
Languages, libraries, frameworks, editors and version control
- HTML5
- The language used to create the form and add content to the website.
- CSS3
- The language used to style the HTML5 elements.
- Bootstrap framework
- The project uses *Bootstrap4* to simplify the structure of the website and make the website responsive easily.
- The project also uses BootstrapCDN to provide icons from Font Awesome
- Gitpod
- I used Gitpod's development environment to write the code for the website
- Git Version Control
- I used Git for Version Control to record changes and updates to my files
- GitHub
- I used GitHub’s repository hosting service to host my deployed website as well as track previous versions of my code
Other tools used:
- Balsamiq
- I used Balsamiq to create wireframes for my project for desktop, tablet and smartphone.
- Google Images
- This was the source for the images in my project.
- Google Fonts
- W3Schools
- It was helpful with all my CSS doubts.
- Animate.css
- Techsini
- AutoPrefixer
- This project used AutoPrefixer to make sure the CSS code is valid for all browsers.
- Typora
- Chrome DevTools
- Wikipedia
*Note: I also found Stack Overflow, W3C Schools and Start Bootstrap helpful resources throughout the project, as well as the Code Institute Slack Community.
User Stories:
-
as a user who wants to find a destination (for vacation, to relax, to visit):
- No matter what page the new visitor lands on, they can easily find and use the navigation bar.
- The logo image and the name always lead back to the home page.
- The home page call to action button leads the user through the three categories and the gallery.
-
as the owner of a company linked to the tourism sector (restaurant, hotel, b & b, tourist guide, etc ...):
- the form in contact have the option to contact me to propose or to cooperate
- the cards are large enough to highlight an offer on the image
- the read more button can direct you to the section of the tourist company website where there is an in-depth description of the place.
On the homepage, users can reach the category pages (adventures, art & culture, beaches) by clicking on the respective images or they can click on one of the provinces on the map, thus being directed to the places below that province in the gallery. In this way, the user is facilitated in the selection of places based on what he is most interested in or based on proximity.
On the pages of the three categories and in the gallery the various places shown in the cards that show an image and the name of the place.
In the desktop version, simply by hovering over the tab, it expands to show a description and two buttons that link to a site where you can read a more detailed description and where they are on the map. In the mobile and tablet version, you must instead click on the image of the place to expand the card.
Users can contact the website via the form in contact.html.
General Testing
- Tested all external links opened in a new tab and went to the correct page
- Tested all internal links within the pages.
- Tested all buttons work.
- Tested the responsive behaviour of images and text on desktops, laptops, notebooks and various smartphones.
- Reduce and expand the width of the window to verify that each line of text behaves the way expected and that the text arrangement looks good on all device widths.
- CSS was put through a CSS Autoprefixer and the changes were added to the website.
Navbar
- Click on each navigation menu item and verify that it links to the correct page.
- Hover over call to action button and verify the hover colour change
- Change the screen size from desktop to tablet and mobile to verify that the navigation bar is responsive and switches from inline menu to burger icon dropdown menu at the appropriate place.
- Tested the logo and main h1 header linked back to the home page on all pages.
Cards
- Tested link to "Read more" and "Map" buttons.
- Tested hover over cards in desktop mode and confirm the hover animation works as expected.
Form contact
- Try to submit the empty form and verify that an error message about the required fields appears
- Try to submit the form with an invalid email address and verify that a relevant error message appears
- Try to submit the form with all inputs valid and verify that a success message appears.
- Reduce and expand the width of the window to verify that the form display behaves and centres the way expected and that it looks good on all device widths.
Footer
- Hover over each social media icon and confirm colour and size transitions expected.
- Click on each icon to confirm it opens a separate tab for its link.
- Reduce and expand the width of the window to verify that the footer is responsive and looks good on all device widths.
-
- The developer used the W3C CSS Validation Service and W3C Markup Validation Service to check the validity of the website code.
- Categories' h2 in index.html did not appear centred on breakpoints 767px and 1200px, solved by media queries by shifting the value of left to each of the breakpoints.
- in mobile mode, the toggle button in the navbar was shown on another line, solved by decreasing the font size of the navbar brand.
- the three images in the side section should occupy the width that the text above also occupies while in the mobile mode they should be larger, not solved as I considered it irrelevant and didn't want to change the code further.
- in many cards the Read more and Map buttons overflow, unsolved in order not to increase the distance between them when they are closed.
This project was developed using the Gitpod, committed to git and pushed to GitHub using the built-in function within git.
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select maxthor500/Finding-Campania.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
How to run this project locally
To clone this project into Gitpod you will need:
- A GitHub account. Create a Github account here
- Use the Chrome browser
Then follow these steps:
- Install the Gitpod Browser Extensions for Chrome
- After installation, restart the browser
- Log into Gitpod with your Gitpod account.
- Navigate to the Project GitHub repository
- Click the green "Gitpod" button in the top right corner of the repository
- This will trigger a new Gitpod workspace to be created from the code in GitHub where you can work locally.
To work on the project code within a local IDE such as VSCode, Pycharm etc:
- Follow this link to the project GitHub repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY
- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here.
- Most of the descriptions were taken from Wikipedia.
- When I can't find a good description with the English version of Wikipedia I used the Italian version of Wikipedia, appropriately marked under the Read more button.
- I didn't find a good description on Wikipedia and I used the following site:
- Each image sourced from Google Images except for the photos in about and the photos of the categories in the home that were taken by me.
- Each image has been renamed with the web address of the source.
- from Code Institute I used to code for hero image and contact form from the "Love Running" lessons and adapted to own project.
- from Bootstrap I found useful the container system and the navbar to make the website responsive.
- from W3Schools I found the solution to set up the provinces links on the Campania image so it shows as a map.
- from CodingNepal I used to code for cards and adapted to my project.
I would like to thank the following:
- My mentor, Spencer Barriball, for his guidance, wisdom and encouragement throughout the project.
- CI Staff and Slack Community for their assistance with minor coding issues.
- to write my README.md it was useful to follow that of Anna Gilhespy and JackSheehy15
The content of this website is for educational purposes only.
Thanks for taking the time to view my README. I hope you enjoyed your visit to my page.