I have created a welcoming webpage offering accessible, beginner friendly information on common mental health issues caused by early menopause symptoms, including how to recognise common issues and manage those issues. I have presented the webpage in a supportive and organised layout with links to external support and a carousel of affirmations to be uplifting.
The focus has been on using HTML and CSS with Bootstrap to create a calming and well-organised user experience.
This project has been deployed using GitHub Pages.
To deploy the site, I navigated to the repository's Settings tab. Scrolled down to the Pages section in the left-hand menu. Under source I selected the main branch and set the root folder (/) as the source. GitHub Pages automatically deployed the webpage and after a few minutes a live site link was available.
You can find the link here: https://verytee.github.io/flagstone-project/
- Hero Section with calming and simple colours, and text that clearly details the purpose of the webpage.
- Information Cards using Bootstrap’s card components to present mental health tips and common issues, including AI generated images for visual appeal
- Resource link buttons to mental health resources styled with Bootstrap buttons to make them stand out.
- Positive and uplifting quotes to encourage users, these are affirmations are designed to encourage users to get support.
- Footer with copyright. Clicking on the logo takes you back to the top of the page for ease of use.
User stories were created using GitHub Projects which set out the acceptance crieria and tasks. Projects were prioritiesed using must have, should have and could have labels. The must have features were built first, then should have. I did not have time to complete the could have sign up to newsletter but the MVP is still achieved without it.
As I worked through the project I ticked off tasks as they were completed.
You can find the Project Board here: Link to Project board
The User Stories were as follows:
- As a Site User, I want to navigate easily through the website so that I can find the information I need. (must have)
- As a Site User experiencing early menopause, I want the hero section to clearly introduce the site so that I immediately understand its purpose and feel supported. (must have)
- As a Site User, I want to learn about the common symptoms, and ways to help so that I can feel confident in getting access to support. (must have)
- As a Site User experiencing mental health issue, I want to see supportive visuals so that I do not feel alone. (should have)
- As a user, I want to sign up for newsletters and updates so that I can stay informed about developments in research, funding and support. (could have)
I created wireframes using https://balsamiq.com/ with the purpose to build the site mobile first and responsive on larger screens. I then pulled the images, converted to a webp file and added to my project.
I followed the wireframes during building the site, however remembered positive affirmations added after this stage and therefore not included in the wireframes.
I did not like the look of the button being on top of the hero image so it was moved below the image.
The colour palette was chosen using https://imagecolorpicker.com/ and selecting colours from the hero image
#558c8c - teal
#5B4E49 - brown
#1e1d1b - dark text
#fdf6ed - light text
#f8f9fa - light grey
In the latter stages of the project, after the Lighthouse test, I changed the brown to a darker shade for accessibility. The brown was originally #927f78 - brown which is a lighter shade.
I asked AI for advise on fonts and assisted with recommending Poppins for headings and Open Sans.
These font were selected for:
- Soft shapes: Rounded, humanist forms feel warm and non-intimidating.
- High legibility: Large x-height, open apertures, and balanced strokes improve readability.
- Accessibility: Wide weight ranges for contrast and excellent screen hinting support accessibility.
AI has been used to generate all images for the website. I wanted the website logo to be bland and block colour so that it is not overwhelming to the user.
Support Images
I used supportive AI generated images to make the site more appealing and engaging. I used a diverse range of women to help the site feel inclusive and supportive.
The webpage is fully responsive on all screens. The images inside cards react when a mouse is moved over them to help the page feel more engaging. The colour of links are inverted when hovered over to indicate that they are a clickable link.
I ran styles.css through validation w3.org with no issues.
I ran index.html through validation w3.org with one issue where a section tag was inside another section tag. I changed the second section tag to a div and ran the validator again and there were no errors or warnings to show.
Lighthouse I ran the Lighthouse test on the deployed webpage. On first run, lighthouse picked up assessibility issues with the shade of brown I had chosen, and also that some buttons were missing aria-labels. I returned to the project to correct this.
Although the score is not perfect, I am happy with the result of the Lighthouse test and my project meeting accessibility requirements.
- I wanted to use AI minimaly for this project, however I did use it to help with the design and later some of the styling in CSS.
- AI was used to write the majority of the written content with my oversight, in particular the pargraph text on each card.
- AI supported during styling the website and helped correct some layout issues when my code did not look as expected.
On reflection, AI was a useful tool when it came to styling the website, however I enjoyed building the website up manually and trying to fix bugs myself. That way I could visually pick up issues and investigate causes with Dev Tools and learn for myself. If I could manually fix, I did, but some were assisted with AI. A big advantage of AI is how much time it saved overall. A big disadvantage is that it takes away from some of the learning opportunities only gained through manually coding.
I initially designed the call to action button to be on top of the hero image. This presented a whole load of challenges where the button would move around the screen on different sizes and completely disappear on larger screens. Once I fixed it, I actually decided that the image looked better above the button and could have saved myself a lot of unnecessary time.
Overall however, the project ran surprisingly smoothly and I was able to fix issues as they came up.
I have learnt so much from my flagstone project including how to design and build a project from scratch. Although I still have so much more to learn, I feel confident in where my ability is at this stage of the course.