devancadman / hackathon_women_in_tech

Code Institute March Hackathon

Home Page:https://devancadman.github.io/hackathon_women_in_tech/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hacking The Imposter

Am I responsive

Hacking The Imposter is designed as a soothing solution for women who tend to suffer from imposter syndrome. Its goal is to reduce such negative effects for women suffering from this mindset condition. We wanted to represent inspiration througout the browser using inspirational quotes from celebrity figures and to also capture a great visual look.

User Experience (UX)


  • User stories

    • As a user I need to

      • Women who want a solution to impostor syndrome.
      • Women who like to listen to podcasts
      • Women who like to watch videos to lift their mood
      • Women who are interested in finding peace and a sense of calmness
  • Design

    • Colour Scheme

      We wanted the site to contain colors that attract women but to be also very basic to highlight our illustation and images.

    • Imagery

Images
  • The site has a heavy focus on image use, using full-size quality images for exhibition purposes.

  • The images will automatically space themselves vertically for responsiveness.

  • Wireframes

    You can access the wireframes document by clicking Here.

Features


  • Features

    • Header with main text.
    • Youtube videos providing techniques and help to combat impostor syndrome.
    • Spotify section with hosts debating around the topic of impostor syndrome.
    • Testimonials and inspirational quotes from celebrities.
    • Footer with the credits of the authors along with inspirational messages.

Technologies Used


Languages Used

Frameworks, Libraries & Programs Used

  1. W3 Validator
    • Used to validate HTML and CSS files.
  2. Chrome DevTools
    • Chrome's DevTools were used throughout the project to test the layout and make the necessary adjustments.
  3. Google Fonts
    • Google fonts were used to import the 'Monoton' and 'Righteous' fonts.
  4. Font Awesome
    • Font Awesome was used to add icons like the ones used in the add remove buttons, and the tutorial floating action button.
  5. Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  6. GitHub
    • GitHub is used to store the project's code after being pushed from Git.
  7. Am I responsive
    • Used to efficiently test different responsive layouts and provide the header image in the readme file.
  8. Dillinger
    • Markdown editor used to create the readme file.

Testing


Validation

The W3C Markup Validator, and W3C CSS Validator Services were used to validate and test every page and file of the project to ensure there were no errors.

  • W3C Markup Validator

    Document checking completed. No errors or warnings to show.

  • W3C CSS Validator

    Congratulations! No Error Found.

  • Each javascript file was tested on the site for errors and functionality using the console and with [JSHint]

Testing User Stories from User Experience (UX) Section



Deployment to GitHub Pages

The project was deployed to GitHub Pages by automatically deploying from GitHub using the following steps:

  1. Make sure the branch you want to use as your publishing source already exists in your repository.

  2. On GitHub, navigate to your site's repository.

  3. Under your repository name, click Settings. If you cannot see the "Settings" tab, select the dropdown menu, then click Settings.

  4. Screenshot of a repository header showing the tabs. The "Settings" tab is highlighted by a dark orange outline.

  5. In the "Code and automation" section of the sidebar, click Pages.

  6. Under "Build and deployment", under "Source", select Deploy from a branch.

  7. Under "Build and deployment", use the branch dropdown menu and select a publishing source. Screenshot of Pages settings in a GitHub repository. A menu to select a branch for a publishing source, labeled "None," is outlined in dark orange.

  8. Optionally, use the folder dropdown menu to select a folder for your publishing source. Screenshot of Pages settings in a GitHub repository. A menu to select a folder for a publishing source, labeled "/(root)," is outlined in dark orange.

  9. Click Save.

Credits


Code

Sources

Media

Acknowledgements

  • Andrew Dempsey for his constant support during the development process.

About

Code Institute March Hackathon

https://devancadman.github.io/hackathon_women_in_tech/


Languages

Language:HTML 53.6%Language:CSS 25.2%Language:Dockerfile 11.9%Language:JavaScript 9.3%