- 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 second Milestone 2 project which is part of the Code Institute’s Full Stack Software Development Diploma Course. This project demonstrates the skills and knowledge of using the HTML5, CSS, JavaScript and API with an additional framework Bootstrap in Interactive frontend Development module which I have learned recently on the course.
- Wroclaw the city of dwarfs is an interactive guide of a Polish city located in the south-west of Poland. The aim of this guide-website is to present the tourist attractions, including the small Wroclaw dwarfs that have settled in this city for good, as well as the accommodation and gastronomy facilities offered by the city. This website was created to encourage everyone to visit this beautiful city and enjoy its charms.
- As a user, I want to navigate the site easily, so that I can find what I need effectively.
- As a user, I want to be able to access the website on a desktop and also mobile devices, so that I won't be restricted from which device I can access the site.
- As a user, I want to be able to follow or connect with the owner of the website on social media, so I can get more information about the city.
- As a user, I would like to know what the city has to offer, so that I can adjust it to my needs and interests.
- As a user, I want to have an access to the map of the city with various places, so I can visually see their location.
- As a user, I want to be able to contact the site owner, so I will be able to share my feedback regarding the website or ask about planning my visit and get some more advice and recommendations.
- As a user, I want to easily understand the purpose of this site.
This website design will target tourists of all ages, families with children and friends who are looking for the next city break destination, as those intended to visit Poland. The main purpose of this project was to create and interactive guide website with easy and quick access to information about the city by presenting main attractions, accommodation and gastronomy facilities, displayed on the map, where visitors can search the options of their interest. It will present the main attractions of Wroclaw, the family of small dwarfs that have settled in Wroclaw for good. It can be a great activity not only for children but also for adults who may want to find them all while exploring this amazing city.
1. Strategy
My goal for this project is to promote the Wroclaw as the next city break destination and increase the interest of tourist activity. It is intended to be used as an interactive guide to help navigate through the attractions, restaurants, pubs, accommodation through the UX simple, clean and user-friendly site design.
- To create easier trip planning to Wroclaw , by providing useful and helpful information about the city.
- To promote places which are great for short term destination but may not always be considered.
- Promote Wroclaw and encourage tourists to visit and explore this lovely city.
- Provide a useful information about the city and demonstrate various activities, accommodation, and places to eat which may suit the visitors needs and budget.
- Provide the contact form, so the users be able to get in touch with their queries in relation to their trip.
- Include user friendly map with various attractions, accommodation and gastronomy facilities.
- Include current information about the weather.
- Easy to find information about attractions , accommodation, and gastronomy facilities of the city.
- Designed with priority of mobile devices as this it the most common way of searching for information.
- Easy to find links to social media accounts to follow the news about the city.
- Easy to find contact form for possible enquiries about the city.
2. Scope
- Mobile-first website that is responsive on all devices.
- An Attractions section that includes best attractions, accommodation, gastronomy and dwarf's locations with interactive map.
- Selection of various APIs to display information to the user in real time.
- To ensure that the site immediately shows its purpose.
- To have a straight forward interface, that allows the user to make choices about the content they wish to display.
- Animated small gallery.
- Interactive clickable features that allow the user to find relevant information.
- Provides users with pure UX.
- A contact page that includes an easy to use form that sends emails to an account using EmailJS.
- Fits with my current skills.
3. Structure
- The purpose of the Structure has been created as a single page website containing sections for each page and enables users to quickly navigate through the website, easily assimilate useful information and have an overview of the attractions, accommodation, facilities.
- The first page will consist of a large hero image and an animated welcome sign will appear after loading page and also navigation bar which is transparent will change to dark after scroll so the user can see the full image first.
- The second about page will contain information about the city, the story about the dwarf and also useful information about the Polish currency and the current weather in Poland. At the end of the page there will be an interactive gallery of dwarf's.
- The third Attractions page will contain an interactive map that will be combined with buttons include the most important attractions, places to stay, restaurants and the location of some dwarfs in the city.
- A form will be added to the Contact page with the following fields: "Full Name", "Email Address" and "Your Message" which 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.
- The user will be able to send an email with enquiry about the city via EmailJS. A confirmation message will appear when email is sent successfully or error message if unsuccessful.
- The user will be able to interact with the data on the About page by flipping the coins to see its heads or tails.
4. Skeleton
HOME PAGE
** HOME PAGE FINAL RESULT**
The navigation bar was initially set to be transparent. While scrolling down it supposed to turn black however, during the development
of the project I decided to keep it black at all times as transparent text was not sufficiently visible on the background image.
The welcome sign initially set as hidden and which appears after the page load and disappears after scrolling down, is now set as permanent.
I believe it's less distracting for the user.
ABOUT PAGE
ABOUT PAGE FINAL RESULT
Initially, in the about section, there supposed to be a currency showing images with Polish coins, which would change to tails after pressing the button, however I decided against it. I also decided to move the weather to home page and have it as current one day weather.
ATTRACTIONS PAGE
CONTACT PAGE
- Pages/Section: Home, About, Attractions, Contact
- Fixed footer hiding on with Social Media icons opened in a new tab.
- Fixed navigation bar primary transparent changes to Ritch Black as the user starts to scroll down the page
- Menu headings and pointing to each of the 4 Pages
5. Surface Colors
-
When choosing the colors, I wanted to refer to the national white and red Polish flag. Cinnabar is the current color of the flag and to which I have chosen a slightly more subdued shade of white and complemented it with shades of black and gray, which will give a website a balanced contrast.
-
As a primary color, I have chosen the color Rich Black FORGA 39 (0E0E10) which has some small tonal changes from a normal black color and it will be used for navigation bar, footer and font-color of the website.
-
As an additional color, I have chosen Cinnabar (E34234) which will be used for buttons and ON/OFF Switch used for reversing buttons. This color will emphasise the important buttons for contact/sentand and they will be noticed by the user immediately.
-
For the background I have chosen a Lavender Gray (C7C7D1) and for text on navbar and footer I have chosen off-white named Cultured (F4F4F6). Both colors belong to the same color palette as Rich Black FORGA 39. These colors work very well also with the images.
Typography
- For the main headings, logo "WROCLAW" and the sign "The city of Dwarfs" I selected the "Just Another Hand" font with the group of fall-back font of "Cursive". It will add simplicity to the website which I feel suits the overall look of the website. I have chosen the same font to make the favicon logo for the tab.
- For the content I have chosen "Lato" with fallback of "sans-serif", which was created by a polish designer and due to its popularity this is a font that many users will be familiar with. It evokes a feeling of trust as well as being visually pleasing. It is a popular pairing font with "Just Another Hand" according to google fonts
Images
- The image selection has been chosen very carefully to present the beauty of Wroclaw city and its main attraction - the Dwarfs which settled in there for good. The photos presentation shows potential tourists the attractiveness of the city
- The hero image was chosen to give the site a little bit fairy-tale character as the main attractions of this city are in fact dwarfs and overall fairy-tale scenery.
Existing Features
- It is a fully responsive website that allows the user to use it on any device.
- Designed with HTML, CSS, Java Script and Bootstrap.
- One page with 4 sections acting as individual pages.
- The fixed navigation which is transparent when the page is loaded and changes to a shade of black on scroll, allows user to easily navigate, regardless of which page is visited and also gives a nice effect. Navigation bar was changed through the project development and kept black as transparent wasn't visible on the background image as expected.
- The name of the site provides a link to the home page.
- The navigation links reference each section of the site.
- The navigation links are shown in a burger menu on screen of tablet devices size and under.
- Show/Hide footer when scrolling up or down easily to access social media but also gives a bigger surface on the screen for the user.
- The footer contains links to social media pages and each opens in a new window.
- The icons change from white to red which refers to the Polish flag.
- A background hero-image presented to the user takes 100% of the screen.
- A welcome sign appears in the middle of the website after the website is loaded.
- An API weather on the left top corner which shows the current temperature in Wroclaw.
- An interactive gallery moving from side to side.
- The set of coins has On/Off switch which user can reverse to see heads and tails (unfortunately, I could not apply this idea as available images with coins were not of a suitable quality).
- Three days weather option was changed to one day weather and moved to home page.
- The markers with Attractions, Accommodations, Restaurants/Bubs/Bars and Dwarfs are visible on Google interactive map and each option shows a brief description when clicked.
- The buttons with 4 options to choose from change color from red to white when hovered over and stay white when visited.
- A contact form with message space and send button is displayed for potential enquiries.
- Contact phone number is also provided in case the user prefers to make a call.
- A send button changes from red to white when hovered over, referenced to the polish flag colours.
Features Left to Implement when skills develop Another feature idea
- The set of coins has On/Off switch which user can reverse to see heads and tails.
- An currency options for the user so they can check and calculate their actual currency.
- Skyscanner API for displaying flights from different locations which will consist an information of destinations, airline and price.
- An event calendar section.
- Connect the contact form with backend server.
- Make the Attractions section more descriptive with a list off all attractions appearing on the page.
1. Languages
- HTML5 - the current standard that is used.
- CSS3 - the current standard that is used.
- CSS3 - the current standard that is used.
- JavaScript.
2. Integrations
- Bootstrap - 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.
- Google Developers Console to get the APIs used on the site.
- EmailJS - Java script code given to make Contact Form functional
- Latlong.net to find the latitude and longitude for Poland, Wroclaw and some markers for the map
3. API
This site uses following APIs:
- Google Maps JavaScript API used to create the map
- Initially, the map displays the locations of Poland and a marker that shows the locations of Wroclaw city when hovering over it the name of Wroclaw appears.
- Next to the map there are buttons which contain places associated to Attractions, Food&Drinks, Accommodation and Dwarf Hunting. When buttons are pressed the locations will be given on the map. The markers are clustered together. When the user presses the clusters they will zooms in.
- Each place has a short description and a name that the user can navigate by clicking on them one after another.
- Open Weather Map for the current weather for the day uses open weather map API.
- EmailJS used to allow the user to send a message via the contact form.
4. 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.
5. Other
- Photoshop - for photo editing.
5. IDE Extensions used in GitPod
- Auto Close Tag
- Bootstrap 5 CDN Snippet (!bcdncss)
- 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.
- Balsamic - Wireframing design tool to create wireframes.
- Responsinator - Responsive website mock up image generator.
- Am I Responsive? - used to check how the website will look on different devices.
- Autoprefixer - used to add vendor prefixes.
- Balsamiq Wireframe - used to create wireframes for planning project structure and layout.
- Google chrome developer tools - used to check page elements, help debug issues with the site layout and test different CSS styles and console JS.
- w3schools - used as general source of knowledge.
- Stack Overflow - used as general source of knowledge.
- Stock Free Images resource for images (papa dwarf).
- Tripadvisor - resource for Accommodation and FOOD and Drinks in Attractions section.
- google.com/travel - resource for Attractions section.
- Podroze po europie - polish website tor the information about the attractions in the city.
- Wikipedia - resource for information about the attractions in Wroclaw .
- Wikipedia/dwarfs - resource about dwarfs localization.
- Visit Wroclaw - polish website for the attraction section content.
- Kolejkowo - polish website for the attraction section.
- Colors - color schemes generator.
- Contrast checker -contrast color checker.
- TinyPNG - Efficient compression of images for site.
- Favicon.io - to convert an image into a favicon.
- Grammarly - used to help with grammar check.
- youtube - used for general resource.
- 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
- HTML - Markup Validation W3C Service
- CSS - Jigsaw Validation W3C Service
- JSHint - JSHint for detecting errors in JavaScript code
- Link checker - Check links and anchors in Web pages or full Web sites
- Lighthouse in Google dev tool for testing the performance of the website
- 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.
- There are two APIs used in this project. The API key is a unique identifier that authenticates requests associated with your project. Both Api require their own unique key to run the project locally.
You will need your gmail account then you have to create a billing account at developers.google.com.
- Go to the APIs & Services > Credentials page developers.google.com and get your own account and your own key.
- On the Credentials page, click Create credentials > API key. The API key created dialog displays your created API key.
- Click Close. The new API key is listed on the Credential page. Remember to restrict the API key before using it in projects.
Second API is the open weather API key. To create that key you need to go to the openweathermap.org.
- Sign up to the account.
- You will receive your API key when you signed up to the account.
- Setting up an account and obtaining a key is free but there is also a paid subscription plan which gives more option to use your API.
- Set up EmailJS account1. Create an EmailJS account.
- Create an email template: click on the Email Template section on the left-hand side.
- Click Create new template up at the top.
- Choose the blank template.
- Fill in the template and mark where the email needs to be sent to.
- Click on the Test Button at the top.
Connecting to EmailJS
- Go to the EmailJS website and choose documentation tab at the top.
- Choose SKD installation on the left and copy the EmailJS SDK.
- Copy the code and paste the code in before the closing/head tag.
- Get your user ID - you can get this from the Instructions page in the EmailJS dashboard.
- Paste it into your emailjs.init(). You can copy your custom EmailJS code ().
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/Wroclaw-The-City-OfDwarfs-MS2 - Press Enter and you local clone will be created.
Media Almost all pictures were downloaded from pixaby. The photo of the logo and the papa-dwarf image was downloaded from Stock Free Images. were modified by me in photoshop for the needs of the project.
Content
- Visit Wroclaw - content for the attractions section markers.
- turystyka dla studenta - content for the attraction section about Wroclaw.
- Wikipedia - description of the dwarfs and their location latitude and longitude.
- Tripadvisor - looking for best restaurants, accommodation, attractions and description.
Code Snippets
- EmailJS documentation and code for sending Emails.
- Code Institute - tutorial for sending Emails.
- Stack Overflow - solution how to integrate google maps MarkerCluster with infowindow.
- Stack Overflow - css animation from left to right gallery images.
- Shane Keran - used code for animated gallery and customized.
- Jonah Lawrence - tutorial how to build a Weather APP.
- Stack Overflow-dippas - solution on collapsing the burger navbar menu in bootstrap5.
- w3schools.com - code used to hide a footer when the uses starts to scroll the page.
I would like to thank:
- My mentor Aaron Sinnott for his helpful and valuable feedback and guidance.
- Tutor support at Code Institute, for fantastic support and help with my technical questions.
- Slack community for their suggestions and support.