Budapest - A Historical Travel Guide

This Website is a comprehensive travel guide designed to help tourists and history enthusiasts explore the fascinating historical sites, landmarks, and hidden gems of Budapest. Whether you're planning a trip or just curious about the city's history, this guide has you covered.

Are you ready to explore Budapest?

Table of Content

• User Experience UX

  • Wireframes

  • Site Structure

• Design Choices

  • typography

  • Color Scheme

• Features

  • Home page

  • Navigation Menu

  • Background Image

  • Introduction

  • Footer

  • Historical Places

  • Fun Places

  • Gallery

  • Contact

• Technologies Used

• Testing

• Deployment

• Credits

  • Content

  • Media

  • Code

• Acknowledgements

User Experience UX

Wireframes:

The wireframes for Budapest - A Historical Travel Guide were produced in Balsamiq. There are frames for a full width display and a small mobile device. The final site varies slightly from the wireframes due to developments that occured during the creation process.

Site Structure:

Budapest - A Historical Travel Guide have five pages. The Home page is the default loading page, Historical Places, Fun Places, Gallery and Contact pages are all accessible primarily from the navigation menu.

Design Choices

Typography:

I have choosen the font Lato for the Website because it is supposed to be a travel guide which provide mostly information about Budapest. I felt like other fonts could might be to distracting while reading the Text section on the page. On the Home the welcome Text which appears when the User Hover over the middle on a Laptop or Desktop is in italic to transmit a warm welcome feeling to the Page. The headings of the introduction Section underneth the Background image on the Home are in italic to accentuate them from the Text sections below.

Color Scheme:

The color scheme choosen is one based on Monochromatic color Schemes, see blow in the screenshot.

Features:

The Website Budapest - A Historical Travel Guide got build to give users who visit the Website a Inspiration and historical insights about Budapest.

Navigation Menu:

• located at the top of the page, is fully responsive and contains all links to all pages of the site.

• The logo os clickable and brings the user back to the Home page.

Home page:

Contains a background image of the Parliament with a hover effect in the middle of the Page. When the user hover on a Desktop or laptop over the middle of the image, a welcome Text appears. On mobile devices or tablet the text appears without the blue background on the center of the page.

Introduction to page:

below the background image there are two text blocks with two subheadings and one main heading to give the user an idea what to expect from this side.

Footer:

• The Footer contains clickable social media links of the Travel Guide, which direct the user directly to the selected side in a new tap.

• Once the users visited the social media sites of the Guide, they can access reviews, feedbacks and more informaion about the Guide and what it does.

• The user can decide based on this information, if it would be worrthy to conect with the Travel Guide also on social media.

Historical Places:

The Historical Places page give the user a short summary about the historical background of some places in Budapest, it's purpose is only to give an Inspiration for places to visit.

Note: Background color was changed from #193DF0 blue to black rgba(0, 1, 5, 1)

Fun Places:

The Fun Places site want to give the user, ideas about what to do in Budapest to have fun and enjoy the city.

Note: Background color was changed from #193DF0 blue to black rgba(0, 1, 5, 1)

Changes have been made:

• The #193DF0 color has been changed to black rgba(0, 1, 5, 1) value, because the contrast of white text on blue background was biting the eye.

• The background color of the Footer has been changed from #091034 dark blue, to #DDE3FD to make the site look more appealing.

• The color of the social media Links was changed from DDE3FD to rgba(0, 1, 5, 1)

The screenshots below are showing the changes which was made:

Home page:

Gallery:

The Gallery page was created to increase the desire of the user to visit Budapest with visualising the city with photos.

Contact:

The Contact page is giving the user the possibility to contact the Travel Guide for further information and Sign up for an exclusive newsletter to stay updated about the latest historical insights.

Confirmation Form:

When users subscribe to the newsletter they get redirected to the confirmation page, with a background image of the Chainbridge and a green success message and a clickable Home link, so the user can get back to the Homepage. The green text color was choosen because it is comonly known as a positive signal color.

Technologies Used

• HTML5: provides the content and structure for the website

• CSS: provide the styling

• Balssamiq: used to create the wireframes

• VS Code: used to deploy the website.

Testing

Please refer to here for more information on testing Budapest - A Historical Travel Guide

Deployment

This site was depolyed to GitHub pages. The steps to deploy a site are shown below:

1. In the GitHub Repository called Budapest click on the Settings button on the Repoitory navigation menu.

2. In Settings on the left side, go down to the Pages item and click on it.

3. Make sure the Source item is set to: Deploy from a branch

4. at the Branch item underneth the source item, set the branch to main and save it.

5. Once you have selected the main branch, the page will automatically refresh to show a detailed ribbon display indicating that the deployment was successful. If the page does not refresh automatically, refresh it manually.

To get to the live link of the GitHub repository - click here: https://github.com/DFCMK/Budapest

To Fork the repository on GitHub:

Forking a GitHub repository creates a copy of the repository in your own GitHub account. You can view and modify the copy without affecting the original repository.

To fork a repository:

1. Log in to GitHub and navigate to the repository you want to fork.
2. Click the Fork button in the top-right corner of the page.
3. Select a name for your forked repository.
4. Click the Fork button to create the copy.

Once you have forked a repository, you can clone it to your local computer and start making changes. When you are ready to share your changes, you can create a pull request to the original repository.

To create a local clone of this project:

1. Click the Code tab under the repository's name.
2. Click the clipboard icon in the Clone with HTTPS section to copy the URL.

Once you have copied the URL, you can use a Git client to clone the repository to your local computer. Here are the steps to clone a repository using Git Bash:

3. Open Git Bash.
4. Navigate to the directory where you want to clone the repository.
5. Type the following command and press Enter:

git clone

Replace with the URL of the repository that you copied in step 2.

This will create a local clone of the repository in the current directory.

You also can create and name the directory where the clone should be saved in, with adding the directory name after the . So the full command would look like this: git clone XXXX(This is a directory name)

Credits

Content:

• The font came from Google Fonts.

• The colour palate was compiled by W3Schools

• The icons came from Font Awesome

• The Navigation Menu got created with a YouTube tutorial.

• The inspiration for the Project came during creation process.

• Balsamiq was used to create the wireframes.

• The Gallery was build with code based on the Love Running

• The content of Chainbridge on the Historical Places is mostly summarized from the book Hungry History and Culture chapter: Reformation period sub chapter: Hitel written by Istvan Szechenyi 1830

• The rest of the content are summerised wikipedia articles, see below: Hungarian Parliament Buda Castle Matthias Church Szimpla Kert Gellert Bath Széchenyi Bath The Great Market Hall

Media:

• background image on Home page came from pexels

• images on other pages came from unspash and istockphoto

Code:

The Navigation Menu was build with a YouTube tutorial and the code is based on this video. The code can be find in line 17 - 98 and line 646 - 666. To see the code click here

The Gallery page was build, while using the "Love Running" project as Guideline. (line 454 - 464) and (line 575 - 582). To see the code click here

Acknowledgements:

I extend my heartfelt thanks to several individuals and communities who contributed to the completion of this project:

• Precious Ijege, my dedicated mentor, for providing valuable guidance and support throughout the development process.

• The Code Institute's Slack community, a source of inspiration and assistance from fellow learners and professionals.

• The entire Code Institute team, whose resources and expertise have been instrumental in my learning journey.

Budapest - A Historical Travel Guide is a product of my passion for the city and my desire to showcase its rich history and culture. Having grown up in Budapest, this project allowed me to share my love for the city with the world.

Denes Kalnoky 2023.