SPYRAS

What it does and what does it need to fulfil?

- This site shows what i have learned in the first 3 modules of the Full Stack Developer Course, HTML, CSS & User Centric Frontend Development. I am able to build a mobile first fully responsive site for a start up medical company in London known as 'Spyras'.
- This website has been desinged for everyone who is interested in learning about a new life saving technology, which uses a paper sensor to monitor breathing rate.

Functionality of the Project

- I used a bootstrap framework to create a fully responsive website, completed within my guideline requirements. this site does not have any back end features added to in nor any Javascript.
- There is a contact form at the bottom of the webpage which allows for the user to access more information. This form does not alert anyone about emails or require a server database.
- The form holds data information and all fields are set to be required to ensure that the information is fully submitted to the correct format. The form consists of Name/Email/Message etc that will not be shared with anyone to ensure general data regulation protection regulation.
- This project is based on a real life medical company based in London, known as Spyras. This company uses a paper device to monitor our breathing pattern in order to help prevent life threatening disease’s such as sepsis and potentially used for future benefits within the sporting industry to help record our rate of breathing.

Future Add On

- Within the near future, I hope to add on multiple new features to the website which includes a section for my clients Awards and Sponsors, a recruitment section, merchandise store to buy the product and payment/booking systems. A drop down nav bar will be place on smaller devices when the client wishes to add more pages into his site. Since there are only 3/4 sections there is no need to complicate things just yet by adding this, due to the information being limited, we want the viewer to take in as much as possible. This will then create a more user friendly experience for viewers, eliminating scrol time.

Technologies Used

- HTML – Main language used to create and structure the website
- CSS – the styling language used to create the aesthetics
- Bootstrap frameworks – core structuring to build the grid layout to the website using a mobile first approach design.
- GitHub – installed on all desktops in order to deploy the website and repositories of previous versions
- Google chrome developer tool – this was used a lot to make sure the webpage run smoothly on all devices.

UX

- My goal with this project was to make an easy and simple webpage to access Spyras’ medial information while using a minimalist design. The use of black as a background helps the logos stand out more so than on a white background making the logos more distinctive, creating a memorable modern design.
- My goal in the design was to make it as easy as possible to access information on the site while striving for a minimalist design. The greyscale colour scheme was chosen to create a sleek and modern feel.

Testing

- There was regular testing throughout this project as it is required from a design perspective to visually see the creation. With the help of the Chrome Developer Tool it was a lot easier to see what was directly effecting elements. When an error was encountered, I first re read my code to make sure I havent mis typed or missed out a particular function. After, I turned to the Chrome Developer Tool to see if there was anything overriding my specific element. In the event that the error couldnt be fixed through these two actions, I would turn my attention to Slack and code institute tutors for guidance in finding the error and advice for tackling the error.
- In the ‘About’ section, views can see what Spyras have created and how we can use the device for medical, sports and consumer purposes. If they are viewing on a mobile device, the image within the ‘about’ section will disappear due to it looking to cluttered, however the all other images will still be present. Everything will be aligned vertically, showing one piece of information at a time. On a desktop view, all the information can be seen horizontally except the ‘Creators’ section. This is due to aligning the importance of the team members.
- All the social media are able to view when clicking on the icons within the footer bar. These will open within a new tab to allow the view to keep position on the original website. This was done by adding ‘target=“_blank”’. All links have been tested and work as intended.
- This site has been tested on multiple devices (Iphone X,8,7,6,5/SE, Samsung devices and a 5K IMac Pro 5120x2880px) and browsers (Safari and Chrome) to ensure compatibility and responsiveness. During the testing, I realised that the navigation bar seemed to be located behind my first image which needed altering by adding ‘z-index: 1;’ to the .navbar.

Deployment

- This site is hosted on GitHub pages, deployed from the master branch. This site is automatically updates when there is a new commit, allowing for the website to be continuously updated.
- To run the site correctly, the home page must be named as ‘index.html’ and in order for the CSS file to be correctly directed to the home page, it must have the corrects names within the file system.

Work based on other people’s code

- During my learning of previous modules, the "Whiskey Drop" mini project was very beneficial. Certain aspects from that site had been implicated into my own site and i did recap the lessons again to make sure the code had been used correctly.
- Looking online, I found that W3School had web templates which I took inspiration from as a certain few are very minimal and matched my desired design.
- Through out my project, I kept a close eye on the sample piece of work to make sure I was keeping on the correct path and to make sure my work was up to a high standard.

Credits

- Thank you to my mentor, Brian Macharia, for helping me plan and execute this project.
- To the Owner of Spryas, George Winfield, for allowing me to update his website and for the addition support with meetings, answering questions and multiple phone calls.
- All Information for this site was collected from the original Spyras webpage and through documentation via my client.

code-institute-submissions / spyras_01 Goto Github PK

spyras_01's Introduction

SPYRAS

What it does and what does it need to fulfil?

Functionality of the Project

Future Add On

Technologies Used

UX

Testing

Deployment

Work based on other people’s code

Credits

spyras_01's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent