Here is a link to the final project
This project was built for the November 2021 Hackathon with Code Institute and IT Labs. The theme was Breast Cancer Awareness, by Women in Tech. We were tasked with creating a site that utilised technology to help raise awareness about breast cancer. It is designed to be responsive on a wide range of devices, whilst also being easy to navigate through.
Transgender people are often overlooked and under-represented as a group, especially when it comes to information and resources available relating to breast cancer. We wanted to help raise awareness about a lesser-known section of breast cancer, to help those who may be affected.
- As a site owner I want to create an informative, educational and supportive Breast Cancer awareness website for the Transgender People community.
- As a site owner I want to create a website that is dedicated to an under represented group in Breast Cancer Research.
- As a site owner I want to create a website that links the target users to as many relevant medical, educational and supportive resource that is available.
- As a site owner I want the site to be easy to navigate.
- As a first time user I want to identify the purpose of the website.
- As a first time user I want to get the information I need easily.
- As a firt time user I want to be directed to the revelant and correct sources that I am looking for.
- As a first time user I want to to able to navigate the website easily.
- As a site owner I was returning visitors to revisit the website and get information they need at no matter what stage of their breast cancer journey they are at.
- As a site owner I want friends and family of Transgender People affectedby breast cancer to revisit the website and get reliable and helpful education to be supportive companions at all stages of the breast cancer journey.
- As a frequent user I will revisit the site as a member of the Transgender People Community to stay:
- Informed and educated on Breast Health.
- To be supported on my Breast cancer journey before, during and after.
- To find, stay up to date and familarise myslef with information and resource that is available for an unrepresetend group as the research in this area begins to grow.
- The colors are based around the pink, blue and off-white on the transgender flag (and the transgender breast cancer ribbon).
- We chose this because our site is primarily focused on the transgender community.
- We also implimented a basic dark mode, to be fully inclusive, using darker versions of the transgender flag colors.
We have used the Google Fonts Nunito and Raleway. These fonts are accessibility friendly, as the sans-serif family is easily readable to those with dyslexia.
Nunito is a well balanced sans-serif typeface, meaning it does not have any extending "serif" strokes at the end of each character. This font brings a clean, crisp, balanced feel to the website. It renders with complete precision in all devices which increases legibility for users. As our brand is aiming to enhance awareness and increase the reach of the information, this font denotes a calm, relaxed, informal, and approachable set of feelings. Nunito in our project is used as our content font and is utilised on large contextual reading pieces throughout the project.
Raleway is an elegant sans-serif typeface, and sports a display face natural property. A display face font is used for headings/titles/slogans etc and being a more eccentric sans-serif typeface, rather than a restrained sans-serif typeface means it is a perfect font for our headings/titles throughout our project. Like Nunito, and as a sans-serif typeface, Raleway does not sport any extending "serifs" per character making this font a perfect companion to Nunito and to our users reading/viewing our website on all devices.
“Sans-Serif” is used as the default backup font in cases where these fonts have difficulty loading.
- We used the transgender breast cancer ribbon as our favicon, as our site is focused on raising awareness about breast cancer within the transgender community.
- We used the transgender icon as our logo.
- The images we have used are all related to breast cancer, or to the transgender community.
- The models we used are rough designs of the male and the female torso, to help our users feel at ease about the topic.
- The Transgender Breast Cancer Ribbon was added to the resources section in replace of bullet to for the following reasons:
- Re-enforcing our mission and creating awareness around the flag and breast cancer ribbon.
- Styling reasons, the ribbon is much more appealing than bullet points.
Mobile:
Wireframe of mobile landing page
Wireframe of mobile contact page
Tablet:
Wireframe of tablet navbar page
Wireframe of tablet contact page
Desktop:
Wireframe of desktop landing page
Wireframe of desktop contact page
The site itself utilises a primary Single-Page-Application style build with secondary/tertiary stand-alone pages added, removing unnecessary bloat from the SPA itself. The SPA is constructed and developed on the index.html page, which is situated in the root directory, and encompasses the project's primary information and user group engagement sections.
Within the SPA, the structure is comprised of:
- Navbar to allow for easy navigation within the SPA using Smooth scrolling
- Hero image section, maintaining a primary landing image
- Awareness section, which holds key informative detail for the user in bite-size fashion
- Support section, which allocates helpful topics for the user
- Resources section, which includes links to other related sites that may be useful to a user of our site
- Contact section, allowing the user to get in touch with brand ambassadors
- Footer which contains social links/secondary pages such as Privacy/Accessibility statements
Tertiary pages include:
- 404 Error page in case of incorrect/adverse navigation to pages/directories that may not exist within this project.
- 500 Error page in case of internal server errors.
The Awareness section utilises html/css/js to promote information about Breast Cancer to an under-promoted User Group, Transgender People. Information in this section was referenced from multiple sources and is cited below in the Credits of this README.
HTML/CSS is used to structure the content and appropriate section layout using up-to-date methods such as Semantic use of HTML and CSS Grid. 3D Model viewers are implemented to promote the human body and in it's native primitive form. The library used to implement these 3D models is Model Viewer by Google. On page load, the model-viewer elements load both models simultaneously to reduce render on view motion on the site, and User interaction controls are removed by default to enhance user experience and accessibility.
Some JS is utilised to detect the current device viewport width, and if less than 992px wide, the field-of-view attribute value of the model-viewer elements is updated to reflect the smaller viewport allowing for more of the 3D models to be viewed by the user, saving on vital real estate on the device.
The 3D models utilised in the model-viewer and situated in the assets directory in their own sub-directory called "models", were obtained from free3d.com, and heavily modified in Blender to add custom lighting styled on the Transgender Community's Flag, and to add increased sub-division modifier and shadow rendering. Links to both models in Credits section in this README.
The Resources section utilises html/css to promote information about Breast Cancer to an under-promoted User Group, Transgender People. Information in this section was referenced from multiple sources and is linked to offical sources and cited below in the Credits of this README.
HTML/CSS is used to structure the content and appropriate section layout using up-to-date methods such as Semantic use of HTML and CSS Grid. A 3 column grid was used.
The grid was used to display 3 step journey of a Breast Cancer Diagnosis, 'Have I got Breast Cancer?', 'Diagnosed with Breast Cancer?' 'Survive and Thrive'. This was very important to display. This was designed to take the user on a journey from Breast Cancer concerns to aftercare. It also is designed so someone can get use of the website no matter what stage the find the website.
The section includes projects from fellow Code Institute Hackathonians. This is an important feature to showcase the many other fantastic resources available for anyone wanting awareness around Breast Cancer be it for Transgender people, Women or Men. It is also important to showcase the important work, research, passionate and creative work being done and focused on this important topic.
Our site has a contact form so that users can contact us with any questions they have. This section includes a responsive form which users can use to contact Bust IT with any inquries.
The contact us form uses emailJS to send a reliable form. Once a user clicks the submit buttom, they recieve an alert indicating that the email was recieved successfully, or an error if there are delivery issues.
EmailJs was the prefered email service for Bust It as it is free, but also reliable. Once a user sends a message through the contact form, all their information is captured and recieved by Bust IT, this way Bust IT can tailor what information and resources to send to their users.
Model Viewer by Google, used to allow us to use a lightweight, easy to display 3D models preview in the browser. Linked to index.html through script link.
Blender was used to ammend and add to the 3D models obtained for use in the "Awareness" section of the site.
Font Awesome was used on all pages to add the instructions, home, settings and copyright icons.
Git was used for version control by utilizing the Gitpod terminal to add and commit to Git and push to GitHub.
GitHub is used to store the code for this project after being pushed from Git.
Balsamiq was used to create the wireframes during the design process.
Responsinator was used to help improve the responsive design on a variety of devices.
Google DevTools was used to help us find what code correlated to what feature.
Am I Responsive Design was used to check the responsive design of the quiz.
Shields.io was used to create the GitHub badges for this README.md file.
Autoprefixer CSS online was used to ensure all prefixes for browsers were included correctly.
EmailJS was used to send the contact form on our site. It is also used to send an automatic email to users when they signup for monthly self-check reminders.
This site was deployed to GitHub Pages by following these steps:
- Login or Sign Up to GitHub.
- Create a new repository named "W-I-T-IT-LAB-Breast-Cancer-Awareness".
- Once created, click on "Settings" on the navigation bar under the repository title.
- Scroll down to "GitHub Pages".
- Under "Source", choose which branch to deploy. We chose "main", but this is sometimes shown as "master".
- Choose which folder to deploy from, usually "/root".
- Click "Save", then wait for it to be deployed. It can take some time for the page to be fully deployed.
- Your URL will be displayed above "Source".
- Login or Sign Up to GitHub.
- On GitHub, go to vanessacleary/W-I-T-IT-LAB-Breast-Cancer-Awareness.
- In the top right, click "Fork".
- Login or Sign Up to GitHub.
- Fork the repository vanessacleary/W-I-T-IT-LAB-Breast-Cancer-Awareness using the steps above in How to Fork it.
- Above the file list, click "Code".
- Choose if you want to clone using HTTPS, SSH, or GitHub CLI, then click the copy button to the right.
- Open Git Bash.
- Change the directory to where you want your clone to go.
- Type git clone and then paste the URL you copied in step 4.
- Press Enter to create your clone.
- Log in to GitHub and locate the Repository for this site.
- Under the repository name, above the list of files, click "Code".
- Here you can either Clone or Download the repository.
- You should clone the repository using HTTPS, clicking on the icon to copy the link.
- Open Git Bash.
- Change the current working directory to the new location, where you want the cloned directory to be.
- Type git clone, and then paste the URL that was copied in Step 4.
- Press Enter, and your local clone will be created.
For a more detailed version of these steps, go to the Github Docs page on this topic.
The W3C Markup Validator, W3C CSS Validator and JSHint were used to validate the project to ensure there were no syntax errors within the site.
-
W3C HTML Markup Validator
-
W3C CSS Validator
-
JSHint
- JSHint
- No errors were found in any of our JavaScript files
As a site owner I want to create an informative, educational and supportive Breast Cancer awareness website for the Transgender People community
- The site has a wide range of information, aimed at the transgender community.
- Links are also available to sites that are related, to provide more information for users.
As a site owner I want to create a website that is dedicated to an under represented group in Breast Cancer Research
- This site focuses on the transgender community.
- A lot of breast cancer awareness is aimed at women, so we targeted an under-represented group.
As a site owner I want to create a website that links the target users to as many relevant medical, educational and supportive resource that is available
- Links are available to sites that are related, to provide more information for users.
- The navigation bar is available at any point on the page, for ease of navigation.
- The site is very clear in its purpose.
- The first paragraph on the page details that we are bringing awareness about breast cancer within the transgender community.
- All information is easily findable on the site.
- The navigation bar is available at all times, allowing the user to navigate to the information they need.
- Links are available to sites that are related, to provide more information for users.
- The navigation bar is available at all times, allowing the user to navigate to the information they need.
As a site owner I was returning visitors to revisit the website and get information they need at no matter what stage of their breast cancer journey they are at
- All information is easily findable on the site.
- Links are available to sites that are related, to provide more information for users.
As a site owner I want friends and family of Transgender People affectedby breast cancer to revisit the website and get reliable and helpful education to be supportive companions at all stages of the breast cancer journey
- All information is easily findable on the site.
- Links are available to sites that are related, to provide more information for users.
As a frequent user I will revisit the site as a member of the Transgender People Community to stay:
- All information is easily findable on the site.
- Links are available to sites that are related, to provide more information for users.
- All information is easily findable on the site.
- Links are available to sites that are related, to provide more information for users.
To find, stay up to date and familarise myslef with information and resource that is available for an unrepresetend group as the research in this area begins to grow
- All information is easily findable on the site.
- Links are available to sites that are related, to provide more information for users.
-
Google Chrome
- All tested and working correctly.
-
Microsoft Edge
- All tested and working correctly.
-
Mozilla Firefox
- All tested and working correctly.
-
Safari
- All tested and working correctly.
- Safari
- All tested and working correctly.
-
Google Chrome
- All tested and working correctly.
-
Safari
- All tested and working correctly.
-
Samsung Internet
- All tested and working correctly.
The website was tested on Google Chrome, Firefox, Internet Explorer, Microsoft Edge, Safari and Samsung Internet browsers. The website was viewed on a variety of devices, including:
- Custom built desktop PC, running Windows 10
- Acer Aspire V Nitro Laptop, running Windows 10
- Lenovo B51 IntelCore i7 Laptop, running Ubuntu 16.04 LTS
- MacBook Pro (15-inch, 2017), running macOS Catalina
- MacBookAir7,2 (13-inch, 2017)
- iPad 6,11 5th generation, running iOS 10.3
- Amazon Fire tablet 7
- iPhone 7
- iPhone X
- iPhone 12
- OPPO Find X2
- OPPO Find X2 Lite
- Samsung Galaxy A70
- Samsung Galaxy S9
- Samsung Galaxy S10+
- Samsung A20
- xBox One
A large amount of testing was done to ensure that all pages were visible or hidden correctly, all buttons worked as they should, and the site worked as it should. Friends, family members, and other developers were asked to review the site and documentation to point out any bugs and/or user experience issues that they came across.
- There was an overflow-x on the site that we couldn't find where it was coming from.
- We checked all the elements on the page for unexpected padding and margin, but found none.
- We checked through the code and saw that one of the CSS resets we'd used was
width: 100vw;. - We realised that this doesn't take into account the y-axis scroll bar.
- We changed this to
width: 100%;, which fixed this bug.
- There are no known bugs left in this project. If you find one, please contact the development team via the contact form.
We tested our website using DevTools Lighthouse feature, and got these results:
- We were happy with this score.
- Our original score for this was 37 on desktop, due to the 3D models we have included.
- We compressed the images and the 3D models to improve this score.
- We were incredibly happy with the amount of improvement we were able to make here.
- Unfortunately this score is still too low on mobile, although it has improved from 28. The 3D models are really affecting the performance on mobile.
- We have plans to continue improving this in the future.
- We were happy with this score.
- We took steps throughout the development process to ensure that this site would be accessible to everyone.
- We were happy with this score.
- We ensured to adhere to best practices throughout the site.
- We were happy with this score.
- The only thing we lost points on was that the links aren't crawlable.
- This is because we've used sections within our HTML to link to, rather than other HTML pages.
- Font Awesome: Library of icons used for social media and download links.
- Autoprefixer CSS online: To aid in the CSS prefixing.
- W3Schools: Input area styling on the contact form.
- Transgender people & Breast cancer
- Signs & Symptoms
- The Breast Review
- B-care
- Bosom Buddies
- Cancer, Grades & Sizes
- Prognosis
- Breast cancer, genes & family history
- Information for you
- Breast Cancer Club
- Post Treatment
- Positive Living
- Virtual Support Hub
- Light-mode footer
- Dark-mode footer
- Transgender ribbon used for favicon
- Privacy Policy Template
- 3D Male Torso Model used in model-viewer element Awareness Section
- 3D Female Torso Model used in model-viewer element Awareness Section
- 404 / 500 page background
- Transgender symbol used for logo
- Group of women used for About us section
- Group of people sitting on a pink world
- Our facilitator Dragos Scantei.
- Our families for their endless patience while we hack away.
- The members of team Chat 'til Late: