Discover with me

Swidnica and places near by

View website in GitHub Pages

Introduction

I am a student at Code Institute. I want to become a Software Developer. This is my first Milestone Project on this course. I come from Poland originally, but I currently live in Ireland. I met a lot of nice and friendly people on the island, and some of them became my friends. We often talk about places that are important to us. Swidnica will always be in my heart, as it is not only my hometown but aslo a very interestig place to visit. My friends often ask about it and other places close by that are worth seeing. These questions inspired me to make this project.

This site is a work in progress and will be updated with new content.

Currently this website contains a few pages:

• Home,
• Gallery,
• About,
• Blog,
• Contact.

In the future I'll work to update this website with new features, for example: Google Maps, newsletter, etc.

User Experience (UX)

Depending on whether they are a new or returning visitor of the website their needs can be a little different.

First time users want to:

* navigate easily throughout the site to find content such as: gallery or recommendations, 
* get more information about Swidnica and areas nearby,
* discover new and historical places to visit, as well as, famous people from the area,  
* be informed about current events, special offers, etc.
* find social media links,
* find the best way to contact me with any questions they may have.

Frequent users come back to:

* check and read new blog posts,
* look at new pictures presented in gallery,
* get trip advise or recommendations,
* read about new attractions or special events,
* sign up to the frequently updated newsletter,
* follow my social media,
* fill in the contact form.

Design

Wireframes

Are available in this Wirefames

Features

Global

This website has a responsive navigation bar located at the top of the page. This feature is also available on each subpage. On the right side of the navbar are links to other subpages such as Home, About, Gallery, Blog and Contact. On the left side is a logo, which I created on Notepad. The website also has the same style footer stuck at the bottom of each page with links to social media, which open in separate pages. The footer also contains copyright information.

Local

Home page

This page contains jumbotron with a picture and a welcome paragraph. There is a call to action button which when clicked, moves visitors to the Gallery.

About

This is a page where you can read a little more about Świdnica. It contains information about monuments and places to see in Świdnica and its close region. There are also some facts about famous people that were born and raised in the city and the area. There is also a section about regular events that take place in the city.

Gallery

This page shows sample photos. Gallery on mobile devices shows one photo under the other, whereas larger screens, like laptops, show photos in three columns. When a website user clicks a picture, they will open a new page called Blog. There is also a call to action button to Write to Me.

Blog

This site currently asks the website users to send in the topics they would be interested in reading about. In the future, this site would be a host to the various blog posts about the topics chosen by the site visitors. This page also contains two buttons, one to view the Gallery and the other to Write to Me.

Contact

This page has a form to fill, and call to action buttons which move visitors to the Gallery or Blog page.

Technologies Used

Languages Used

• HTML
• CSS

Frameworks, Libraries & Programs Used

Balsamic was used to create the wireframes for each site on my project.

Github was used to store the project.

Gitpod was used to create my project. This is an Integrated Development Enviroment (IDE) where I worked to create this website.

Git was used for version control.

Github Pages will be used to present created webpage.

Bootstrap will be used for styling the website.

Fontawesom will be used to increse user experience by adding, expected by users, icons.

Paint to resize photos

Procreate to create a logo

Testing

In order to ensure the site works as intended, I made manual tests on phones, tablets and desktops, using Chrome, Firefox, Internet Explorer, Edge. I also ran tests using dev tools, W3V CSS and HTML validator.

1. Links (in buttons) are working properly and open expected sites.

2. Footer icons such as Facebook, Instagram and Pinterest provide exacly to the showed places and open in new windows.

3. Navbar on each site is working properly, and moves the users to expected sites.

4. Contact form must be competed to send it (message and e-mail must inserted).

5. Features are working well on different screen sizes. In future, I will add hamburger menu, which I didn't implement now.

Deployment

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub.
2. From the list of repositories on the screen, select madatoo/discover-with-me
3. From the menu items near the top of the page, select Settings.
4. Scroll down to the GitHub Pages section.
5. Under Source click the drop-down menu labelled None and select Master Branch
6. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
7. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

Run this project locally (clone this project into Gitpod) you will need:

• a Github account. Create a Github account here
• use the browser with extention for gitpod Then follow these steps:

1. Install the Gitpod Browser Extentions for your browser
2. After installation, restart the browser
3. Log into Gitpod with your gitpod account.
4. Navigate to the Project GitHub repository
5. Click the green "Gitpod" button in the top right corner of the respository
6. This will trigger a new gitpod workspace to be created from the code in github where you can work locally.

Credits

Code

To create this project I used Bootstap and w3schools websites and their tutorials. Each of my pages has additional information about borrowed original code, which were changed according to my website's needs.

Content

I was looking for some inspiration about README.dm file in files Ann Graves File and SPH73.

Media

Pictures connected to church of peace are from official church webpage, and are made by [Bożena Pytel] (https://kosciolpokoju.pl/de/pliki-do-pobrania/)

Świdnica panoramic view is taken from Wikimedia Commons / CC-BY-SA-3.0 and is [Piotr Marynowski] (https://commons.wikimedia.org/wiki/File:Świdnica_-_Panorama_miasta.jpg)

Castle Książ photo is from [Fshoq] (https://fshoq.com ) and RadioZet

All other photos are from my own home archive.

Acknowledgements

Thank you:

• Brian Macharia which is my mentor, and provide me by this project:)
• Jim Lynx for his tips about MS1 Preparation and GitHub presentations
• Anna Greaves for webinar about How to write good README.md
• othneildrewfor README template
• Dani Krossing for favicon tutorial on YT
• HelloRoman for fun and explanation in Polish language
• Zebza for short and very usefull info about UI, UX and design in Polish language as well