1. Overview
2. User Experience (UX)
3. Content
4. Features
5. Technologies Used
6. Testing
7. Deployment
8. Credits
9. Acknowledgements
10. References

The Coca Women Wellness (CWW) website provides primary and secondary content that helps users develop mindfulness practices that can bolster their wellbeing.

CWW aspires to assist in supporting initiatives around the wellbeing of minority ethnic communities, particularly African & Caribbean communities. To contribute to diversity and inclusion initiatives in the creative industry, CWW also shares content that has been curated by mindfulness and wellbeing influencers from the African & Caribbean diaspora.

A secondary goal for CWW is to foster an online wellbeing community for users through sharing digital resources; as well as hosting in-person/online and social meetups (e.g. in-person and zoom).

• Live Site: https://solacoder005.github.io/coca-women-wellness/

Market research was conducted during the early stages of building the CWW website. Primary focus was placed on societal factors that commonly impact people's wellbeing. The research unearthed several findings around the topic of wellbeing, which contributed to the conceptualisation of the Coca Women Wellness website. Some of the findings are listed below:

• Due to ongoing socio-cultural and social-economic inequality in multiple societies (e.g. COVID-19 and continued social inequality); there has been an increased demand to raise awareness around, and provide greater support for improving people’s wellbeing.

• Further, there has been an increased volume of socio-economic initiatives that aim to bolster the mental, social, and emotional wellbeing of minority groups, including those within the African & Caribbean diaspora.

• The findings produced from many reports into BAME wellbeing has suggested that UK BAME women, particularly those of African & Caribbean heritage, are at a greater risk of experiencing socio-economic inequalities. In turn, such inequalities can increase the risk of many women from these groups developing health issues such as anxiety, stress and even depression (Forward UK, 2021).

Considering this, a primary service that CWW provides is hosting and sharing primary and secondary wellbeing media and resources (e.g. images, videos, tutorials, influencers, and recipes) tailored to the interests of women within African & Caribbean communities.

Understanding the semantic meaning and differences between the terms ‘Mindfulness’ and ‘Wellbeing’ was an essential step in the development of the Coca Women Wellness website. These concepts are defined below:

Wellbeing

Wellbeing is considered a _‘… broad concept…relating to…personal dignity (including treatment of the individual with respect)…, physical and mental health and emotional wellbeing,.. social and economic wellbeing. To summarise, ‘…Wellbeing encompasses several areas of life.'. As such, it is a growing consensus that ‘…using a holistic approach to ensure a clear understanding of the individual’s views is vital to identifying and defining wellbeing in each case.” (Hpft.nhs.uk., 2021).

Mindfulness

Mindfulness is characterised as “…the practice of maintaining a non-judgmental state of heightened or complete awareness of one's thoughts, emotions, or experiences on a moment-to-moment basis.” (Merriam-Webster.com, 2021).

With these definitions in mind, rather than being interchangeable, wellbeing and mindfulness can be regarded as adjoining concepts. Arguably, developing mindful practices (in whatever area(s)of life) is likely to positively impact overall wellbeing.

‘Demographics’ relates to the characteristics of a population and the specific groups within it. As such, the key demographical factors of CWW’s target audience are:

• Sex: Women
• Age: 16-40
• Ethnicity: African & Caribbean heritage

‘Psychographics’ refers to the common socio-psychological factors (e.g. motivations, priorities, perspectives etc.) that influences a person’s or groups’, beliefs, expectations, perspectives and hence behaviours.

Prior to creating the website, some market research was conducted to gain insight into the potential psychographic expectations of the target audience. The research specifically focused on their expectations when visiting sites that offer resources around mindfulness and/or wellbeing. As such, several women were asked the following questions:

1. Do you visit any wellbeing sites/apps? If so could provide some names?

2. Do you follow any black female wellbeing influencers?

3. Do you think wellbeing content created by, and for, black women would help support your wellbeing?

4. If you were looking at a wellbeing sites designed to promote the wellbeing of black women - what type of content would you like to see?

5. How do you prefer wellbeing topics/content to be presented to you (e.g. via blogs, videos, images, courses, or books)?

The participants’ responses are documented in the table below:

In extension to the research, the methods outlined in the ‘5 Planes of UX Design Model’ (5PUXD) was referred to. In particular, the ‘strategy plane’ principle assisted in identifying the key deliverables of the site. These deliverables were determined and valued by perceived importance, viability, and feasibility. This approach produced the following data:

Based on the interpretations derived from the data; the core goals of first-time visitors, reoccurring visitors and the site owner are:

When visiting the Coca Women Wellness website, I want to:

1. Be introduced to new ways of developing my wellbeing and mindfulness practices.

2. Engage with visual, auditory, and literary content that develops and positively addresses multiple facets of wellbeing.

3. Gain exposure to ‘other’ and new influencers who provide content on multiple topics relevant to promoting my wellbeing. Such facets include, but are not limited to;

   • Meditation practices
   • Platonic, familial, and romantic relationships/social interaction
   • Hair and Skin care products/practices
   • ‘Healthy’ food

4. See the site present content that reflects topics relevant to my ethnicity and cultural background.

When visiting the Coca Women Wellness website; I want to:

6. Stay updated on the recent developments of the site through emails and/or newsletters.

7. Engage in the Online and In-person meetups hosted by Coca Women Wellness.

8. Engage with the Coca Women Wellness online community (e.g. via discord and other social media channels).

As a site owner; I want to:

9. Host and share resources that helps site visitors learn mindful, wellbeing and self-improvement techniques.

10. Create a functional website where the user can navigate around easily and access content effortlessly.

11. Provide resources that promotes wellbeing, particularly for women of the African and Caribbean diaspora.

12. Host and promote wellbeing and mindfulness content, particularly made by influencers of the African and Caribbean diaspora.

13. Increase user interaction across social media platforms.

The ‘scope plane’ in the 5PUXD Model suggests that designers should consider the core features and functions that are needed in the intended site.

Such considerations encourage the designer(s) to assess:

• The value (e.g. products and services) the commissioned site would add to the users’ experience(s).
• How this value differs from competing counterparts.

The Coca Women Wellness website serves several purposes which increases its value:

1. The site intends to bolster users’ wellbeing through exposing them to wellbeing influencers and resources primarily sourced from African & Caribbean communities.

2. Based on some excerpts from the users’ stories – several women had limited knowledge of wellbeing influencers, specifically those of African and/or Caribbean decent. The lack of exposure to (and promotion of) such influencers within media and creative industries has been a prevalent issue that is now being addressed in the current social climate. It has led to the implementation of inclusion and diversity initiatives such as #YouTubeBlack. Coca Women Wellness attempts support such initiatives by providing users with a free, contemporary way of accessing and distributing information around wellbeing and mindfulness practices.

3. Mintel reports have indicated that the growth of digital resources and platforms have encouraged people to engage with more visual content, specifically on digital devices like laptops and smartphones (McGrath, 2020). Moreover, visual content (e.g. films, art, images etc.) has greater engagement from people aged 16-44. Such findings echo trend reports’ assertions that around 26% of UK adults are likely to engage in traditional reading (e.g. hardcover books) (Ryan, 2020). As such, the key initiatives of CWW are to:

   • Bolster users’ exposure to digital content and resources that helps develop positive mindfulness practices which will likely promote overall wellbeing.

   • Expose users to influencers that curate content around wellbeing, with the African & Caribbean diaspora in mind.

To determine the valuableness of the site, it was essential to analyse how the CWW differs from competitor sites.

Arguably, a lot of wellbeing and mindfulness websites portray a clinical narrative which is often reflected in their content (e.g. aesthetical design) and services (e.g. therapeutic services and treatment). For instance, sites such as Rethink Mental Illness offer clinical services such as counselling and priced therapeutic materials (e.g. meditation courses, books). Moreover, a Google search of the phrase ‘black wellbeing’ presented a wide range of articles and resources written in extremely formal tones.

While these resources are appropriate and invaluable to addressing and supporting matters around wellbeing, CWW has been designed with a more informal tone. Specifically, CWW hosts wellbeing resources in an informal relaxed way, reflecting websites such as:

• World Changer Life
• Kwanda
• Black Zen
• Black Women Healing Retreats.

In line with the 5PUXD Model’s ‘structure’ and ‘skeleton’ planes; the production of the initial wireframes were key to the development of the site’s User Interface (UI).

This section outlines several elements which have supported the conceptualisation and implementation of designing the CWW website. The content in this section includes wireframes, mood-boards, colour pallets, font selection and logo design.

The wireframes below depict the preliminary structure for the CWW website. These have been grouped by page and device type.

1. Wireframe – HOME
2. Wireframe – ABOUT
3. Wireframe – RECIPES
4. Wireframe – PLAYLISTS
5. Wireframe – CONNECT

• PLEASE NOTE: The structure and appearance of the live deployed CWW website differs from the preliminary wireframes. These differences resulted from responsiveness issues that arose during the initial design of the CWW website. Further information around this has been documented in the testing.md document within this repository’s directory.

Although the structure of the live deployed CWW site differs to the preliminary wireframes; the CWW website has greater responsiveness when accessed by different devices (incl. desktop, mobile and tablet screens).

Akin to recommendations highlighted in the ‘surface’ plane principle of the 5PUXD Model; the visual characteristics of the site were finalised nearing the end of the site’s development.

The following sections outline key visual elements that have supported the conceptualisation and implementation of designing the CWW website (incl. colour pallet choices, fonts and logo).

Keeping cultural characteristics in mind, a combination of yellow and other warm hues was incorporated into the CWW website colour scheme. For instance, yellow was used as the primary colour scheme for the homepage as it often evokes positive emotions.

Moreover, yellow has strong social-cultural, semantic, and symbolic connotations within several African & Caribbean communities. For instance, many of these cultures have assigned positive connotations to the colour yellow. Arguably, concepts around wealth, femininity and fertility in some African cultures are often depicted by yellow features (e.g. incorporated into garment colour schemes). As an example, when the Yoruba Orisha – Oshun is represented in visual images, she is often shown to be wearing yellow garments (Britannica.com, 2021). Similarly, within the Caribbean, specifically Rastafarian cultures, the colour yellow has been included in their native attire and artefacts. Yellow in this culture conveys wealth and prosperity (BBC.co.uk, 2009).

The other colours throughout the site were sourced from the images on the left-hand-side of the website’s pages. Below is a diagram of the colours used, with their respective HEX and RGB values:

The fonts used on the CWW site were imported from Google Fonts and were used on the website for the following reasons:

1. Oswald: This is a considerably ‘heavy’ sans-serif font. It was used on the header sections to ensure that the navigation titles remained prominent across the varying header colours.

2. Open Sans: Aside from the header, this font was used throughout the site. It was chosen to compliment the ‘feminine’ theme of the site. Arguably, round shapes are often associated with feminine characteristics. As such, the rounded characteristics of this font conveys a softer tone to the overall page compared to the Oswald font.

The logo for the site was created initially by hand and then illustrated through the following software:

• Adobe Illustrator
• Adobe Photoshop
• Adobe InDesign

The colour #3E0D05 was applied to the logo illustration for two key reasons:

1. To maintain aesthetic continuity across the site’s element (e.g. majority of the site text, social media icons and some header titles).

2. To reduce the risk of creating a harsh contrast between the background and foreground. For instance, within visual design practices, bright yellow(s), white and black are often used to indicate warning or danger. As this is not the purpose of the CWW website, the use of the colour black was avoided.

This section provides an overview of the features on the Coca Women Wellness website, and where relevant, the way in which theses feature(s) address the users’ stories aforementioned

1. Logo

   • The logo in the top left corner of the page has been applied to establish the site’s identity.

   • Clicking on the logo on any of the pages on the site will return the user back to the homepage.

2. Navigation Menu - Full Scale

   • This menu consists of five page titles that directs the users through the pages of the Coca Women Wellness website.

   • When each page title is hovered over with the cursor, the text (e.g. HOME) turns white.

   • When the title of a page is clicked on, the text becomes underlined.

   2.1 Navigation Menu – Hamburger Menu

   • Additionally, when the site is accessed on a mobile (or device with a narrow screen), the navigation menu turns into a hamburger icon, displayed on the left.

   • Clicking on the hamburger menu allows the menu to expand and collapse in the centre of the device’s screen.

   • When the title to a page is clicked on, the text becomes underlined.

   • The menu has been positioned this way on mobile screen to address the user’s priority. For instance, on mobile the main priority of the user is to navigate around the website with ease.

3. Footer – Social Media Icons

   • Each social media icon links to external social media pages (e.g. YouTube, Discord and Twitter). These open in a new tab.

   • The user would have to sign into their social media accounts and would then be directed to the respective Coca Women Wellness social media account (e.g. Instagram).

4. Vertical banner image

   • Each vertical banner image on the left-hand of the website has been used to establish the tone of the website. The website is intended to evoke positive emotions.

   • The images are also intended to implicitly suggest to the user that the website hosts and shares content that promotes wellbeing.

5. Scroll button

As mobile screens tend to be smaller and narrower, website pages can lengthen considerably compared to other device types. As such this feature is particularly useful when the website is accessed via mobile.

- The scroll button appears in the bottom-right corner of each page. 

- The button appears after the user has scrolled at least 100px down the screen. When clicked, it takes the user to the top of the page.

- The feature has been implemented to aid users’ navigation around the website’s pages, thus bolstering positive engagement with the site. 

- The feature is present across several devices (e.g. desktop screens, mobiles, and tablets).

1. ‘COCA WOMEN WELLNESS’ top row icons: ‘Our Socials’, ‘Our Resources’ and ‘Our Community’

   • The primary purpose for these links is to direct users to internal pages and the social media icons in the site’s footer.

   • Akin to the header, when each icon is hovered over with the cursor, the icon turns to a light shade of orange. The hover function has been used to create a visual difference through user interaction.

   • The icons’ colour change aims to suggest that the icons provide an additional function (e.g. linking to another page).

2. ‘OUR MEETUPS’ bottom row icons: ‘In-person’ and ‘Online’ socials

The primary purpose for these links is to direct users to external pages (i.e. Linked in and Zoom); where the user can sign-up to attend the social meetings. Akin to the first row of icons:

- When each icon is hovered over with the cursor, the icon turns to a light shade of orange.

- The hover function has been used to create a visual difference through user interaction. 

- The colour change suggests that the icons provide an additional function (e.g. linking to another page).  

1. Central image

   • The main purpose of this page is to provide information about (‘Our Mission’ statement) the site and the founder’s vision for the site.

   • The purpose of including an image of the site owner is to strengthen to concepts presented in the website – promoting wellbeing through content curated by and for women of the African and Caribbean diaspora.

   • Arguably, adding an image of the site owner provides the site with a more informal, welcoming tone.

1. Recipe images

   • The purpose of including images of food on this page is to give the user an idea of how to create the dishes.

2. Recipe Instructions

   • The recipes include prep time icons and descriptions to give the users some idea of how long it will take to prep the meal.

   • Each recipe opens with a description of the benefits of each dish. This is to provide the users with information on how the dishes are healthy.

1. Icons: ‘Food, ‘Body’, ‘Social’, ‘Music’ and ‘Mind’

   • The primary purpose for these icons is to direct users to external customised YouTube playlists. The playlists have been set-up this way to allow users to save videos to their YouTube accounts should they wish to do so.

   • Each playlist contains content relating to the icons’ titles.

   • Akin to the icons on the ‘HOME’ page, when each icon is hovered over with the cursor, the icon turns to a light shade of blue. The hover function has been used to create a visual difference through user interaction.

   • The icons’ colour change suggests that the icon provides an additional function (e.g. linking to another page).

2. Banner videos

   • Each video has been included to provide the users with an idea of the content the CWW playlists intend to share – healthy food, physical and meditation practices.

   • Each video can be controlled by the user visiting the site (e.g. ability to start, stop and mute the video).

   • Further, pausing the video on the CWW site allows the user to see a preview of some additional content made by the influencer.

1. ‘Connect with us!’ FORM

   • The primary purpose for the form is for users to sign up and stay updated about the services the Coca Women Wellness website offers.

   • The form requires the user to enter their name and email address if they intend to submit the form. The ‘@your_handle’ input fields and the radio choice buttons are optional.

   

2. ‘Our Details’ Icons

   • Akin to the icons on the ‘PLAYLISTS’ page, when each icon is hovered over with the cursor, the icon turns to a light shade of blue. The hover function has been used to create a visual difference through user interaction.

   • The icons’ colour change suggests that the icon provides an additional function (e.g. linking to another page).

   • Clicking on the LinkedIn icon will direct the users to the external LinkedIn page.

   • The email icon also allows the user to send an email to the Coca Women Wellness team via their own email account.

3. Google Map

   • The map has been incorporated into the form to provide the user with a visual aid for two key reasons:

   1. Provide users with a visual aid for the location of the Coca Women Wellness team.

   2. Provide a visual aid for users to see where social meetings are commonly held (i.e. in the borough of Manchester, Piccadilly Gardens).

• The primary purpose for this page is to redirect users to the ‘HOME’ page.

• The key feature on the page is the ‘HERE’ anchor link. When hovered over with the cursor, the icon turns to white. When clicked, the user is redirected to the homepage.

The following ideas could be implemented in future development of the site. These proposed features can help increase the site’s usefulness and user engagement.

Idea 1: Separate the playlists into subpages.

• Implementation: Each subpage can have additional content (e.g. articles or blogs) focused on the parent topic (e.g. family or food).

Idea 2: Create a library page that hosts literary resources.

• Implementation: An additional page on the website would be labelled ‘Library’ and the page can provide downloadable documents. The documents would provide specific mindfulness techniques, such as EFT tapping (Legg, 2018).

Below are a list of all the technologies, languages and tools that has aided the construction of the Coca Women Wellness website.

• HTML – Supported the core structure of the website.

• CSS – Supported the styling elements on the website.

• JavaScript - Supported specific functionalities within the site (e.g. the navigation bar on the website).

• JQuery – Supported specific functionalities (e.g. the scroll button) within the site through simplifying ‘Document Object Model’ (DOM) manipulation (Developer.mozilla.org, 2021).

• Adobe Creative Cloud: Specifically, the applications - Illustrator (AI), Photoshop (PS) and InDesign (InD) were used to create the website log. In more detail:
  • AI was used to create the design.
  • PS used to help design the logo for the website and select specific colour values that form the colour scheme of the website.
  • InD was used to apply and align the ‘Coca Women Wellness’ name to the logo once it was created in AI.
• Balsamiq: An application that allows designers sketch up User Interfaces (UI).
• Bootstrap: Provided useful components that assisted with the site’s functionality (e.g. responsive navigation menu).
• Cite This for Me: This was primarily used to cite the websites and resources referred to in the Reference document.
• Dillinger: A markdown complier tool that allows you to check that your mark-up is formatted correctly for the README.md file.
• Font Awesome – Most of the icons used on the live site has been sourced from Font Awesome.
• GitHub: A version control software that can has both desktop and online applications. This is used to host the site and the current repository.
• GitPod: An IDE that can be used online and locally on your desktop.
• Google (Chrome) Development Tools: Described as a browser 'authoring and debugging tool' for websites.
• Google Fonts: This platform was used to select and import the desired font(s) into the website's source code.
• (Jigsaw) Validator: This has been used to validate the CSS code and ensure it passes coding standards.
• Lighthouse: Provides analytical reports on the performance level of a site.
• Pexels: Pexels provides royalty-free stock images.
• Pixabay: Pixabay provides royalty-free stock images.
• Pinterest An application where the visuals were collated, influencing the design of CWW website’s colour scheme.
• Responsively: Web developer browser that checks the degree to which a website is responsive on various device sizes and screen orientations.
• Stack Overflow: This was used as a reference tool to assist with both HTML coding techniques.
• VSCode: An open source IDE that can be used online and locally on your desktop.
• Visme: An online application that assist with building visual content (e.g. graphs and charts) for business purposes.
• Wave: A ‘Web Accessibility Evaluation Tool’ that determines the extent to which a site is ‘accessible’.
• W3C Validator: This has been used to validate HTML code and ensures it passes coding standards.
• W3 Schools: This was used as a reference tool to assist with HTML and CSS coding techniques.
• W3.CSS: This was used as a reference tool to assist with CSS coding techniques.
• Youtube: Referred to for useful coding and UXD tips and tutorials.

A series of tests have been conducted on the CWW site’s functionality and its source-code. An extensive report of the tests conducted can be found in the testing.md document. The document discusses several factors that arose throughout the testing process of the site, such as;

1. Responsiveness issues with CWW site’s initial design and structure.

2. Methods undertaken to assess the live CWW site’s structure and responsiveness.

3. Users’ feedback on their experience using the CWW website.

To ensure that the source-code for the CWW met industry standards, each page was run through the W3C Validator and (Jigsaw) Validator.

The W3C Validator was used to test the HTML code. The results produced 0 errors, thus passing the test. Evidence for each page is below:

• HOME (index.html)

• ABOUT (about.html)

• RECIPES (recipes.html)

• PLAYLISTS (playlists.html)

• CONNECT (connect.html)

• 404 Error (404.html)

The (Jigsaw) Validator was used to test the CSS code. The results produced 0 errors, thus passing the test. Evidence for this can be found, here.

The WAVE Accessibility Evaluation Tool was used to test the degree to which the site is considered accessible. The results produced 0 errors, thus passing the test. Evidence for the results of each page is below:

• HOME (index.html)

• ABOUT (about.html)

• RECIPES (recipes.html)

• PLAYLISTS (playlists.html)

• CONNECT (connect.html)

• 404 Error (404.html)

The Lighthouse was used to test the performance of the CWW website. An audit report was produced for each page, showing that on desktop devices, the website was operating at optimal performance. Each page achieved a score between 91-99 out of 100. Evidence for each page is below:

• HOME (index.html)

• ABOUT(about.html)

• RECIPES (recipes.html)

• PLAYLISTS (playlists.html)

• CONNECT (connect.html)

• 404 Error (404.html)

The Coca Women Wellness website is responsive on the following device types:

• Mobiles (Android and IOS)
• Tablets
• Desktops and Desktop Monitors

The CWW website functions correctly on the following browsers:

• Google Chrome
• Microsoft Edge
• Firefox

Further testing around responsiveness elements of the site can be found in the testing.md document and 6.3 Unfixed bugs section.

Aside from the testing discussed in the testing.md document, two additional ‘bugs’ frequently arose throughout the development of the CWW site, until a solution was found. For instance:

• Issue:

  While the photos used on the site were sourced from Pexels.com with a high resolution values (dpi), the images were blurry on several web browsers and device screens.

• Solution:

  After conducting further research into image quality within coding, the issue was resolved by using the property ‘object-fix:___;’ within the .css style sheet.

• Issue:

  When using an android tablet, the images on CWW did not display on a Google Chrome browser but did on the Microsoft Edge browser. This issue persisted after clearing the cache and cookies data on the Google Chrome browser multiple times. However, during this time, the images were displaying on Google Chrome browsers on android mobile devices (e.g. Oppo Reno Z) and Google Chrome’s desktop application.

• Solution:

  The issue was resolved by manually resizing images’ dimensions (px) and reducing the resolution (dpi) values. This was achieved using Adobe Photoshop. Arguably, this method can cause issues when printing images, however as the images were to be displayed digitally, reducing the resolution of the images did not have a detrimental impact on the images’ aesthetics. After resizing, the images showed on both browsers on tablet, mobile and desktop devices.

• Issue:

  An unresolved bug on the CWW site is the positioning of the form’s input boxes on the connect page, when orientated vertically on a tablet screen (640px-768px). For instance:

  • When the form is accessed on a tablet; the ‘handles’ input element (e.g. Pinterest) will not display on same line as its label and icon.

  • However, the positioning of these elements aligns when the devices are rotated and used horizontally.

• Issue:

  Another unresolved bug on the CWW site is the positioning of the text when displayed on a vertical tablet screen. On a vertical mobile screen, the text elements stack on top of each other in a column. This aligns with how the site is intended to respond to smaller screen sizes. However, when the site is displayed on a tablet screen that is rotated vertically the text elements do not stack on top of each other. Rather, the elements reduce in size proportionally to fit on the screen.

• Issue:

  Although the CWW site has passed the validator and accessibility tests, when accessed on mobile devices, some pages have been shown to have lower performance ratings, according to the Lighthouse development tool audit.

  A primary factor contributing to this performance on mobiles is the quantity and size of the images. This result is prevalent after reducing the resolution (dpi) values and size (px) of the images.

Below is an overview on how to deploy a project via GitHub’s GitHub Pages. This method was used to deploy the Coca Women Wellness website:

1. Create a project repository on GitHub using a registered GitHub account.

2. Once the repository is created, click on the repository, then the Settings tab, this is the last tab in the top right of the repository’s navigation bar.

3. Once on the settings page, navigate to and click on Pages (titled as ‘Pages’ as of May 2021) listed in the left-hand menu pane.

4. Under the header - Source, select master branch from the drop-down list. This will change the neighbouring selector box to /(root).

5. Then click Save.

6. Wait for a minute and then refresh the webpage.

7. Once refreshing, a green box with the text and clickable link; 'Your site is published at...'.

8. Clicking on the website’s hyperlink in the green box will direct to the live deployed website.

• This website is the final product of the Portfolio Project 1: HTML & CSS Essentials (a.k.a. Milestone Project 1, MS1).

• It is part of the Code Institutes’ (CI) Diploma in Full Stack Software Development Diploma (5P).

• Out of several ideas presented, Project Idea 0 was chosen as the project asked to ‘…bring your own ideas to life…’ through the creation of a website.

• To provide more conceptual structure to the project, the Coca Women Wellness (CWW) website uses the concepts presented in Project Idea Example 3 as a point of reference.

Although some of the resources credited below are already listed in the 5. Technologies Used section of the README and References document; the credits listed here are relative to specific content that has been incorporated into the Coca Women Wellness website:

• Bootstrap: Provided useful components that assisted the site’s functionality. Specifically;

  • The Navigation menu code has been adapted to create the navigation menu, some of the code has been customised to suit the needs of the website.

  • The Grid system code has been adapted and incorporated on some of the website’s pages (e.g. on the HOME and PLAYLISTS page).

• Code Institute: The Code Institute's lesson and challenges has been referred to help with the construction and functionality of the site. For instance:

  • Form validation URL: The Code Institute’s URL (https://formdump.codeinstitute.net) has been incorporated into the form on the ‘CONNECT’ page of the website. The tutorial can be found here.

• Font Awesome: This majority of the icons used on the website has been sourced from Font Awesome.

• Google Fonts: This was used to select and import the desired font into the website’s CSS stylesheet. As such the fonts have been used across the website.

• Google Maps: Google Maps was used for the map feature provided on the ‘CONNECT’ page form.

• Stack Overflow: This was used as a reference tool to assist with troubleshooting both HTML and CSS code issues.

• W3 Schools: This was used as a reference tool to assist with HTML coding techniques. In more detail:

  • Scroll button feature: The code was sourced from a W3Schools tutorial and incorporated into the CWW website source code. The styling elements and some HTML code was customised.

• W3.CSS: This was used as a reference tool to assist with CSS coding techniques.

• Youtube: This was used to refer to useful coding and UXD tips and tutorials. Including:

• DesignCourse: Code exampled in this turorial was referenced and adapted to suit this site's structure.

• Kevin Powell: Code exampled how to use "object-fit:_;" CSS property. This method was applied to the images on the left hand page of each webiste page.

• JavaScript: The JavaScript used within the source-code assists with specific functionalities (e.g. Navigation Menu, Scroll button, and Icons). The scripts have been sourced from the following sites:

  • W3Schools: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
  • Bootstrap: https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js
  • Font Awesome: https://kit.fontawesome.com/1699136767.js

• JQuery: The JQuery code used across the site assists with specific functionalities (e.g. Scroll button). The scripts have been sourced from the following sites:

  • Bootstrap: https://code.jquery.com/jquery-3.3.1.slim.min.js

• CSS: Alongside my CSS Stylesheet file, there has been supportive Bootstrap CSS code incorporated into the sites structure to assist with some of the Bootstrap elements used. The scripts has been sourced from the following repo location.

• Pexels: Aside from the CWW logo, the photos (royalty free) included on the live website has been sourced from Pexels. Specific mention is given to the following content creators that have provided the images used on the website:

  • Charlotte May
  • KoolShooters
  • 3Motional Studio
  • Asa Dugger
  • Pixabay (Pexels account)
  • RF._.studio
  • Vicky Tran

• Pixabay: Aside from the CWW logo, some of the photos included on the live website has been sourced from Pixabay.

• Youtube: Was used to incorporate iframe elements into the PLAYLISTS page of the website.

As part of the preliminary conceptualisation of the CWW website; there was need to review existent websites that depicted common cultural characteristics within different communities of the African & Caribbean diaspora. Below are links to some of the sites that provided inspiration:

• Beleaf in Fatherhood
• Evelyn From The Internets
• Jessamyn Stanley
• World Changer Life
• GLAM Africa
• AKOMA Skincare
• Forward UK

I would like to thank…

• God for the continued strength given to me throughout this course.

• My beautiful Husband for all the encouragement he has given me through this project and for seeing my potential even at times when I couldn’t.

• All the users that participated in the user research stage of the project. Your feedback was invaluable!

• The Code Institute and all the resources, tutoring, student care and mentoring support they have, and continue to provide throughout the course.

Several resources have been referred to throughout the development of the Coca Women Wellness Website. A list has been provided, here.