code-institute-submissions / vilnius-lithuania Goto Github PK

• This website has been designed to represent an overview of Vilnius, Lithuania to a target audience of prospective tourists. The primary goal of the website is to make a memorable impression on this target audience and for them to leave feedback via the "Visit Vilnius" page.

• This website may also interest anyone looking to visit the capital opf lithuania. Friends and Family may also like to view my project.

User Stories First Time Visitor Goals

• As a First Time Visitor, I want the user to understand the purpose of the webpage and learn about Vilnius.
• As a First Time Visitor, I want to navigate easily around the website to find content. Returning Visitor Goals
• As a Returning Visitor, I would like to contact the person with any queries or propositions.
• As a Returning Visitor, I would like to be able to view some of the most scenic places in the capital of Lithuania.
• As a Frequent User, I would like to be able to connect with people on their emails if they wish to make any inquiries about Vilnius.

Colour Scheme The colour scheme of the webpage is:

• #002046
• rgb(0, 7, 9)
• #3a3a3a
• Black: #000000
• White #fff

• The website uses the font of 'Montserrat', Oswald and the font of sans-serif is used as backup font in case of any difficulty to present the primary font of Montserrat.

Home page including header, wireframe

Scenery page:

Visit Vilnius page:

• The home page contains historical facts about Vilnius old town, national and regional parks located in and around the city including facts about all 3.

• The scenery page I have placed a multitude of images of the cities most beautiful places in my opinion.

• I have put a form including visitors to leave their name, email and a question to gauge how many people would be interested in visiting.

• This is my first attempt at making a website and it has been a difficult challenge for me to overcome.

I had issues with the layout of the national parks section as it worked fine on desktop but when scaled down to mobile screen sizes the text would overlap into the box below. I fixed this issue by reducing the font size of the H3 texts.

• I would like to implement activities you can take part in as there are a plethora of fun and exciting things to do in the city.

• I would also like to add a feedback section so users can input their experiences so future tourists can have the knowledge of someone who has already been for example restaurants, bars and some locations where they took some beautiful images of locations around the city.

• HTML5

• CSS3

• Google Fonts
• I used Google Fonts to import the font 'Montserrat' to my style.css which was used all throughout the website.
• FontAwesome
• Font Awesome was used to add icons to my website to deliver a better UX.
• htmlcolorcodes
• I used Coolor to provide a colour scheme for the website and for UX purposes.
• Balsamiq
• I used Balsamiq to create my wireframes for the project.
• Am I responsive
• I used this to create my Mockup at the top of my README.md
• Git
• I used Git for version control. It was through the terminal; Gitpod, that I used to commit and push code to GitHub.
• Github
• GitHub was used to store projects pushed from Git.

• I validated my webpage with the use of the W3C Markup Validator and the W3C CSS Validator to ensure there were no syntax errors.

W3C Markup Validator

W3C CSS Validator

• I am aware there is a single error but I cannot figure out how to fix it, I cannot locate where the parse error is located

• First Time Visitor Goals

• On first view of the website, the user is met with a clear and concise navigation bar which takes them to the page of their choice. As a First Time Visitor, I want to navigate easily around the website to find content.

• The navigation bar shows clear options in which section to go on the page. I implemented a fixed-top navigation bar which is very helpful for the user moving to another page on the site..

• At the bottom of the page, the user can view different social media accounts. The links take the user to a new tab, keeping my website open on the previous tab.

• I have tested this website on the following browsers:

• Google Chrome

• Microsoft Edge

• iPhone X

• iPhone 7

• iPad

• iPad Mini

• Huawei P Smart

• Huawei P30 Lite

• Samsung Laptop

• I asked Friends and Family to borrow their phone or tablet to view my website in order to test the site. I also asked for feedback and if they were able to point out any bugs or UX issues.

I tested all internal links and they worked correctly.

All external links were tested and they opened on a new tab correctly.

Menu items were not displaying correctly on smaller screen sizes, I made the font size of the page title smaller in order to give the menu items more breathing space.

I am aware that there are some issues with text clipping into the side of the screen on screens below 350px, as a result the cover text would become slightly obscured.

GitHub Pages This project was deployed to GitHub Pages taking the following steps:

1 Sign in to GitHub and locate the GitHub Repository.

2 "Settings" from the menu near the top.

3 Select "GitHub Pages" section from the options on the left side of the page.

4 Under "Source" click the dropdown menu called "none" and select "Main".

5 The page then automatically refreshes...

6 The Website is now deployed. Scroll down to GitHub Pages section to retrieve the newly published link.

1 Sign in to GitHub and locate the GitHub Repository.

2 At the top right hand side of the screen, below the navigation bar, you will find the "Fork" button.

3 By clicking this, you will have a copy of the original repository in your GitHub account.

1 Sign in to Github and locate the repository.

2 Above the list of files, to the right, click the "Code" button.

3 In order to clone the repository, you can do so by HTTPS, SSH and GitHub CLI. Select one and copy the URL.

4 Open Git Bash.

5 Change the current working directory to the location you'd like the cloned directory to be made.

6 Type git clone and paste the URL you copied in step 3.

7 Press Enter. Your local clone will be created.

• All images: unsplash.com

• Code for formatting of old town facts section on first page modified from Love running project

• Syntax for styling of scenery page taken from love running.

• Syntax for media query for smaller screen sizes taken from love running

• Signup form altered from signup challenge

• All content was produced and written by the developer.

• My Mentor for his highly constructive help and support.
• The Code Institute's tutor support for quickly assisting with any problems or queries.
• The Slack community for being very supportive