Green Space

Project Description

Historic center quiz features differnt historic centers around the world, it seeks to test our knowledge of the differnt centers around the world, it also exposes our mind to all these places of interest. It features different pictures of places of history, with 4 options to pick from. To get the right answer, you need to click on the correct option. The quiz automatically show the next question once clicked.

Site Owner's Goal

To show forth different historic centers around the world.
Targets old and young people interested in getting more knowledge about the world around them.
To instil knowledge in its users.
Allow users to access the instructions first.
Progress bar to keep its user informed.
Points update.
Numner of loss record.
Overall score obtained by the user.

Users Goal

To easily navigate and understand the website.
Be informed about historic centers around.
To be able to reset the game whenever they feel like.
To be able to access the game from different media.
Identify and see new blogs on the site.

Audience

The game seeks to impact knowledge and hence its target audience are old and young interested in knowing about the various historic centers around the world.

Wireframes

All wireframes are made with Balsamiq

Link for the wirframe pictures can be found here

Features

Main Page

The main page is displayed once the websites is open

It is made up of the heading "Historic center quiz" telling the user what the page is about. Right under it are buttons to access the game instruction and to enter the players name.

Instruction button : This opens up the instruction panel which tells the player more on what to expect in the game. Enter name button: This prompts the users to enter his name

Services Page

This further highlights the services users can have access to from the page and with a link to access the list of service providers.

Contact

As a way to build confidence in the site for standard practices, the contact details of the site owners are included. Users will have options to contact in case they are having delays in getting feedback from their preferred service providers.

Header

Across all screensize, the header features the website's name and logo along with the navigation links to connect other pages. The header displays uniformly across all the pages.

  <pic>

Blog

 As part of the aim of this site, this is a section for garden updates where users can get the current trends in garden practice.

Footer

* The footer features 3 sections;
   * A section to register for newsletters on gardening.
   * Social media links to connect and build the community.
   * Copyright information.

Future Features

I will like to include a live chat menu where users can get to sort whatever queries they have.
A pop-up message on clicking 'Get Quote' which asks users questions that pertains to the services they require and provides an estimate quote for the required service.
On clicking the Get Started link, users will be provided a list of relevant service providers for easy contact.
A search menu that an provide a short way of navigating through the site.

Colour Scheme

In line with the motive of the website, I have selected a shade of green (Hex Value = #184E20) and White to complement the green nature attribute that the site promotes.

I have also used RGB(230,32,65) as an accent color to especially in places where the users attention are needed

Accessibility

Get a Quote section

This is designed to give users quick quote based on the services they require. The price given will be a range and the user will be informed that its just to have an idea of what it takes to get such services as prices might vary depending on their preferred service providers.

Services section

This introduces the user to garden standard practices and easy access to its providers.
Contact Us

This is included to provide easy contact to the providers.

Design Choices

The design choice was dictated by my ability to use the knowledge gained from the first module of the course. While presenting challenges, it allowed me to achieve a further growth in understanding of the concepts taught better.
From the start of the program, I aimed to design a website that covers in detail concepts taught in the module and more.

Font

Roboto
- Evokes a clean and bold style which prompts its readers wanting to act.
Archivo
- I believe it complements and blends with Roboto font.

Technology, Frameworks and Programs

Languages

HTML
CSS

Frameworks and Programs

Balsamiq
- Used to create wireframes to plan the project
Github
- To store written code
Gitpod
- The project was put together using Gitpod development environment. From here, I could commit and push all of my changes to Github throughout the project.

Bugs

Caption Image
- I discovered the caption image was not properly placed on smaller screen, it was resolved by resizing and viewing it till I got a properly placed caption image.
Materialize
- Being guided by our experienced group members, we all learnt that Materialize works on a grid basis. This caused problems in trying to centre our text on the navigation bar, where originally we were going to have a sign up link. However, the bugs would have needed specific media queries to iron it out and that would have been better achieved at the start of the project, we took the creative choice to drop the sign up option and present our application as more of a tool.

Deployment

The project was deployed via Github Pages.

Steps I took to deplay my website;

Go to the repository for Green Space.
Click on the settings tab and locate the pages tab.
Select to deploy from main branch.
A few minutes later, after refreshing the page, my site was live for viewing.

Tools

[https://balsamiq.com/](Balsamiq Wireframes)
- Image compression
[https://ui.dev/amiresponsive](Test for Responsiveness).
- HTML validator
- CSS validation
- Contrast checker
https://coolors.co/
[https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/](Learinng more about flex).
https://www.w3schools.com/, [https://www.slackoverflow.com/](Stack overflow) & [https://developer.mozilla.org/en-US/](Mdn wed docs) - Visited several times to correctly learn how to write and style my code.

Testing

Lighthouse results:
- Performance = 100
- Accessibility = 97
- Best Practices = 92
- SEO = 90
I have tested the website across different device like samsung S20, ipads and laptop.

Credits

ReadMe layout inspiration from other Code Institute students from #peer-code-review forum and https://github.com/kera-cudmore/readme-examples/blob/main/milestone1-readme.md#development
Code institute's template: https://github.com/Code-Institute-Org/gitpod-full-template
Font Awesome: https://fontawesome.com/
Fonts: https://fonts.google.com/
Font pair:
Fonts Awesome: https://www.fontawesome.com/
Automatic Image Slideshow https://youtu.be/FrQR7igd9bs
Fonts: https://fonts.google.com/
Map: https://www.embedgooglemap.net/ location Chester

Images: Images used are from Isostock, Nikon corporation, png tree and png all

Content Sources: As a graduate of Agriculture, I have the understanding about gardening hence I put together all the lines used in illustration with details that I know pertains to each topic.

belovedpearl / historic_centers-quiz Goto Github PK

historic_centers-quiz's Introduction

Table of Contents: