Skip to content

Latest commit

 

History

History
197 lines (131 loc) · 17.9 KB

README.md

File metadata and controls

197 lines (131 loc) · 17.9 KB
Raw

GitHub Pride background logo

Code Institute logo

Flippin' Proud

device screenshots mockup

Live link to deployed project (hosted on GitHub Pages) | Alternative link (hosted on loosenthedark.tech)

What's It All About?

Flippin' Proud is a collaborative team project initally developed and submitted as part of Code Institute’s #ProudCoders June 2021 Hackathon. The application's primary function is to celebrate Pride month and its themes of diversity, visibility and community. More specifically, the programmers set out to help educate and bring people together by showcasing a selection of pioneering LGBTQ+ figures both past and present, as well as the roles they have played in furthering the causes of equality and inclusivity. The efforts and bravery of these icons have helped combat ignorance and intolerance across the globe, and laid the foundations for others to come forward and work towards a brighter future.

Visitors to the site can interact with flipcards of the aforementioned figures by clicking on the respective image (on the front of each flipcard) to flip the card over and view an information panel highlighting the importance of that individual to the LGBTQ+ community.

The project has been made possible thanks to the hard work and collaboration of the following team of developers:

User Experience (UX)

This website adheres to the principles of User-Centred Design (UCD), which focuses on placing users at the heart of the design and development process.

User Stories:

User Goals (general visitor to the site):

  • "As a user, I want to be able to engage with the site intuitively and understand its main purpose immediately."
  • "As a user, I want to be able to easily identify what I need and navigate the site in order to get to it."
  • "As a user, I want to be able to access concise but informative content that's displayed in an aesthetically pleasing manner."
  • "As a user, I want to be able to view the site clearly and responsively across a range of different devices (from mobile to desktop)."
  • "As a user, I expect the site to conform to current UX accessibility best practices."

Developer Goals:

  • "As a developer, I want to contribute to a spirit of open-source collaboration and teamwork while enhancing my own communication and problem-solving skills."
  • "As a developer, I want to learn new programming skills and increase my knowledge of various languages, frameworks and libraries."
  • "As a developer, I want to learn how to use version control within a sprint-based team project environment."
  • "As a developer, I would like to produce a fully responsive application to add to my portfolio of work and showcase to potential employers."

Project Design:

Colour Scheme:

It was important to use a bright colour scheme, broadly similiar to the colours of the rainbow flag that is so synonymous with Pride and the LGBTQ+ community. This both reinforces the subject matter of the site and generates a welcoming and inclusive atmosphere for the visitor.

The following colour scheme was decided upon after following guidance from the Coolors website:

Flippin' Proud colour scheme (Coolors palette) screenshot

Typography:

Montserrat was selected as the primary font to be used for all headings throughout the site. It is a clean, legible (important for accessibility purposes) and widely-used font that's featured on many existing websites with an LGBTQ+ theme. Roboto was subsequently chosen as Flippin' Proud's secondary font, as this pairs well with Montserrat. A generic sans-serif designation acts as a fallback in case the chosen fonts specified above are not imported correctly.

Wireframes:

Wireframes for the project can be found here

Features

Existing Features:

  • The site consists of three pages (as well as a custom error page), each with a full-width responsive navigation bar fixed to the top of the viewport:
    • A jumbotron greets users on the main landing (Home) page, with some introductory content on the theme and purpose of the site followed by a bright call-to-action button to take the user to the Flipcards page.
    • The central Flipcards page offers an immersive invitation to the user to learn about the important contributions made by various individuals to the LGBTQ+ community.
    • A final Contact page features a list of relevant information and contact links for each of the site's developers.

Technologies Used

Languages:

  • HTML5: used for structuring the site
  • CSS3: used for styling the site
  • JavaScript: used for site logic and web page behaviour

Frameworks, Libraries, Programmes, File Formats and Tools:

Testing

Validation:

  • W3C's Markup Validation Service was used to test the validity of all HTML used in this project. The code was validated by direct input, and all suggested corrections were then made. As a result, all of the site's HTML files now return a "Document checking completed. No errors or warnings to show." message upon being passed through this validator.
  • Likewise, the website's custom stylesheets were each checked for errors using W3C's CSS Validation Service. Once again, validation by direct input was the preferred method selected, and all necessary changes were subsequently carried out. Consequently, the stylesheets all now return a "Congratulations! No error found." message upon being passed through this validator.
  • In a similar manner, the site's custom JavaScript code was validated against JSHint's online JS error-detection tool.

Responsiveness:

  • Chrome DevTools and real devices of various sizes and screen widths belonging to the developers were used extensively to test site responsiveness throughout the project's evolution.

Bugs:

  • The programmers encountered a specific bug relating to iOS devices when viewing and interacting with the flipcards.html page. Rather than revealing the text on the back of each card (as intended) when flipped, the cards initially displayed a mirror image of the photo used on the card's front. This video gives a realistic demonstration of the bug before it was addressed by the developers during the project's testing phase.
  • Following considerable troubleshooting and attempts at collaborative problem-solving, a fix for this bug was arrived at in the form of the -webkit-backface-visibility: hidden CSS declaration. More specifically, the prefixed version of this declaration was required for both the front and back of each flipcard in order for the functionality to work correctly on iOS - see the code block below for an illustration of the full CSS rule that was ultimately (successfully) applied to these elements:

Flippin' Proud CSS bug code block image

Deployment

GitHub Pages:

This project has been deployed to GitHub Pages. The deployment process carried out was as follows...

  1. Sign in to GitHub and locate the relevant repository. If you do not have a GitHub account, you may create one here.
  2. At the top of the project repository page, select Settings.
  3. On the Settings page, scroll down the menu flanking the left-hand side of the screen and select Pages near the bottom of the list of options.

This will open GitHub Pages....

  1. Under Source, click the dropdown displaying Branch: None and select the master branch. Click Save.
  2. The page will then automatically refresh and inform you that the site is now ready to be published, as well as indicating the https:// address to be used.
  3. For reference purposes, a link to this newly-published site can be found in the Pages section of Settings (described above).

Forking the GitHub Repository:

It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...

  1. Sign in to your GitHub account and locate the relevant repository.
  2. Click on Fork, located near the top right-hand corner of the repository page.
  3. You will now have a copy of this project's repository in your own GitHub account.

Making a Local Clone:

It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...

  1. Sign in to your GitHub account and locate the relevant repository.
  2. Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
  3. In order to clone the repository using HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL).
  4. Next, open Git Bash (see here for an overview of download options, if required).
  5. Change the current working directory on your local machine to the location where you want the cloning to be made.
  6. Type git clone into your IDE terminal followed by the URL you copied in Step 3 above, i.e.
https://github.com/loosenthedark/flippin-proud.git
  1. Press Enter.
  2. Your local clone has now been created.

See the GitHub Docs for more information on all of the above processes.

Credits

Code:

Content:

Card text content courtesy of Wikipedia and Bi.org

Media:

The images used to populate the cards originate from the following sources...

Acknowledgements:

The team would like to thank their mentor Aukje van der Wal for all her amazing support, guidance and humour throughout the entire project.

Notice:

This site has been created for educational purposes only.