code-institute-submissions / stockholmproject Goto Github PK

#STOCKHOLM PROJECT:

The website was designed for a non-profit organization just starting up. There is currently nowhere stakeholders and others looking to get involved with us can either get in touch with the organization or see when they have events and their location. Therefore I designed the website with this in mind. The need to inform and present mainly to stakeholders. and to reach new stakeholders who would want to work with us or for us or get involved with large scale projects. It was thus paramount i had ways to communicates such as showing the address, social media and having a contact form.

#UX I designed the website with a site based approach as I wanted it to be illustrative to all. The expectations is to view the site on a laptop or larger screen ie in a profeissional environment and the website was to be seen in a professional mannner and such effort was made to ensure the base form of the website is well developed for the larger screen. However, attempts were also made to ensure it is also mobile-friendly.

Target Audience:

 The website is aimed but not limited to:
	- prospective doners
	- volunteers
	- other organisations

#FEATURES: Navigation Bar: The navigation bar allows user to navigate through the site swiftly. The formatting is consistent throughout the site. Slight variation of the nav bar in the Image page in order to display images for a more enhanced effect.

Footer: The footer is displayed consistently throughtout the site on every page. It helps provide added information of the organization, particularly its social media, address and email.

CSS powered hover effects: added the pulse hover effect on the main menu icons for the navigation bar for users to easily distiguingish which page they have clicked. I also used a shadow hover on the social media links for the same effect.

Image grid: Users can see an arrange of images quickly to showcase the organisations previous events and people who have been involved.

Contact form: The form allows users to be able to contact the organization directly with a message about anything relating to the Stockholm Project.

#Technologies Used:

HTML: Provided the content and structure for the website.

CSS: Provides the styling.

Bootstrap - The framework was used to create the layout for each page and the nav bar.

Google Fonts - I used the Gill sans and Calibri fonts on each of my pages.

Font Awesome - I used the font awesome icons to style the nav bar icons and the social media links in the footer.

#TESTING:

Various testing was carried out using the developer tools in Google Chrome while in preview from Gitpod in order to check responsiveness and ensuring it is also responsive for mobile devices. Doing so required back-and-forth alterations of code in order to achieve full repsonsiveness for both site and mobile device.

#Page purpose:

Home: to present who the organisation is and first details of the organisation such as address and social media links
About us: describing who the organisation is and individual people who work for it and a way to communicate via a contact form.
Images: showcase what the organisation has done through pictures only
Events: showing when events will take place

#USER TEST STORY:

Home Page: clicking on nav bars and social media links on footer: Social media test failed, missing links. Links now added Do links and social media pages open? Are fixtures and page images displayed correctly?

All tests performed and no errors found.

About us page: clicking on nav bars and social media links on footer: Social media test failed, missing links. Links now added Do all links display correclty Does all fixtures and images display correctly Does contact form allow input of meta data?

All tests performed and no errors found.

Events: clicking on nav bars and social media links on footer: Social media test failed, missing links. Links now added Do all links display correclty Are events images displaying correctly

All tests performed and no errors found.

Images: clicking on nav bars and social media links on footer: Social media test failed, missing links. Links now added Do all links display correclty Do all images present correctly?

• All tests performed and no errors found.

• The website was tested on the following browsers using a Microsoft Surface on Windows 10.

• Google Chrome - Version 81.0.4044.122 (Official Build) (64-bit)

• Microsoft Edge - 44.18362.449.0

• Firefox - 75.0 (64 bit)

• The website worked efficiently on all browsers above. All navigation links, required elements Social links worked. The contact form had no issues. The hovering animations still worked on all browsers.

• The site was also tested on the following Devices:

  Google pixel 3a using Google Chrome on Android 10 iphone xr using Safari on IOS 13.4.1

#DEPLOYMENT

The website is hosted on GitHub Pages, to access the site, following next steps.

Navigate to my Github repository - https://aoshenye.github.io/StockholmProject/index.html

1. Click on the settings tab at the top of the page.
2. Scroll to the GitHub Pages section.
3. Change source to master branch.(Page will refresh)
4. Scroll down to the GitHub Pages section and a green box saying "your site is published at" appears.
5. Click link to go to published website.

#CREDITS:

Content:

• The code for the navbar on all pages was inspired by Code Institue and altered with Bootstrap 4.4: https://courses.codeinstitute.net/courses/course-v1:codeinstitute+FE+2017_T3/courseware/616289d66b5641a3808cc43e53842695/f99dac3afcfe4b2caf8d576273aea3e6/?activate_block_id=block-v1%3Acodeinstitute%2BFE%2B2017_T3%2Btype%40sequential%2Bblock%40f99dac3afcfe4b2caf8d576273aea3e6. https://getbootstrap.com/docs/4.0/layout/grid/#equal-width-multi-row

• The footer was copied from code institute: https://courses.codeinstitute.net/courses/course-v1:codeinstitute+FE+2017_T3/courseware/616289d66b5641a3808cc43e53842695/b51f7b8b815c4bcd9979d2281b6d97a9/?activate_block_id=block-v1%3Acodeinstitute%2BFE%2B2017_T3%2Btype%40sequential%2Bblock%40b51f7b8b815c4bcd9979d2281b6d97a9

• The code for the layout of the images was created with Bootstrap 4.4 https://getbootstrap.com/docs/4.0/layout/grid/#equal-width-multi-row

• The Tables on all pages on the site were created with Bootstrap 4.4 and inspired by Code Institute: https://getbootstrap.com/docs/4.0/layout/grid/#equal-width-multi-row https://courses.codeinstitute.net/courses/course-v1:codeinstitute+FE+2017_T3/courseware/616289d66b5641a3808cc43e53842695/f99dac3afcfe4b2caf8d576273aea3e6/?activate_block_id=block-v1%3Acodeinstitute%2BFE%2B2017_T3%2Btype%40sequential%2Bblock%40f99dac3afcfe4b2caf8d576273aea3e6.

• The Contact form on the About us page was designed with help from w3schools: https://www.w3schools.com/howto/howto_css_contact_form.asp

• The contact form button was created with Bootstrap 4.4: https://getbootstrap.com/docs/4.4/components/buttons/

• The colours used on the website were chosen from Coolors: https://coolors.co/555b6e-89b0ae-bee3db-faf9f9-ffd6ba.

• The wireframes were created with Paint 3D and Adobe XD

• The hover animation on the navigation bar was created with Github Hover.css: https://ianlunn.github.io/Hover/

#Media: All images were taken from my personal photo collection

#Acknowledgements:

• To my girlfriend Fanny and various friends for helping me test the website.
• To my mentor Reuben Ferrante for patiently helping me through the process and providing advice and guidance.
• The inspiration for the site was taken from the mini project of Code Institute