The Breast Review website is educative information resource on breast cancer awareness. The website will have features such as a vieo on the steps to take when examining the breasts, how often the breasts should be examined, risks factors associated with breast cancer and why early detection can save lives.
The World Health Organisation's (WHO) Objective is to reduce global breast cancer mortality by 2.5% per year, thereby averting 2.5 million breast cancer deaths globally between 2020 and 2040. Reducing global breast cancer mortality by 2.5% per year would avert 25% of breast cancer deaths by 2030 and 40% by 2040 among women under 70 years of age. The three pillars toward achieving these objectives are: health promotion for early detection; timely diagnosis; and comprehensive breast cancer management. It is therefore imperative for frequent reviews on the breast for early detection.
We created this website with HTML, CSS and JavaScript as well as with the use of other technologies.
A live demo of the website can be found HERE
- [Hideo Nishimura](https://github.com/Hidnish)
- [Kike Bello](https://github.com/kiksgold)
- [Fernanda G](https://github.com/fernandagil)
- [Katherine Biggs](https://github.com/Kat632)
- [Deanna Sale](https://github.com/DeannaCarina)
The Breast Review is an educational tool to increase the knowledge and awareness surrounding Breast Cancer. It will consist of a number of separate pages pertaining to different areas of breast cancer awareness such as the risks, the symptoms and some interesting facts. There will also be an interactive quiz for visitors to the website to encourage the cementing of knowledge through an activity. On the home page there will be a video showing how to check for breast cancer and real life stories of journey's from people who have been affected by breast cancer - both men and women.
Despite breast cancer being one of the most well researched and known-about cancers, there are still a massive amount of breast cancer related deaths that could have been prevented if it were for early detection and education. Our hope for this website is to have a quick, easy and informative resource for anybody who would like to learn more about how to detect breast cancers.
The graphic below shows all of the potential pages and the content within that we could add to this website, some of these will be added and some won't - this will be talked about more in-depth in the Feasibility/Importance section of the README.
- To be a safe non-judgemental environment for anybody affected by breast cancer to learn more about the pathology
- To be a highly user intuitive application for all users
- To be highly accessible in terms of colour scheme and contrast to cater for the needs of those with sensory needs
- To be a learning tool for everybody that visits the site
- To be a place for those affected by breast cancer to read other people's experiences and stories
- To be a fun and positive experience when most experiences surrounding breast cancer are scary and upsetting
- To be a stepping stone for individuals who want to learn more by supplying further reading with external links
- To be a stepping stone for site users to access external resources and helplines
- Everybody
- Although the majority of those who develop breast cancer are in the female over 50 demographic, the disease itself affects everybody, whether that's someone we know that has suffered from it, someone that has been told they're more at risk, or someone that has just had thoughts surrounding it. This web application is for all of those people and everyone in between. Cancer doesn't discriminate, and neither do we.
As a new and returning user I want to:
- Know the purpose of the website as soon as I navigate to the home/landing page
- Navigate the website quickly and effectively
- Find everything in the website that I need to find with ease
- Have visual aids and obvious calls to action throughout the site to aid in user intuitiveness
- Have up to date and relatable stroies from individuals affected by breast cancer
- Have a pleasant experience when visiting the site and get the facts surrounding breast cancer
- Have a way to contact the site admin if I need to speak to them
| Opportunity/Feature | Feasibility/Viability (score out of 5) | Level of Importance (score out of 5) | In or out? |
|---|---|---|---|
| Obvious role of the website demonstrated with hero image/video and/or capture text | 4 | 5 | In |
| Simple design with straightforward navigation to make it easier for the user to understand where to find information | 5 | 5 | In |
| Relevant and relatable stories of people's experiences with breast cancer | 4 | 4 | In |
| Facts from reputable sources explaining different things about breast cancer | 3 | 5 | In |
| A simple quiz for site users to interact with to test their knowledge around breast cancer and it's awareness | 3 | 3 | In |
| Videos situated at opportune moments throughout the site to help raise awareness of breast cancer | 3 | 4 | In |
| A fairly gender neutral site in terms of colour scheme to encourage everybody to stay on the site as this topic affects everybody | 5 | 3 | In |
| A news api to have updated articles on breast cancer related topics | 2 | 3 | Out |
| A site user forum for anyone affected by breast cancer to connect with each other and share their journeys | 1 | 2 | Out |
| A contact form for users of the site to be able to contact site admin if needed | 4 | 2 | In if we have time |
| Average Viability x number of features: 34 |
Sum of Importance: 36 |
The table above has been plotted into a graph (below) to easily visualise the features that will be implemented into the web application and which ones won't be:
- The features in the pink section will be implemented
- The features in the grey section could be implemented at a later date but aren't necessary right now
- The features in the turquoise section will not be implemented as it would be unwise to focus on these features until a later date
We have chosen to design and implement our web-application based on the MVP (Minimum Viable Product) model. This allows us to create a fully functioning web-app with the least amount of content while still having the website functionable for users. This allows us to see if the website has a positive reaction before more development work takes place (for example implementing features that we have chosen to leave out for the moment).
The MVP model will:
- Create a clear website with enough content for the customers wants and needs to be fulfilled without having dedicated too much time to the project itself
- Allow us to work within the scope of our abilitiy while also allowing us to challenge ourselves
- Result in a website with medium levels of UX without dedicating too much time to the project
- Result in a basic yet easy to use and functional website for site visitors
- A self-designed logo on all pages as assurance to the customer we are a trusted resource with our own identity
- A nav-bar on all pages to be able to navigate to separate pages on the website
- Links to associalted social media on all pages within the footer
- A medium amount of visual content including videos as an alternative way for users to learn about breast cancer
- A small web-quiz for users to interact with as an alternative way of learning about breast cancer
We have chosen to carry out a very basic linear method of design for this website, and have a layout that is both logical and easy to understand for any user that visits the site. By having multiple pages we can separate quite important information into logical sections to make it easier for the user to find what they are looking for. The navigation bar at the top of all of the pages allows the user to easily navigate to the page of the website they are most interested in.
On index.html: This page will consist of the main website branding, a front-and-center informative video on how to check your breasts in 60 seconds, six real-life stories from a range of people with different backgrounds as well as a callout for the user to gain quick and easy access to the breast cancer review quiz.
On facts.html: This page will consist of facts around breast cancer that may not necessarily be well known, it is our hope that these more unusual facts will stick in people's minds and at least get them thinking about breast cancer - thinking about one of these more unusual facts (no matter how random) is still someone thinking about breast cancer, and as long as they're thinking about breast cancer that's someone we have helped to gain more awareness.
On risks.html: This page is more educational for users to the site. By raising awareness of the risks of breast cancer, it may help to raise awareness in people who have one or more of these risk factors.
On symptoms.html: This page will consist of the symptoms to look out for as in indicator for breast cancer. There are still so many people that put off going to the doctor because they don't think their symptoms are anything to worry about. It is our hope that having this information easily accessible it will encourage people to look our for these symptoms and encourage early detection and diagnosis.
On quiz.html: This page will be an interactive activity for the user. Everybody learns in different ways, and it's rare for people to learn purely by reading information on a screen or a piece of paper. By having a learning source that is more interactive, we hope to target those that are more kinesthetic learners.
On contact.html: This page will be a standard contact form for the user to be able to contact site admin if needed.
On Support.html: This page will consist of a number of external contact cards for site users to use to be able to find external resources and help.
The wireframes for The Breast Review website were made with the Balsamiq Desktop Applictaion, they can be found by viewing the images below. We created the wireframes for both mobile and desktop versions. As the trend for mobile browser usage has been on an upwards trend for the last 10 years in Europe culminating in a crossover of hardware usage in the recent year, it could be assumed that these trends will continue and result in users opting more and more for a mobile browser instead of a desktop.
index.html
facts.html
risks.html
symptoms.html
quiz.html
contact.html
support.html
The wireframes were created during the website's initial desgin process, as such there are small changes between the layout of the wireframes and the final layout/design of the finished website.
We used Google Fonts to find the typography that we felt would fit best for the website. We wanted to use a completely different font for the main titles and the headers to the main text body of the website to distinguish between headers and main body, but also to show the importance of different sections and make it obvious for the user when a new section is starting. We chose to use the font 'Satisfy' (seen below) as the cursive writing and free-flow design of it makes it feel more relaxed and feminine, which we felt was important for the site - although we have tried to stay fairly gender neutral, there is no denying that the main target for this website is women as they account for the majority of breast cancer diagnoses and fatalities.
The font we used for the main text body of the website was 'Pacifico' as this font is easy to read which is needed when there is large amounts of information to be read and absorbed by users, it has a modern feel, and is a popular font for many websites. The back-up font is 'Sans-Serif' just in case the font import link fails.
Throughout the site, we have tried to stay fairly gender neutral with the colour scheme, showing different elements in pink as well as a grey-blue colour. The universal symbol for breast cancer awareness is a pink ribbon, and the main demographic of users to the site will be female, so it made sense to us to have elements that are pink in majority. However, for elements such as the nav bar and footer we have chosen a more gender-neutral grey-blue, as (although it is rare) there are cases of male breast cancer and breast cancers in people who have transitioned from the gender they were assigned at birth. We have found these colour to be soft and none-offensive as well highly contrastable to the text that overlays them.
The Breast Review logo was handmade by the team "Mammary Mates" during the website development process. We felt this was a very important aspect to get done quickly as this would give us a feel for how the website would take shape. The logo itself consists of the website's brand letters (TBR) as well as a graphic of a hand underneath a curve - to represent a breast. The logo follows the colour scheme of the website and gives an obvious feel as to the content of the website. The logos on support.html for the contact cards were taken from the websites that the cards represent.
All images on the website were taken from pixabay, except for the images of the individual's who's stories are on the home page - these come from the stories that are available online via the links that are available in the story excerpts.
The background videos used in index.html have been taken from an open source websites, one called Mixkit and the other called pexels. We stored these in an online media content store (cloudinary) to ensure quick load times. The breast checking video came from youtube and can be found HERE
- HTML
- The main structure of the website
- CSS
- For the design of the site
- JavaScript
- For the quiz in quiz.html
- For the hamburger menu on all pages at small screen sizes
- Limited Python
- For hosting a local server during for testing
- Markdown
- For the content and structure of the README.md
- Bash
- For the CLI of gitpod.io environment and commands for depoloyment to GitHub
- Git & Github
- For the hosting and version control of the website as well as storage for media content on the website
- Gitpod
- The development environment used for writing the code for the website
- Balsamiq (Desktop)
- For the creation of wireframes
- Visual Studio (Desktop)
- For testing out ideas without interfering with code for website
- Slack (Desktop)
- For communicating with peers and troubleshooting problems with the different environments used during the course and coding.
- Chrome Developer Tools
- To test the responsiveness of the website at varying screen sizes
- Google Fonts
- Used to import the 'Satisfy' and 'Lato' fonts used throughout the website
- Font Awesome
- Used on all pages throughout the website to enhance UX and design, also for the tab icon
- Favicon.io
- Used to create the tab icon from an original PNG file
- W3C Markup Validation Service
- To test and search for errors in the HTML code
- Jigsaw W3C CSS Validation Service
- To test and search for errors in the CSS code
- Am I responsive
- To show the responsiveness of the website on different screen sizes at the same time
- WAVE Web Accessibility Evaluation Tool
- To ensure compliance with accessibility
- Bootstrap
- For the general layout of the website, the navbar and the accordian elements throughout the site
- Email JS
- For the functionality of the contact form
The main features to be implemented in the website were determined in the Strategy plane of the UX section. We were able to recognise which features were more likely to have a positive impact on the website and implement those, while staying within the time constraints we had and staying within our own coding knowledge and comfort.
- Obvious role of the website demonstrated with hero image/video and capture text - We have tried to make the landing page (catering for all screen sizes) as obvious as possible to identify the role and purpose of the website. The background video itself shows a person holding a pink ribbon which is folded to imitate the breast cancer awareness symbol; this identifies to the customer that the website is likely to be about some form of breast cancer awareness. The cover text over the video "The Breast Review" further identifies to the customer the role of the website.
- Simple design with straightforward navigation to make it easier for the user to understand where to find information - The website has a simple design throughout, with each page having it's own title and each page having separate sections. The font and colours throughout are all the same adding continuity and familiarity to the website - improving user experience. These elements were all styled using CSS with psuedo classes for hover actions to enable the customer to visualise a transitioning style.
- Relevant and relatable stories of people's experiences with breast cancer - These are situated on the main page of the website (index.html), we have included stories from people from all walks of life (two young women that are below the average age for a diagnosis of breast cancer, an older genteman, a male-to-female transgendered person, a female-to-male transgendered person and one person who is from the 'average' demographic from someone that has been diagnosed with breast cancer.
- Facts from reputable sources explaining different things about breast cancer - The majority of the facts and information found on the website has come from Cancer Research UK. This amazing charity had done amazing things including peer reviewed research which allows us to share up-to-date and accurate information with the site users.
- A simple quiz for site users to interact with to test their knowledge around breast cancer and it's awareness -
- Videos situated at opportune moments throughout the site to help raise awareness of breast cancer - As soon as anyone navigates to the site they are greeted with a quick 60 second video on how to check for breast cancer. There are also background videos in index.html for varying screensizes related to breast cancer awareness.
- A fairly gender neutral site in terms of colour scheme to encourage everybody to stay on the site as this topic affects everybody - Please see surface section of UX for explanation on colour scheme and why we chose certain colours.
- A contact form for users to be able to contact site admin if needed - Thankfully we had enough time to implement this feature. It allows site visitors to be able to contact the site admin for any reason at all, whether it be a technical or personal issue that the user may have.
- A support page for users to be able to find external resources and help - Thankfully we had enough time to implement this feature. It allows site visitors to be able to find external help via our website.
- A news api to have updated articles on breast cancer related topics - We decided to leave this out due to time constraints and the extreme mix in coding abilities throughout our team. To reduce the risk of segregating team members, we chose to stick to the main trinity of programming languages (HTML, CSS and JS). However at a future time there could be the potential to add a news API to the website to update periodically for the user to be continually learning about new breast cancer related stories and articles.
- A site user forum for anyone affected by breast cancer to connect with each other and share their journeys - We decided to leave this out due to time constraints and the extreme mix in coding abilities throughout our team. To reduce the risk of segregating team members, we chose to stick to the main trinity of programming languages (HTML, CSS and JS). However at a future time there could be the potential to add a forum feature by using django and it's user authorisation feature.
To make the testing of our website easier and more structured, we have decided to carry out a structured approach to testing, and test the following things: Functionality, Compatibility, User Testing Stories, Code Validation, Peer Review, Development Problems, Accessibility and Performance Testing.
The first section of our testing structure for the website was to look at the functionality of the website and make sure that it meets the needs of the use on the most basic levels and also to ensure that all the interactive aspects of the website all worked with no problems.
- All internal links on the website need to be usable, and open in the same window.
- All links in the menu bar at the top of all pages will direct the customer to the relevant page: 'Home' - to index.html, 'Facts' - to facts.html, 'risks' - to risks.html, 'Symptoms' - to symptoms.html and 'Quiz' - to quiz.html
- The button in the callout section at the bottom of index.html will direct the customer to the quiz page
- All external links on the website need to be usable, and open in a new window.
- The social media links in the footer of all pages will direct the customer to the relevant social media platform in a new tab.
- The 'read more about [person]'s story' links in index.html sections will direct the customer to the related story pages in a new tab.
- The reference link in facts.html will direct the user to the related website in a new tab.
- The fundraising and research links in the footer of all pages will direct the user to cancer research uk relevant pages in a new tab.
- The youtube videos embeded in index.html and symptoms/html work with no problems and direct to the video page when clicked
- All elements with an associated psuedo class work when the action is carried out (e.g. Hover).
- All internal link buttons in the nav bar will have a subtle colour change when the user hovers over them
- The call to action button text at the bottom of index.html will change colour when the user hovers over it
- The start button in quiz.html will change colour when the user hovers over it
- All social media and external links in the footer will change colour when the user hovers over them
- All features to do with the contact form work as they should.
- All ihover psuedo-classes work when the user hovers over the different text inputs of the form as well as the submit button
- The user gets an alert straight away as soon as they submit the form
- The form isn't able to be submitted unless all fields are completed
- When the form is submitted, the site admin recieve an email notification and the details of the user that has submitted them
- When the form is submitted, user will recieve an email stating they should expect a response within 48 hours
The second section of our testing regime for the website was to ensure that the website is compatible through a range of devices, screen sizes and internet browsers. Throughout the development process, the website was tested on a number of devices:
- 17.3 inch laptop running windows
- 15.3 inch laptop running ubuntu
- 16 inch MacBook Pro
- 8 inch Samsung Galaxy Tab A
- iPad mini
- iPhone 8
It was also tested in Chrome, Firefox, Internet Explorer and Safari as well as Samsung's own internet browser. By also using Chrome Dev Tools, we were able to manually change the screen size to see when elements within the web pages 'break', by using this method, we could pinpoint the exact screen widths and heights to be defined in the CSS media screen queries and alter the stylings to fit accordingly.
The video below shows how we checked the responsiveness of the website at all screensizes.
The third section of our testing structure was to ensure that customer all user stories identified in the strategy plane have been acknowledged and achieved.
"I want to know the purpose of the website as soon as I navigate to the home/landing page" & "I want to navigate the website quickly and effectively" & "I want to find everything in the website that I need to find with ease"
We have tried to make the website as intuitive as possible. From the first time the user navigates to the home page we have tried to make it so the user is aware straight away of the function of the website by including relevent video footage and cover text to exaplain what the website is for. As soon as the user navigates to the home page, the things they should see are as follows: The 'hero' video, the menu/nav bar, the logo image and the website 'title': The Breast Review. We have used straightforward terminology in the navigation bar so the user knows where they are navigating to and what they will find once they have navigated there.
"I want to have visual aids and obvious calls to action throughout the site to aid in user intuitiveness"
There are separate pages within the website for the user to browse at their leisure to learn about breast cancer awareness. We feel that the main alternative feature of our website is the fact we are including a breast-cancer awareness quiz, so we chose to have a callout to this page on the main home page to encourage more user visits to this page.
"Have up to date and relatable stroies from individuals affected by breast cancer"
On the main home page, there are 6 stories featured of people who have been affected by breast cancer. We have made these stories relatable, accessible and inclusive of all genders. We hope that by having these stories front-and-center in the website it will raise more awareness of the fact that everybody is at risk of breast cancer, not just women over 50.
"Have a pleasant experience when visiting the site and get the facts surrounding breast cancer"
Throughout the website we have tried to keep the main theme informative rather than emotional/scare-tactics which is what some cancer awareness websites use. The facts.html, risks.html and symptoms.html are purely factual pages to try and help the user raise their awareness of breast cancer in a neutral, non-biased environment. By having the quiz incorporated into the website, this gives the user a positive and interactive task to carry out while also raising their awareness of breast cancer.
"To be able to have a way to contact site admin if needed"
On contact.html there is a user friendly contact form for the user to interact with and use. All functionality works as it should.
The fourth section of our testing structure for the website was to ensure all code written passes through code validation software with no errors or warnings.
The below code validation report is from index.html. There were minimal errors found on this page. The main 'errors' were repeated id attributes, images without alt attributes and image elements with height and width attributes that included 'px' at the end of the value. These were rectified by replacing the id attributes with class attributes instead, adding alt attributes to images and removing the px from size attributes of images.
The below code validation report is from facts.html. There were minimal errors found on this page. The main 'errors' were repeated id attributes, images without alt attributes and image elements with height and width attributes that included 'px' at the end of the value. These were rectified by replacing the id attributes with class attributes instead, adding alt attributes to images and removing the px from size attributes of images.
The below code validation report is from risks.html. There were minimal errors found on this page. The main 'errors' were the same ones as the errors found in index.html and facts.html which were rectified in the same ways, as well as errors concerning having a hr element as a child of a ul element, these errors were rectified and the code re-run through the validator.
The below code validation report is from symptoms.html. There were minimal errors found on this page. The main 'errors' were the same ones as the errors found in index.html and facts.html which were rectified in the same ways, as well as errors concerning having a hr element as a child of a ul element, these errors were rectified and the code re-run through the validator.
There were minimal errors found on this page. The main 'errors' were the same ones as the errors found in index.html and facts.html which were rectified in the same ways.There were also warnings concerning multiple hypens within comments, however this was left as having comments within code is best practice to make the code more readable and editable in the future.
There were no errors found on this page. The main 'warning' were unnecessary usage of javascript tags, however these cause no issues and it's better to have them and not need them, than need them and not have them, so we have left them in place.
There were no errors found on this page. The main 'warnings' were from overuse of dashes in HTML comments, however these don't cause any problems and make the code readability better for fellow coders, so we have chosen to leave them in place.
No errors or warnings were found in the CSS validation process.
Each of the JavaScript files were run separatly through the JSHint validator:
FACTSSCRIPT.JS: No errors or warnings were found in the JS validation process.
QUIZ.JS: No errors or warnings were found in the JS validation process.
RISKSCRIPT.JS: No errors or warnings were found in the JS validation process.
SCRIPT.JS: No errors or warnings were found in the JS validation process.
sendEmail.JS: A warning was present concerning a missing semicolon, this was placed to rectify all problems.
No issues were found during deployment. The website is hosted through GitHub pages which hosts static web-pages. This process is very straightforward and no problems arose from deployment.
All web pages were run through the wave accessibility tool, the only error was from the logo not having an alt attribute in quiz.html, this was rectified before project submission deadline:
In order to test the performance of the website we used the built-in Chrome DevOps tool: Lighthouse.
While developing the quiz functionality an issue with the last question was found. When the user gets to the last question, they don't get any feedback back of whether they chose the right or wrong answer. This is yet to be fixed.
A live demo of the website can be found HERE
This project was created on GitHub and Edited in GitPod by carrying out the following:
- A new repository was created using 'Code-Instutute-Org/gitpod-full-template'
- A meaningful name was given to the new repository and 'Create Repository' was selected
- The repository was then opened on GitHub by clicking the 'Gitpod' button to build the GitPod workspace which would allow us to build and edit the code used to make the [Project Name] website/application
- Version control was used throughout the project using the following commands in the terminal using Bash
- git pull origin main - to pull the latest updated files from the main branch to the local repository
- git checkout -b "branch name" - to move to a new branch off the main branch
- git add . OR git add "file name" - to stage the changes and get them ready for being committed to the local repo.
- git commit -m "Description of the update" - to save the change and commit the change to the local repo
- git push origin "branch name" - to push all committed shanges to the GitHub repo associated with the GitPod workspace
- The pushed changes were then reviewed by fellow collaborator(s) and merged with the main branch
- Log in to your GitHub account
- Navigate to the repository HERE
- Select the 'Fork' button in the top right corner of the page (under your account image)
- The repo has now been copied into your own repos and you can work on it in your chosen IDE
- If you have any suggestions to make regards to the code to make the site better, you can put in a pull request
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Ensure HTTPS is selected and click the clipboard on the right of the URL to copy it
- Open a new workspace in GitPod
- In the bash terminal type 'git clone [copy url here from step 4]'
- Press enter - the IDE will clone and download the repo
- You can then type 'python3 -m http.server' to host the website locally - this will not run the python file, only allow you to check how the web-app looks.
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Select 'Open with GitHub Desktop'
- If you haven't already installed GitHub desktop application - you will need to follow the relevant steps to do this
- The repo will then be copied locally onto your machine
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Select 'Download Zip'
- Once you have the Zip downloaded, open it with your prefered file decompression software
- You can then drag and drop the files from the folder into your chosen IDE or view/edit them on your local machine
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
There are many ways to deploy the project locally on your own device. The ways we will explain here are: Forking, Cloning, GitHub Desktop and Zip Exctraction, the steps in these processes are outlined below:
If you want to make changes to the repo without affecting it, you can make a copy of it by 'Forking' it. This will make sure that the original repo remains unchanged.
The information contained within the facts.html page has been taken from the following sources:
Information contained within the risks.html page has been taken from the following source:
Information contained within the risks.html page has been taken from the following source:
There is always a continuing need to raise awarenes of breast cancer. According to Cancer Research UK a massive 23% of all breast cancers are preventable. The only way to reduce this number is by raising awareness by any means possible. A diagnosis of any type of cancer is one diagnosis too many, and we hope that in some small way our web-app can help reduce these numbers. If one person has learnt one new thing from our website - we've achieved what we set out to.
facts.html Accordion from w3schools
quiz.html The code used to create the quiz is based on this tutorial from WebDevSimplified
The questions for the quiz were obtained from the quizes found in the American Cancer Society and in the University of Rochester Medical Center webpages.
Facts.html On facts.html, the background image of the tulips is from Katherine Biggs' mum. She is an amateur photgrapher and you can see more of her work here on Pixabay. Whilst Katherine wouldn't necessarily use one of her mum's images on a website, her mum sent her this image because it was one she took whilst she had breast cancer.
The cross-section image of the breast was taken from Wikipedia.
Image (and story excerpt) for Laura in index.html: HERE
Image (and story excerpt) for Richard in index.html:https://breastcancernow.org/about-us/news-personal-stories/going-through-breast-cancer-treatment-man-intimidating-times
Image (and story excerpt) for Amy in index.html: HERE
Image (and story excerpt) for Beverly in index.html: https://www.today.com/health/trans-women-breast-cancer-woman-shares-rare-diagnosis-t193360
Image (audio and story excerpt) for Ira in index.html: https://www.breastcancer.org/community/podcasts/trans-man-brca1-mutation-20201120
Image (and story excerpt) for Jennifer in index.html: https://breastcancernow.org/about-us/news-personal-stories/i-used-think-i-was-victim-secondary-breast-cancer-now-i-see-myself-thriving
Background video for large screensizes in index.html: https://mixkit.co/free-stock-video/holding-a-breast-cancer-ribbon-in-her-hands-27824/
Background video for small screensizes in index.html: https://www.pexels.com/video/a-person-holding-a-ribbon-6801289/
Breast checking video in index.html: https://www.pexels.com/video/a-person-holding-a-ribbon-6801289/
Video in symptoms.html: https://www.youtube.com/watch?v=TpUAsdZiDuM
Background video in support.html: https://www.pexels.com/video/young-woman-juggling-5702126/
To our project facilitator - thank you for guiding us and giving suggestions of how to improve our project.
To Linda - thank you for sharing your story with us and allowing us to use your experiences in the hope of helping others.
